SVG City Archives • Motion Tricks https://www.motiontricks.com/svg-tutorials/ 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 SVG Calligraphy Handwriting Animation https://www.motiontricks.com/svg-calligraphy-handwriting-animation/ Tue, 04 Aug 2020 15:17:24 +0000 https://www.motiontricks.com/?p=1476 SVG calligraphy can be tricky with varying width strokes and text overlapping itself. Learn how to do it with multiple masks.

The post SVG Calligraphy Handwriting Animation appeared first on Motion Tricks.

]]> Wavy Gauge Numbers https://www.motiontricks.com/wavy-gauge-numbers/ Sun, 05 Jul 2020 22:50:20 +0000 https://build.motiontricks.com/?p=428 Dynamically build a SVG wavy gauge with jumping numbers and link the time to a draggable element.

The post Wavy Gauge Numbers appeared first on Motion Tricks.

]]> 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.

]]> SVG Stretchy Navigation https://www.motiontricks.com/svg-stretchy-navigation/ Wed, 01 Jul 2020 23:45:18 +0000 https://build.motiontricks.com/?p=869 You'll learn how to move your target from one item to the next with an organic feeling, stretchy-style animation.

The post SVG Stretchy Navigation appeared first on Motion Tricks.

]]> Creating dynamic SVG elements with JavaScript https://www.motiontricks.com/creating-dynamic-svg-elements-with-javascript/ Tue, 30 Jun 2020 23:02:59 +0000 https://build.motiontricks.com/?p=507 Vector software for your SVGs? Sure, but sometimes it's easier and more flexible to create dynamic SVG elements with JavaScript.

The post Creating dynamic SVG elements with JavaScript 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.

]]> Piggy Bank Motion Path Basics https://www.motiontricks.com/piggy-bank-motion-path-basics/ Sat, 27 Jun 2020 20:58:18 +0000 https://build.motiontricks.com/?p=521 Learn the basics about GreenSock's MotionPath plugin with a piggy bank and some flying dollars.

The post Piggy Bank Motion Path Basics appeared first on Motion Tricks.

]]> Organic Morphing: Getting needed points from Adobe Illustrator https://www.motiontricks.com/organic-morphing-getting-needed-points-from-adobe-illustrator/ Fri, 26 Jun 2020 00:35:46 +0000 https://build.motiontricks.com/?p=458 Learn how to get the correct path points out of Adobe Illustrator for smooth organic SVG morphing.

The post Organic Morphing: Getting needed points from Adobe Illustrator appeared first on Motion Tricks.

]]> Adobe Illustrator Path Direction Quick Tip https://www.motiontricks.com/adobe-illustrator-path-direction-quick-tip/ Thu, 25 Jun 2020 17:36:03 +0000 https://build.motiontricks.com/?p=423 End the frustration of figuring out Adobe Illustrator path direction with this quick tip.

The post Adobe Illustrator Path Direction Quick Tip appeared first on Motion Tricks.

]]>