TODO: it appears that img can be used with animated svg. It is probably necessary that the animation code is in the svg rather than in the enclosing html page. It is possible that there are browser dependent differences in what works and what doesn't.
Introduces the style tag, the @keyframes keyword and the definition of a class. Goes on to show the use of that class. We arrive at a box that changes colour (forever). The example includes two buttons to start and stop this animation.
A second example animates a paragraph. This changes the colour of the text, the background colour and swings from side to side. The example includes two buttons to start and stop this animation.
In this first example we animate an svg drawing of a circle so that it both changes colour and moves from side to side, a bit like the paragraph in 'Animating HTML'.
After the @keyframes and class have been defined all that is left to do is to give the svg code for the circle the class.
At this stage the svg is still very simple, so starting from a template with the outermost svg tag it would be okay to code by hand.
This page is headed 'Movement' and shows two things moving at the same time. i.e. The page introduces the idea of the g element.
A detailed breakdown of the parts of the animate verb.
Also headed 'Movement', this page shows what skew means and uses the same two shapes as the translate page.
This shows a group of three objects rotating around the default origin. There is a link to the page that deals with moving the origin.
This is an example of static text using position and styles.
This is an example of wrapping text round a path.
The third example sends a graphic around a path.
This shows how to start and stop an animation just by hovering the mouse over the shapes.
I go on to say that if the class which defines the mouse hover action is put into a g element containing all the shapes then they all start and stop together.
There is the germ of an idea for a 'drawing pad' done using the technique on this page or a related technique using 'active' rather than hover. Active refers to holding the left key of the mouse down. (Track pad alternative, touch screen alternative?)
This shows how to put the origin wherever you want it. e.g. To be the centre of a rotation. There is a large comment which is about the matrix version of transformation, this could and should be a separate page.
The page also shows how buttons can be drawn in the SVG itself and work using the onClick event.
Also, for the first time, I put the animation and other styles in the SVG not in the head of the html.
Finally, I put the translation of the coordinate system and a scale factor into the same g element, then all its contents are centred on the new position of the origin and enlarged.
This uses javascript to animate a set of traffic lights. It duplicates what I did, better, on the Web part of my site. It might be possible to redo it using hover or active and just css, whether this is worthwhile is doubtful.
I wondered if I should start off by showing the boys the simplest possible svg file. To indicate that you 'could' write svg by hand. This would then motivate the intro to svgedit. This is because even the simplest file needs the xmlns declaration along with the svg tag and at least one element.
The beginnings of a 'handwriting' animation. As described here: Animating handwriting
TODO:
code club html editor
This is the link to it:
html editor
Will somehow have to arrange with parents that the children can have an account....
This page is just started: a brief description and the url only.
This explains how to run a simple web server locally so that the html pages can be rendered in the browser.