JSFiddle - React, Tailwind, and code Playground

by yoowordpress

JavaScript

// 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 = `M4275 8393 c-22 -2 -88 -13 -148 -24 -474 -88 -892 -396 -1111 -819 -32 -62 -316 -771 -686 -1715 -348 -885 -845 -2152 -1105 -2815 -497 -1266 -1161 -2959 -1176 -2997 l-9 -23 3490 0 3490 0 0 3849 0 3849 -32 11 c-18 5 -258 76 -533 156 -512 150 -672 197 -1280 378 -192 58 -384 112 -425 121 -144 31 -328 42 -475 29z`

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});`)