hi.

Setting the Stage for

Animation

What is

SVG

What isWhy

vector

JUST SCALE IT

How does this applyto web development?

… mo’ pixels mo’ problems

2x

Sharp

Small

Editable

Benefits

Smoke and mirrors.

currenttooling

toolingpast

<svg width="100%" height="95%" style="background: #c61c64">

<rect x="100" y="100" width="200" height="100" fill="blue" /> <circle cx="300" cy="300" r="50" style="fill:green" /> <text x="50%" y="50%" font-size="40">svg aye</text> <polyline points="10 35, 30 60, 40 50" id="test" /> <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/>

</svg>

Benefits

ILLUSTRATOR

urgh. animation?

animation = code

Groupingis GUI

what are we creating?

1 2 3

preparing the svg

Wash the SVG

@keyframes

Q’s

@jnowland

Setting the Stage for

Animation