Random Experiments

A collection of little code experiments and ideas. Sometimes useful. Sometimes just weird. May or may not work correctly in all browsers.

3 Jul 2020

Unfold SVG shapes and lines

You can unfold most any SVG shape with a helper line. Squares, triangles, hexagons? Yep. It's easier than you think.

2 Jul 2020

With the aid of a helper line, you can unwrap the two sides of a SVG circle or ellipse from the center bottom position.

29 Jun 2020

Unroll SVG circles, ellipses or spirals with lots of complicated math. Nah. We'll cheat and use a helper line.

24 Jun 2020

Learn the basic setup to animate the SVG viewBox attribute in this quick tutorial.

18 Jun 2020

Ready to create your SVG dashed line animations? I'll show you how to create dashed path animations with the help of a mask.

14 Jun 2020

Setting your stroke dash length to 0 and the linecap to round produces some interesting results.