JSFiddle - React, Tailwind, and code Playground

by Frank Liu

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .opacity-one {
        fill: url(#pattern-one);
      }
      .opacity-two {
        fill: url(#pattern-two);
      }
    </style>
  </head>
  <body>
    <h3> Fill </h3>
    <div class="container">
      <svg viewBox="0 0 800 800">
        <defs>
          <pattern id="pattern-one" viewBox="0, 0, 11, 11" width="15%" height="15%">
            <circle r="10" fill="green" />
          </pattern>
          <pattern id="pattern-two" viewBox="0, 0, 9, 9" width="15%" height="15%">
            <rect height="4" width="4" fill="red" />
          </pattern>
        </defs>
        <circle class="opacity-one" cx="150" cy="150" r="55" />
        <circle class="opacity-two" cx="300" cy="150" r="55" />
      </svg>
    </div>
  </body>
</html>