SVG Splatter Blocks

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">
<defs>
 <filter id="goo" color-interpolation-filters="sRGB">
        <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

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 *',3, {
  rotation:90,
  ease:Power1.easeInOut,
  transformOrigin:'50% 50%',
  repeat:-1,
  yoyo:true,
  fill:"hsl(+=360, +=60%, +=0%)"
},2.6)
tl.seek(250);

/*var colourTl = new TimelineMax();
colourTl.staggerTo('rect',19, {
  repeat:-1,
  yoyo:true,
  fill:"hsl(+=360, +=0%, -=0%)"
},3)

tl.add(colourTl,0)*/

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;
 
}

svg-splatter-blocks.markdown

SVG Splatter Blocks

I started with lovely this magazine cover and it all got a bit out of hand.

A Pen by Isaac Dettman on CodePen.

License.