More shape() tools:
Path to Shape()
|
Minify Shape()
|
Shape() to Polygon()
CSS Shape() Morph
Prepare shape() values for morphing with native CSS transitions & animations
Reference box
Width (px)
Height (px)
Options
Fill rule
as written
force nonzero
force evenodd
Auto shape index
shape() 1
shape(from 50% 0%, line to 93.3% 25%, line to 93.3% 75%, line to 50% 100%, line to 6.7% 75%, line to 6.7% 25%, close)
shape() 2
shape(from 50% 0%, line to 100% 100%, line to 0% 100%, close)
shape() 3
Remove
shape(from 50% 0%, arc to 50% 100% of 50% 50% cw, arc to 50% 0% of 50% 50% cw, close)
add shape
Preview
play
pause
shape 1
shape 2
shape 3
Output
shape() 1
Copy
Copied
shape(nonzero from 50% 0, curve to 93.3% 25% with 64.433% 8.333% / 78.867% 16.667%, curve to 93.3% 75% with 93.3% 41.667% / 93.3% 58.333%, curve to 50% 100% with 78.867% 83.333% / 64.433% 91.667%, curve to 6.7% 75% with 35.567% 91.667% / 21.133% 83.333%, curve to 6.7% 25% with 6.7% 58.333% / 6.7% 41.667%, curve to 50% 0 with 21.133% 16.667% / 35.567% 8.333%, close)
shape() 2
Copy
Copied
shape(nonzero from 50% 0, curve to 75% 49.999% with 58.333% 16.666% / 66.666% 33.333%, curve to 100% 100% with 83.333% 66.666% / 91.667% 83.333%, curve to 50% 100% with 83.333% 100% / 66.667% 100%, curve to 0 100% with 33.333% 100% / 16.667% 100%, curve to 25% 49.999% with 8.333% 83.333% / 16.667% 66.666%, curve to 50% 0 with 33.334% 33.333% / 41.667% 16.666%, close)
shape() 3
Copy
Copied
shape(nonzero from 50% 0, curve to 100% 50% with 77.614% 0 / 100% 22.386%, curve to 85.355% 85.356% with 100% 63.807% / 94.403% 76.307%, curve to 50% 100% with 76.307% 94.404% / 63.807% 100%, curve to 0 50% with 22.386% 100% / 0 77.614%, curve to 14.645% 14.644% with 0 36.193% / 5.597% 23.693%, curve to 50% 0 with 23.693% 5.596% / 36.193% 0, close)