today I'm going to show you how to do
live code and SVG in the browser using
Sling code so we're going to do this
without any frameworks we're just going
to do it in pure HTML and JavaScript and
CSS and this is a nice quick way of
doing some motion graphics in the
browser so we're gonna start by going to
sling code on them and then which once
you they can click on try it to load the
editor I'm gonna go down to the bottom
right hand corner here and say new app
and then we're gonna go file save and
you can hit ctrl s or command S to do
the same thing and then we're going to
open a new panel here running the app
and once it loads up you can see this
hello world which is this text here in
the code and so the first thing we're
gonna do is set the title of this to
live coded SVG right
so we're gonna grab an extra s there
we're going to go to this page SVG
element reference so if you search for
this term SVG element reference and mdn
you'll find this page and this is just a
list of all the HTML elements that make
up an SVG in HTML alright so we want to
get a Z let's draw a circle let's start
with a simple circle so we'll click on
this circle tag here as you can see
simple little definition of an SVG with
a circle tag inside to draw the circle
so let's copy that one and we're gonna
replace our main div here with that code
now the indenting not slightly wonky so
you can select that and press control
square bracket to move the indenting
around and then we'll hit save and we
see this big circle has filled up the
entire viewport so what we're gonna do
is change this viewport so at the moment
it's 0 0 up here to 100 100 down here
but I want to change it so that 0 0 is
in the middle because it just makes the
maths a little bit more intuitive so I'm
gonna put minus 100 minus 100 so we're
gonna change that corner to minus 100
minus 100 and make it 200 wide and 200
high and we'll hit save so now our
circle the center is at 50 50 which is
here now and the radius is 52 so 50 also
so it takes up this entire quadrant you
what I'm gonna do is move that into the
middle and make it a little bit smaller
so I'm gonna make it radius of 20 and
put it in the center here if I hit save
you see it jump into the middle there
let's also we're going to do some
planets here so let's change the
background color so it's a bit more
Spacey we'll give that a background
color this is in the CSS definition of
the body here give it a background color
of 333 so you get this nice gray here
next we're going to add a moon so let's
take our circle definition and copy that
one and we're going to put it slightly
to the right here of this existing body
so it'll be a moon that orbits this main
main planet so our center X we're going
to move to 40 because that has a radius
of 20 so we want to put it outside that
and we'll make it a bit smaller
we'll make it 10 okay so that's our
first little planet hovering off to the
right there we can also give that a
color by changing the fill so we'll say
orange and let's also give it an ID so
that we can manipulate it later so we'll
say plan an idea of Planet 1 so we've
got our simple little two-body system
here our main planet and our little moon
here little orange moon which i've
called planet 1 maybe I'll call it a new
one okay so now how do we animate this
we're just going to do some basic CSS
animation to get this movie so we say
new one and we're going to give it a
animation name of orbit and animation
duration so it'll take 5 seconds to
orbit the main body and we'll say
animation iteration count infinite
because we wanted to go on forever
now we haven't defined this animation
yet orbit we could do that easily with
the keyframes directive keyframes orbit
so it was creating a new set of
keyframes we're gonna say from we what
we're gonna do is apply a CSS transform
- rotate this around the center it's
also transform rotate zero degrees to
start with
and then we'll say - so we wanted to go
from zero degrees transform rotate 360
degrees
alright let's save that and see what
happens there we go you can see it's got
a slightly wonky over here where it
actually accelerates and then slows down
so that's nothing like a real body with
behaviour space so to get it a little
bit more realistic we're gonna say
animation timing function linear and
there's a bunch of different timing
functions you get up you can look up if
you look look for CSS animation
directives you should be able to find
the different types of things you can
put in all these positions and we'll hit
save on that one now you can see it's
got a much smoother linear type
animation all the way around and never
never pauses we could make that faster
by changing this to two seconds we can
make it slower by changing it to ten
seconds but we'll put it back to five
now cool so that's our first little moon
orbiting the planet let's now go ahead
and copy that paste it to create a new
moon so we'll start this one at minus 70
so I'll put it a bit further outside but
on the other side now we'll give this
one a radius of five to make it smaller
and we'll make it red and we'll give it
an idea of moon two so let's save that
guy alright so here's our second little
moon as you can see that's that's not
orbiting in but we can actually reuse
the same animation as the first one so
we'll copy this and paste it in
it's read in that same moon too and
let's make this one move just a bit
faster we'll take four seconds to go
around so now you have two bodies for
attending around the main body there so
that's pretty cool you can also draw
other types of CSS elements of course if
you look up this reference table you've
got things like paths so we can copy
this path here that they've got draws a
heart shape and we can actually just
stick that one straight into our SVG
definition TN and hit save and we see
this big heart floating in space so it
shows you some of the power of what you
can do you could look up how to draw
these paths but basically you've got to
move and then drawing lines and curves
so I'll delete that one for now
because we put out nice little two body
planet system here so the last thing I
want to show you is how to make
something happen when you click on one
of these elements so these are the
basics of making a simple game if you
wanted to for example so I'll make
something happen when you click on this
moon moon number one um I'm just gonna
read it this code here so that it's a
bit easier to read so this is a number
one circle and I'm gonna add a new
directive a new attribute here which is
on click and let's first just throw an
alert so we know it's doing something
I'm gonna say although it hi save that
one now let me what that should do is
when we click on our orange mean it
should alert hi on the screen there we
go you can see this message hi so that's
pretty cool we know now that we have
interactive are you going so let's make
it do something instead of hello let's
make a call a function blip and we will
pass the object into the callback so
it's going to call a function called
blip right now that function doesn't
exist so it won't do anything but what
we can do is create a new script tag
here a script tag define a new function
called blip
and we'll have P for a reference to the
planet so what that's doing is when you
click on the orange one it's going to
pass this which in this context will be
the thing itself so this circle into
this function so P will be the thing you
clicked and now what we can say is add a
class to this so we can change the type
of animation that happens so we could
say P dot said attribute class to blip
now of course we don't have any CSS
defined for that class so will happen if
we wanted to do something we'll have to
add some CSS here so let's create that
class and say fill blue so what this
should do now is turn that circle blue
let me click on it great works perfectly
just save again to reset it
let's try instead sitting in animation
so you would say animation name so we'll
keep the orbit animation and we'll add
another animation which will be fade we
have to put important on this to make
sure that it overrides the existing
animation orbit here so now it's going
to apply two different animations at
once we'll copy these keyframes here and
we will make them make a nice little
fade here fade animation now we're going
from and to instead of transforming with
the rotation we're gonna change the
color so I'm gonna say fill we're gonna
start with white and we're gonna go to
black let's say that right so now what
should happen when we click on our
orange bowl it should run the function
blip-blip sets the attribute of class on
that to blip which then applies this CSS
here and runs the animation fade as well
as the animation all right so let's see
if that works perfect so what it's doing
is it's we've clicked it and it's fading
from white to black now of course we've
got linear fade here sorry an infinite
iteration count so it's just looping
through white to black over and over and
over again but it'd be pretty cool if
after the end of the animation it resets
back to how it was so we can click it
again to see the behavior again so what
we're gonna do here is have a set
timeout and that's gonna when after
three seconds wait how long is our okay
so it's got a four second I'm sorry a
five second loop in the animation form
in one and after five seconds we want to
reset it so we're gonna say five said
timeout called this function after five
thousand milliseconds which is five
seconds and what we're gonna do is just
actually set that animation at that
class to be nothing again and that will
reset it back so that it's not running
the fade anymore it will undo this bit
so let's try that this time it should go
from white to black and then back to
orange once it's done
there we go it's back to how it started
click it again the same thing will
happen yeah so that's basic motion
graphic sense major activity using an
SVG in the browser I hope this helps you
build some of your own animated SPG's
thanks for listening