Skip to content

Instantly share code, notes, and snippets.

@lostfictions
Created January 2, 2018 02:01
Show Gist options
  • Star 27 You must be signed in to star a gist
  • Fork 6 You must be signed in to fork a gist
  • Save lostfictions/65570a178fb095829637da2b4742fa11 to your computer and use it in GitHub Desktop.
Save lostfictions/65570a178fb095829637da2b4742fa11 to your computer and use it in GitHub Desktop.
convert an svg to a css clip-path polygon
// why do this? clip-path accepts a `url` reference to an svg element, right?
// the difference is that anything defined as a `basic-shape` can be animated:
// https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path
const input = `121.151,20.761 170.165,55.885 200.872,3.816 231.145,55.884 280.592,20.762 286.854,80.687 346.526,68.666
327.657,126.005 387.276,139.247 346.502,184 395.796,220.302 340.127,244.647 370.611,297.814 309.636,297.457 316.076,358.381
260.303,333.3 241.622,391.529 200.655,345.979 160.121,391.53 141.008,333.302 85.666,358.381 91.673,297.456 31.131,297.813
61.183,244.647 5.947,220.302 54.81,184 14.466,139.248 73.652,126.004 55.216,68.667 114.457,80.688 `
const viewBoxScale = 4
const stringPairs = input.split(/[ \t\n]/)
.map(s => s.trim())
.filter(s => s.length > 0)
const res = stringPairs.map(s => {
const [x, y] = s.split(',').map(n => parseFloat(n, 10) / viewBoxScale).map(n => n.toFixed(2))
return `${x}% ${y}%`
}).join(', ')
console.log(`clip-path: polygon(${res});`)
@damascode
Copy link

Very cool. But if you have letters on the path it will not work.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment