JSFiddle - React, Tailwind, and code Playground

HTML

<svg
	version="1.1"
    width="424.2mm"
    height="454.5mm"
    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">
           ...