Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                
<body onload="init()">
<!--background canvas image-->
   <canvas id="canvas" width="800" height="600"></canvas>
 
<!--Hover expand clippaths/circles/images-->
<svg class="svg-graphic" width="800" height="600" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" version="1.1">
    <defs>
      <clipPath id="clippath">
      <circle class="clip" cx="200" cy="200" r="15"/>
      <circle class="clip" cx="600" cy="200" r="20"/>  
      </clipPath>
    </defs>
    <image class="svg-image" xlink:href="http://www.placecage.com/gif/300/300" width="300" height="300" x="40" y="80"/>
    <circle class="circle"  fill="#CC66FF" cx="200" cy="200" r="30"/>
    
    <image class="svg-image" xlink:href="http://www.fillmurray.com/300/300" width="300" height="300" x="440" y="80"/>
    <circle class="circle" fill="#CC66FF" cx="600" cy="200" r="30"/>
  </svg>

<!--Overlay-->

<button id="trigger" type="button">Open Overlay</button>
<image id="close" src="http://www.placecage.com/gif/100/100"/>    
<svg id="overlay" preserveAspectRatio="none" width="100%" height="100%" viewBox="0 0 600 600">
  <path id="open" d='M0,0 L600,0 L600,600 L0,600 Z'  fill="#BBE8FF" opacity="0.75"/>
  <path id="closed" d="M0,0 L600,0 L600,600 L600,0 z" fill="#BBE8FF" opacity="0.75"/>
</svg>

 </body>
              
            
!

CSS

              
                *{
	box-sizing:border-box;
}

body{
	margin:0;
	padding:0	
}

#canvas {
  display: block;
  position: absolute;
}

/*Hover expand circles/images*/

.circle{	    
  position:absolute;
  margin:0;
  z-index: 4;
  clip-path: url("#clippath");
}

.svg-image {
  z-index: 4;
  clip-path: url(#clippath);
}

svg{
  display: block;
  position: absolute;
	overflow: visible;
}

.svg-graphic {
  position: absolute;
  z-index: 4;
}

.imgContainer {
  position: relative;
  z-index: 4;
}

/*Overlay styles*/
/*#overlay{
  z-index:4;
}*/

#open {
   visibility: hidden;
   z-index: 1;
}

#trigger {
  display: block;
  position: absolute;
  margin: 0 auto;
  z-index: 5;
}

#close {
  display: block;
  position: absolute;
  opacity: 0;
  top: 0px;
  right: 0px;
  margin: 0 auto;
  z-index: 5;
}

              
            
!

JS

              
                //Hover expand circles/clippaths

var clips = document.getElementsByClassName('clip');
var circles = document.getElementsByClassName('circle');
var numClips = clips.length;

//CANVAS

//on init draw canvas
function init() {

  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");

  draw(ctx);
}

//canvas draw function
function draw(ctx) {

  var gradient;

  // back/Group
  ctx.save();

  // back/Group/Path
  ctx.save();
  ctx.beginPath();
  ctx.moveTo(134.0, 89.8);
  ctx.lineTo(122.8, 135.9);
  ctx.lineTo(87.6, 112.8);
  ctx.lineTo(134.0, 89.8);
  ctx.closePath();
  ctx.save();
  ctx.transform(7.639, -0.042, 0.041, 7.550, -564.3, -5331.4);
  gradient = ctx.createLinearGradient(81.8, 725.0, 87.9, 718.9);
  gradient.addColorStop(0.00, "rgb(255, 255, 255)");
  gradient.addColorStop(1.00, "rgb(162, 233, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(373.8, 183.2);
  ctx.lineTo(376.8, 144.8);
  ctx.lineTo(346.0, 161.2);
  ctx.lineTo(373.8, 183.2);
  ctx.closePath();
  ctx.save();
  ctx.transform(5.063, -0.028, 0.034, 6.307, -517.1, -4453.1);
  gradient = ctx.createLinearGradient(166.0, 736.4, 172.1, 730.3);
  gradient.addColorStop(0.00, "rgb(0, 2, 200)");
  gradient.addColorStop(1.00, "rgb(2, 31, 245)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(377.6, 195.1);
  ctx.lineTo(376.8, 144.8);
  ctx.lineTo(373.8, 183.2);
  ctx.lineTo(377.6, 195.1);
  ctx.closePath();
  ctx.save();
  ctx.transform(0.622, -0.003, 0.045, 8.261, -520.0, -5819.1);
  gradient = ctx.createLinearGradient(1385.8, 729.8, 1391.9, 723.7);
  gradient.addColorStop(0.00, "rgb(119, 206, 255)");
  gradient.addColorStop(1.00, "rgb(64, 93, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(11.5, 168.4);
  ctx.lineTo(2.5, 180.9);
  ctx.lineTo(-0.0, 134.9);
  ctx.lineTo(11.5, 168.4);
  ctx.closePath();
  ctx.save();
  ctx.transform(1.865, -0.010, 0.041, 7.550, -578.6, -5324.0);
  gradient = ctx.createLinearGradient(293.8, 729.1, 299.9, 723.0);
  gradient.addColorStop(0.00, "rgb(114, 202, 255)");
  gradient.addColorStop(1.00, "rgb(206, 255, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(20.4, 197.1);
  ctx.lineTo(37.6, 188.3);
  ctx.lineTo(11.5, 168.4);
  ctx.lineTo(20.4, 197.1);
  ctx.closePath();
  ctx.save();
  ctx.transform(4.264, -0.023, 0.026, 4.708, -565.8, -3331.6);
  gradient = ctx.createLinearGradient(130.5, 749.7, 136.6, 743.6);
  gradient.addColorStop(0.00, "rgb(247, 255, 255)");
  gradient.addColorStop(1.00, "rgb(255, 255, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(20.4, 197.1);
  ctx.lineTo(11.5, 168.4);
  ctx.lineTo(2.5, 180.9);
  ctx.lineTo(20.4, 197.1);
  ctx.closePath();
  ctx.save();
  ctx.transform(2.931, -0.016, 0.026, 4.708, -567.4, -3331.6);
  gradient = ctx.createLinearGradient(188.5, 750.9, 194.6, 744.8);
  gradient.addColorStop(0.00, "rgb(226, 255, 255)");
  gradient.addColorStop(1.00, "rgb(247, 255, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(52.6, 138.4);
  ctx.lineTo(11.5, 168.4);
  ctx.lineTo(-0.0, 134.9);
  ctx.lineTo(52.6, 138.4);
  ctx.closePath();
  ctx.save();
  ctx.transform(8.616, -0.047, 0.030, 5.507, -570.8, -3895.9);
  gradient = ctx.createLinearGradient(62.5, 737.3, 68.6, 731.2);
  gradient.addColorStop(0.00, "rgb(117, 204, 255)");
  gradient.addColorStop(1.00, "rgb(87, 200, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(52.6, 138.4);
  ctx.lineTo(37.3, 119.6);
  ctx.lineTo(-0.0, 134.9);
  ctx.lineTo(52.6, 138.4);
  ctx.closePath();
  ctx.save();
  ctx.transform(8.616, -0.047, 0.017, 3.109, -561.6, -2221.9);
  gradient = ctx.createLinearGradient(64.8, 761.4, 70.9, 755.3);
  gradient.addColorStop(0.00, "rgb(3, 68, 252)");
  gradient.addColorStop(1.00, "rgb(0, 79, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(52.6, 138.4);
  ctx.lineTo(37.6, 188.3);
  ctx.lineTo(11.5, 168.4);
  ctx.lineTo(52.6, 138.4);
  ctx.closePath();
  ctx.save();
  ctx.transform(6.751, -0.037, 0.045, 8.172, -579.1, -5758.0);
  gradient = ctx.createLinearGradient(83.0, 728.4, 89.1, 722.3);
  gradient.addColorStop(0.00, "rgb(255, 255, 255)");
  gradient.addColorStop(1.00, "rgb(151, 240, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(26.4, 108.2);
  ctx.lineTo(1.0, 111.7);
  ctx.lineTo(-0.0, 134.9);
  ctx.lineTo(26.4, 108.2);
  ctx.closePath();
  ctx.save();
  ctx.transform(4.353, -0.024, 0.024, 4.353, -566.4, -3093.1);
  gradient = ctx.createLinearGradient(124.8, 741.0, 130.9, 734.9);
  gradient.addColorStop(0.00, "rgb(13, 112, 255)");
  gradient.addColorStop(1.00, "rgb(4, 97, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(26.4, 108.2);
  ctx.lineTo(37.3, 119.6);
  ctx.lineTo(-0.0, 134.9);
  ctx.lineTo(26.4, 108.2);
  ctx.closePath();
  ctx.save();
  ctx.transform(6.129, -0.033, 0.024, 4.353, -566.4, -3093.0);
  gradient = ctx.createLinearGradient(89.7, 742.5, 95.8, 736.4);
  gradient.addColorStop(0.00, "rgb(3, 74, 252)");
  gradient.addColorStop(1.00, "rgb(6, 102, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(26.4, 108.2);
  ctx.lineTo(37.7, 92.5);
  ctx.lineTo(1.0, 111.7);
  ctx.lineTo(26.4, 108.2);
  ctx.closePath();
  ctx.save();
  ctx.transform(6.040, -0.033, 0.017, 3.109, -561.5, -2226.4);
  gradient = ctx.createLinearGradient(91.8, 753.8, 97.9, 747.7);
  gradient.addColorStop(0.00, "rgb(6, 109, 255)");
  gradient.addColorStop(1.00, "rgb(31, 155, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(48.6, 109.2);
  ctx.lineTo(37.3, 119.6);
  ctx.lineTo(26.4, 108.2);
  ctx.lineTo(48.6, 109.2);
  ctx.closePath();
  ctx.save();
  ctx.transform(3.642, -0.020, 0.010, 1.865, -552.5, -1354.5);
  gradient = ctx.createLinearGradient(156.0, 791.2, 162.1, 785.1);
  gradient.addColorStop(0.00, "rgb(60, 183, 255)");
  gradient.addColorStop(1.00, "rgb(104, 214, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(48.6, 109.2);
  ctx.lineTo(37.7, 92.5);
  ctx.lineTo(26.4, 108.2);
  ctx.lineTo(48.6, 109.2);
  ctx.closePath();
  ctx.save();
  ctx.transform(3.642, -0.020, 0.015, 2.754, -555.9, -1978.0);
  gradient = ctx.createLinearGradient(157.5, 760.0, 163.6, 753.9);
  gradient.addColorStop(0.00, "rgb(62, 183, 255)");
  gradient.addColorStop(1.00, "rgb(112, 214, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(48.6, 109.2);
  ctx.lineTo(52.6, 138.4);
  ctx.lineTo(37.3, 119.6);
  ctx.lineTo(48.6, 109.2);
  ctx.closePath();
  ctx.save();
  ctx.transform(2.487, -0.014, 0.026, 4.797, -561.9, -3403.4);
  gradient = ctx.createLinearGradient(233.7, 739.6, 239.8, 733.5);
  gradient.addColorStop(0.00, "rgb(60, 192, 255)");
  gradient.addColorStop(1.00, "rgb(53, 190, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(48.6, 109.2);
  ctx.lineTo(87.6, 112.8);
  ctx.lineTo(52.6, 138.4);
  ctx.lineTo(48.6, 109.2);
  ctx.closePath();
  ctx.save();
  ctx.transform(6.396, -0.035, 0.026, 4.797, -560.1, -3403.4);
  gradient = ctx.createLinearGradient(90.8, 737.7, 96.9, 731.6);
  gradient.addColorStop(0.00, "rgb(62, 200, 255)");
  gradient.addColorStop(1.00, "rgb(255, 255, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(78.9, 100.4);
  ctx.lineTo(134.0, 89.8);
  ctx.lineTo(87.6, 112.8);
  ctx.lineTo(78.9, 100.4);
  ctx.closePath();
  ctx.save();
  ctx.transform(9.060, -0.049, 0.020, 3.731, -551.0, -2661.4);
  gradient = ctx.createLinearGradient(67.3, 743.9, 73.4, 737.8);
  gradient.addColorStop(0.00, "rgb(255, 255, 255)");
  gradient.addColorStop(1.00, "rgb(132, 225, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(78.9, 100.4);
  ctx.lineTo(48.6, 109.2);
  ctx.lineTo(37.7, 92.5);
  ctx.lineTo(78.9, 100.4);
  ctx.closePath();
  ctx.save();
  ctx.transform(6.751, -0.037, 0.015, 2.754, -554.0, -1978.1);
  gradient = ctx.createLinearGradient(85.2, 758.4, 91.3, 752.3);
  gradient.addColorStop(0.00, "rgb(110, 213, 255)");
  gradient.addColorStop(1.00, "rgb(213, 255, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(78.9, 100.4);
  ctx.lineTo(87.6, 112.8);
  ctx.lineTo(48.6, 109.2);
  ctx.lineTo(78.9, 100.4);
  ctx.closePath();
  ctx.save();
  ctx.transform(6.396, -0.035, 0.011, 2.043, -549.6, -1480.0);
  gradient = ctx.createLinearGradient(93.2, 782.4, 99.3, 776.3);
  gradient.addColorStop(0.00, "rgb(235, 255, 255)");
  gradient.addColorStop(1.00, "rgb(255, 255, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(89.8, 126.8);
  ctx.lineTo(122.8, 135.9);
  ctx.lineTo(87.6, 112.8);
  ctx.lineTo(89.8, 126.8);
  ctx.closePath();
  ctx.save();
  ctx.transform(5.774, -0.032, 0.021, 3.820, -549.9, -2719.8);
  gradient = ctx.createLinearGradient(107.7, 748.6, 113.8, 742.5);
  gradient.addColorStop(0.00, "rgb(110, 213, 255)");
  gradient.addColorStop(1.00, "rgb(213, 255, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(89.8, 126.8);
  ctx.lineTo(87.6, 112.8);
  ctx.lineTo(52.6, 138.4);
  ctx.lineTo(89.8, 126.8);
  ctx.closePath();
  ctx.save();
  ctx.transform(6.129, -0.033, 0.023, 4.175, -557.1, -2968.1);
  gradient = ctx.createLinearGradient(97.4, 745.6, 103.5, 739.5);
  gradient.addColorStop(0.00, "rgb(73, 204, 255)");
  gradient.addColorStop(1.00, "rgb(255, 255, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(72.1, 160.5);
  ctx.lineTo(52.6, 138.4);
  ctx.lineTo(37.6, 188.3);
  ctx.lineTo(72.1, 160.5);
  ctx.closePath();
  ctx.save();
  ctx.transform(5.685, -0.031, 0.045, 8.172, -574.9, -5758.0);
  gradient = ctx.createLinearGradient(101.9, 727.8, 107.9, 721.7);
  gradient.addColorStop(0.00, "rgb(255, 255, 255)");
  gradient.addColorStop(1.00, "rgb(54, 190, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(72.1, 160.5);
  ctx.lineTo(89.8, 126.8);
  ctx.lineTo(52.6, 138.4);
  ctx.lineTo(72.1, 160.5);
  ctx.closePath();
  ctx.save();
  ctx.transform(6.129, -0.033, 0.030, 5.507, -562.2, -3897.2);
  gradient = ctx.createLinearGradient(96.5, 737.2, 102.6, 731.1);
  gradient.addColorStop(0.00, "rgb(15, 158, 255)");
  gradient.addColorStop(1.00, "rgb(125, 230, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(99.8, 164.7);
  ctx.lineTo(89.8, 126.8);
  ctx.lineTo(72.1, 160.5);
  ctx.lineTo(99.8, 164.7);
  ctx.closePath();
  ctx.save();
  ctx.transform(4.530, -0.025, 0.034, 6.218, -561.7, -4393.9);
  gradient = ctx.createLinearGradient(135.4, 734.7, 141.5, 728.6);
  gradient.addColorStop(0.00, "rgb(48, 194, 255)");
  gradient.addColorStop(1.00, "rgb(114, 225, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(99.8, 164.7);
  ctx.lineTo(122.8, 135.9);
  ctx.lineTo(89.8, 126.8);
  ctx.lineTo(99.8, 164.7);
  ctx.closePath();
  ctx.save();
  ctx.transform(5.418, -0.030, 0.034, 6.218, -558.7, -4393.9);
  gradient = ctx.createLinearGradient(114.1, 732.6, 120.2, 726.5);
  gradient.addColorStop(0.00, "rgb(255, 255, 255)");
  gradient.addColorStop(1.00, "rgb(171, 252, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(126.4, 172.7);
  ctx.lineTo(111.3, 190.6);
  ctx.lineTo(99.8, 164.7);
  ctx.lineTo(126.4, 172.7);
  ctx.closePath();
  ctx.save();
  ctx.transform(4.353, -0.024, 0.023, 4.264, -549.7, -3021.7);
  gradient = ctx.createLinearGradient(144.3, 753.4, 150.4, 747.3);
  gradient.addColorStop(0.00, "rgb(20, 166, 255)");
  gradient.addColorStop(1.00, "rgb(104, 218, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(126.4, 172.7);
  ctx.lineTo(122.8, 135.9);
  ctx.lineTo(99.8, 164.7);
  ctx.lineTo(126.4, 172.7);
  ctx.closePath();
  ctx.save();
  ctx.transform(4.353, -0.024, 0.033, 6.040, -556.4, -4268.3);
  gradient = ctx.createLinearGradient(146.4, 737.0, 152.5, 730.9);
  gradient.addColorStop(0.00, "rgb(34, 180, 255)");
  gradient.addColorStop(1.00, "rgb(123, 226, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(126.4, 172.7);
  ctx.lineTo(156.8, 203.4);
  ctx.lineTo(111.3, 190.6);
  ctx.lineTo(126.4, 172.7);
  ctx.closePath();
  ctx.save();
  ctx.transform(7.461, -0.041, 0.028, 5.063, -550.9, -3579.3);
  gradient = ctx.createLinearGradient(86.5, 748.3, 92.6, 742.2);
  gradient.addColorStop(0.00, "rgb(141, 213, 255)");
  gradient.addColorStop(1.00, "rgb(79, 190, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(139.1, 140.2);
  ctx.lineTo(126.4, 172.7);
  ctx.lineTo(122.8, 135.9);
  ctx.lineTo(139.1, 140.2);
  ctx.closePath();
  ctx.save();
  ctx.transform(2.665, -0.015, 0.033, 6.040, -552.6, -4268.3);
  gradient = ctx.createLinearGradient(243.2, 734.6, 249.3, 728.5);
  gradient.addColorStop(0.00, "rgb(255, 255, 255)");
  gradient.addColorStop(1.00, "rgb(190, 255, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(147.7, 114.6);
  ctx.lineTo(134.0, 89.8);
  ctx.lineTo(122.8, 135.9);
  ctx.lineTo(147.7, 114.6);
  ctx.closePath();
  ctx.save();
  ctx.transform(4.086, -0.022, 0.041, 7.550, -558.5, -5331.4);
  gradient = ctx.createLinearGradient(159.4, 724.6, 165.5, 718.5);
  gradient.addColorStop(0.00, "rgb(255, 255, 255)");
  gradient.addColorStop(1.00, "rgb(162, 233, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(147.7, 114.6);
  ctx.lineTo(139.1, 140.2);
  ctx.lineTo(122.8, 135.9);
  ctx.lineTo(147.7, 114.6);
  ctx.closePath();
  ctx.save();
  ctx.transform(4.086, -0.022, 0.023, 4.175, -545.5, -2967.8);
  gradient = ctx.createLinearGradient(160.2, 746.0, 166.3, 740.0);
  gradient.addColorStop(0.00, "rgb(62, 200, 255)");
  gradient.addColorStop(1.00, "rgb(255, 255, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(147.7, 114.6);
  ctx.lineTo(186.1, 113.9);
  ctx.lineTo(134.0, 89.8);
  ctx.lineTo(147.7, 114.6);
  ctx.closePath();
  ctx.save();
  ctx.transform(8.527, -0.047, 0.022, 4.086, -543.4, -2909.9);
  gradient = ctx.createLinearGradient(77.5, 741.1, 83.6, 735.0);
  gradient.addColorStop(0.00, "rgb(47, 173, 255)");
  gradient.addColorStop(1.00, "rgb(255, 255, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(163.0, 150.8);
  ctx.lineTo(139.1, 140.2);
  ctx.lineTo(126.4, 172.7);
  ctx.lineTo(163.0, 150.8);
  ctx.closePath();
  ctx.save();
  ctx.transform(6.040, -0.033, 0.029, 5.330, -549.4, -3770.9);
  gradient = ctx.createLinearGradient(107.8, 740.1, 113.9, 734.0);
  gradient.addColorStop(0.00, "rgb(117, 223, 255)");
  gradient.addColorStop(1.00, "rgb(255, 255, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(163.0, 150.8);
  ctx.lineTo(156.8, 203.4);
  ctx.lineTo(126.4, 172.7);
  ctx.lineTo(163.0, 150.8);
  ctx.closePath();
  ctx.save();
  ctx.transform(6.040, -0.033, 0.047, 8.616, -561.9, -6066.4);
  gradient = ctx.createLinearGradient(108.7, 728.5, 114.8, 722.4);
  gradient.addColorStop(0.00, "rgb(8, 137, 255)");
  gradient.addColorStop(1.00, "rgb(190, 255, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(189.5, 138.2);
  ctx.lineTo(221.8, 106.1);
  ctx.lineTo(186.1, 113.9);
  ctx.lineTo(189.5, 138.2);
  ctx.closePath();
  ctx.save();
  ctx.transform(5.863, -0.032, 0.029, 5.241, -539.2, -3714.4);
  gradient = ctx.createLinearGradient(119.1, 734.8, 125.2, 728.7);
  gradient.addColorStop(0.00, "rgb(255, 255, 255)");
  gradient.addColorStop(1.00, "rgb(192, 242, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(186.5, 184.8);
  ctx.lineTo(163.0, 150.8);
  ctx.lineTo(156.8, 203.4);
  ctx.lineTo(186.5, 184.8);
  ctx.closePath();
  ctx.save();
  ctx.transform(4.886, -0.027, 0.047, 8.616, -557.0, -6066.4);
  gradient = ctx.createLinearGradient(138.9, 727.9, 145.0, 721.8);
  gradient.addColorStop(0.00, "rgb(132, 207, 255)");
  gradient.addColorStop(1.00, "rgb(151, 225, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(186.5, 184.8);
  ctx.lineTo(189.5, 138.2);
  ctx.lineTo(163.0, 150.8);
  ctx.lineTo(186.5, 184.8);
  ctx.closePath();
  ctx.save();
  ctx.transform(4.353, -0.024, 0.042, 7.639, -552.1, -5385.5);
  gradient = ctx.createLinearGradient(157.6, 729.9, 163.7, 723.8);
  gradient.addColorStop(0.00, "rgb(8, 137, 255)");
  gradient.addColorStop(1.00, "rgb(190, 255, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(186.5, 184.8);
  ctx.lineTo(226.6, 199.2);
  ctx.lineTo(220.3, 226.3);
  ctx.lineTo(186.5, 184.8);
  ctx.closePath();
  ctx.save();
  ctx.transform(6.573, -0.036, 0.037, 6.840, -545.2, -4819.0);
  gradient = ctx.createLinearGradient(106.9, 738.0, 113.0, 731.9);
  gradient.addColorStop(0.00, "rgb(214, 255, 255)");
  gradient.addColorStop(1.00, "rgb(48, 132, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(219.9, 159.2);
  ctx.lineTo(189.5, 138.2);
  ctx.lineTo(186.5, 184.8);
  ctx.lineTo(219.9, 159.2);
  ctx.closePath();
  ctx.save();
  ctx.transform(5.507, -0.030, 0.042, 7.639, -548.3, -5385.5);
  gradient = ctx.createLinearGradient(127.2, 729.0, 133.3, 722.9);
  gradient.addColorStop(0.00, "rgb(142, 240, 255)");
  gradient.addColorStop(1.00, "rgb(150, 235, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(219.9, 159.2);
  ctx.lineTo(226.6, 199.2);
  ctx.lineTo(186.5, 184.8);
  ctx.lineTo(219.9, 159.2);
  ctx.closePath();
  ctx.save();
  ctx.transform(6.573, -0.036, 0.036, 6.573, -544.3, -4637.0);
  gradient = ctx.createLinearGradient(108.1, 737.3, 114.2, 731.2);
  gradient.addColorStop(0.00, "rgb(204, 255, 255)");
  gradient.addColorStop(1.00, "rgb(36, 123, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(219.9, 159.2);
  ctx.lineTo(221.8, 106.1);
  ctx.lineTo(189.5, 138.2);
  ctx.lineTo(219.9, 159.2);
  ctx.closePath();
  ctx.save();
  ctx.transform(5.330, -0.029, 0.047, 8.705, -551.9, -6135.9);
  gradient = ctx.createLinearGradient(133.5, 724.4, 139.6, 718.3);
  gradient.addColorStop(0.00, "rgb(255, 255, 255)");
  gradient.addColorStop(1.00, "rgb(102, 195, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(244.6, 121.1);
  ctx.lineTo(221.8, 106.1);
  ctx.lineTo(219.9, 159.2);
  ctx.lineTo(244.6, 121.1);
  ctx.closePath();
  ctx.save();
  ctx.transform(4.086, -0.022, 0.047, 8.705, -546.9, -6135.9);
  gradient = ctx.createLinearGradient(178.3, 722.6, 184.4, 716.6);
  gradient.addColorStop(0.00, "rgb(176, 242, 255)");
  gradient.addColorStop(1.00, "rgb(54, 160, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(244.6, 121.1);
  ctx.lineTo(255.6, 152.5);
  ctx.lineTo(219.9, 159.2);
  ctx.lineTo(244.6, 121.1);
  ctx.closePath();
  ctx.save();
  ctx.transform(5.863, -0.032, 0.034, 6.218, -537.4, -4394.9);
  gradient = ctx.createLinearGradient(125.7, 733.9, 131.8, 727.8);
  gradient.addColorStop(0.00, "rgb(100, 213, 255)");
  gradient.addColorStop(1.00, "rgb(64, 187, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(280.3, 121.0);
  ctx.lineTo(255.6, 152.5);
  ctx.lineTo(244.6, 121.1);
  ctx.lineTo(280.3, 121.0);
  ctx.closePath();
  ctx.save();
  ctx.transform(5.863, -0.032, 0.028, 5.152, -529.3, -3649.9);
  gradient = ctx.createLinearGradient(127.4, 737.8, 133.5, 731.7);
  gradient.addColorStop(0.00, "rgb(35, 162, 255)");
  gradient.addColorStop(1.00, "rgb(133, 235, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(301.1, 169.0);
  ctx.lineTo(280.3, 121.0);
  ctx.lineTo(255.6, 152.5);
  ctx.lineTo(301.1, 169.0);
  ctx.closePath();
  ctx.save();
  ctx.transform(7.461, -0.041, 0.043, 7.906, -538.0, -5574.6);
  gradient = ctx.createLinearGradient(103.0, 727.9, 109.1, 721.8);
  gradient.addColorStop(0.00, "rgb(88, 202, 255)");
  gradient.addColorStop(1.00, "rgb(16, 92, 252)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(301.1, 169.0);
  ctx.lineTo(317.6, 115.3);
  ctx.lineTo(280.3, 121.0);
  ctx.lineTo(301.1, 169.0);
  ctx.closePath();
  ctx.save();
  ctx.transform(6.129, -0.033, 0.048, 8.794, -537.3, -6196.4);
  gradient = ctx.createLinearGradient(127.2, 723.8, 133.3, 717.7);
  gradient.addColorStop(0.00, "rgb(56, 180, 255)");
  gradient.addColorStop(1.00, "rgb(30, 109, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(268.2, 177.4);
  ctx.lineTo(226.6, 199.2);
  ctx.lineTo(219.9, 159.2);
  ctx.lineTo(268.2, 177.4);
  ctx.closePath();
  ctx.save();
  ctx.transform(7.906, -0.043, 0.036, 6.573, -538.7, -4637.0);
  gradient = ctx.createLinearGradient(91.8, 735.5, 97.9, 729.4);
  gradient.addColorStop(0.00, "rgb(137, 226, 255)");
  gradient.addColorStop(1.00, "rgb(9, 88, 245)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(268.2, 177.4);
  ctx.lineTo(255.6, 152.5);
  ctx.lineTo(219.9, 159.2);
  ctx.lineTo(268.2, 177.4);
  ctx.closePath();
  ctx.save();
  ctx.transform(7.906, -0.043, 0.022, 4.086, -529.3, -2899.6);
  gradient = ctx.createLinearGradient(93.0, 754.5, 99.1, 748.4);
  gradient.addColorStop(0.00, "rgb(8, 112, 255)");
  gradient.addColorStop(1.00, "rgb(5, 114, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(268.2, 177.4);
  ctx.lineTo(258.6, 200.1);
  ctx.lineTo(226.6, 199.2);
  ctx.lineTo(268.2, 177.4);
  ctx.closePath();
  ctx.save();
  ctx.transform(6.840, -0.037, 0.020, 3.731, -526.8, -2647.1);
  gradient = ctx.createLinearGradient(109.0, 765.4, 115.1, 759.3);
  gradient.addColorStop(0.00, "rgb(0, 12, 218)");
  gradient.addColorStop(1.00, "rgb(1, 80, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(268.2, 177.4);
  ctx.lineTo(301.1, 169.0);
  ctx.lineTo(255.6, 152.5);
  ctx.lineTo(268.2, 177.4);
  ctx.closePath();
  ctx.save();
  ctx.transform(7.461, -0.041, 0.022, 4.086, -523.5, -2899.6);
  gradient = ctx.createLinearGradient(101.7, 753.6, 107.8, 747.5);
  gradient.addColorStop(0.00, "rgb(164, 251, 255)");
  gradient.addColorStop(1.00, "rgb(4, 71, 244)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(256.5, 219.1);
  ctx.lineTo(226.6, 199.2);
  ctx.lineTo(220.3, 226.3);
  ctx.lineTo(256.5, 219.1);
  ctx.closePath();
  ctx.save();
  ctx.transform(5.951, -0.032, 0.024, 4.441, -530.5, -3140.2);
  gradient = ctx.createLinearGradient(122.9, 758.8, 129.0, 752.7);
  gradient.addColorStop(0.00, "rgb(255, 255, 255)");
  gradient.addColorStop(1.00, "rgb(148, 187, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(256.5, 219.1);
  ctx.lineTo(258.6, 200.1);
  ctx.lineTo(226.6, 199.2);
  ctx.lineTo(256.5, 219.1);
  ctx.closePath();
  ctx.save();
  ctx.transform(5.241, -0.029, 0.018, 3.287, -525.1, -2333.2);
  gradient = ctx.createLinearGradient(140.7, 777.7, 146.8, 771.6);
  gradient.addColorStop(0.00, "rgb(46, 109, 240)");
  gradient.addColorStop(1.00, "rgb(226, 255, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(256.5, 219.1);
  ctx.lineTo(280.9, 234.1);
  ctx.lineTo(258.6, 200.1);
  ctx.lineTo(256.5, 219.1);
  ctx.closePath();
  ctx.save();
  ctx.transform(3.997, -0.022, 0.031, 5.596, -529.0, -3947.3);
  gradient = ctx.createLinearGradient(191.0, 748.1, 197.1, 742.0);
  gradient.addColorStop(0.00, "rgb(211, 255, 255)");
  gradient.addColorStop(1.00, "rgb(255, 255, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(296.4, 191.8);
  ctx.lineTo(268.2, 177.4);
  ctx.lineTo(258.6, 200.1);
  ctx.lineTo(296.4, 191.8);
  ctx.closePath();
  ctx.save();
  ctx.transform(6.218, -0.034, 0.020, 3.731, -521.6, -2647.1);
  gradient = ctx.createLinearGradient(122.8, 764.1, 128.9, 758.1);
  gradient.addColorStop(0.00, "rgb(8, 31, 223)");
  gradient.addColorStop(1.00, "rgb(0, 16, 213)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(296.4, 191.8);
  ctx.lineTo(280.9, 234.1);
  ctx.lineTo(258.6, 200.1);
  ctx.lineTo(296.4, 191.8);
  ctx.closePath();
  ctx.save();
  ctx.transform(6.218, -0.034, 0.038, 6.929, -533.8, -4880.0);
  gradient = ctx.createLinearGradient(122.6, 738.4, 128.7, 732.3);
  gradient.addColorStop(0.00, "rgb(211, 255, 255)");
  gradient.addColorStop(1.00, "rgb(171, 226, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(296.4, 191.8);
  ctx.lineTo(301.1, 169.0);
  ctx.lineTo(268.2, 177.4);
  ctx.lineTo(296.4, 191.8);
  ctx.closePath();
  ctx.save();
  ctx.transform(5.418, -0.030, 0.020, 3.731, -520.0, -2648.5);
  gradient = ctx.createLinearGradient(142.9, 762.8, 149.0, 756.7);
  gradient.addColorStop(0.00, "rgb(0, 56, 255)");
  gradient.addColorStop(1.00, "rgb(0, 25, 218)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(296.4, 191.8);
  ctx.lineTo(306.8, 219.9);
  ctx.lineTo(280.9, 234.1);
  ctx.lineTo(296.4, 191.8);
  ctx.closePath();
  ctx.save();
  ctx.transform(4.264, -0.023, 0.038, 6.929, -530.1, -4880.0);
  gradient = ctx.createLinearGradient(184.1, 739.1, 190.2, 733.0);
  gradient.addColorStop(0.00, "rgb(255, 255, 255)");
  gradient.addColorStop(1.00, "rgb(171, 226, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(328.9, 184.0);
  ctx.lineTo(301.1, 169.0);
  ctx.lineTo(296.4, 191.8);
  ctx.lineTo(328.9, 184.0);
  ctx.closePath();
  ctx.save();
  ctx.transform(5.330, -0.029, 0.020, 3.731, -515.4, -2648.5);
  gradient = ctx.createLinearGradient(149.1, 762.2, 155.2, 756.1);
  gradient.addColorStop(0.00, "rgb(0, 9, 192)");
  gradient.addColorStop(1.00, "rgb(0, 6, 185)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(328.9, 184.0);
  ctx.lineTo(306.8, 219.9);
  ctx.lineTo(296.4, 191.8);
  ctx.lineTo(328.9, 184.0);
  ctx.closePath();
  ctx.save();
  ctx.transform(5.330, -0.029, 0.032, 5.863, -523.5, -4136.2);
  gradient = ctx.createLinearGradient(148.7, 743.0, 154.8, 737.0);
  gradient.addColorStop(0.00, "rgb(48, 153, 255)");
  gradient.addColorStop(1.00, "rgb(128, 211, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(328.9, 184.0);
  ctx.lineTo(346.0, 161.2);
  ctx.lineTo(301.1, 169.0);
  ctx.lineTo(328.9, 184.0);
  ctx.closePath();
  ctx.save();
  ctx.transform(7.373, -0.040, 0.020, 3.731, -514.6, -2649.7);
  gradient = ctx.createLinearGradient(108.5, 760.7, 114.6, 754.6);
  gradient.addColorStop(0.00, "rgb(0, 0, 153)");
  gradient.addColorStop(1.00, "rgb(0, 0, 181)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(328.9, 184.0);
  ctx.lineTo(373.8, 183.2);
  ctx.lineTo(346.0, 161.2);
  ctx.lineTo(328.9, 184.0);
  ctx.closePath();
  ctx.save();
  ctx.transform(7.373, -0.040, 0.020, 3.731, -510.0, -2649.7);
  gradient = ctx.createLinearGradient(112.2, 761.3, 118.3, 755.2);
  gradient.addColorStop(0.00, "rgb(0, 4, 202)");
  gradient.addColorStop(1.00, "rgb(11, 114, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(343.2, 142.3);
  ctx.lineTo(317.6, 115.3);
  ctx.lineTo(301.1, 169.0);
  ctx.lineTo(343.2, 142.3);
  ctx.closePath();
  ctx.save();
  ctx.transform(6.929, -0.038, 0.048, 8.794, -534.0, -6196.4);
  gradient = ctx.createLinearGradient(115.4, 724.2, 121.5, 718.1);
  gradient.addColorStop(0.00, "rgb(21, 77, 237)");
  gradient.addColorStop(1.00, "rgb(197, 255, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(343.2, 142.3);
  ctx.lineTo(346.0, 161.2);
  ctx.lineTo(301.1, 169.0);
  ctx.lineTo(343.2, 142.3);
  ctx.closePath();
  ctx.save();
  ctx.transform(7.373, -0.040, 0.024, 4.353, -516.9, -3087.4);
  gradient = ctx.createLinearGradient(109.5, 750.2, 115.6, 744.1);
  gradient.addColorStop(0.00, "rgb(0, 3, 185)");
  gradient.addColorStop(1.00, "rgb(2, 20, 225)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(343.2, 142.3);
  ctx.lineTo(376.8, 144.8);
  ctx.lineTo(346.0, 161.2);
  ctx.lineTo(343.2, 142.3);
  ctx.closePath();
  ctx.save();
  ctx.transform(5.507, -0.030, 0.017, 3.109, -505.3, -2218.2);
  gradient = ctx.createLinearGradient(150.4, 765.5, 156.5, 759.4);
  gradient.addColorStop(0.00, "rgb(0, 0, 218)");
  gradient.addColorStop(1.00, "rgb(2, 22, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(170.0, 130.8);
  ctx.lineTo(147.7, 114.6);
  ctx.lineTo(139.1, 140.2);
  ctx.lineTo(170.0, 130.8);
  ctx.closePath();
  ctx.save();
  ctx.transform(-0.089, 0.000, 0.000, -0.089, -488.4, 42.6);
  gradient = ctx.createLinearGradient(-7100.8, -953.6, -7399.2, -981.5);
  gradient.addColorStop(0.00, "rgb(171, 252, 255)");
  gradient.addColorStop(1.00, "rgb(255, 255, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(170.0, 130.8);
  ctx.lineTo(163.0, 150.8);
  ctx.lineTo(139.1, 140.2);
  ctx.lineTo(170.0, 130.8);
  ctx.closePath();
  ctx.save();
  ctx.transform(5.063, -0.028, 0.018, 3.287, -539.5, -2344.3);
  gradient = ctx.createLinearGradient(131.7, 760.7, 137.8, 754.6);
  gradient.addColorStop(0.00, "rgb(162, 233, 255)");
  gradient.addColorStop(1.00, "rgb(255, 255, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(170.0, 130.8);
  ctx.lineTo(186.1, 113.9);
  ctx.lineTo(147.7, 114.6);
  ctx.lineTo(170.0, 130.8);
  ctx.closePath();
  ctx.save();
  ctx.transform(-0.089, 0.000, 0.000, -0.089, -488.4, 42.6);
  gradient = ctx.createLinearGradient(-7373.2, -780.1, -7401.2, -985.2);
  gradient.addColorStop(0.00, "rgb(62, 200, 255)");
  gradient.addColorStop(1.00, "rgb(210, 234, 239)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(170.0, 130.8);
  ctx.lineTo(189.5, 138.2);
  ctx.lineTo(163.0, 150.8);
  ctx.lineTo(170.0, 130.8);
  ctx.closePath();
  ctx.save();
  ctx.transform(-0.089, 0.000, 0.000, -0.089, -488.4, 42.6);
  gradient = ctx.createLinearGradient(-7521.7, -1226.7, -7400.5, -984.3);
  gradient.addColorStop(0.00, "rgb(171, 252, 255)");
  gradient.addColorStop(1.00, "rgb(255, 255, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(170.0, 130.8);
  ctx.lineTo(189.5, 138.2);
  ctx.lineTo(186.1, 113.9);
  ctx.lineTo(170.0, 130.8);
  ctx.closePath();
  ctx.save();
  ctx.transform(-0.089, 0.000, 0.000, -0.089, -488.4, 42.6);
  gradient = ctx.createLinearGradient(-7376.3, -981.8, -7637.4, -935.2);
  gradient.addColorStop(0.00, "rgb(255, 255, 255)");
  gradient.addColorStop(1.00, "rgb(62, 200, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(538.1, 33.3);
  ctx.lineTo(551.5, 88.5);
  ctx.lineTo(593.8, 60.8);
  ctx.lineTo(538.1, 33.3);
  ctx.closePath();
  ctx.save();
  ctx.transform(-7.639, -0.039, -0.038, 7.550, -487.7, -5331.2);
  gradient = ctx.createLinearGradient(-144.7, 717.6, -137.4, 710.2);
  gradient.addColorStop(0.00, "rgb(255, 255, 255)");
  gradient.addColorStop(1.00, "rgb(162, 233, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(237.6, 163.2);
  ctx.lineTo(233.9, 117.0);
  ctx.lineTo(283.8, 119.0);
  ctx.lineTo(237.6, 163.2);
  ctx.closePath();
  ctx.save();
  ctx.transform(-5.063, -0.026, -0.032, 6.307, -534.6, -4452.9);
  gradient = ctx.createLinearGradient(-164.2, 730.3, -157.1, 723.2);
  gradient.addColorStop(0.00, "rgb(0, 2, 200)");
  gradient.addColorStop(1.00, "rgb(2, 31, 245)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(232.9, 177.4);
  ctx.lineTo(233.9, 117.0);
  ctx.lineTo(237.6, 163.2);
  ctx.lineTo(232.9, 177.4);
  ctx.closePath();
  ctx.save();
  ctx.transform(-0.622, -0.003, -0.042, 8.261, -532.2, -5819.0);
  gradient = ctx.createLinearGradient(-1285.5, 726.8, -1278.2, 719.5);
  gradient.addColorStop(0.00, "rgb(119, 206, 255)");
  gradient.addColorStop(1.00, "rgb(64, 93, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(672.0, 145.2);
  ctx.lineTo(683.0, 160.2);
  ctx.lineTo(685.9, 105.0);
  ctx.lineTo(672.0, 145.2);
  ctx.closePath();
  ctx.save();
  ctx.transform(-1.865, -0.009, -0.038, 7.550, -473.4, -5323.9);
  gradient = ctx.createLinearGradient(-636.7, 725.0, -629.4, 717.7);
  gradient.addColorStop(0.00, "rgb(114, 202, 255)");
  gradient.addColorStop(1.00, "rgb(206, 255, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(674.5, 161.9);
  ctx.lineTo(653.8, 151.4);
  ctx.lineTo(672.0, 145.2);
  ctx.lineTo(674.5, 161.9);
  ctx.closePath();
  ctx.save();
  ctx.transform(-4.264, -0.022, -0.024, 4.708, -485.4, -3331.5);
  gradient = ctx.createLinearGradient(-277.5, 741.9, -270.2, 734.6);
  gradient.addColorStop(0.00, "rgb(247, 255, 255)");
  gradient.addColorStop(1.00, "rgb(255, 255, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(674.5, 161.9);
  ctx.lineTo(672.0, 145.2);
  ctx.lineTo(683.0, 160.2);
  ctx.lineTo(674.5, 161.9);
  ctx.closePath();
  ctx.save();
  ctx.transform(-2.931, -0.015, -0.024, 4.708, -483.9, -3331.5);
  gradient = ctx.createLinearGradient(-405.4, 743.3, -398.1, 736.0);
  gradient.addColorStop(0.00, "rgb(226, 255, 255)");
  gradient.addColorStop(1.00, "rgb(247, 255, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(635.9, 91.6);
  ctx.lineTo(672.0, 145.2);
  ctx.lineTo(685.9, 105.0);
  ctx.lineTo(635.9, 91.6);
  ctx.closePath();
  ctx.save();
  ctx.transform(-8.616, -0.044, -0.028, 5.507, -480.7, -3895.7);
  gradient = ctx.createLinearGradient(-139.3, 731.3, -131.0, 723.0);
  gradient.addColorStop(0.00, "rgb(117, 204, 255)");
  gradient.addColorStop(1.00, "rgb(87, 200, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(635.9, 91.6);
  ctx.lineTo(654.2, 68.9);
  ctx.lineTo(685.9, 105.0);
  ctx.lineTo(635.9, 91.6);
  ctx.closePath();
  ctx.save();
  ctx.transform(-8.616, -0.044, -0.016, 3.109, -489.2, -2221.8);
  gradient = ctx.createLinearGradient(-140.3, 745.9, -130.2, 735.8);
  gradient.addColorStop(0.00, "rgb(3, 68, 252)");
  gradient.addColorStop(1.00, "rgb(0, 79, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(635.9, 91.6);
  ctx.lineTo(653.8, 151.4);
  ctx.lineTo(672.0, 145.2);
  ctx.lineTo(635.9, 91.6);
  ctx.closePath();
  ctx.save();
  ctx.transform(-6.751, -0.034, -0.042, 8.172, -473.1, -5757.9);
  gradient = ctx.createLinearGradient(-175.0, 723.7, -167.5, 716.2);
  gradient.addColorStop(0.00, "rgb(255, 255, 255)");
  gradient.addColorStop(1.00, "rgb(151, 240, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(667.3, 55.4);
  ctx.lineTo(684.7, 77.1);
  ctx.lineTo(685.9, 105.0);
  ctx.lineTo(667.3, 55.4);
  ctx.closePath();
  ctx.save();
  ctx.transform(-4.353, -0.022, -0.022, 4.353, -484.8, -3092.9);
  gradient = ctx.createLinearGradient(-274.5, 731.6, -266.6, 723.7);
  gradient.addColorStop(0.00, "rgb(13, 112, 255)");
  gradient.addColorStop(1.00, "rgb(4, 97, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(667.3, 55.4);
  ctx.lineTo(654.2, 68.9);
  ctx.lineTo(685.9, 105.0);
  ctx.lineTo(667.3, 55.4);
  ctx.closePath();
  ctx.save();
  ctx.transform(-6.129, -0.031, -0.022, 4.353, -484.8, -3092.9);
  gradient = ctx.createLinearGradient(-195.7, 731.3, -187.3, 722.8);
  gradient.addColorStop(0.00, "rgb(3, 74, 252)");
  gradient.addColorStop(1.00, "rgb(6, 102, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(667.3, 55.4);
  ctx.lineTo(653.7, 36.5);
  ctx.lineTo(684.7, 77.1);
  ctx.lineTo(667.3, 55.4);
  ctx.closePath();
  ctx.save();
  ctx.transform(-6.040, -0.031, -0.016, 3.109, -489.4, -2226.3);
  gradient = ctx.createLinearGradient(-198.3, 737.0, -189.2, 727.9);
  gradient.addColorStop(0.00, "rgb(6, 109, 255)");
  gradient.addColorStop(1.00, "rgb(31, 155, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(640.6, 56.6);
  ctx.lineTo(654.2, 68.9);
  ctx.lineTo(667.3, 55.4);
  ctx.lineTo(640.6, 56.6);
  ctx.closePath();
  ctx.save();
  ctx.transform(-3.642, -0.019, -0.009, 1.865, -498.0, -1354.4);
  gradient = ctx.createLinearGradient(-322.8, 758.9, -315.5, 751.6);
  gradient.addColorStop(0.00, "rgb(60, 183, 255)");
  gradient.addColorStop(1.00, "rgb(104, 214, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(640.6, 56.6);
  ctx.lineTo(653.7, 36.5);
  ctx.lineTo(667.3, 55.4);
  ctx.lineTo(640.6, 56.6);
  ctx.closePath();
  ctx.save();
  ctx.transform(-3.642, -0.019, -0.014, 2.754, -494.8, -1977.9);
  gradient = ctx.createLinearGradient(-321.0, 737.7, -313.7, 730.3);
  gradient.addColorStop(0.00, "rgb(62, 183, 255)");
  gradient.addColorStop(1.00, "rgb(112, 214, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(640.6, 56.6);
  ctx.lineTo(635.9, 91.6);
  ctx.lineTo(654.2, 68.9);
  ctx.lineTo(640.6, 56.6);
  ctx.closePath();
  ctx.save();
  ctx.transform(-2.487, -0.013, -0.024, 4.797, -489.3, -3403.3);
  gradient = ctx.createLinearGradient(-466.2, 728.0, -458.9, 720.7);
  gradient.addColorStop(0.00, "rgb(60, 192, 255)");
  gradient.addColorStop(1.00, "rgb(53, 190, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(640.6, 56.6);
  ctx.lineTo(593.8, 60.8);
  ctx.lineTo(635.9, 91.6);
  ctx.lineTo(640.6, 56.6);
  ctx.closePath();
  ctx.save();
  ctx.transform(-6.396, -0.033, -0.024, 4.797, -491.2, -3403.3);
  gradient = ctx.createLinearGradient(-181.3, 725.8, -174.0, 718.5);
  gradient.addColorStop(0.00, "rgb(62, 200, 255)");
  gradient.addColorStop(1.00, "rgb(255, 255, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(604.3, 45.9);
  ctx.lineTo(538.1, 33.3);
  ctx.lineTo(593.8, 60.8);
  ctx.lineTo(604.3, 45.9);
  ctx.closePath();
  ctx.save();
  ctx.transform(-9.060, -0.046, -0.019, 3.731, -500.0, -2661.3);
  gradient = ctx.createLinearGradient(-124.1, 727.4, -116.8, 720.1);
  gradient.addColorStop(0.00, "rgb(255, 255, 255)");
  gradient.addColorStop(1.00, "rgb(132, 225, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(604.3, 45.9);
  ctx.lineTo(640.6, 56.6);
  ctx.lineTo(653.7, 36.5);
  ctx.lineTo(604.3, 45.9);
  ctx.closePath();
  ctx.save();
  ctx.transform(-6.751, -0.034, -0.014, 2.754, -496.7, -1977.9);
  gradient = ctx.createLinearGradient(-172.9, 735.8, -165.6, 728.5);
  gradient.addColorStop(0.00, "rgb(110, 213, 255)");
  gradient.addColorStop(1.00, "rgb(213, 255, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(604.3, 45.9);
  ctx.lineTo(593.8, 60.8);
  ctx.lineTo(640.6, 56.6);
  ctx.lineTo(604.3, 45.9);
  ctx.closePath();
  ctx.save();
  ctx.transform(-6.396, -0.033, -0.010, 2.043, -500.9, -1479.9);
  gradient = ctx.createLinearGradient(-178.4, 752.7, -171.1, 745.3);
  gradient.addColorStop(0.00, "rgb(235, 255, 255)");
  gradient.addColorStop(1.00, "rgb(255, 255, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(591.2, 77.7);
  ctx.lineTo(551.5, 88.5);
  ctx.lineTo(593.8, 60.8);
  ctx.lineTo(591.2, 77.7);
  ctx.closePath();
  ctx.save();
  ctx.transform(-5.774, -0.029, -0.019, 3.820, -501.1, -2719.7);
  gradient = ctx.createLinearGradient(-192.1, 733.8, -184.8, 726.5);
  gradient.addColorStop(0.00, "rgb(110, 213, 255)");
  gradient.addColorStop(1.00, "rgb(213, 255, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(591.2, 77.7);
  ctx.lineTo(593.8, 60.8);
  ctx.lineTo(635.9, 91.6);
  ctx.lineTo(591.2, 77.7);
  ctx.closePath();
  ctx.save();
  ctx.transform(-6.129, -0.031, -0.021, 4.175, -494.1, -2968.0);
  gradient = ctx.createLinearGradient(-186.0, 732.4, -178.7, 725.1);
  gradient.addColorStop(0.00, "rgb(73, 204, 255)");
  gradient.addColorStop(1.00, "rgb(255, 255, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(612.4, 118.1);
  ctx.lineTo(635.9, 91.6);
  ctx.lineTo(653.8, 151.4);
  ctx.lineTo(612.4, 118.1);
  ctx.closePath();
  ctx.save();
  ctx.transform(-5.685, -0.029, -0.042, 8.172, -477.3, -5757.9);
  gradient = ctx.createLinearGradient(-204.5, 722.2, -197.1, 714.9);
  gradient.addColorStop(0.00, "rgb(255, 255, 255)");
  gradient.addColorStop(1.00, "rgb(54, 190, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(612.4, 118.1);
  ctx.lineTo(591.2, 77.7);
  ctx.lineTo(635.9, 91.6);
  ctx.lineTo(612.4, 118.1);
  ctx.closePath();
  ctx.save();
  ctx.transform(-6.129, -0.031, -0.028, 5.507, -489.3, -3897.0);
  gradient = ctx.createLinearGradient(-187.1, 727.8, -179.8, 720.5);
  gradient.addColorStop(0.00, "rgb(15, 158, 255)");
  gradient.addColorStop(1.00, "rgb(125, 230, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(579.3, 123.1);
  ctx.lineTo(591.2, 77.7);
  ctx.lineTo(612.4, 118.1);
  ctx.lineTo(579.3, 123.1);
  ctx.closePath();
  ctx.save();
  ctx.transform(-4.530, -0.023, -0.032, 6.218, -489.9, -4393.8);
  gradient = ctx.createLinearGradient(-247.2, 726.7, -239.9, 719.4);
  gradient.addColorStop(0.00, "rgb(48, 194, 255)");
  gradient.addColorStop(1.00, "rgb(114, 225, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(579.3, 123.1);
  ctx.lineTo(551.5, 88.5);
  ctx.lineTo(591.2, 77.7);
  ctx.lineTo(579.3, 123.1);
  ctx.closePath();
  ctx.save();
  ctx.transform(-5.418, -0.028, -0.032, 6.218, -492.9, -4393.8);
  gradient = ctx.createLinearGradient(-205.5, 724.2, -198.2, 716.9);
  gradient.addColorStop(0.00, "rgb(255, 255, 255)");
  gradient.addColorStop(1.00, "rgb(171, 252, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(547.4, 132.7);
  ctx.lineTo(565.5, 154.2);
  ctx.lineTo(579.3, 123.1);
  ctx.lineTo(547.4, 132.7);
  ctx.closePath();
  ctx.save();
  ctx.transform(-4.353, -0.022, -0.022, 4.264, -501.5, -3021.6);
  gradient = ctx.createLinearGradient(-253.0, 742.5, -245.7, 735.2);
  gradient.addColorStop(0.00, "rgb(20, 166, 255)");
  gradient.addColorStop(1.00, "rgb(104, 218, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(547.4, 132.7);
  ctx.lineTo(551.5, 88.5);
  ctx.lineTo(579.3, 123.1);
  ctx.lineTo(547.4, 132.7);
  ctx.closePath();
  ctx.save();
  ctx.transform(-4.353, -0.022, -0.031, 6.040, -495.2, -4268.1);
  gradient = ctx.createLinearGradient(-250.5, 729.1, -243.2, 721.8);
  gradient.addColorStop(0.00, "rgb(34, 180, 255)");
  gradient.addColorStop(1.00, "rgb(123, 226, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(547.4, 132.7);
  ctx.lineTo(510.8, 169.5);
  ctx.lineTo(565.5, 154.2);
  ctx.lineTo(547.4, 132.7);
  ctx.closePath();
  ctx.save();
  ctx.transform(-7.462, -0.038, -0.026, 5.063, -500.4, -3579.2);
  gradient = ctx.createLinearGradient(-144.8, 740.0, -137.5, 732.6);
  gradient.addColorStop(0.00, "rgb(141, 213, 255)");
  gradient.addColorStop(1.00, "rgb(79, 190, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(532.0, 93.6);
  ctx.lineTo(547.4, 132.7);
  ctx.lineTo(551.5, 88.5);
  ctx.lineTo(532.0, 93.6);
  ctx.closePath();
  ctx.save();
  ctx.transform(-2.665, -0.014, -0.031, 6.040, -499.0, -4268.2);
  gradient = ctx.createLinearGradient(-404.0, 726.2, -396.7, 718.9);
  gradient.addColorStop(0.00, "rgb(255, 255, 255)");
  gradient.addColorStop(1.00, "rgb(190, 255, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(521.8, 63.1);
  ctx.lineTo(538.1, 33.3);
  ctx.lineTo(551.5, 88.5);
  ctx.lineTo(521.8, 63.1);
  ctx.closePath();
  ctx.save();
  ctx.transform(-4.086, -0.021, -0.038, 7.550, -493.5, -5331.3);
  gradient = ctx.createLinearGradient(-262.5, 717.1, -255.2, 709.8);
  gradient.addColorStop(0.00, "rgb(255, 255, 255)");
  gradient.addColorStop(1.00, "rgb(162, 233, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(521.8, 63.1);
  ctx.lineTo(532.0, 93.6);
  ctx.lineTo(551.5, 88.5);
  ctx.lineTo(521.8, 63.1);
  ctx.closePath();
  ctx.save();
  ctx.transform(-4.086, -0.021, -0.021, 4.175, -505.6, -2967.7);
  gradient = ctx.createLinearGradient(-261.6, 732.9, -254.3, 725.6);
  gradient.addColorStop(0.00, "rgb(62, 200, 255)");
  gradient.addColorStop(1.00, "rgb(255, 255, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(521.8, 63.1);
  ctx.lineTo(475.6, 62.2);
  ctx.lineTo(538.1, 33.3);
  ctx.lineTo(521.8, 63.1);
  ctx.closePath();
  ctx.save();
  ctx.transform(-8.527, -0.043, -0.021, 4.086, -507.7, -2909.8);
  gradient = ctx.createLinearGradient(-124.4, 726.2, -117.1, 718.9);
  gradient.addColorStop(0.00, "rgb(47, 173, 255)");
  gradient.addColorStop(1.00, "rgb(255, 255, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(503.3, 106.5);
  ctx.lineTo(532.0, 93.6);
  ctx.lineTo(547.4, 132.7);
  ctx.lineTo(503.3, 106.5);
  ctx.closePath();
  ctx.save();
  ctx.transform(-6.040, -0.031, -0.027, 5.330, -502.0, -3770.8);
  gradient = ctx.createLinearGradient(-177.6, 730.8, -170.3, 723.5);
  gradient.addColorStop(0.00, "rgb(117, 223, 255)");
  gradient.addColorStop(1.00, "rgb(255, 255, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(503.3, 106.5);
  ctx.lineTo(510.8, 169.5);
  ctx.lineTo(547.4, 132.7);
  ctx.lineTo(503.3, 106.5);
  ctx.closePath();
  ctx.save();
  ctx.transform(-6.040, -0.031, -0.044, 8.616, -490.3, -6066.3);
  gradient = ctx.createLinearGradient(-176.6, 723.5, -169.3, 716.2);
  gradient.addColorStop(0.00, "rgb(8, 137, 255)");
  gradient.addColorStop(1.00, "rgb(190, 255, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(471.7, 91.4);
  ctx.lineTo(432.9, 52.8);
  ctx.lineTo(475.6, 62.2);
  ctx.lineTo(471.7, 91.4);
  ctx.closePath();
  ctx.save();
  ctx.transform(-5.863, -0.030, -0.027, 5.241, -512.2, -3714.2);
  gradient = ctx.createLinearGradient(-173.0, 724.0, -165.7, 716.6);
  gradient.addColorStop(0.00, "rgb(255, 255, 255)");
  gradient.addColorStop(1.00, "rgb(192, 242, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(475.3, 147.2);
  ctx.lineTo(503.3, 106.5);
  ctx.lineTo(510.8, 169.5);
  ctx.lineTo(475.3, 147.2);
  ctx.closePath();
  ctx.save();
  ctx.transform(-4.886, -0.025, -0.044, 8.616, -495.3, -6066.3);
  gradient = ctx.createLinearGradient(-212.7, 722.9, -205.4, 715.6);
  gradient.addColorStop(0.00, "rgb(132, 207, 255)");
  gradient.addColorStop(1.00, "rgb(151, 225, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(475.3, 147.2);
  ctx.lineTo(471.7, 91.4);
  ctx.lineTo(503.3, 106.5);
  ctx.lineTo(475.3, 147.2);
  ctx.closePath();
  ctx.save();
  ctx.transform(-4.353, -0.022, -0.039, 7.639, -499.9, -5385.4);
  gradient = ctx.createLinearGradient(-236.6, 723.8, -229.3, 716.5);
  gradient.addColorStop(0.00, "rgb(8, 137, 255)");
  gradient.addColorStop(1.00, "rgb(190, 255, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(475.3, 147.2);
  ctx.lineTo(427.1, 164.5);
  ctx.lineTo(434.7, 197.0);
  ctx.lineTo(475.3, 147.2);
  ctx.closePath();
  ctx.save();
  ctx.transform(-6.573, -0.033, -0.035, 6.840, -506.6, -4818.9);
  gradient = ctx.createLinearGradient(-153.5, 732.3, -146.2, 725.0);
  gradient.addColorStop(0.00, "rgb(214, 255, 255)");
  gradient.addColorStop(1.00, "rgb(48, 132, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(435.2, 116.5);
  ctx.lineTo(471.7, 91.4);
  ctx.lineTo(475.3, 147.2);
  ctx.lineTo(435.2, 116.5);
  ctx.closePath();
  ctx.save();
  ctx.transform(-5.507, -0.028, -0.039, 7.639, -503.7, -5385.4);
  gradient = ctx.createLinearGradient(-183.7, 722.8, -176.4, 715.4);
  gradient.addColorStop(0.00, "rgb(142, 240, 255)");
  gradient.addColorStop(1.00, "rgb(150, 235, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(435.2, 116.5);
  ctx.lineTo(427.1, 164.5);
  ctx.lineTo(475.3, 147.2);
  ctx.lineTo(435.2, 116.5);
  ctx.closePath();
  ctx.save();
  ctx.transform(-6.573, -0.033, -0.033, 6.573, -507.5, -4636.8);
  gradient = ctx.createLinearGradient(-152.0, 730.9, -144.7, 723.6);
  gradient.addColorStop(0.00, "rgb(204, 255, 255)");
  gradient.addColorStop(1.00, "rgb(36, 123, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(435.2, 116.5);
  ctx.lineTo(432.9, 52.8);
  ctx.lineTo(471.7, 91.4);
  ctx.lineTo(435.2, 116.5);
  ctx.closePath();
  ctx.save();
  ctx.transform(-5.330, -0.027, -0.044, 8.705, -500.4, -6135.8);
  gradient = ctx.createLinearGradient(-187.3, 718.6, -180.0, 711.3);
  gradient.addColorStop(0.00, "rgb(255, 255, 255)");
  gradient.addColorStop(1.00, "rgb(102, 195, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(405.5, 70.9);
  ctx.lineTo(432.9, 52.8);
  ctx.lineTo(435.2, 116.5);
  ctx.lineTo(405.5, 70.9);
  ctx.closePath();
  ctx.save();
  ctx.transform(-4.086, -0.021, -0.044, 8.705, -505.4, -6135.8);
  gradient = ctx.createLinearGradient(-239.1, 716.5, -231.8, 709.2);
  gradient.addColorStop(0.00, "rgb(176, 242, 255)");
  gradient.addColorStop(1.00, "rgb(54, 160, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(405.5, 70.9);
  ctx.lineTo(392.3, 108.5);
  ctx.lineTo(435.2, 116.5);
  ctx.lineTo(405.5, 70.9);
  ctx.closePath();
  ctx.save();
  ctx.transform(-5.863, -0.030, -0.032, 6.218, -514.2, -4394.7);
  gradient = ctx.createLinearGradient(-164.9, 725.7, -157.6, 718.4);
  gradient.addColorStop(0.00, "rgb(100, 213, 255)");
  gradient.addColorStop(1.00, "rgb(64, 187, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(362.6, 70.7);
  ctx.lineTo(392.3, 108.5);
  ctx.lineTo(405.5, 70.9);
  ctx.lineTo(362.6, 70.7);
  ctx.closePath();
  ctx.save();
  ctx.transform(-5.863, -0.030, -0.026, 5.152, -522.1, -3649.7);
  gradient = ctx.createLinearGradient(-162.7, 727.3, -155.4, 720.0);
  gradient.addColorStop(0.00, "rgb(35, 162, 255)");
  gradient.addColorStop(1.00, "rgb(133, 235, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(337.7, 128.4);
  ctx.lineTo(362.6, 70.7);
  ctx.lineTo(392.3, 108.5);
  ctx.lineTo(337.7, 128.4);
  ctx.closePath();
  ctx.save();
  ctx.transform(-7.462, -0.038, -0.040, 7.906, -514.1, -5574.5);
  gradient = ctx.createLinearGradient(-124.3, 721.8, -117.0, 714.5);
  gradient.addColorStop(0.00, "rgb(88, 202, 255)");
  gradient.addColorStop(1.00, "rgb(16, 92, 252)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(337.7, 128.4);
  ctx.lineTo(317.9, 64.0);
  ctx.lineTo(362.6, 70.7);
  ctx.lineTo(337.7, 128.4);
  ctx.closePath();
  ctx.save();
  ctx.transform(-6.129, -0.031, -0.045, 8.794, -515.0, -6196.3);
  gradient = ctx.createLinearGradient(-149.0, 718.1, -141.7, 710.8);
  gradient.addColorStop(0.00, "rgb(56, 180, 255)");
  gradient.addColorStop(1.00, "rgb(30, 109, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(377.2, 138.3);
  ctx.lineTo(427.1, 164.5);
  ctx.lineTo(435.2, 116.5);
  ctx.lineTo(377.2, 138.3);
  ctx.closePath();
  ctx.save();
  ctx.transform(-7.906, -0.040, -0.033, 6.573, -513.0, -4636.9);
  gradient = ctx.createLinearGradient(-124.0, 728.7, -116.7, 721.4);
  gradient.addColorStop(0.00, "rgb(137, 226, 255)");
  gradient.addColorStop(1.00, "rgb(9, 88, 245)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(377.2, 138.3);
  ctx.lineTo(392.3, 108.5);
  ctx.lineTo(435.2, 116.5);
  ctx.lineTo(377.2, 138.3);
  ctx.closePath();
  ctx.save();
  ctx.transform(-7.906, -0.040, -0.021, 4.086, -521.8, -2899.4);
  gradient = ctx.createLinearGradient(-122.5, 742.8, -115.2, 735.5);
  gradient.addColorStop(0.00, "rgb(8, 112, 255)");
  gradient.addColorStop(1.00, "rgb(5, 114, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(377.2, 138.3);
  ctx.lineTo(388.8, 165.7);
  ctx.lineTo(427.1, 164.5);
  ctx.lineTo(377.2, 138.3);
  ctx.closePath();
  ctx.save();
  ctx.transform(-6.840, -0.035, -0.019, 3.731, -524.2, -2647.0);
  gradient = ctx.createLinearGradient(-139.9, 753.9, -132.6, 746.6);
  gradient.addColorStop(0.00, "rgb(0, 12, 218)");
  gradient.addColorStop(1.00, "rgb(1, 80, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(377.2, 138.3);
  ctx.lineTo(337.7, 128.4);
  ctx.lineTo(392.3, 108.5);
  ctx.lineTo(377.2, 138.3);
  ctx.closePath();
  ctx.save();
  ctx.transform(-7.462, -0.038, -0.021, 4.086, -527.6, -2899.5);
  gradient = ctx.createLinearGradient(-125.9, 741.7, -118.6, 734.4);
  gradient.addColorStop(0.00, "rgb(164, 251, 255)");
  gradient.addColorStop(1.00, "rgb(4, 71, 244)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(391.3, 188.4);
  ctx.lineTo(427.1, 164.5);
  ctx.lineTo(434.7, 197.0);
  ctx.lineTo(391.3, 188.4);
  ctx.closePath();
  ctx.save();
  ctx.transform(-5.951, -0.030, -0.023, 4.441, -520.6, -3140.1);
  gradient = ctx.createLinearGradient(-163.5, 750.1, -156.2, 742.8);
  gradient.addColorStop(0.00, "rgb(255, 255, 255)");
  gradient.addColorStop(1.00, "rgb(148, 187, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(391.3, 188.4);
  ctx.lineTo(388.8, 165.7);
  ctx.lineTo(427.1, 164.5);
  ctx.lineTo(391.3, 188.4);
  ctx.closePath();
  ctx.save();
  ctx.transform(-5.241, -0.027, -0.017, 3.287, -525.7, -2333.0);
  gradient = ctx.createLinearGradient(-184.4, 765.6, -177.0, 758.3);
  gradient.addColorStop(0.00, "rgb(46, 109, 240)");
  gradient.addColorStop(1.00, "rgb(226, 255, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(343.4, 155.7);
  ctx.lineTo(377.2, 138.3);
  ctx.lineTo(388.8, 165.7);
  ctx.lineTo(343.4, 155.7);
  ctx.closePath();
  ctx.save();
  ctx.transform(-6.218, -0.032, -0.019, 3.731, -529.4, -2647.0);
  gradient = ctx.createLinearGradient(-150.2, 752.4, -142.8, 745.1);
  gradient.addColorStop(0.00, "rgb(8, 31, 223)");
  gradient.addColorStop(1.00, "rgb(0, 16, 213)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(343.4, 155.7);
  ctx.lineTo(361.9, 206.4);
  ctx.lineTo(388.8, 165.7);
  ctx.lineTo(343.4, 155.7);
  ctx.closePath();
  ctx.save();
  ctx.transform(-6.218, -0.032, -0.035, 6.929, -518.0, -4879.9);
  gradient = ctx.createLinearGradient(-150.4, 733.0, -143.1, 725.7);
  gradient.addColorStop(0.00, "rgb(211, 255, 255)");
  gradient.addColorStop(1.00, "rgb(171, 226, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(343.4, 155.7);
  ctx.lineTo(337.7, 128.4);
  ctx.lineTo(377.2, 138.3);
  ctx.lineTo(343.4, 155.7);
  ctx.closePath();
  ctx.save();
  ctx.transform(-5.418, -0.028, -0.019, 3.731, -531.0, -2648.3);
  gradient = ctx.createLinearGradient(-169.9, 750.8, -162.5, 743.5);
  gradient.addColorStop(0.00, "rgb(0, 56, 255)");
  gradient.addColorStop(1.00, "rgb(0, 25, 218)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(343.4, 155.7);
  ctx.lineTo(330.9, 189.4);
  ctx.lineTo(361.9, 206.4);
  ctx.lineTo(343.4, 155.7);
  ctx.closePath();
  ctx.save();
  ctx.transform(-4.264, -0.022, -0.035, 6.929, -521.7, -4879.9);
  gradient = ctx.createLinearGradient(-212.8, 733.9, -205.5, 726.6);
  gradient.addColorStop(0.00, "rgb(255, 255, 255)");
  gradient.addColorStop(1.00, "rgb(171, 226, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(304.4, 146.4);
  ctx.lineTo(337.7, 128.4);
  ctx.lineTo(343.4, 155.7);
  ctx.lineTo(304.4, 146.4);
  ctx.closePath();
  ctx.save();
  ctx.transform(-5.330, -0.027, -0.019, 3.731, -535.6, -2648.3);
  gradient = ctx.createLinearGradient(-167.9, 750.0, -160.6, 742.7);
  gradient.addColorStop(0.00, "rgb(0, 9, 192)");
  gradient.addColorStop(1.00, "rgb(0, 6, 185)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(304.4, 146.4);
  ctx.lineTo(330.9, 189.4);
  ctx.lineTo(343.4, 155.7);
  ctx.lineTo(304.4, 146.4);
  ctx.closePath();
  ctx.save();
  ctx.transform(-5.330, -0.027, -0.030, 5.863, -528.1, -4136.0);
  gradient = ctx.createLinearGradient(-168.5, 736.2, -161.2, 728.9);
  gradient.addColorStop(0.00, "rgb(48, 153, 255)");
  gradient.addColorStop(1.00, "rgb(128, 211, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(304.4, 146.4);
  ctx.lineTo(283.8, 119.0);
  ctx.lineTo(337.7, 128.4);
  ctx.lineTo(304.4, 146.4);
  ctx.closePath();
  ctx.save();
  ctx.transform(-7.373, -0.038, -0.019, 3.731, -536.4, -2649.6);
  gradient = ctx.createLinearGradient(-120.6, 748.2, -113.3, 740.9);
  gradient.addColorStop(0.00, "rgb(0, 0, 153)");
  gradient.addColorStop(1.00, "rgb(0, 0, 181)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(304.4, 146.4);
  ctx.lineTo(237.6, 163.2);
  ctx.lineTo(283.8, 119.0);
  ctx.lineTo(304.4, 146.4);
  ctx.closePath();
  ctx.save();
  ctx.transform(-7.373, -0.038, -0.019, 3.731, -541.0, -2649.6);
  gradient = ctx.createLinearGradient(-114.3, 750.6, -107.0, 743.2);
  gradient.addColorStop(0.00, "rgb(0, 4, 202)");
  gradient.addColorStop(1.00, "rgb(11, 114, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(287.2, 96.3);
  ctx.lineTo(317.9, 64.0);
  ctx.lineTo(337.7, 128.4);
  ctx.lineTo(287.2, 96.3);
  ctx.closePath();
  ctx.save();
  ctx.transform(-6.929, -0.035, -0.045, 8.794, -518.3, -6196.3);
  gradient = ctx.createLinearGradient(-128.4, 718.5, -121.1, 711.2);
  gradient.addColorStop(0.00, "rgb(21, 77, 237)");
  gradient.addColorStop(1.00, "rgb(197, 255, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(287.2, 96.3);
  ctx.lineTo(283.8, 119.0);
  ctx.lineTo(337.7, 128.4);
  ctx.lineTo(287.2, 96.3);
  ctx.closePath();
  ctx.save();
  ctx.transform(-7.373, -0.038, -0.022, 4.353, -534.2, -3087.3);
  gradient = ctx.createLinearGradient(-119.3, 739.0, -112.0, 731.6);
  gradient.addColorStop(0.00, "rgb(0, 3, 185)");
  gradient.addColorStop(1.00, "rgb(2, 20, 225)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(287.2, 96.3);
  ctx.lineTo(233.9, 117.0);
  ctx.lineTo(283.8, 119.0);
  ctx.lineTo(287.2, 96.3);
  ctx.closePath();
  ctx.save();
  ctx.transform(-5.507, -0.028, -0.016, 3.109, -545.6, -2218.1);
  gradient = ctx.createLinearGradient(-152.8, 750.7, -147.4, 745.3);
  gradient.addColorStop(0.00, "rgb(0, 0, 218)");
  gradient.addColorStop(1.00, "rgb(2, 22, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(495.1, 82.4);
  ctx.lineTo(521.8, 63.1);
  ctx.lineTo(532.0, 93.6);
  ctx.lineTo(495.1, 82.4);
  ctx.closePath();
  ctx.save();
  ctx.transform(0.089, -0.000, -0.000, -0.089, -561.6, 42.7);
  gradient = ctx.createLinearGradient(12266.5, -404.4, 11908.6, -437.9);
  gradient.addColorStop(0.00, "rgb(171, 252, 255)");
  gradient.addColorStop(1.00, "rgb(255, 255, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(495.1, 82.4);
  ctx.lineTo(503.3, 106.5);
  ctx.lineTo(532.0, 93.6);
  ctx.lineTo(495.1, 82.4);
  ctx.closePath();
  ctx.save();
  ctx.transform(-5.063, -0.026, -0.017, 3.287, -511.4, -2344.2);
  gradient = ctx.createLinearGradient(-208.1, 744.5, -200.8, 737.2);
  gradient.addColorStop(0.00, "rgb(162, 233, 255)");
  gradient.addColorStop(1.00, "rgb(255, 255, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(495.1, 82.4);
  ctx.lineTo(475.6, 62.2);
  ctx.lineTo(521.8, 63.1);
  ctx.lineTo(495.1, 82.4);
  ctx.closePath();
  ctx.save();
  ctx.transform(0.089, -0.000, -0.000, -0.089, -561.6, 42.7);
  gradient = ctx.createLinearGradient(11939.5, -196.2, 11906.0, -442.3);
  gradient.addColorStop(0.00, "rgb(62, 200, 255)");
  gradient.addColorStop(1.00, "rgb(210, 234, 239)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(495.1, 82.4);
  ctx.lineTo(471.7, 91.4);
  ctx.lineTo(503.3, 106.5);
  ctx.lineTo(495.1, 82.4);
  ctx.closePath();
  ctx.save();
  ctx.transform(0.089, -0.000, -0.000, -0.089, -561.6, 42.7);
  gradient = ctx.createLinearGradient(11761.5, -731.9, 11906.9, -441.1);
  gradient.addColorStop(0.00, "rgb(171, 252, 255)");
  gradient.addColorStop(1.00, "rgb(255, 255, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();

  // back/Group/Path
  ctx.restore();
  ctx.beginPath();
  ctx.moveTo(495.1, 82.4);
  ctx.lineTo(471.7, 91.4);
  ctx.lineTo(475.6, 62.2);
  ctx.lineTo(495.1, 82.4);
  ctx.closePath();
  ctx.save();
  ctx.transform(0.089, -0.000, -0.000, -0.089, -561.6, 42.7);
  gradient = ctx.createLinearGradient(11936.0, -438.2, 11622.8, -382.3);
  gradient.addColorStop(0.00, "rgb(255, 255, 255)");
  gradient.addColorStop(1.00, "rgb(62, 200, 255)");
  ctx.fillStyle = gradient;
  ctx.fill();
  ctx.restore();
  ctx.restore();
  ctx.restore();
}

//CLIPPATH TIMELINE FUNCTIONS

//Timeline array for clippath animation
var timelines = [];

//Filling tl array with tl for each clippath
for (var i = 0; i < numClips; i += 1) {
  createTimeline(i);
  assignListeners(i);
}

//function for each clippath to tween size/opacity
function createTimeline(i) {
  var timeline = new TimelineMax({
    paused: true
  });
  timeline.to(circles[i], 0.6, {
    opacity: 0,
    ease: Expo.easeInOut
  }, 0);
  timeline.to(clips[i], 0.6, {
    attr: {
      r: 120
    },
    transformOrigin: '50% 50%',
    ease: Expo.easeInOut
  }, 0.1);
  timelines[i] = timeline;
}

//clippath event listeners
function assignListeners(i) {
  (function(i) {
    circles[i].addEventListener('mouseenter', function(e) {
      expand(e, i);
    }, false);
    circles[i].addEventListener('mouseleave', function(e) {
      contract(e, i);
    }, false);
  }(i));
}

//play clippath timeline on hover
function expand(e, i) {
  timelines[i].play();
}

//reverse clippath timeline on leave
function contract(e, i) {
  timelines[i].reverse();
}

//OVERLAY

var trigger = document.getElementById('trigger');
var close = document.getElementById('close');

var tl2 = new TimelineLite({
  paused: true
});
tl2.set('#overlay', {
    zIndex: 5
  })
  .set('#close', {
    zIndex: 6
  })
  .to("#closed", 1, {
    morphSVG: {
      shape: "#open"
    }
  })
  .to(close, 0.6, {
    opacity: 1,
    ease: Expo.easeInOut
  }, 0)
  .to(trigger, 0.6, {
    opacity: 0,
    ease: Expo.easeInOut
  }, 0);

trigger.addEventListener('click', openOverlay);
close.addEventListener('click', closeOverlay);

function openOverlay() {
  tl2.play();
}

function closeOverlay() {
  tl2.reverse();
}
              
            
!
999px

Console