search

Yqnn / svg-path-editor

Online editor to create and manipulate SVG paths
https://yqnn.github.io/svg-path-editor/
Apache License 2.0
4.04k stars 326 forks source link

can you add some kind of layering system to svg-path-editor #126

Open darvon123 opened 5 months ago

darvon123 commented 5 months ago

it's hard keeping track of all of these points especially when you're trying to create path animations for CSS. it's getting to the point where I have to use a text editor alongside Inkscape just to keep track of what's going on in your editor.

to produce this autoplay1 link requires this much data to track of.

##toggle off
M 24 1 A 1 1 90 0 1 24 17 L 10 17 A 1 1 90 0 1 10 1 L 24 1 M 10 0 A 1 1 0 0 0 10 18 L 24 18 A 1 1 0 0 0 24 0 L 10 0

##toggle on
M 24 1 A 1 1 90 0 1 24 17 L 24 17 A 1 1 90 0 1 24 1 L 24 1 M 10 0 A 1 1 0 0 0 10 18 L 24 18 A 1 1 0 0 0 24 0 L 10 0

##circle
M 10 17 A 1 1 0 0 0 10 1 L 10 1 A 1 1 0 0 0 10 17 L 10 17

##pause
M 11 9 L 11 4 L 14 4 L 14 14 L 11 14 L 11 9 M 9 9 L 9 14 L 6 14 L 6 4 L 9 4 L 9 9 

##Play
M 10 6 L 10 6 L 16 9 L 16 9 L 10 12 L 10 12 M 10 12 L 10 12 L 6 14 L 6 4 L 10 6 L 10 6

##Pause circle
M 11 9 L 11 4 L 14 4 L 14 14 L 11 14 L 11 9 M 9 9 L 9 14 L 6 14 L 6 4 L 9 4 L 9 9 M 10 17 A 1 1 0 0 0 10 1 L 10 1 A 1 1 0 0 0 10 17 L 10 17

##Play circle
M 10 6 L 10 6 L 16 9 L 16 9 L 10 12 L 10 12 M 10 12 L 10 12 L 6 14 L 6 4 L 10 6 L 10 6 M 10 17 A 1 1 0 0 0 10 1 L 10 1 A 1 1 0 0 0 10 17 L 10 17

##Pause toggle 1.0
M 24 1 A 1 1 90 0 1 24 17 L 10 17 A 1 1 90 0 1 10 1 L 24 1 M 10 0 A 1 1 0 0 0 10 18 L 24 18 A 1 1 0 0 0 24 0 L 10 0
M 11 9 L 11 4 L 14 4 L 14 14 L 11 14 L 11 9 M 9 9 L 9 14 L 6 14 L 6 4 L 9 4 L 9 9 M 10 17 A 1 1 0 0 0 10 1 L 10 1 A 1 1 0 0 0 10 17 L 10 17

##play toggle 1.0
M 24 1 A 1 1 90 0 1 24 17 L 24 17 A 1 1 90 0 1 24 1 L 24 1 M 10 0 A 1 1 0 0 0 10 18 L 24 18 A 1 1 0 0 0 24 0 L 10 0 M 24 6 L 24 6 L 30 9 L 30 9 L 24 12 L 24 12 M 24 12 L 24 12 L 20 14 L 20 4 L 24 6 L 24 6 M 10 1 A 1 1 0 0 0 9 12 L 9 12 A 1 1 0 0 0 10 1 L 10 1

##play toggle 2.0
M 24 1 A 1 1 90 0 1 24 17 L 24 17 A 1 1 90 0 1 24 1 L 24 1 M 10 0 A 1 1 0 0 0 10 18 L 24 18 A 1 1 0 0 0 24 0 L 10 0 M 24 6 L 24 6 L 30 9 L 30 9 L 24 12 L 24 12 M 24 12 L 24 12 L 20 14 L 20 4 L 24 6 L 24 6

##pause toggle 2.0
M 24 1 A 1 1 90 0 1 24 17 L 10 17 A 1 1 90 0 0 10 1 L 24 1 M 10 0 A 1 1 0 0 0 10 18 L 24 18 A 1 1 0 0 0 24 0 L 10 0 M 11 9 L 11 4 L 14 4 L 14 14 L 11 14 L 11 9 M 9 9 L 9 14 L 6 14 L 6 4 L 9 4 L 9 9

end