DEV Community

Discussion on: Rate my SVG art! [Compared to CSS art]

Collapse
 
grahamthedev profile image
GrahamTheDev

Yes, I am currently working on cheating my way to a CSS only solution - so I am converting <path d=""> to clip-path: polygon().

I get <path> but there are some <polygon points=""> in there and converting them is something I am having to learn (seems straight forward but really threw a spanner in the works!).

I think the bit that is hard to hand craft is the curves, I can "edit" them if they are generated, I don't understand them well enough to write one from scratch by hand though!

I don't think I will ever hand craft anything other than a circle and a square in SVG! 🤣

Collapse
 
afif profile image
Temani Afif

you cannot convert a path to polygon because polygon cannot handle curves. Clip-path already have a path() value (twitter.com/jensimmons/status/1201...) so converting this to CSS is easy but still SVG behind the scene

Thread Thread
 
lexlohr profile image
Alex Lohr

You can try to have an approximation of a curve as a polygon, by spliitting it into multiple lines. However, that doesn't scale as well for obvious reasons.

Thread Thread
 
grahamthedev profile image
GrahamTheDev

This is what I am doing, approximating a curve. In a busy enough image you don't need to add too many paths to make a circular looking shape. I am having fun trying to fine tune it though to try and keep the balance right.

What I am finding is that gaps between two polygons that previously had curves is a pain to fix, but I think I can just hide that with a background colour and the eye will miss it.