#SVG Quarters

I am a fan of SVG.

Bees and Bombs makes rad geometric gifs.

So I recreated this gif in SVG.

The initial SVG code is one quartered circle that morphs into outward facing quarters with SMIL animations. That circle is then cloned, translated and appended in JavaScript, using the 'begin" attribute to offset animation in concentric diamonds.

Thanks to Dave Whyte (Bees and Bombs) for the creativity and Tab Atkins for some grid algorithm help.

Originally posted on CodePen.

Just for fun, so no support in IE, where SMIL animations aren't supported.