Gannon Cannons - SVG Splatter Blocks

Gannon Cannons - SVG Splatter Blocks.markdown

Gannon Cannons - SVG Splatter Blocks

Chris Gannon rocks at SVG animation. This is just me studying his stuff and a total buffoonery not to be taken seriously! Go look at Chris's original here: http://codepen.io/chrisgannon/pen/wKReBX as this is just a decomposition for me to figure out what the dude's doing cuz "imitation is the sincerest form of flattery" and all dat jazz :-)

A Pen by Rob Levin on CodePen.

License.

index.html

<div class="container">

<svg version="1.1"
   xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
   x="0px" y="0px" width="600px" height="600px" viewBox="0 0 600 600" enable-background="new 0 0 600 600" xml:space="preserve">
  
  
  <!-- The goo filter below is what makes all this interesting and is sort of a bite off lucas bebber's goo stuff ex http://codepen.io/lbebber/pen/LELBEo -->
<defs>
   <filter id="goo">
     <feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />
     <feColorMatrix in="blur" mode="matrix" values="1 0.3 0 0 0  0 1 0.3 0 0  0 0 1 0 0  0 0 0 25 -20" result="cm" />
  </filter>  
</defs>
<g id="rectGroup" filter="url(#goo)">
    <rect x="202.3" y="472" fill="#69B29F" width="58" height="58"/>
    <rect x="270" y="472" fill="#69B29F" width="58" height="58"/>
    <rect x="337" y="472" fill="#69B29F" width="58" height="58"/>
    <rect x="403.8" y="472" fill="#5194C1" width="58" height="58"/>
    <rect x="471" y="472" fill="#5194C1" width="58" height="58"/>
    <rect x="68" y="472" fill="#5194C1" width="58" height="58"/>
    <rect x="135" y="472" fill="#5194C1" width="58" height="58"/>
    <rect x="471" y="405" fill="#5194C1" width="58" height="58"/>
    <rect x="202.3" y="405" fill="#69B29F" width="58" height="58"/>
    <rect x="270" y="405" fill="#69B29F" width="58" height="58"/>
    <rect x="337" y="405" fill="#69B29F" width="58" height="58"/>
    <rect x="403.8" y="405" fill="#5194C1" width="58" height="58"/>
    <rect x="68" y="405" fill="#5194C1" width="58" height="58"/>
    <rect x="135" y="405" fill="#5194C1" width="58" height="58"/>
    <rect x="471" y="337" fill="#5194C1" width="58" height="58"/>
    <rect x="202.3" y="337" fill="#69B29F" width="58" height="58"/>
    <rect x="270" y="337" fill="#69B29F" width="58" height="58"/>
    <rect x="337" y="337" fill="#69B29F" width="58" height="58"/>
    <rect x="403.8" y="337" fill="#5194C1" width="58" height="58"/>
    <rect x="68" y="337" fill="#5194C1" width="58" height="58"/>
    <rect x="135" y="337" fill="#5194C1" width="58" height="58"/>
    <rect x="471" y="270" fill="#5194C1" width="58" height="58"/>
    <rect x="202.3" y="270" fill="#69B29F" width="58" height="58"/>
    <rect x="270" y="270" fill="#69B29F" width="58" height="58"/>
    <rect x="337" y="270" fill="#69B29F" width="58" height="58"/>
    <rect x="403.8" y="270" fill="#5194C1" width="58" height="58"/>
    <rect x="68" y="270" fill="#5194C1" width="58" height="58"/>
    <rect x="135" y="270" fill="#5194C1" width="58" height="58"/>
    <rect x="471" y="202" fill="#5194C1" width="58" height="58"/>
    <rect x="202.3" y="202" fill="#69B29F" width="58" height="58"/>
    <rect x="270" y="202" fill="#69B29F" width="58" height="58"/>
    <rect x="337" y="202" fill="#69B29F" width="58" height="58"/>
    <rect x="403.8" y="202" fill="#5194C1" width="58" height="58"/>
    <rect x="68" y="202" fill="#5194C1" width="58" height="58"/>
    <rect x="135" y="202" fill="#5194C1" width="58" height="58"/>
    <rect x="471" y="135" fill="#5194C1" width="58" height="58"/>
    <rect x="202.3" y="135" fill="#69B29F" width="58" height="58"/>
    <rect x="270" y="135" fill="#69B29F" width="58" height="58"/>
    <rect x="337" y="135" fill="#69B29F" width="58" height="58"/>
    <rect x="403.8" y="135" fill="#5194C1" width="58" height="58"/>
    <rect x="68" y="135" fill="#5194C1" width="58" height="58"/>
    <rect x="135" y="135" fill="#5194C1" width="58" height="58"/>
    <rect x="471" y="67" fill="#5194C1" width="58" height="58"/>
    <rect x="202.3" y="67" fill="#69B29F" width="58" height="58"/>
    <rect x="270" y="67" fill="#69B29F" width="58" height="58"/>
    <rect x="337" y="67" fill="#69B29F" width="58" height="58"/>
    <rect x="403.8" y="67" fill="#5194C1" width="58" height="58"/>
    <rect x="68" y="67" fill="#5194C1" width="58" height="58"/>
    <rect x="135" y="67" fill="#5194C1" width="58" height="58"/>
</g>
</svg>


</div>

script.js

//Chris's original is here: http://codepen.io/chrisgannon/pen/wKReBX
//Gannon Gannon decomposition notes...to see what the "unadultrated svg" looks like remove/comment out the filter in the <defs> ... it's just a bunch of squares...it's the goo filter and the animation of the hsl which makes this whole thing interesting.

var xmlns = "http://www.w3.org/2000/svg",
  select = function(s) {
    return document.querySelector(s);
  },
  selectAll = function(s) {
    return document.querySelectorAll(s);
  },
  container = select('.container')


//center the container cos it's pretty an' that
TweenMax.set(container, {
  position: 'absolute',
  top: '50%',
  left: '50%',
  xPercent: -50,
  yPercent: -50
})
TweenMax.set('svg', {
  visibility:'visible'
})


var tl = new TimelineMax();
tl.staggerTo('#rectGroup *',10 /*slowed way down*/, {
  rotation:90,
  ease:Power1.easeInOut,
  transformOrigin:'50% 50%',
  repeat:-1, //forever and ever
  yoyo:true,
  fill:"hsl(+=360, +=360%, +=0%)" //hue, saturation, ligthness
  //his original settings were +=360, +=60%, +=0% which looks better
},2.6)
tl.seek(250);

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>

style.css

body {
  background-color:#002129;
  overflow: hidden;
}

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
.container{
  position:absolute;
  max-width:100%;
  height:600px;
}

svg{
  max-width:100%;
  visibility:hidden;
 
}