JSFiddle - React, Tailwind, and code Playground

by nilloc

HTML

<svg viewBox="0 0 1 1" height="0" >
    <defs>
        <clipPath id="svgPath" clipPathUnits="objectBoundingBox"  preserveAspectRatio="xMidYMid meet">
            <circle r="0.05" cy="0.0625" cx="0.1625" />
            <circle r="0.09322" cy="0.29375" cx="0.2424" />
            <circle r="0.0587" cy="0.135" cx="0.933" />
            <circle r="0.0545" cy="0.8197" cx="0.8336" />
            <circle r="0.0439" cy="0.603" cx="0.3192" />
            <!-- this circles appear at corners of container -->
            <circle r="0.05" cy="1" cx="0"/>
            <circle r="0.05" cy="0" cx="0"/>
            <circle r="0.05" cy="1" cx="1"/>
            <circle transform="scale(0.5 0.5)" cx="1" cy="1" r="1"/>
        </clipPath>
    </defs>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1" height="0">
  <defs>
    <clipPath id="clip_circle" clipPathUnits="objectBoundingBox">
      <circle cx="1" cy="1" r="1" id="circle" transform="scale(0.5 0.5)"/>
    </clipPath>
  </defs>
</svg>


<svg width="0" height="0" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 51.2 (57519) - http://www.bohemiancoding.com/sketch -->
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <circle id="Oval" fill="#D8D8D8" cx="50" cy="50" r="50"></circle>
    </g>
</svg>

<br>
<div class="statement">tester</div>
<br>
<div class="statement">tester with more length</div>
<br>
<div class="statement">tester with more<br>
lines</div>

CSS

body{
  background-color:hsl(0,0%,80%);
}

.statement{
  --block-color:hsl(0,0%,50%);
  
  --notch-depth:6px;
  --notch-offset:14px;
  --notch-width:28px;
  
  --notch-corner-x1:1px;
  --notch-corner-y2:0.25px;
  --notch-corner-x3:0.7px;
  --notch-corner-y3:0.7px;
  
  --notch-x1:calc(var(--notch-offset) - var(--notch-corner-x1));
  --notch-y1:0px;
  --notch-x2:var(--notch-offset);
  --notch-y2:var(--notch-corner-y2);
  --notch-x3:calc(var(--notch-offset) + var(--notch-corner-x3));
  --notch-y3:var(--notch-corner-y3);
  
  --notch-x4:calc(var(--notch-offset) + var(--notch-depth) - var(--notch-corner-x3));
  --notch-y4:calc(var(--notch-depth) - var(--notch-corner-y3));
  --notch-x5:calc(var(--notch-offset) + var(--notch-depth));
  --notch-y5:calc(var(--notch-depth) - var(--notch-corner-y3));
  --notch-x6:calc(var(--notch-offset) + var(--notch-depth) + var(--notch-corner-x3));
  --notch-y6:var(--notch-depth);
  
  --notch-x7:calc(var(--notch-offset) + var(--notch-width) - var(--notch-corner-x1));
  --notch-y7:var(--notch-depth);
  --notch-x8:calc(var(--notch-offset) + var(--notch-width));
  --notch-y8:calc(var(--notch-depth) - var(--notch-corner-y3));
  --notch-x9:calc(var(--notch-offset) + var(--notch-width) + var(--notch-corner-x3));
  --notch-y9:calc(var(--notch-depth) - var(--notch-corner-y3));
  
  --notch-x10:calc(var(--notch-offset) + var(--notch-width) + var(--notch-depth) - var(--notch-corner-x1));
  --notch-y10:var(--notch-corner-y3);
  --notch-x11:calc(var(--notch-offset) + var(--notch-width) + var(--notch-depth));
  --notch-y11:var(--notch-corner-y2);
  --notch-x12:calc(var(--notch-offset) + var(--notch-width) + var(--notch-depth) + var(--notch-corner-x3));
  --notch-y12:0px;
  
  /* --notch-x2:calc(var(--notch-offset) + var(--notch-depth)); */
  /* --notch-x3:calc(var(--notch-offset) + var(--notch-depth) + var(--notch-width)); */
  /* --notch-x4:calc(var(--notch-offset) + var(--notch-depth) + var(--notch-width) + var(--notch-depth)); */
 ...