Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save roblevintennis/5f9977e96f5ca3b1c250 to your computer and use it in GitHub Desktop.
Save roblevintennis/5f9977e96f5ca3b1c250 to your computer and use it in GitHub Desktop.
Gannon Cannons - SVG Splatter Blocks

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.

<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>
//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);
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment