Copy environment

Line Game

<div class="pattern-game pattern-game--inverse " data-type="LineGame" data-size="4" data-patternSize="24" data-dotColor="&#x23;e9e8e8" data-easing="easeInOutQuint" data-lineCap="round" data-lines="&#x5B;&#x7B;&quot;color&quot;&#x3A;&quot;&#x23;00bf9c&quot;,&quot;delay&quot;&#x3A;750,&quot;pause&quot;&#x3A;1000,&quot;points&quot;&#x3A;&#x5B;&#x5B;20,25&#x5D;,&#x5B;20,30&#x5D;,&#x5B;15,30&#x5D;&#x5D;&#x7D;,&#x7B;&quot;color&quot;&#x3A;&quot;&#x23;ff452d&quot;,&quot;easing&quot;&#x3A;&quot;easeOutQuart&quot;,&quot;speed&quot;&#x3A;0.02,&quot;delay&quot;&#x3A;1000,&quot;pause&quot;&#x3A;5000,&quot;wait&quot;&#x3A;1000,&quot;points&quot;&#x3A;&#x5B;&#x5B;75,75&#x5D;,&#x5B;75,85&#x5D;&#x5D;&#x7D;,&#x7B;&quot;points&quot;&#x3A;&#x5B;&#x5B;60,25&#x5D;,&#x5B;60,25&#x5D;,&#x5B;60,15&#x5D;&#x5D;&#x7D;,&#x7B;&quot;speed&quot;&#x3A;0.01,&quot;flip&quot;&#x3A;false,&quot;points&quot;&#x3A;&#x5B;&#x5B;0,&#x20;0&#x5D;,&#x20;&#x5B;0,&#x20;100&#x5D;,&#x20;&#x5B;100,&#x20;100&#x5D;,&#x20;&#x5B;100,&#x20;0&#x5D;,&#x20;&#x5B;0,&#x20;0&#x5D;&#x5D;&#x7D;,&#x7B;&quot;speed&quot;&#x3A;0.02,&quot;flip&quot;&#x3A;true,&quot;points&quot;&#x3A;&#x5B;&#x5B;10,&#x20;10&#x5D;,&#x20;&#x5B;10,&#x20;90&#x5D;,&#x20;&#x5B;90,&#x20;90&#x5D;,&#x20;&#x5B;90,&#x20;10&#x5D;,&#x20;&#x5B;10,&#x20;10&#x5D;&#x5D;&#x7D;,&#x7B;&quot;speed&quot;&#x3A;0.03,&quot;flip&quot;&#x3A;false,&quot;points&quot;&#x3A;&#x5B;&#x5B;45,&#x20;45&#x5D;,&#x20;&#x5B;45,&#x20;55&#x5D;,&#x20;&#x5B;55,&#x20;55&#x5D;,&#x20;&#x5B;55,&#x20;45&#x5D;,&#x20;&#x5B;45,&#x20;45&#x5D;&#x5D;&#x7D;&#x5D;">
    <svg class="pattern-game__pattern" xmlns="http://www.w3.org/2000/svg" fill="#000">    <defs>
        <pattern id="line-game" width="24" height="24" x="50%" y="50%" patternUnits="userSpaceOnUse">
                                            <circle cx="12" cy="12" r="2" fill="#e9e8e8" />
                    </pattern>
    </defs>
    <rect x="0" y="0" width="100%" height="100%" fill="url(#line-game)"></rect>
</svg>
    <canvas class="pattern-game__canvas"></canvas>

</div>
{
  "language": "en-US",
  "data": {
    "patternId": "line-game",
    "game": {
      "size": 4,
      "patternSize": 24,
      "dotColor": "#e9e8e8",
      "easing": "easeInOutQuint",
      "lineCap": "round",
      "lines": "[{\"color\":\"#00bf9c\",\"delay\":750,\"pause\":1000,\"points\":[[20,25],[20,30],[15,30]]},{\"color\":\"#ff452d\",\"easing\":\"easeOutQuart\",\"speed\":0.02,\"delay\":1000,\"pause\":5000,\"wait\":1000,\"points\":[[75,75],[75,85]]},{\"points\":[[60,25],[60,25],[60,15]]},{\"speed\":0.01,\"flip\":false,\"points\":[[0, 0], [0, 100], [100, 100], [100, 0], [0, 0]]},{\"speed\":0.02,\"flip\":true,\"points\":[[10, 10], [10, 90], [90, 90], [90, 10], [10, 10]]},{\"speed\":0.03,\"flip\":false,\"points\":[[45, 45], [45, 55], [55, 55], [55, 45], [45, 45]]}]"
    }
  }
}