SVG Animation via CSS
Use the mouse to draw a stroke ...
Scribble
Duration
Pressure
Twist
Usage
Use the mouse to draw
Use the duration slider to adjust the length of the animation
Change pressure and twist using the other sliders
Save SVG
to get the raw SVG (no animation)
Export Data
to get the stroke data as JSON file
Note
We are adding pathelements (quads) in real time
The CSS is applied to each quad as soon as it is added to the SVG :-)
Todo
Add timestamps to each data sample, so we can recreate the path
Import data (drag 'n drop)
Possible Improvements
Create rounded path (bezier delimited quads instead of polygons)
Use a SVG library such as Paper.js ...
Use a GUI library ...