CodePen Embed - The end

<div class="main">
  <div class="container">
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
    <div><div></div></div>
  </div>
</div>

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

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

.main {
  display: grid;
  grid-template-columns: repeat(auto-fit,calc(var(--s) + 2*var(--mh)));
  justify-content:center;
  --s: 80px; /* size */
  --r: 1.15; /* ratio */
  /* clip-path */
  --h: 0.5;  
  --v: 0.25; 
  --hc:40px;
  --vc:23px; 
  
  /*margin */
  --mv: 2px; /* vertical */
  --mh: calc(var(--mv) + (var(--s) - 2*var(--hc))/2); /* horizontal */
  /* for the float*/
  --f: calc(2*var(--s)*var(--r) + 4*var(--mv)  - 2*var(--vc) - 2px);
}

.container {
  grid-column: 1/-1;
  max-width:790px;
  margin:0 auto;
  font-size: 0; /*disable white space between inline block element */
  position:relative;
  padding-bottom:50px;
  filter:drop-shadow(2px 2px 1px #333)
}

.container::before{
  content: "";
  width: calc(var(--s)/2 + var(--mh));
  float: left;
  height: 120%;
  shape-outside: repeating-linear-gradient(     
                   transparent 0 calc(var(--f) - 2px),      
                   #fff        0 var(--f));
}

.container > div {
  width: var(--s);
  margin: var(--mv) var(--mh);
  height: calc(var(--s)*var(--r)); 
  display: inline-block;
  font-size:initial;
  vertical-align: top;
  --path:var(--hc) 0,100% var(--vc),100% calc(100% - var(--vc)), calc(100% - var(--hc)) 100%,0 calc(100% - var(--vc)),0 var(--vc);
  --t:0;
  --radius:50px;
  -webkit-mask:paint(rounded-shape);
  margin-bottom: calc(var(--mv) - var(--vc)); 
}

.container div div{
   height:100%;
   width:100%;
   margin:0;
  --t:1;
  --border:4px;
  -webkit-mask:paint(rounded-shape);
}


.container div div::before {
  padding-top:80px;
  content:"Thank you \A for reading";
  text-transform:uppercase;
  white-space:pre;
  font-size:75px;
  font-family:sans-serif;
  font-weight:bold;
  text-align:center;
  position:absolute;
  color:#fff;
  background:linear-gradient(45deg,#f03355,#25b09b);
  inset:0;
}

.container > div {
  animation:round 3s infinite;
}
.container > div div {
  animation:bor 3s infinite;
}
@for $i from 1 through 43 {
  .container > div:nth-child(#{$i}) {
     animation-delay:(2*random())*1s
  }
}
.container > div div {
  animation-delay:inherit;
}

@keyframes round{
  40%,60% {
    --radius:0;
  }
}
@keyframes bor{
  40%,60% {
    --border:45px;
  }
}

body  {
  background:#ccc;
}

View Compiled

registerPaint('rounded-shape', class  {

  static get inputProperties() {
    return [
      '--path',
      '--radius',
      '--border',
      '--t',
      '--dash'
    ]
  }
  
  paint(ctx, size, properties) {
    const points = properties.get('--path').toString().split(',');
    console.log(points);
    var Ppoints = [];
    var Cpoints = [];
    var Radius = [];
    const r = parseFloat(properties.get('--radius').value);
    const b = parseFloat(properties.get('--border').value);
    const d = properties.get('--dash').toString().split(',');
    const t = parseInt(properties.get('--t'));
    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);
      if(p[2])
        Radius.push(parseInt(p[2]));
      else
        Radius.push(r);
      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)]);
    }
    ctx.beginPath();
    ctx.moveTo(Cpoints[0][0],Cpoints[0][1]);
    var i;
    var rr;
    for (i = 0; i < (Cpoints.length - 1); i++) {
      var angle = Math.atan2(Cpoints[i+1][1] - Ppoints[i][1], 
                             Cpoints[i+1][0] - Ppoints[i][0]) -
                  Math.atan2(Cpoints[i][1] - Ppoints[i][1], 
                             Cpoints[i][0] - Ppoints[i][0]);
      if (angle < 0) {
        angle += (2*Math.PI)
      }
      if (angle > Math.PI) {
        angle = 2*Math.PI - angle
      }
      var distance = Math.min(Math.sqrt((Cpoints[i+1][1] - Ppoints[i][1]) ** 2 + 
                                        (Cpoints[i+1][0] - Ppoints[i][0]) ** 2),
                              Math.sqrt((Cpoints[i][1] - Ppoints[i][1]) ** 2 + 
                                        (Cpoints[i][0] - Ppoints[i][0]) ** 2));
      rr = Math.min(distance * Math.tan(angle/2),Radius[i]);
      ctx.arcTo(Ppoints[i][0], Ppoints[i][1], Cpoints[i+1][0],Cpoints[i+1][1], rr);
    }
  var angle = Math.atan2(Cpoints[0][1] - Ppoints[i][1], 
                             Cpoints[0][0] - Ppoints[i][0]) -
                  Math.atan2(Cpoints[i][1] - Ppoints[i][1], 
                             Cpoints[i][0] - Ppoints[i][0]);
   if (angle < 0) {
      angle += (2*Math.PI)
   }
   if (angle > Math.PI) {
      angle = 2*Math.PI - angle
   }
   var distance = Math.min(Math.sqrt((Cpoints[0][1] - Ppoints[i][1]) ** 2 + 
                                        (Cpoints[0][0] - Ppoints[i][0]) ** 2),
                              Math.sqrt((Cpoints[i][1] - Ppoints[i][1]) ** 2 + 
                                        (Cpoints[i][0] - Ppoints[i][0]) ** 2));
    rr = Math.min(distance * Math.tan(angle/2),Radius[i]);
    ctx.arcTo(Ppoints[i][0], Ppoints[i][1], Cpoints[0][0],Cpoints[0][1], rr);
    ctx.closePath();
    
    
    if(t==0) {
      ctx.fillStyle = '#000';
      ctx.fill();
    } else {
      ctx.setLineDash(d);
      ctx.lineWidth = 2*b;
      ctx.strokeStyle = '#000';
      ctx.stroke();
    }
  }

})

Run Pen

This Pen is owned by Temani Afif on CodePen.

See more by @t_afif on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.