A Pen by Ryan W Moore.

index.html

<div class="container">
<svg x="0px" y="0px"
	 width="100%" height="100%" viewBox="0 0 270.708 215.15" style="enable-background:new 0 0 1000 1000;"
	 xml:space="preserve">
<style type="text/css">
<![CDATA[
	.st0{fill:url(#SVGID_1_);}
	.st1{fill:url(#SVGID_2_);}
	.st2{fill:url(#SVGID_3_);}
]]>
</style>
<g>
	
		<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="1609.1655" y1="-1555.043" x2="1902.0342" y2="-1482.8956" gradientTransform="matrix(0 -1 1 0 1666.7729 1830.5156)">
		<stop  offset="0" style="stop-color:#333333"/>
		<stop  offset="1" style="stop-color:#878787"/>
	</linearGradient>
	<polygon class="st0" points="127.934,42.637 37.082,198.139 25.614,186.788 128.495,13.922 218.602,171.659 202.983,171.69 	"/>
	
		<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="1586.1226" y1="-1581.4736" x2="1712.1879" y2="-1484.0319" gradientTransform="matrix(0 -1 1 0 1666.7729 1830.5156)">
		<stop  offset="0" style="stop-color:#1D1D1D"/>
		<stop  offset="1" style="stop-color:#333333"/>
	</linearGradient>
	<polygon class="st1" points="62.774,185.155 241.735,184.936 234.938,198.499 37.082,198.139 127.586,41.983 135.924,56.353 	"/>
	
		<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="1745.3804" y1="-1467.3633" x2="1631.5687" y2="-1581.1749" gradientTransform="matrix(0 -1 1 0 1666.7729 1830.5156)">
		<stop  offset="0" style="stop-color:#CBCBCB"/>
		<stop  offset="1" style="stop-color:#7C7C7C"/>
	</linearGradient>
	<polygon class="st2" points="218.354,171.6 128.495,13.922 144.114,13.922 241.735,184.936 62.774,185.155 70.579,171.424 	"/>
</g>
</svg>
</div> 
  
  

Penrose-Triangle.markdown

Penrose Triangle

Loving impossible geometry designs at the moment.

Forked from Marcus Hall's Pen Penrose Triangle.

A Pen by Ryan W Moore on CodePen.

License.

script.js

var dark = Snap(".st0");
var grey = Snap(".st1"); 
var light = Snap(".st2");

  dark.attr({
      transform: 't0 -400', 
      opacity: '0',
  });  

    grey.attr({
      fill: '#3d3d3d',
      transform: 't-400 0',
      opacity: '0', 
  });  

    light.attr({
      fill: '#3d3d3d',
      transform: 't400 0',
      opacity: '0', 
  });  



 

setTimeout(function () { 
  grey.animate({transform: 't0 0', opacity: '1',}, 1500, mina.easeOut)
}, 0);

setTimeout(function () { 
dark.animate({transform: 't0 0', opacity: '1',}, 1500, mina.easeOut)
}, 1000);  

setTimeout(function () { 
  light.animate({transform: 't0 0', opacity: '1',}, 1500, mina.easeOut)
}, 2000);  



setTimeout(function () { 
  light.animate({transform: 't-50 0', opacity: '1'}, 1500, mina.easeOut)
},4000);  


setTimeout(function () { 
  grey.animate({transform: 't0 0', opacity: '1'}, 1500, mina.easeOut)
},4000);  


setTimeout(function () { 
  dark.animate({transform: 't50 0', opacity: '1'}, 1500, mina.easeOut)
},4000);  

style.scss

body {
  background: #000;
}