Click on the image and then view source or reload to see the animation. Wikispaces has issues with the SVG files when the page is not 100%...so if you want to expand them open them in their own window.

simple scaling (iterated)

external image pentagonalDecent.svg
or check out external image CTIlogoAniOld.svg

Use, defs, patterns, and clipping

grid.svg may help us understand the xy-grid. or face2.svg

Bezier Curves

(missing words... load in separate tab) w3schools
curveto2.svg UAE7.svg

Shadows

mit3.svg

Masking

I was playing with the Dubai Expo 2020 logo... Expo1 (40 lines, 2k) Expo2 (81 lines, 4k) Expo3 (100 lines, 5k)
Expo1.svg Expo2.svg Expo3.svg

Morphing

This one is kind of fun. I made the first two frames by rotating and reflecting 3 triangles but then I had to make all 15 and manipulate them manually (I used inkscape--didn't have illustrator handy). Each of the triangle / curved triangles (like a jib sail) is made from a path "d" that is animated. The reason it works is that each of the values of "d" has the exact same structure. For a while, I thought I might have to do some conversion but it turns out SVG's animate function doesn't seems to care whether the paths have relative coordinates or absolute. When I get some time and a better original Ankabut logo, I'll tweak this 9k animated image.
Anka15.svg
or check out external image CTIlogoF.svg

More Logo play

Hoosiers2.svg html5Cool.svg microsoft.svg itunes2.svg
external image tld4.svgexternal image tld5.svg external image tldsq2.svg external image svgunhappy9.svg
play with iris

interesting links

drawing animation batman