demo · v135

SVG path → shape() converter

The Chrome blog post calls out interoperability with SVG path data as the killer reason for shape(). Paste any SVG d attribute below — the converter turns it into a semantic shape() using from, line to, curve via, etc. Both renderings appear side by side so you can confirm they match.

shape(): ?

SVG <path> render (reference)

CSS clip-path: shape() render


    

  


  

    
the code


// Each SVG command becomes one shape() segment.
// M 50 0   →  from 50% 0
// L 100 50 →  line to 100% 50%
// C ...    →  curve to X Y via CX1 CY1 CX2 CY2
// A ...    →  arc to X Y of RX RY rotate ...
// Z        →  close

element.style.clipPath = `shape(${segments.join(", ")})`;

  


  

    
see also