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 is required to process package imports. If you need a different preprocessor remove all packages first.

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

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

              
                <svg width="480" height="415.692" viewBox="-240,-277.128129212,480,415.692" id="triangle"></svg>
              
            
!

CSS

              
                html,
body {
  background: #fff;
	padding: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
  text-align: center;
}

#triangle {
  position: relative;
  margin: 0 auto;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}


#tri0,
#tri1,
#tri2,
#tri3 {
  -webkit-animation: animation 1000ms linear both infinite;
          animation: animation 1000ms linear both infinite;
/*   -webkit-transform-origin: 50% 66.666666666666666%;
      -ms-transform-origin: 50% 66.666666666666666%;
          transform-origin: 50% 66.666666666666666%; */
}
#tri2 {
  -webkit-animation-delay: 50ms;
          animation-delay: 50ms;
}
#tri1 {
  -webkit-animation-delay: 100ms;
          animation-delay: 100ms;
}
#tri0 {
  -webkit-animation-delay: 200ms;
          animation-delay: 200ms;
}


/* Generated with Bounce.js. Edit at https://goo.gl/y3FSYm */

@-webkit-keyframes animation {
  0% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  3.333333% { -webkit-transform: matrix3d(1.2909, 0, 0, 0, 0, 1.37203, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.2909, 0, 0, 0, 0, 1.37203, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  6.666667% { -webkit-transform: matrix3d(1.59685, 0, 0, 0, 0, 1.81382, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.59685, 0, 0, 0, 0, 1.81382, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  10% { -webkit-transform: matrix3d(1.85548, 0, 0, 0, 0, 2.14452, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.85548, 0, 0, 0, 0, 2.14452, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  13.333333% { -webkit-transform: matrix3d(2.03794, 0, 0, 0, 0, 2.29368, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(2.03794, 0, 0, 0, 0, 2.29368, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  16.666667% { -webkit-transform: matrix3d(2.14088, 0, 0, 0, 0, 2.28177, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(2.14088, 0, 0, 0, 0, 2.28177, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  20% { -webkit-transform: matrix3d(2.17694, 0, 0, 0, 0, 2.17694, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(2.17694, 0, 0, 0, 0, 2.17694, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  23.333333% { -webkit-transform: matrix3d(2.16606, 0, 0, 0, 0, 2.05246, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(2.16606, 0, 0, 0, 0, 2.05246, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  26.666667% { -webkit-transform: matrix3d(2.12889, 0, 0, 0, 0, 1.95928, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(2.12889, 0, 0, 0, 0, 1.95928, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  30% { -webkit-transform: matrix3d(2.08275, 0, 0, 0, 0, 1.91725, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(2.08275, 0, 0, 0, 0, 1.91725, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  33.333333% { -webkit-transform: matrix3d(2.0397, 0, 0, 0, 0, 1.92061, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(2.0397, 0, 0, 0, 0, 1.92061, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  36.666667% { -webkit-transform: matrix3d(2.00644, 0, 0, 0, 0, 1.95014, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(2.00644, 0, 0, 0, 0, 1.95014, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  40% { -webkit-transform: matrix3d(1.98522, 0, 0, 0, 0, 1.98522, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.98522, 0, 0, 0, 0, 1.98522, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  43.333333% { -webkit-transform: matrix3d(1.97516, 0, 0, 0, 0, 2.01147, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.97516, 0, 0, 0, 0, 2.01147, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  46.666667% { -webkit-transform: matrix3d(1.97367, 0, 0, 0, 0, 2.02332, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.97367, 0, 0, 0, 0, 2.02332, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  50% { -webkit-transform: matrix3d(1.97763, 0, 0, 0, 0, 2.02237, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.97763, 0, 0, 0, 0, 2.02237, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  53.333333% { -webkit-transform: matrix3d(1.98414, 0, 0, 0, 0, 2.01405, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.98414, 0, 0, 0, 0, 2.01405, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  56.666667% { -webkit-transform: matrix3d(1.99098, 0, 0, 0, 0, 2.00417, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.99098, 0, 0, 0, 0, 2.00417, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  60% { -webkit-transform: matrix3d(1.99677, 0, 0, 0, 0, 1.99677, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.99677, 0, 0, 0, 0, 1.99677, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  63.333333% { -webkit-transform: matrix3d(2.00085, 0, 0, 0, 0, 1.99343, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(2.00085, 0, 0, 0, 0, 1.99343, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  66.666667% { -webkit-transform: matrix3d(2.00315, 0, 0, 0, 0, 1.9937, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(2.00315, 0, 0, 0, 0, 1.9937, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  70% { -webkit-transform: matrix3d(2.00396, 0, 0, 0, 0, 1.99604, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(2.00396, 0, 0, 0, 0, 1.99604, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  73.333333% { -webkit-transform: matrix3d(2.00371, 0, 0, 0, 0, 1.99883, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(2.00371, 0, 0, 0, 0, 1.99883, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  76.666667% { -webkit-transform: matrix3d(2.00288, 0, 0, 0, 0, 2.00091, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(2.00288, 0, 0, 0, 0, 2.00091, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  80% { -webkit-transform: matrix3d(2.00185, 0, 0, 0, 0, 2.00185, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(2.00185, 0, 0, 0, 0, 2.00185, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  83.333333% { -webkit-transform: matrix3d(2.00089, 0, 0, 0, 0, 2.00178, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(2.00089, 0, 0, 0, 0, 2.00178, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  86.666667% { -webkit-transform: matrix3d(2.00014, 0, 0, 0, 0, 2.00112, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(2.00014, 0, 0, 0, 0, 2.00112, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  90% { -webkit-transform: matrix3d(1.99967, 0, 0, 0, 0, 2.00033, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.99967, 0, 0, 0, 0, 2.00033, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  93.333333% { -webkit-transform: matrix3d(1.99944, 0, 0, 0, 0, 1.99974, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.99944, 0, 0, 0, 0, 1.99974, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  96.666667% { -webkit-transform: matrix3d(1.99941, 0, 0, 0, 0, 1.99948, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.99941, 0, 0, 0, 0, 1.99948, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  100% { -webkit-transform: matrix3d(2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
}

@keyframes animation {
  0% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  3.333333% { -webkit-transform: matrix3d(1.2909, 0, 0, 0, 0, 1.37203, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.2909, 0, 0, 0, 0, 1.37203, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  6.666667% { -webkit-transform: matrix3d(1.59685, 0, 0, 0, 0, 1.81382, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.59685, 0, 0, 0, 0, 1.81382, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  10% { -webkit-transform: matrix3d(1.85548, 0, 0, 0, 0, 2.14452, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.85548, 0, 0, 0, 0, 2.14452, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  13.333333% { -webkit-transform: matrix3d(2.03794, 0, 0, 0, 0, 2.29368, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(2.03794, 0, 0, 0, 0, 2.29368, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  16.666667% { -webkit-transform: matrix3d(2.14088, 0, 0, 0, 0, 2.28177, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(2.14088, 0, 0, 0, 0, 2.28177, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  20% { -webkit-transform: matrix3d(2.17694, 0, 0, 0, 0, 2.17694, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(2.17694, 0, 0, 0, 0, 2.17694, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  23.333333% { -webkit-transform: matrix3d(2.16606, 0, 0, 0, 0, 2.05246, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(2.16606, 0, 0, 0, 0, 2.05246, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  26.666667% { -webkit-transform: matrix3d(2.12889, 0, 0, 0, 0, 1.95928, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(2.12889, 0, 0, 0, 0, 1.95928, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  30% { -webkit-transform: matrix3d(2.08275, 0, 0, 0, 0, 1.91725, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(2.08275, 0, 0, 0, 0, 1.91725, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  33.333333% { -webkit-transform: matrix3d(2.0397, 0, 0, 0, 0, 1.92061, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(2.0397, 0, 0, 0, 0, 1.92061, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  36.666667% { -webkit-transform: matrix3d(2.00644, 0, 0, 0, 0, 1.95014, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(2.00644, 0, 0, 0, 0, 1.95014, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  40% { -webkit-transform: matrix3d(1.98522, 0, 0, 0, 0, 1.98522, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.98522, 0, 0, 0, 0, 1.98522, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  43.333333% { -webkit-transform: matrix3d(1.97516, 0, 0, 0, 0, 2.01147, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.97516, 0, 0, 0, 0, 2.01147, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  46.666667% { -webkit-transform: matrix3d(1.97367, 0, 0, 0, 0, 2.02332, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.97367, 0, 0, 0, 0, 2.02332, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  50% { -webkit-transform: matrix3d(1.97763, 0, 0, 0, 0, 2.02237, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.97763, 0, 0, 0, 0, 2.02237, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  53.333333% { -webkit-transform: matrix3d(1.98414, 0, 0, 0, 0, 2.01405, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.98414, 0, 0, 0, 0, 2.01405, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  56.666667% { -webkit-transform: matrix3d(1.99098, 0, 0, 0, 0, 2.00417, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.99098, 0, 0, 0, 0, 2.00417, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  60% { -webkit-transform: matrix3d(1.99677, 0, 0, 0, 0, 1.99677, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.99677, 0, 0, 0, 0, 1.99677, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  63.333333% { -webkit-transform: matrix3d(2.00085, 0, 0, 0, 0, 1.99343, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(2.00085, 0, 0, 0, 0, 1.99343, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  66.666667% { -webkit-transform: matrix3d(2.00315, 0, 0, 0, 0, 1.9937, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(2.00315, 0, 0, 0, 0, 1.9937, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  70% { -webkit-transform: matrix3d(2.00396, 0, 0, 0, 0, 1.99604, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(2.00396, 0, 0, 0, 0, 1.99604, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  73.333333% { -webkit-transform: matrix3d(2.00371, 0, 0, 0, 0, 1.99883, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(2.00371, 0, 0, 0, 0, 1.99883, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  76.666667% { -webkit-transform: matrix3d(2.00288, 0, 0, 0, 0, 2.00091, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(2.00288, 0, 0, 0, 0, 2.00091, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  80% { -webkit-transform: matrix3d(2.00185, 0, 0, 0, 0, 2.00185, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(2.00185, 0, 0, 0, 0, 2.00185, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  83.333333% { -webkit-transform: matrix3d(2.00089, 0, 0, 0, 0, 2.00178, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(2.00089, 0, 0, 0, 0, 2.00178, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  86.666667% { -webkit-transform: matrix3d(2.00014, 0, 0, 0, 0, 2.00112, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(2.00014, 0, 0, 0, 0, 2.00112, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  90% { -webkit-transform: matrix3d(1.99967, 0, 0, 0, 0, 2.00033, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.99967, 0, 0, 0, 0, 2.00033, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  93.333333% { -webkit-transform: matrix3d(1.99944, 0, 0, 0, 0, 1.99974, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.99944, 0, 0, 0, 0, 1.99974, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  96.666667% { -webkit-transform: matrix3d(1.99941, 0, 0, 0, 0, 1.99948, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.99941, 0, 0, 0, 0, 1.99948, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  100% { -webkit-transform: matrix3d(2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
}

              
            
!

JS

              
                window.onload = function() {
  var starts = ['#FFA398', '#FF7465', '#FF5C4D', '#FF4633'];
  var stops = ['#FF8EAC', '#FF5681', '#FF3B6C', '#FF1F58'];

  var svg = document.getElementById('triangle');

  for (var i = 0; i < 4; i++) {
    var g = createGradient(svg, 'g' + i, [
      { offset:'0%', 'stop-color': starts[i] },
      { offset:'100%', 'stop-color': stops[i] }
    ]);

    makeTrianlge(svg, 120 - 20 * i, 'g' + i, 'tri' + i);
  };
};

var makeTrianlge = function(svg, s, grad, id) {
  var SQRT_3 = 1.73205080757;

  var points = '0,' + -s / SQRT_3 + ' ' +
               -s/2 + ',' + s * 0.5 / SQRT_3 + ' ' +
               s/2 + ',' + s * 0.5 / SQRT_3;

  var poly = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
  poly.setAttribute('id', id);
  console.log(poly)
  poly.setAttribute('points', points);
  poly.setAttribute('fill', 'url(#' + grad + ')');
  svg.appendChild(poly);
};


var createGradient = function(svg, id, stops){
  var svgNS = svg.namespaceURI;
  var grad  = document.createElementNS(svgNS, 'linearGradient');

  grad.setAttribute('id', id);

  for(var i = 0; i < stops.length; i++) {
    var attrs = stops[i];
    var stop = document.createElementNS(svgNS, 'stop');
    for (var attr in attrs){
      if (attrs.hasOwnProperty(attr)) stop.setAttribute(attr, attrs[attr]);
    }
    grad.appendChild(stop);
  }

  grad.setAttribute('x1', '0%');
  grad.setAttribute('y1', '0%');
  grad.setAttribute('x2', '100%');
  grad.setAttribute('y2', '100%');

  var defs = svg.querySelector('defs') ||
    svg.insertBefore( document.createElementNS(svgNS,'defs'), svg.firstChild);
  return defs.appendChild(grad);
}
              
            
!
999px

Console