JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <svg class="snezhinki"></svg>
  <script>
    function daiOkrestnost(tochka) {
      return [
          [tochka[0],   tochka[1]+2],
          [tochka[0],   tochka[1]-2],
          [tochka[0]+1, tochka[1]+1],
          [tochka[0]+1, tochka[1]-1],
          [tochka[0]-1, tochka[1]+1],
          [tochka[0]-1, tochka[1]-1]
      ]
    }

    function shagModelirovanya(shezhAtomy, svobodniMin) {
      var atomK, newAtomy = {}
      for (atomK in shezhAtomy) {
        var orkestnost = daiOkrestnost(shezhAtomy[atomK])
          , mesta = orkestnost
            .filter(function (coodrs) { return !shezhAtomy[coodrs] })
          mesta.forEach(function (mesto) {
             var svobodni = daiOkrestnost(mesto)
                .map(function (mesto1) { return daiOkrestnost(mesto1) })
                .reduce(function (ret, m) { return ret.concat(m) }, [])
                .filter(function (coodrs) { return !shezhAtomy[coodrs] })
            if (svobodni.length >= svobodniMin) {
              newAtomy[mesto] = mesto;
            }
          })
      }
      for (atomK in newAtomy)
        shezhAtomy[atomK] = newAtomy[atomK]
      return shezhAtomy
    }
  </script>
  <script>
    var pageSize    = 500
      , currY       = -pageSize/2   
      , shezhAtomR  = 3;

    function tY(n) { return currY+n*shezhAtomR; }

    function tX(n) { return (pageSize/2)+n*2*0.866*shezhAtomR; }

    function slovoVShagi(slovo) {
      return slovo
        .split('')
        .map(function (ch) { return ch.charCodeAt(0).toString(6) })
        .join('')
        .split('')
        .map(function (digit) { return Number(digit)+28 })
    }

    var polotno = d3.select(".snezhinki")
        .attr("width",  pageSize)
        .attr("height", pageSize);

    var classI = 1

    function drawSnezhinka (slovo, ret) {

        var conditions = slovoVShagi(slovo)
    
        var snezhAtomy = {}
        snezhAtomy[[0,0]] = [0,0] 

        var currClass = 'class'+(classI++)

        function...