JSFiddle - React, Tailwind, and code Playground

by Richard Hunter

HTML

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<svg fill="blue" width="0" height="0">
  <defs>
    <path id="MyPath" fill="none" stroke="red" d="M0.025 0.225Q 0.225 0.225 0.225 0.113 0.225 0.025 0.125 0.025 0.025 0.025 0.025 0.100 0.025 0.175 0.113 0.175 0.175 0.175 0.188 0.125" />
  </defs>
  <clipPath clipPathUnits="objectBoundingBox" id="alpha">
  <defs></defs>
    <text>
      <textPath href="#MyPath">
        Quick brown fox jumps over the lazy dog.&#xD;
      </textPath>
    </text>
    
    <text x="0.050" y="0.250" font-size="0.100">&#xD;
      Hello World&#xD;
    </text>
    
    <rect x="0.025" y="0.050" width="0.250" height="0.125" />
    <polygon points="0.500 0.025 0.625 0.475 0.400 0.525" />
    <circle cx="0.750" cy="0.750" r="0.125" />
  </clipPath>
</svg>

<div class="foo"></div>
<div class="foo large"></div>

CSS

.foo {
  width: 100px;
  height: 100px;
  background: pink;
  clip-path: url(#alpha);
}
.large {
  width: 400px;
  height: 400px;
}