SVG to CSS Form Converter

Form grasp Temani Afif has what is perhaps the biggest assortment of CSS shapes on the planet with all of the instruments to generate them on the fly. There’s a mixture of intelligent methods he’s sometimes used to make these shapes, a lot of which he’s coated right here at CSS-Methods through the years.

A few of the extra advanced shapes had been generally clipped with the path() operate. That makes a number of sense as a result of it actually accepts SVG path coordinates that you may attract an app like Figma and export.

However Temani has gone all-in on the newly-released form() operate which lately rolled out in each Chromium browsers and Safari. That features a brand-new generator that converts path() shapes in form() instructions as an alternative.

So, if we had a form that was initially created with an SVG path, like this:

.form {
  clip-path: path(
    M199.6,18.9
    c-4.3-8.9-12.5-16.4-22.3-17.8
    c-11.9-1.7-23.1,5.4-32.2,13.2
    c-9.1,7.8-17.8,16.8-29.3,20.3
    c-20.5,6.2-41.7-7.4-63.1-7.5
    c38.7,27,24.8,33,15.2,43.3
    c-35.5,38.2-0.1,99.4,40.6,116.2
    c32.8,13.6,72.1,5.9,100.9-15
    c27.4-19.9,44.3-54.9,47.4-88.6
    c0.2-2.7,0.4-5.3,0.5-7.9
    c204.8,38,203.9,27.8,199.6,18.9
    z
  );
}

…the generator will spit this out:

.form {
  clip-path: form(
    from 97.54% 10.91%,
    curve by -10.93% -10.76% with -2.11% -5.38%/-6.13% -9.91%,
    curve by -15.78% 7.98% with -5.83% -1.03%/-11.32% 3.26%,
    curve by -14.36% 12.27% with -4.46% 4.71%/-8.72% 10.15%,
    curve by -30.93% -4.53% with -10.05% 3.75%/-20.44% -4.47%,
    curve to 7.15% 25.66% with 18.67% 15.81%/11.86% 19.43%,
    curve by 19.9% 70.23% with -17.4% 23.09%/-0.05% 60.08%,
    curve by 49.46% -9.07% with 16.08% 8.22%/35.34% 3.57%,
    curve by 23.23% -53.55% with 13.43% -12.03%/21.71% -33.18%,
    curve by 0.25% -4.77% with 0.1% -1.63%/0.2% -3.2%,
    curve to 97.54% 10.91% with 100.09% 22.46%/99.64% 16.29%,
    shut
  );
}

Fairly cool!

Actually, I’m unsure how typically I’ll have to convert path() to form(). Looks as if a stopgap sorta factor the place the necessity for it dwindles over time as form() is used extra typically — and it’s not like the present path() operate is damaged or deprecated… it’s simply completely different. However nonetheless, I’m utilizing the generator a LOT as I attempt to wrap my head round form() instructions. Seeing the instructions in context is invaluable which makes it a superb studying software.

Direct Hyperlink →