Accessibility First DevRel. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
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! 🤣
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
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.
Accessibility First DevRel. I focus on ensuring content created, events held and company assets are as accessible as possible, for as many people as possible.
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.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
Yes, I am currently working on cheating my way to a CSS only solution - so I am converting
<path d="">
toclip-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! 🤣
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
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.
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.