search

MAKIO135 / svg5.js

A tiny JS library to generate static SVGs for plotters, lasercutting, embroidery and more, based on Processing/p5js syntax.
MIT License
138 stars 8 forks source link

Support for animations #2

Closed jtpio closed 3 years ago

jtpio commented 3 years ago

It would be interesting to find a way to leverage the animateMotion or animateTransform elements to create animations:

Not sure how is easy it would be to achieve this while still using the p5 api though.

MAKIO135 commented 3 years ago

Not sure to include it for now as it would totally change the goal of the library:

svg5 is a tiny JS library to generate static SVGs for plotters, lasercutting, embroidery and more, based on Processing/p5js syntax.

But you can at any point in the SVG creation do something like that:

svg5.html += `<circle r="5" fill="red"><animateMotion dur="10s" repeatCount="indefinite" path="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" /></circle>`
jtpio commented 3 years ago

Not sure to include it for now as it would totally change the goal of the library:

Right. Thinking out loud, since svg5 already supports adding a circle with svg5.circle(), it would have been interesting to see if the api could be extended to "attach" an animateMotion to the element. But then it might start deviating from the p5 primitives and complicate things.

Feel free to close if you think it is out of scope :)

(as you mentioned it can still be done in user code)

MAKIO135 commented 3 years ago

Not absolutely attached to stick to the p5 api (see for example the addition of the opacity method), but need to find an elegant way to add elements inside of each others.
I'm closing it for now, but I'll keep the idea in case I think of a nice way to do it.