SVG phased creation animation πŸ’»


I was editing a SVG today, and I was changing the order of some elements when I noticed when I reversed the order of elements, it created an effect of incrementally creating the drawing. It is dependent on how you organically added and ordered the layers in the first place.

So, I thought it’d be cool to do this completely, put a white layer in the foreground, and use some simple javascript to move each element into the foreground. This is the result.

See the Pen World Cup drawing construction animation by rob (@robjoeol) on CodePen.

Related Posts