Skip to content

mattbullen/spline-path-animation

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

22 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Animating an SVG icon along complex paths

This is an earlier version of my 3D spline animation page. It animates a small SVG icon around the screen by looping over the icon's CSS properties margin-top and margin-left along randomly-generated paths, which can range from simple linear intervals to complex multi-knot spline paths.

Once you open the page, click on the blue checkmark in the upper-right corner of the screen to start a random animation sequence. At the end of the animation, the page generates a line graph for each CSS property and path. Each graph shows the delta intervals of its corresponding path, which is useful for matching more complex splines to the movement of the icon on the screen.

About

Animate an SVG icon along complex paths using plain JavaScript

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages