JSFiddle - React, Tailwind, and code Playground

by joepenzo

HTML

<div class="hexagone" style="--path:25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%"></div>
<div class="triangle" style="--path:50% 0%, 0% 100%, 100% 100%;background:url(https://picsum.photos/id/1061/300/300) center/cover;"></div>
<div class="star" style="--path:50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%;background:gold"></div>
<div class="arrow" style="--path:40% 0%, 40% 35%, 100% 35%, 100% 65%, 40% 65%, 40% 100%, 0% 50%;background:green"></div>
<div class="custom" style="--path:50% 0%, 50% 50%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%;background: conic-gradient(at 53% 47%, orange,pink,purple);"></div>

<script>
if (CSS.paintWorklet) {              
	CSS.paintWorklet.addModule('/t_afif/pen/abwMNXw.js');
} else {
  alert("Your browser cannot run this demo. Consider Chrome or Edge instead")
}
</script>

CSS

@property --radius{
  syntax: '<length>';
  inherits: true;
  initial-value: 0;
}

div[class] {
  display:inline-block;
  width:150px;
  cursor:pointer;
  background:red;
  margin:20px;
  --radius:5px;
  transition:--radius .3s;
  clip-path:polygon(var(--path));
  -webkit-mask:paint(rounded-shape);
}
div[class]:hover {
  --radius:15px;
}
div[class]::before {
   content:"";
   display:block;
}

.hexagone::before,
.triangle::before{
   padding-top:86.6%;
}
.star::before,
.custom::before{
   padding-top:100%;
}
.arrow::before {
   padding-top:70%;
}

JavaScript

console.log('test');
registerPaint('rounded-shape', class {

  static get inputProperties() {
    return [
      '--path',
      '--radius',
      '--border',
      '--dash'
    ]
  }

  paint(ctx, size, properties) {

    const points = properties.get('--path').toString().split(',');
    var Ppoints = [];
    var Cpoints = [];
    const r = parseFloat(properties.get('--radius').value);
    const w = size.width;
    const h = size.height;

    const cc = function(x, y) {
      var fx = 0,
        fy = 0;
      if (x.indexOf('calc') > -1) {
        var tmp = x.replace('calc(', '').replace(')', '');
        if (tmp.indexOf('+') > -1) {
          tmp = tmp.split('+');
          fx = (parseFloat(tmp[0]) / 100) * w + parseFloat(tmp[1]);
        } else {
          tmp = tmp.split('-');
          fx = (parseFloat(tmp[0]) / 100) * w - parseFloat(tmp[1]);
        }
      } else if (x.indexOf('%') > -1) {
        fx = (parseFloat(x) / 100) * w;
      } else if (x.indexOf('px') > -1) {
        fx = parseFloat(x);
      }

      if (y.indexOf('calc') > -1) {
        var tmp = y.replace('calc(', '').replace(')', '');
        if (tmp.indexOf('+') > -1) {
          tmp = tmp.split('+');
          fy = (parseFloat(tmp[0]) / 100) * h + parseFloat(tmp[1]);
        } else {
          tmp = tmp.split('-');
          fy = (parseFloat(tmp[0]) / 100) * h - parseFloat(tmp[1]);
        }
      } else if (y.indexOf('%') > -1) {
        fy = (parseFloat(y) / 100) * h;
      } else if (y.indexOf('px') > -1) {
        fy = parseFloat(y);
      }
      return [fx, fy];
    }

    var N = points.length;
    for (var i = 0; i < N; i++) {
      var j = i - 1;
      if (j < 0) j = N - 1;

      var p = points[i].trim().split(/(?!\(.*)\s(?![^(]*?\))/g);
      p = cc(p[0], p[1]);
      Ppoints.push([p[0], p[1]]);
      var pj = points[j].trim().split(/(?!\(.*)\s(?![^(]*?\))/g);
      pj = cc(pj[0], pj[1]);
      Cpoints.push([p[0] - ((p[0] - pj[0]) / 2), p[1] - ((p[1] - pj[1]) / 2)]);
    }
   ...