JSFiddle - React, Tailwind, and code Playground

by Richard Hunter

HTML

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<svg fill="blue" width="400" height="400">
  <clipPath id="alpha">
    <rect x="0.025" y="0.050" width="0.250" height="0.125"/>
    <text x="0.050" y="0.250" font-size="0.100">&#xD;
      Hello World&#xD;
    </text>
    <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>

CSS

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