web_intro_emoji_7.md

1. JSFiddle.

• Open JSFiddle in a new tab (right click and open in new tab) http://jsfiddle.net/

2. Paper

• Remember to set up a piece of SVG paper to draw on in the HTML window

<svg height=400 width=400>

<!--draw stuff here-->

</svg>

3. Circles and Lines

<!-- makes a circle -->
<circle cx="200" cy="100" r="30"/>

<!-- makes a line -->
<line x1="200" y1="130" x2="200" y2="230"/>

<!-- makes a sequence of lines, all joined together -->
<polyline points="140,150 170,180 200,150 210,210 250,230"/>

4. Triangles, squares and rectangles

• Triangles, squares and rectangles are polygons with 3 or 4 points

<!--makes a triangle-->
<polygon points="90,60 170,60 190,80"/>

<!--makes a rectangle-->
<polygon points="70,160 270,140 330,200 90,200"/>

• You can also make bow ties and stars by making the lines between the points cross-over!

5. Open and Closed Curves

<path d="M 200 200 q 70 -100 100 -20"/>

Note:

M means Move To - the starting point of the line

q means it a Bezier Curve, with measurements taken relative to the M co-ordinates

6. Colours

• You can make different colour effects using the fill, opacity and stroke attributes

<circle cx="200" cy="100" r="30" style="stroke:#212121;stroke-width:2;fill:#FAFAFA" />

7. Text

• text is useful for titles and other information

<text id="sneeze" x="0" y="70" fill="green" 
    font-family="Verdana" font-size="40">
        ATHCOOOOOO!!!!!!! </text>

8. Challenges

Flowers

This challenge is to make either any real flower or to create your own using SVG!

Flowers come in fantastic shapes; some regular shapes, some flowing curves-

you can make regular shapes using SVG circles, ellipses, and lines, or flowing curves using SVG paths

Flowers are recognised by their fantastic colours. You can make your Flowers even more awesome by showing hex colours from the Material Design page.

• Here's the Yucca plant I made earlier

Flags

This challenge is to make either, any flag for a real country, or to create your own, using SVG!

Flags are made up of a combination of lines, circles and polygons-some flags are made up of layers of thick lines or other shapes-you can make many of these using SVG circles, lines and polygons.

Flags are remembered for their fantastic colours. You can make your Flags even more awesome by showing hex colours from the Material Design page.

• Here's the flag of Macedonia I made earlier

Cartoons

This challenge is to make your very own XKCD style comic strip using SVG.

XKCD Comic Strips start with a set of empty squares which you then fill in with your story and captions - using SVG polygons and text.

XKCD Stick People are made up of circles and lines - which you make using SVG circle, lines and polylines.

Comics Strips often use colour to good effect. You can make your Comic Strip even more awesome by showing hex colours from the Material Design page.

• Here's a Stick Person I made earlier

Origami Animals

This challenge is to create your own origami style animal using SVG.

Origami Animals are made up of 2d shapes, mostly triangles and quadrilaterals - because that's what you get when you fold paper - which you make using SVG polygons.

When paper is folded at different angles, the colours go slightly different shades. You can make your origami animal even more awesome by showing hex colours from the Material Design page.

• Here's a swan I made earlier

What awesome things will you make?

✨Don't forget to send us your work!