Experiments Archives • Motion Tricks https://www.motiontricks.com/experiments/ Web animation tutorials to get your pixels movin' Mon, 31 Aug 2020 16:58:00 +0000 en-US hourly 1 https://wordpress.org/?v=6.7.2 Unfold SVG shapes and lines https://www.motiontricks.com/unfold-svg-shapes-and-lines/ Fri, 03 Jul 2020 20:12:38 +0000 https://build.motiontricks.com/?p=691 You can unfold most any SVG shape with a helper line. Squares, triangles, hexagons? Yep. It's easier than you think.

The post Unfold SVG shapes and lines appeared first on Motion Tricks.

]]> Unwrap SVG circles and ellipses https://www.motiontricks.com/unwrap-svg-circles-and-ellipses/ Thu, 02 Jul 2020 22:53:45 +0000 https://build.motiontricks.com/?p=685 With the aid of a helper line, you can unwrap the two sides of a SVG circle or ellipse from the center bottom position.

The post Unwrap SVG circles and ellipses appeared first on Motion Tricks.

]]> Unroll SVG circles, ellipses and spirals https://www.motiontricks.com/unroll-svg-circles-ellipses-and-spirals/ Mon, 29 Jun 2020 20:38:42 +0000 https://build.motiontricks.com/?p=678 Unroll SVG circles, ellipses or spirals with lots of complicated math. Nah. We'll cheat and use a helper line.

The post Unroll SVG circles, ellipses and spirals appeared first on Motion Tricks.

]]> Basic SVG viewBox animation https://www.motiontricks.com/basic-svg-viewbox-animation/ Wed, 24 Jun 2020 18:16:24 +0000 https://build.motiontricks.com/?p=332 Learn the basic setup to animate the SVG viewBox attribute in this quick tutorial.

The post Basic SVG viewBox animation appeared first on Motion Tricks.

]]> SVG dashed line animation https://www.motiontricks.com/svg-dashed-line-animation/ Thu, 18 Jun 2020 20:36:32 +0000 https://build.motiontricks.com/?p=265 Ready to create your SVG dashed line animations? I'll show you how to create dashed path animations with the help of a mask.

The post SVG dashed line animation appeared first on Motion Tricks.

]]> SVG stroke-dasharray experiment https://www.motiontricks.com/svg-stroke-dasharray-experiment/ Sun, 14 Jun 2020 22:37:54 +0000 https://build.motiontricks.com/?p=60 Setting your stroke dash length to 0 and the linecap to round produces some interesting results.

The post SVG stroke-dasharray experiment appeared first on Motion Tricks.

]]>