Read time: 7-9 minutes
5
Jul
2020
Wavy Gauge Numbers
Dynamically build a SVG gauge with jumping numbers and link the time to a draggable element.
Dynamically build a SVG gauge with jumping numbers and link the time to a draggable element.
You can unfold most any SVG shape with a helper line. Squares, triangles, hexagons? Yep. It's easier than you think.
With the aid of a helper line, you can unwrap the two sides of a SVG circle or ellipse from the center bottom position.
You'll learn how to move your target from one item to the next with an organic feeling, stretchy-style animation.
Vector software for your SVGs? Sure, but sometimes it's easier and more flexible to create dynamic SVG elements with JavaScript.
Unroll a SVG circle, ellipse or spiral with lots of complicated math. Nah. We'll cheat and use a helper line.