I’ve written a bunch already on how and why I teach people to code. This article going to be more of a tutorial on something to code!

This is my favourite activity for introducing people to writing code; building our very own emoji! We’ll use Scalable Vector Graphics (SVG) and animate it with JavaScript (JS). They’re the same building blocks that make up webpages!

This tutorial will take about an hour, but you could take a *lot* more time making your emoji yours if you’ve got the time! I had one student who spent an entire semester of after school clubs working on their emoji. When they were finished it was truly a masterpiece!

This article is aimed at those currently learning to code, especially with no previous experience! Or those who have a bit of programming knowledge and want to do something a little different!

When you are done, please post your emoji in the comments for us all to enjoy and encourage each other on our programming journeys 😊


1 Setup

So to start, all we’ll need is a web browser, something like Google Chrome, Firefox, or even Internet Explorer. Hopefully you already have one of those already as you’re reading this article!

Next we’re going to open a website called JSFiddle.net (in a new browser tab so you can continue reading this article!) which allows us to write and run our code without needing to download anything onto your computer.

JSFiddle also gives us a save button, which will make a custom url which you can then share with other people (or write somewhere safe so you can work on it later). JSFiddle also supports versioning, so every time you press the update button, it increments the number at the end of the url. So if you save often (which you really should!) you can see your work evolve over time!

2 Paper

So now let’s get started writing some code! The first thing we need for our emoji is a piece of paper to draw onto. We’re going to work in the HTML box (the upper left box) and type:

<svg height="400" width="400">
</svg>

So what do those things actually mean? <svg> is a tag, it says start an svg object. You can think of the svg tag as like a piece of paper. Everything we start has to end, so we also have to write an end </svg>.

We can add attributes to our svg by specifying height and width. That might not make a lot of sense right now, but let’s come back to this after we’ve drawn a few more shapes!

Click the Run button at the top of the page and the result square should go from dark to white! We’ve successfully created a piece of paper!

3 Circles

What’s the most important part of an emoji; the yellow face circle! We need to write our code after we declare our piece of paper, and before we end our paper. Our shapes won’t render if we’re not drawing on the paper! I have a screenshot below to help. Circles probably look a bit intimidating at first but write this yourself:

<circle cx="200" cy="200" r="150" fill="yellow"/>

Lets break it down together. We have a <circle> tag, our thing which we’re drawing, which has some properties. cx is the center x value (going back to school maths, horizontal axis, left and right), cy is the center y value (vertical axis, up and down), r is radius (how big our circle should be), and fill says what colour should we fill the shape with.

Make sure you click the run button again to see your circle appear!

Next, try making two more circles for the eyes without my support.

If you get stuck with the x’s and y’s, the bigger the x number the further right the shape will go, the bigger the y number the furthest down the page. Our origin (0,0) is the top left.

4 Paths

So now we’ve mastered the circle, what other shapes can we make! Let’s have a go at making a mouth by creating a path shape (I have a screenshot below if you get stuck where to write this):

<path d="M 130,280 l 150,0" stroke="red" stroke-width="3" />

So this definitely looks a little scarier! Let’s look at some of the words we understand first; we have stroke which is the colour of our line, and stroke-width which is how big that line should be. Finally, we have a d attribute which stands for data. That d is what makes this look scary.

So breaking the data property into the pieces, M means move to this coordinate 130,280. We then have the letter l but it’s lowercase, which means we can move relative to where we started, so we’re going to move 150,0 which means straight across, no ups or downs.

We could have written L 280,280 which would have created the same thing. Capital letter instructions move independent to where we started.

You can connect multiple of these instructions together to draw more complex paths.

Our poor emoji looks pretty sad, let’s work on making him a little happier!

<path d="M 130,280 q 75,50 150,0" stroke="red" stroke-width="3" fill-opacity="0"/>

Where we used the letter l for a line, we can use a letter q to say we want a curve. The q requires two sets of coordinates, the first is where we want to grip the line as if we’re pinching it, the second is in where our line should move it. We can keep the second coordinate the same as our l coordinate.

Imagine if your line was an elastic band starting, we wanted to grip it somewhere in the middle and move it up and down. That’s what the new set of coordinates mean. We want to grip it right in the middle (75, is half of 150) and move the elastic 50 points down — which makes him happier! What would you need to change to make him look sad?

The observant of you will have also noticed we’ve added a new attribute fill-opacity. This makes the “shape” part of the path transparent. If we don’t have this, we get a weird black shape in the mouth because we haven’t told it what colour to be, and computers represent no colour as black.

Voila! Our happier emoji!

5 Colours

So, hopefully you’ve tried to write some different colours than red and yellow. We’re all a bit more stylish than the default colours! Let’s look at how we use more precise colours. Typically, computers will use hex colours to represent colour — these look like a hash and 6 (or 8) numbers and letters following e.g #ffcc00 (which is my favourite yellow).

There’s loads of websites that help you find hex colours. Google has a great website to find shades in many colours — https://material.io/design/color/#tools-for-picking-colors (you’ll now need to scroll down to the bottom of that page, thanks Google for making that a lot harder!).

Let’s work on finding some better colours for your face shape, your eyes, and even your mouth!

Hopefully you’ve got some better colour usage than me!

So now’s a good point to take a breather.

Admire all the hard work you’ve put in, and all the things you’ve learned! Also press that save button at least once. You’ve made it this far, we don’t want to lose your work to your computer deciding today is the day it’ll die!

Next we’re going to look at making our emoji interactive. If you’re not in a rush, you can spend some time looking at some of the other shapes you could add to your emoji.

Mozilla have a great resource for other shapes you can learn to add: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Basic_Shapes

So now let’s get cracking on making our emoji do things!


6 Interacting

So we’re going to start working in the JavaScript box in JSFiddle (bottom left, below HTML). But before we do, the last thing we need to do is give all the shapes we want to make interactive, an id property.

Up to you what id you give things, just make sure it’s all one word (no spaces or special characters allowed).

We need these id’s to “bridge” the JavaScript box to the HTML box. We can now create a variable for our faceShape:

var faceShape = document.getElementById("faceShape");

So what have we actually written? We’ve created a new variable called faceShape. A variable is a thing with a name, the thing is the yellow circle, and we’ve named it faceShape. We’ve then had to say that this variable is actually in the document, go find it by the id we gave it. You have to make sure the bit in quotes is *exactly* what you called the shape in the HTML box. Computers are stupid and won’t find it otherwise!

We’ve made our first variable!

7 Clicking

So, we’ve not actually made it interactive yet. Let’s make it do something! Write the following after your variable.

faceShape.onclick = function(){
alert("ouch");
};

This uses our variable, and says we want to give it a function when we click on that shape. A function is a thing that does something. We only want this code to run when we click the faceShape. The curly brackets act like our piece of paper from earlier, we want to make sure we drawing on the paper, not before or after. So we make our alert inside the curly brackets.

Make sure you click the run button before clicking the emoji! Nothing happens if you don’t run your current code!

If for whatever reason it doesn’t work, make sure you’ve got the id’s the same and no spelling mistakes. Spelling mistakes are *super* easy to make and *super* hard sometimes to debug!

8 Changing things

So an alert is kinda funny, but pretty disruptive and boring after the first few times. Let’s look at changing the emoji face colour when we click it. Let’s make him look a bit green and sick!

I’m going to replace the alert with the following code:

faceShape.setAttribute("fill", "#A0D468");

What happens now? We can make him look sick but can we make him better again too???

9 Conditionals

This is where we can write some conditions! If our emoji looks sick, let’s make him better. Otherwise, if he’s better, let’s make him sick.

We’ll need to create a new variable to keep track of the state of our emoji (whether he’s sick, or not). This is a special type of variable called a boolean. It’s either true (he’s sick) or false (he’s not sick). When we create it we need to give it a default state. How does he start out? He’s not sick when we first run the program, so isSick will be false:

var isSick = false;

Make sure you write this code before the onClick. We can then update it every time we click the faceShape. We can also write our if statement and update the background colours:

if (isSick === true){
faceShape.setAttribute("fill", "#FFCE54");
isSick = false;
} else {
faceShape.setAttribute("fill", "#A0D468");
isSick = true;
}
If you get confused at all, you can tap on the image to make it make sure your code matches mine!

Take some time after you’ve proved it work to look at why that happens. What happens if you change the colours? Are the colours where you expect them for the if statement?

Look at him gooooo!

So an interesting side note about the setAttribute : we’re currently changing the background colour which was the fill property. However you could change any attribute such as size, or location programmatically! For example, you could make his eye go smaller when you click on it (poor dude).


Finishing

So we made it to the end! Congratulations 🏅🏆🌟

Make sure you’ve clicked the save button again — and sent a picture of it to someone you know (or maybe just your mum). Comment below too what you’ve made, what you found difficult, and something you’ve added that I didn’t write about in this article!


If you’re still looking for things to spend time and add why not look into the following:

  1. Add more complicated shapes — https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Basic_Shapes — specifically look into adding some polygons — does your emoji need a hat? Trick question, all emojis need some kind of hat!
  2. Gradients — https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Gradients — there’s two types of gradients; linear and radial — can you use both of them (in different places silly)?
  3. Make more shapes interactive — try doing something with the eyes or the mouth!