JSFiddle - React, Tailwind, and code Playground

HTML

<svg version="1.1" viewbox="0 0 424.2mm 454.55mm" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>Go Board Surface</title>

  <defs>
    <filter id="woodGrain">
      <feTurbulence type="turbulence" baseFrequency="0.16,0.0008" numOctaves="1" result="noise2" seed="3" stitchTiles="stitch" />
      <feColorMatrix in="noise2" type="matrix" values="-0.2126 -0.7152 -0.0722 0 0
					 -0.2126 -0.7152 -0.0722 0 0
					 -0.2126 -0.7152 -0.0722 0 0
					 0 0 0 0.2 0" result="tint2" />

      <feTurbulence type="turbulence" baseFrequency="0.001" numOctaves="4" result="noise3" seed="76543" stitchTiles="stitch" />

      <feDisplacementMap in="tint2" in2="noise3" scale="12.5" xChannelSelector="R" yChannelSelector="G" result="grainy" />

      <feMerge result="basicGrain">
        <feMergeNode in="SourceGraphic" />
        <feMergeNode in="grainy" />
      </feMerge>
    </filter>

    <pattern id="grid-horizontal-lines" x="13.6mm" y="13.45mm" width="22mm" height="23.7mm" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse">
      <line x1="0mm" y1="0.5mm" x2="22mm" y2="0.5mm" stroke="black" stroke-width="1mm" />
    </pattern>

    <pattern id="grid-vertical-lines" x="13.6mm" y="13.45mm" width="22mm" height="23.7mm" patternUnits="userSpaceOnUse" patternContentUnits="userSpaceOnUse">
      <line x1="0.5mm" y1="0mm" x2="0.5mm" y2="23.7mm" stroke="black" stroke-width="1mm" />
    </pattern>

    <g id="star">
      <circle cx="0.5mm" cy="0.5mm" r="2mm" fill="black" />
    </g>

    <g id="white-stone">
      <circle cx="0.5mm" cy="0.5mm" r="11.05mm" fill="rgb(228,227,206)" filter="url(#lighting)" />
    </g>

    <g id="black-stone">
      <circle cx="0.5mm" cy="0.5mm" r="11.1mm" fill="rgb(34,29,21)" filter="url(#lighting)" />
    </g>

    <filter id="lighting">
      <feGaussianBlur in="SourceGraphic" stdDeviation="3" out="bump" />

      <feDiffuseLighting in="bump" result="diffuse" lighting-color="white">
       ...