JSFiddle - React, Tailwind, and code Playground

HTML

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

    function shagModelirovanya(shezhAtomy, svobodniMin) {
      var atomK
      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) {
              shezhAtomy[mesto] = mesto;
            }
          }) 
      }
      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(7) })
        .join('')
        .split('')
        .map(function (digit) { return Number(digit)+27 })
    }

    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 =...