A toy for playing with animated tiles in SVG, inspired by an [animation](http://blog.ninapaley.com/2013/05/04/morphing-tiles/) by Nina Paley
HTML
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
README.md
canvas1.html
canvas10.html
canvas11.html
canvas2.html
canvas3.html
canvas4.html
canvas5.html
canvas6.html
canvas7.html
canvas8.html
canvas9.html
index.html

README.md

paleytiles

A toy for playing with animated tiles in SVG, inspired by an animation by Nina Paley

Also a step-by-step tutorial for doing the same animation using the Canvas, which should work better in Firefox.

  • Step 1: set up canvas and draw a triangle, this will eventually be our clipping region
  • Step 2: draw some more triangles, which we'll rotate later
  • Step 3: rotate all but the clip triangle to a different start position
  • Step 4: apply clipping
  • Step 5: animate rotation with clipping
  • Step 6: animate rotation without clipping to see what is going on
  • Step 7: draw to an offscreen canvas to mirror the clipped triangle
  • Step 8: add rotation and mirroring to get the first 1/4 tile
  • Step 9: mirror to get 1/2 tile
  • Step 10: mirror to get full tile
  • Step 11: tile the full page with repeating images