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.

Editor Settings

Code Indentation

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

Visit your global Editor Settings.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

HTML

            
              <div id="container">
  
  <div id="box1" class="box">
    <svg id="structure-icon-svg" class="icon" viewBox="0 0 300 300">
      <rect id="brick1" class="brick" width="76" height="19" x="121.5" y="102.5"/>
      <rect id="brick2" class="brick" width="19" height="76" x="178.5" y="121.5"/>
      <rect id="brick3" class="brick" width="76" height="19" x="102.5" y="178.5"/>
      <rect id="brick4" class="brick" width="19" height="76" x="102.5" y="102.5"/>
    </svg>
    <p id="l1" class="label"><a href="https://www.w3schools.com/css/css3_2dtransforms.asp" target="_blank">2D CSS</a></p>
  </div>
  
  <div id="box2" class="box">
    <div id ="decision-icon-container-div">
      <img id="decision-icon-img" class="icon" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/409445/decision-icon.svg">
    </div>
    <p id="l2" class="label"><a href="https://www.w3schools.com/css/css3_3dtransforms.asp" target="_blank">3D CSS</a></p>
  </div>
  
  <div id="box3" class="box">
    <img class="ethics-icon-component" id="ethics-icon-circle-outer" 
         src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/409445/js-ethics-icon-circle-outer.svg">
    <img class="ethics-icon-component" id="ethics-icon-circle-middle" 
         src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/409445/js-ethics-icon-circle-middle.svg">
    <img class="ethics-icon-component" id="ethics-icon-circle-inner" 
         src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/409445/js-ethics-icon-circle-inner.svg">
    <p id="l3" class="label"><a href="https://greensock.com/get-started/" target="_blank">GSAP</a></p>
  </div>
  
  <div id="box4" class="box">
    <svg id="culture-icon-svg" class="icon" viewBox="0 0 300 300"></svg>
    <p id="l4" class="label"><a href="https://github.com/matthewmain/AnimateAnythingJS" target="_blank">AnimateAnythingJS</a></p>
  </div>
  
  <div id="box5" class="box">
    <svg id="risk-icon-svg" class="icon"></svg>
    <p id="l5" class="label"><a href="https://github.com/matthewmain/VerletExpressJS" target="_blank">VerletExpressJS</a></p>
  </div>
  
</div>

<!-- scripts -->
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomEase3.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/409445/gsap.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/409445/animateAnything.js"></script>
<script src="https://cdn.jsdelivr.net/gh/matthewmain/VerletExpressJS@v1.0/verletExpress.js"></script>

            
          
!

CSS

            
              body {
  margin: 0;
}

#container {
  position: absolute;
  top: 45%;
  left: 50%;
  width: 85%;
  height: 85%;
  transform: translate( -50%, -50%);
}

.box {
  position: absolute;
  width: 33.3333%;
  height: 50%;
}

#box1 { top: 0%; left: 16.666% }
#box2 { top: 0%; left: 50% }
#box3 { top: 50%; left: 0% }
#box4 { top: 50%; left: 33.333% }
#box5 { top: 50%; left: 66.666% }

.icon {
  position: absolute;
	width: 100%; 
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.label, a {
  position: absolute;
  top: 80%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
  text-align: center;
  margin: 0;
  font-family: Avenir, Helvetica, sans-serif;
  color: #666666;
}



/***** Icon 1: 2D CSS *****/


#structure-icon-svg {
  width: 92%;
  height: 92%;
	stroke: #89C34A;
	fill: none;
	stroke-width: 5;
  animation-name: leap;
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;
  animation-duration: 5000ms;
}

.brick { 
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 5000ms; 
}

#brick1 { 
  animation-name: brick1;
  transform-origin: 65.8333% 40.5%;
}

#brick2 { 
  animation-name: brick2;
  transform-origin: 59.5% 65.8333%;
}

#brick3 { 
  animation-name: brick3;
  transform-origin: 34.1666% 59.5%;
}

#brick4 { 
  animation-name: brick4;
  transform-origin: 40.5% 34.1666%;
}

@keyframes brick1 { 
  0%   { transform: rotate( 0deg   ) }
  17%  { transform: rotate( 0deg   ) }
  27%  { transform: rotate( 270deg ) }
  100% { transform: rotate( 270deg ) }
}

@keyframes brick2 { 
  0%   { transform: rotate( 0deg   ) }
  18%  { transform: rotate( 0deg   ) }
  28%  { transform: rotate( 270deg ) }
  100% { transform: rotate( 270deg ) }
}

@keyframes brick3 { 
  0%   { transform: rotate( 0deg   ) }
  19%  { transform: rotate( 0deg   ) }
  29%  { transform: rotate( 270deg ) }
  100% { transform: rotate( 270deg ) }
}

@keyframes brick4 { 
  0%   { transform: rotate( 0deg   ) }
  20%  { transform: rotate( 0deg   ) }
  30%  { transform: rotate( 270deg ) }
  100% { transform: rotate( 270deg ) }
}

@keyframes leap { 
  0%    { top:  50% }
  18%   { top:  50% }
  24%   { top:  40% }
  30%   { top:  50% }
  100%  { top:  50% }
}



/***** Icon 2: 3D CSS *****/


#decision-icon-container-div {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  animation-name: decision-swell;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 3500ms; 
}

#decision-icon-img {
  top: 0%;
  left: 0%;
  animation-name: decision-twirl;
  transform-origin: 50% 50%;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 3500ms; 
}

@keyframes decision-twirl { 
  0% { transform: rotateX( 0deg ) rotateY( 0deg ) rotateZ( 0deg ) }
  20% { transform: rotateX( 0deg ) rotateY( 0deg ) rotateZ( 0deg ) }
  50% { transform: rotateX( 360deg ) rotateY( 360deg ) rotateZ( 360deg ) }
  100% { transform: rotateX( 360deg ) rotateY( 360deg ) rotateZ( 360deg ) }
}

@keyframes decision-swell { 
  0% { width: 100%; height: 100% }
  20% { width: 100%; height: 100% }
  30% { width: 120%; height: 120% }
  60% { width: 100%; height: 100% }
  100% { width: 100%; height: 100% }
}



/***** Icon 3: GSAP *****/


.ethics-icon-component {
  position: absolute;
  width: 100%;
  height: 100%;
  stroke-width: 5;
  fill: none;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  fill: #5CAA4B;
}



/***** Icon 4: AnimateAnythingJS *****/


#culture-icon-svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
	width: 88%; 
  height: 88%;
	stroke: #0CAA75;
	fill: none;
	stroke-width: 5;
}



/***** Icon r: VerletExpressJS *****/


#risk-icon-svg {
	width: 100%; 
  height: 100%;
  cursor: pointer;
}
            
          
!

JS

            
              

///////////////////////////////////////
/////////    Icon 3: GSAP     /////////
///////////////////////////////////////

//https://greensock.com


var innerCircle = document.getElementById("ethics-icon-circle-inner");
var middleCircle = document.getElementById("ethics-icon-circle-middle");
var outerCircle = document.getElementById("ethics-icon-circle-outer");

swellPct = "130%";  // swell percent of base size
var dur = 2.5;  // animation segment duration
var rd = 2;  // repeat delay

var innerTl = new TimelineMax( { repeat: -1 } );
var middleTl = new TimelineMax( { repeat: -1, delay: 0.075 } );
var outerTl = new TimelineMax( { repeat: -1, delay: 0.150 } );

var ripple1 = CustomEase.create("custom", "M0,0 C0.022,0.452 0.106,0.674 0.15,0.674 0.246,0.674 0.31,-0.174 0.436,-0.174 0.556,-0.174 0.603,0.084 0.682,0.084 0.754,0.084 0.802,-0.054 0.87,-0.054 0.922,-0.054 1,0 1,0");

innerTl.to(innerCircle, dur, { ease: ripple1, delay: rd, width: swellPct, height: swellPct, opacity: 0.3 } )
middleTl.to(middleCircle, dur, { ease: ripple1, delay: rd, width: swellPct, height: swellPct, opacity: 0.15  } )
outerTl.to(outerCircle, dur, { ease: ripple1, delay: rd, width: swellPct, height: swellPct, opacity: 0.0  } )
  








////////////////////////////////////////////////////
/////////    Icon 4: AnimateAnythingJS     /////////
////////////////////////////////////////////////////

//https://github.com/matthewmain/AnimateAnythingJS


///INITIATION

var cultureIconSvg = document.getElementById("culture-icon-svg");

//outer hexagon home positions
let po1 = { x: 150,   y: 95    };  // position outer 1
let po2 = { x: 197.5, y: 122.5 };  // position outer 2
let po3 = { x: 197.5, y: 177.5 };  // position outer 3
let po4 = { x: 150,   y: 205   };  // position outer 4
let po5 = { x: 102.5, y: 177.5 };  // position outer 5
let po6 = { x: 102.5, y: 122.5 };  // position outer 6

//outer hexagon current states
var so1 = { x: po1.x, y: po1.y };  // state outer 1
var so2 = { x: po2.x, y: po2.y };  // state outer 2
var so3 = { x: po3.x, y: po3.y };  // state outer 3
var so4 = { x: po4.x, y: po4.y };  // state outer 4
var so5 = { x: po5.x, y: po5.y };  // state outer 5
var so6 = { x: po6.x, y: po6.y };  // state outer 6

//inner hexagon home positions
let pi1 = { x: 171, y: 114 };  // position inner 1
let pi2 = { x: 192, y: 150 };  // position inner 2
let pi3 = { x: 171, y: 186 };  // position inner 3
let pi4 = { x: 129, y: 186 };  // position inner 4
let pi5 = { x: 108, y: 150 };  // position inner 5
let pi6 = { x: 129, y: 114 };  // position inner 6

//inner hexagon current states
var si1 = { x: pi1.x, y: pi1.y };  // state inner 1
var si2 = { x: pi2.x, y: pi2.y };  // state inner 2
var si3 = { x: pi3.x, y: pi3.y };  // state inner 3
var si4 = { x: pi4.x, y: pi4.y };  // state inner 4
var si5 = { x: pi5.x, y: pi5.y };  // state inner 5
var si6 = { x: pi6.x, y: pi6.y };  // state inner 6

//place outer hexagon
var outerHexagon = document.createElementNS("http://www.w3.org/2000/svg", "path"); 
outerHexagon.id = "outer-hexagon";
cultureIconSvg.appendChild( outerHexagon );
placeOuterHexagon();

//place inner hexagon
var innerHexagon = document.createElementNS("http://www.w3.org/2000/svg", "path"); 
innerHexagon.id = "inner-hexagon";
cultureIconSvg.appendChild( innerHexagon );
placeInnerHexagon();



///FUNCTIONS

//places outer hexagon at current state
function placeOuterHexagon() {
  outerHexagon.setAttribute("d",`
    M${so1.x}, ${so1.y}  
    L${so2.x}, ${so2.y}
    L${so3.x}, ${so3.y}
    L${so4.x}, ${so4.y}
    L${so5.x}, ${so5.y}
    L${so6.x}, ${so6.y}
    Z
  `);
}

//resets outer hexagon current state to home points
function resetOuterHexagon() {
  so1 = { x: po1.x, y: po1.y }; 
  so2 = { x: po2.x, y: po2.y };
  so3 = { x: po3.x, y: po3.y };
  so4 = { x: po4.x, y: po4.y };
  so5 = { x: po5.x, y: po5.y };
  so6 = { x: po6.x, y: po6.y };
  placeOuterHexagon();
}

//places inner hexagon at current state
function placeInnerHexagon() {
  innerHexagon.setAttribute("d",`
    M${si1.x}, ${si1.y}  
    L${si2.x}, ${si2.y}
    L${si3.x}, ${si3.y}
    L${si4.x}, ${si4.y}
    L${si5.x}, ${si5.y}
    L${si6.x}, ${si6.y}
    Z
  `);
}

//resets inner hexagon current state to home points
function resetInnerHexagon() {
  si1 = { x: pi1.x, y: pi1.y }; 
  si2 = { x: pi2.x, y: pi2.y };
  si3 = { x: pi3.x, y: pi3.y };
  si4 = { x: pi4.x, y: pi4.y };
  si5 = { x: pi5.x, y: pi5.y };
  si6 = { x: pi6.x, y: pi6.y };
  placeInnerHexagon();
}



///ANIMATIONS

var durationInFramesC = 150;
var animationActiveC = false;
var currentFrameC = 0;

//Twist Morph Animation
function runAnimation() {
  animationActiveC = true;
	currentFrameC++;
	if ( currentFrameC <= durationInFramesC ) {
		window.requestAnimationFrame( ()=> { 
			//outer hexagon twist-morphs into inner hexagon
			so1.x = AJS.easeOutQuint( po1.x, pi1.x, durationInFramesC, currentFrameC );
      so1.y = AJS.easeOutQuint( po1.y, pi1.y, durationInFramesC, currentFrameC );
      so2.x = AJS.easeOutQuint( po2.x, pi2.x, durationInFramesC, currentFrameC );
      so2.y = AJS.easeOutQuint( po2.y, pi2.y, durationInFramesC, currentFrameC );
      so3.x = AJS.easeOutQuint( po3.x, pi3.x, durationInFramesC, currentFrameC );
      so3.y = AJS.easeOutQuint( po3.y, pi3.y, durationInFramesC, currentFrameC );
      so4.x = AJS.easeOutQuint( po4.x, pi4.x, durationInFramesC, currentFrameC );
      so4.y = AJS.easeOutQuint( po4.y, pi4.y, durationInFramesC, currentFrameC );
      so5.x = AJS.easeOutQuint( po5.x, pi5.x, durationInFramesC, currentFrameC );
      so5.y = AJS.easeOutQuint( po5.y, pi5.y, durationInFramesC, currentFrameC );
      so6.x = AJS.easeOutQuint( po6.x, pi6.x, durationInFramesC, currentFrameC );
      so6.y = AJS.easeOutQuint( po6.y, pi6.y, durationInFramesC, currentFrameC );
			//inner hexagon twist-morphs into outer hexagon
			si1.x = AJS.easeOutQuint( pi1.x, po2.x, durationInFramesC, currentFrameC );
      si1.y = AJS.easeOutQuint( pi1.y, po2.y, durationInFramesC, currentFrameC );
      si2.x = AJS.easeOutQuint( pi2.x, po3.x, durationInFramesC, currentFrameC );
      si2.y = AJS.easeOutQuint( pi2.y, po3.y, durationInFramesC, currentFrameC );
      si3.x = AJS.easeOutQuint( pi3.x, po4.x, durationInFramesC, currentFrameC );
      si3.y = AJS.easeOutQuint( pi3.y, po4.y, durationInFramesC, currentFrameC );
      si4.x = AJS.easeOutQuint( pi4.x, po5.x, durationInFramesC, currentFrameC );
      si4.y = AJS.easeOutQuint( pi4.y, po5.y, durationInFramesC, currentFrameC );
      si5.x = AJS.easeOutQuint( pi5.x, po6.x, durationInFramesC, currentFrameC );
      si5.y = AJS.easeOutQuint( pi5.y, po6.y, durationInFramesC, currentFrameC );
      si6.x = AJS.easeOutQuint( pi6.x, po1.x, durationInFramesC, currentFrameC );
      si6.y = AJS.easeOutQuint( pi6.y, po1.y, durationInFramesC, currentFrameC );
      //update svg
      placeOuterHexagon();
      placeInnerHexagon();
			//recursion
			runAnimation();
		});
	} else {
		currentFrameC = 0;
		animationActiveC = false;
    resetOuterHexagon();
    resetInnerHexagon();
    setTimeout( ()=> { runAnimation() }, 1500 );
	}
}


var deg = 0;
function rotate() {
  deg += 0.3;
  window.requestAnimationFrame( ()=> { 
    cultureIconSvg.style.transform = `rotate(${deg}deg)`;
    rotate();
  });
}


///Activation

runAnimation();









//////////////////////////////////////////////////
/////////    Icon 5: VerletExpressJS     /////////
//////////////////////////////////////////////////

//https://github.com/matthewmain/VerletExpressJS


///---INITIATION---///


///settings
var expOrig = { x: 150, y: 190 };  // explosion origin
var expInt = 8;  // explosion intensity (as velocity in svg units)
var explosionDelay = 300;
var assemblyDelay = 200;
var reasSpd = 3;  // reassemble speed (as svg units per iteration)
var shardStyleObject = { 
  fillColor: "#FFFFFF",
  outlineColor: "#0B419E",
  outlineThickness: "5"
}

//trackers
var isExploded = false;
var iterationsSinceLastExplosion = 0;
var iterationsSinceLastAssembly = 0;

///VerletExpressJS
VX.initialize( "2d", "svg", "risk-icon-svg", "300", "300" );
VX.xRange = { min: 50, max: 250 };
VX.yRange.max = 190.95;
VX.gravity = 0.1;




///---SHAPES---///

//svg home points (forms broken triangle icon, clockwise from top)
let spT1 =  { x: 150,     y: 111.97 };  // svg point tip 1
let spE1a = { x: 167.88,  y: 143.12 };  // svg point edge 1a
let spE1b = { x: 177.5,   y: 159.89 };  // svg point edge 1b
let spT2 =  { x: 195.31,  y: 190.95 };  // svg point tip 2
let spE2a = { x: 166,     y: 190.95 };  // svg point edge 2a
let spE2b = { x: 114,     y: 190.95 };  // svg point edge 2b
let spT3 =  { x: 104.69,  y: 190.95 };  // svg point tip 3
let spE3 =  { x: 135.98,  y: 136.39 };  // svg point edge 3
let spC =   { x: 154.34,  y: 169.77 };  // svg point center

//shard 1 verlet components
var vpS1a = VX.addPoint( spT1 ); vpS1a.homePoint = spT1;  // verlet point shard 1a
var vpS1b = VX.addPoint( spE1a ); vpS1b.homePoint = spE1a;  // verlet point shard 1b
var vpS1c = VX.addPoint( spC ); vpS1c.homePoint = spC;  // verlet point shard 1c
var vpS1d = VX.addPoint( spE3 ); vpS1d.homePoint = spE3;  // verlet point shard 1d
var vsS2a = VX.addSpan( vpS1a, vpS1b );  // verlet span shard 1a
var vsS2b = VX.addSpan( vpS1b, vpS1c );  // verlet span shard 1b
var vsS2c = VX.addSpan( vpS1c, vpS1d );  // verlet span shard 1c
var vsS2d = VX.addSpan( vpS1d, vpS1a );  // verlet span shard 1d
var vsS2e = VX.addSpan( vpS1b, vpS1d );  // verlet span shard 1e  (scaffold)
var skinShard1 = VX.addSkin( [ vpS1a, vpS1b, vpS1c, vpS1d ], shardStyleObject );  // border as skin object

//shard 3 verlet components
var vpS3a = VX.addPoint( spE1b ); vpS3a.homePoint = spE1b;  // verlet point shard 1a
var vpS3b = VX.addPoint( spT2 ); vpS3b.homePoint = spT2;  // verlet point shard 1b
var vpS3c = VX.addPoint( spE2a ); vpS3c.homePoint = spE2a;  // verlet point shard 1c
var vpS3d = VX.addPoint( spC ); vpS3d.homePoint = spC;  // verlet point shard 1d
var vsS2a = VX.addSpan( vpS3a, vpS3b );  // verlet span shard 1a
var vsS2b = VX.addSpan( vpS3b, vpS3c );  // verlet span shard 1b
var vsS2c = VX.addSpan( vpS3c, vpS3d );  // verlet span shard 1c
var vsS2d = VX.addSpan( vpS3d, vpS3a );  // verlet span shard 1d
var vsS2e = VX.addSpan( vpS3a, vpS3c );  // verlet span shard 1e (scaffold)
var skinShard3 = VX.addSkin( [ vpS3a, vpS3b, vpS3c, vpS3d ], shardStyleObject );  // border as skin object

//shard 4 verlet components
var vpS4a = VX.addPoint( spC ); vpS4a.homePoint = spC;  // verlet point shard 2a
var vpS4b = VX.addPoint( spE2a ); vpS4b.homePoint = spE2a;  // verlet point shard 2b
var vpS4c = VX.addPoint( spE2b ); vpS4c.homePoint = spE2b;  // verlet point shard 2c
var vsS4a = VX.addSpan( vpS4a, vpS4b );  // verlet span shard 2a
var vsS4b = VX.addSpan( vpS4b, vpS4c );  // verlet span shard 2b
var vsS4c = VX.addSpan( vpS4c, vpS4a );  // verlet span shard 2c
var skinShard4 = VX.addSkin( [ vpS4a, vpS4b, vpS4c ], shardStyleObject );  // border as skin object

//shard 5 verlet components
var vpS5a = VX.addPoint( spE3 ); vpS5a.homePoint = spE3;  // verlet point shard 2a
var vpS5b = VX.addPoint( spC ); vpS5b.homePoint = spC;  // verlet point shard 2b
var vpS5c = VX.addPoint( spE2b ); vpS5c.homePoint = spE2b;  // verlet point shard 2c
var vpS5d = VX.addPoint( spT3 ); vpS5d.homePoint = spT3;  // verlet point shard 2d
var vsS5a = VX.addSpan( vpS5a, vpS5b );  // verlet span shard 2a
var vsS5b = VX.addSpan( vpS5b, vpS5c );  // verlet span shard 2b
var vsS5c = VX.addSpan( vpS5c, vpS5d );  // verlet span shard 2c
var vsS5d = VX.addSpan( vpS5d, vpS5a );  // verlet span shard 2d
var vsS5e = VX.addSpan( vpS5a, vpS5c );  // verlet span shard 2e (scaffold)
var vsS5f = VX.addSpan( vpS5b, vpS5d );  // verlet span shard 2f (scaffold)
var skinShard5 = VX.addSkin( [ vpS5a, vpS5b, vpS5c, vpS5d ], shardStyleObject );   // border as skin object

//shard 2 verlet components
var vpS2a = VX.addPoint( spE1a ); vpS2a.homePoint = spE1a;  // verlet point shard 2a
var vpS2b = VX.addPoint( spE1b ); vpS2b.homePoint = spE1b;  // verlet point shard 2b
var vpS2c = VX.addPoint( spC ); vpS2c.homePoint = spC;  // verlet point shard 2c
var vsS2a = VX.addSpan( vpS2a, vpS2b );  // verlet span shard 2a
var vsS2b = VX.addSpan( vpS2b, vpS2c );  // verlet span shard 2b
var vsS2c = VX.addSpan( vpS2c, vpS2a );  // verlet span shard 2c
var skinShard2 = VX.addSkin( [ vpS2a, vpS2b, vpS2c ], shardStyleObject );  // border as skin object



///---FUNCTIONS---///

//pins all points to current locations
function pinPoints() {
  for (var i=0; i<VX.points.length; i++) {
    VX.points[i].fixed = true;
  }
}

//unpins all points
function unpinPoints() {
  for (var i=0; i<VX.points.length; i++) {
    VX.points[i].fixed = false;
  }
}

//explodes triangle
function explode() {
  unpinPoints();
  isExploded = true;
  iterationsSinceLastExplosion = 0;
  varExpInt = VX.rib( expInt-2, expInt+2 );  // varying explosion intensity
  for (i=0; i<VX.points.length; i++) {
    var p = VX.points[i];
    var xDist = p.cx - expOrig.x;  // x distance from explosion origin to point 
    var yDist = p.cy - expOrig.y;  // y distance from explosion origin to point
    var dist = Math.sqrt( xDist*xDist + yDist*yDist );  // distance from explosion origin to point
    var distRat = varExpInt / dist;  // distance ratio (of velocity to distance from explosion origin point)
    p.px = p.cx - xDist * distRat;
    p.py = p.cy - yDist * distRat;
  }
}

function explodeIfReady() {
  iterationsSinceLastAssembly++;
  if ( iterationsSinceLastAssembly > explosionDelay && !isExploded ) {
    explode();
  }
}

function reassemble() {
  gravity = 0;
  VX.yRange.max = 200;  // clears ground so shapes don't get stuck during reassembly
  isExploded = false;
  for (i=0; i<VX.points.length; i++) {
    var p = VX.points[i];
    var xDist = p.cx - p.homePoint.x;  // x distance from current point to home point 
    var yDist = p.cy - p.homePoint.y;  // y distance from current point to home point
    var dist = Math.sqrt( xDist*xDist + yDist*yDist );  // distance from current point to home point
    var distRat = reasSpd / dist;  // distance ratio (of velocity to distance from home point)
    p.cx = p.px = p.cx - xDist * distRat;
    p.cy = p.py = p.cy - yDist * distRat;
    if ( dist < 2 ) {
      p.cx = p.px = p.homePoint.x;
      p.cy = p.py = p.homePoint.y;
      p.pinned = true;
    } else {
      isExploded = true;
    }
  }
  if ( !isExploded ) {
    VX.yRange.max = 190.95;  // returns ground to normal position
    pinPoints();
    gravity = 0.1;
    iterationsSinceLastAssembly = 0;
  }
}

function reassembleIfReady() {
  iterationsSinceLastExplosion++;
  if ( iterationsSinceLastExplosion > assemblyDelay && isExploded ) {
    reassemble();
  }
}



///---EVENTS---///


VX.svg.addEventListener("click", explode );



///---EXECUTION---///


pinPoints()

VX.runOnFrameRefresh = function() {
  explodeIfReady();
  reassembleIfReady();
}







            
          
!
999px

Console