Skip to content

Instantly share code, notes, and snippets.

@daniellevass
Last active February 5, 2018 09:05
Embed
What would you like to do?
emoji worksheet

1. Aims

The aim of this worksheet is to help you create your own emoji using SVG!

We will need to write code to make some paper, circles and polygons and move where they are located on the page using coordinates.

Imgur

Above is an Android emoji made using several circles (we can also animate it later!)


2. JSFiddle

We're going to be using a website called JSFiddle to create our own emojis. First we need to open JSFiddle in a new tab (right click and open in new tab) http://jsfiddle.net/

You should then see a set of four squares - we're going to be working on the top left box "HTML"

Imgur

There are two really important buttons in the top bar to focus on:

Imgur

  • Run = press this every time you want to see what your code does - this should then appear in the bottom right box called Result

  • Save = when you've made something neat work - press save and JSFiddle will create you a unique URL. Make sure you write this down somewhere safe, so you can add more things to your emoji next time!


3. Coordinates

SVG uses the same coordinate system you've seen before in Maths! The only difference is the origin (0,0) is top left instead of the traditional bottom left.

Imgur

If we draw a circle and want to work out what it's coordinates would be.

Imgur

We'd need to count first how far away from the left edge of paper along the horizontal (x) axis it is - the higher the x number, the further right the shape is.

Imgur

Finally, we need to count how far away from the top of the paper along the vertical (y) axis it is - the higher the y number, the further down the paper the shape is.

Imgur


4. Paper

As we're going to be doing some drawing today - the first important thing to do is to create ourselves a piece of paper. We can do that by using a technology called SVG. Write the following into the HTML box in JSFiddle.

<svg height="600" width="600">



</svg>

Imgur

If you tap run now, does anything happen? It might not look like it but if you look super carefully you can see the scroll bars appear meaning your paper is going to be bigger than the result box can show!

Now let's actually draw something!


5. Circles

The most important part of the emoji is the "face" - which is a really big yellow circle!

Write the following code inside your paper, after <svg height="600" width="600"> and before the </svg>

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

The above means, make a circle with the following attributes :

  • cx = center x value (how far right)
  • cy = center y value (how far down)
  • r = radius (how big the circle is)
  • fill = what colour the shape will be

Imgur


6. Colours

So that yellow colour we made isn't really the same yellow colour as the emojis on my phone. How can we make that better?

Computers have many different ways to represent colours, websites tend to use a thing called Hex Colours and they look like this:

  • black #000000
  • white #ffff00
  • yellow = #ffcc00

Instead of the word "yellow" write "#ffcc00" and see what happens? The hash character (#) is super important, without it the computer doesn't realise it's a colour!

If you'd like some colour inspiration, Google have a great list of colours and their hex codes - check it out at https://www.google.com/design/spec/style/color.html#color-ui-color-palette (right click, open in a new tab)

colours


7. More Circles

Spend some time adding more circles to your emoji - don't you need some eyes, maybe even a nose?

Imgur

Does it look scared to you?


8. Polygons

Another shape we'll probably want to use is a polygon. Polygon is just a fancy name for a shame with many points. A square is a polygon with 4 points. Triangles with 3. etc.

If we want to make a square background for our emoji, we could break it down to the following 4 coordinate points:

  • top left = 0,0
  • top right = 600,0
  • bottom right = 600,600
  • bottom left = 0,600

Next we can write them all together, though we have to make sure they are in a sensible order = 0,0 600,0 600,600 0,600

Finally, we can subsitute our points into our polygon shape.

<polygon points="0,0 600,0 600,600 0,600" fill="red"/>

If you add this below all your circles what happens?

There is a thing called a z index. We've taken special care to where the x and y coordinates go in our shape, but how do we make sure something doesn't go over the top of another shape???

This is handled by when it's drawn. If you pretend your the computer drawing all of these shapes. First your going to want to draw the background, then the yellow circle for the face, then the black eyes. etc. We just need to make sure our background is one of the first shapes that gets drawn! Simples!

Imgur


9. Finishing

Before you move on, make sure your emoji has the following:

  • 1 face
  • 2 eyes
  • background

Don't forget to save your work, and write down the link so we can add it to it next time!

You could also take the link home and show your friends and family what amazing work you've done! You could also make me happy by clicking the "send feedback" button and send your emoji to me too! 🌟

1. Aims

The aim of this worksheet is to show you some of the colour things you can do in SVG.

we will look at using the following in our emojis:

  • stroke
  • fill
  • opacity
  • linear gradients
  • radial gradients

Imgur

above is my emoji at the end of this tutorial


2. JSFiddle

If you haven't got it open in a new tab, find your emoji from the last worksheet. We're going to add some more jazzy colours to it this worksheet!

Imgur

here's mine, all ready for the party!


3. Stroke vs Fill

So we've already used the attribute fill in a lot of our shapes. This fills in the shape with a solid colour.

We can also use an attribute called stroke to draw a line around the shape. If we want a thicker line, we can increase an attribute called stroke-width.

I'm going to update my yellow emoji circle to have a green line around the edge:

<circle cx="200" cy="200" r="180" fill="#FFCE54"
         stroke="#A0D468" stroke-width="15"/>

Imgur

doesn't it look smarter already?


4. Opacity

Another fun attribute all shapes get that we can play with is the opacity - this just means how seethrough it is.

I'll update my emoji to be 50% transparent:

<circle cx="200" cy="200" r="180" fill="#FFCE54"
         stroke="#A0D468" stroke-width="15"
         opacity="0.5"/>

Imgur

oops, maybe he looks a little too much ghostlike now?


5. Linear Gradients

Let's add something new to our emoji, how about a gradient background!

First off we need to declare that a linearGradient:

<linearGradient id="linearGrad" 
                  x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%" stop-color="#4FC1E9"/>
    <stop offset="100%" stop-color="#AC92EC" />
</linearGradient>

We need to make sure the id is something we remember, as we'll use this in a minute. We're going to go from 0% to 100% along the x axis (right to left). Then we can declare some colours and where they should start. E.g. far left should be blue, far right should be red.

To use it we need to change the fill attribute in the shape we want to use the gradient (our polygon):

<polygon points="0,0 0,400 400,400 400,0"
          fill="url(#linearGrad)"/>

make sure you add a # which here means, find something with the id of linearGrad

Imgur

snazzy, right?


6. Radial Gradients

So we liked linear gradients enough to learn how to do a radial gradient too!

They're very similar! The stoppers are points from the middle e.g. in the center stay yellow, then go to orange around the outside.

<radialGradient id="radialGrad" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
    <stop offset="25%" stop-color="#FFCC00"/>
    <stop offset="100%" stop-color="#FC6E51" />
</radialGradient>

Don't forget to set the fill of your face circle to your new gradient. If you forget, check how your linear gradient works!

Imgur

is it possible to have too much colour?!


7. Finishing

Before you move on, make sure your emoji has the following:

  • Path
  • Opacity
  • Linear gradient
  • Radial gradient

Don't forget to save your work, and write down the link so we can add it to it next time!

You could also take the link home and show your friends and family what amazing work you've done! You could also make me happy by clicking the "send feedback" button and send your emoji to me too! 🌟

1. Aims

The aim of this worksheet is to introduce into JavaScript by making our emoji change colour when we click on it.

We will learn what the following are:

  • id's
  • variables
  • functions

2. JavaScript

Imgur


3. jQuery

Imgur


4. ids

Imgur


5. variables

Imgur


6. clicking

Imgur


7. changing things

Imgur


8. finishing

Before you move on, try making at least two other things clickable.

Don't forget to save your work, and write down the link so we can add it to it next time!

You could also take the link home and show your friends and family what amazing work you've done! You could also make me happy by clicking the "send feedback" button and send your emoji to me too! 🌟

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment