JSFiddle - React, Tailwind, and code Playground

HTML

<!--

-->

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="0 0 800 480" preserveAspectRatio="xMinYMin"
     title="SVG 2 patterns"
     style="font-size: 6pt; font-family: sans-serif"
     >
     <animate id="zoom" attributeName="viewBox" from="0 0 800 480" to="320 220 400 240" dur="2s" begin="click" fill="freeze"/>
     <animate attributeName="viewBox" from="320 220 400 240" to="0 0 800 480" dur="2s" begin="zoom.end + 2s" fill="freeze"/>


    <defs>
        <pattern x="0" y="0" width="10%" height="10%" id="squares" patternUnits="objectBoundingBox" patternContentUnits="userSpaceOnUse">
          <path d="M 0,0 l 10,10" stroke="blue" stroke-width="1"/>
        </pattern>

        <pattern x="0" y="0" width="0.1" height="0.1" id="squares2" patternUnits="objectBoundingBox" patternContentUnits="objectBoundingBox">
          <path d="M 0,0 l 10,10" stroke="red" stroke-width="0.01"/>
        </pattern>

        <pattern x="0" y="0" width="10" height="10" id="squares3" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse">
          <path d="M 0,0 l 10,10" stroke="green" stroke-width="1"/>
        </pattern>
        
        <pattern x="0" y="0" width="10" height="10" id="squares4" patternUnits="userSpaceOnUse" patternContentUnits="objectBoundingBox">
          <path d="M 0,0 l 1,1" stroke="orange" stroke-width="0.01"/>
        </pattern>
        
        <pattern x="0" y="0" width="10%" height="10%" id="squares_nss" patternUnits="objectBoundingBox" patternContentUnits="userSpaceOnUse">
          <path d="M 0,0 l 10,10" stroke="blue" stroke-width="1" vector-effect="non-scaling-stroke"/>
        </pattern>

        <pattern x="0" y="0" width="0.1" height="0.1" id="squares_nss_2" patternUnits="objectBoundingBox" patternContentUnits="objectBoundingBox">
          <path d="M 0,0 l 10,10" stroke="red" stroke-width="0.01" vector-effect="non-scaling-stroke"/>
        </pattern>

        <pattern x="0" y="0"...