Cacher is the code snippet organizer for pro developers

<svg id="svg"></svg>

var s = Snap('#svg'), squares = [],
    bg = s.rect(0, 0, 300, 84);

bg.attr({
  'fill': '#bbb'
});

var squareGroup = s.group(bg);

var increase = Math.PI * 2 /40;

var path = s.path("M0,0h19.512l10.043,48.955L40.72,0h14.778l11.055,49.181L76.816,0h19.518L76.368,75.241H59.445L48.055,26.62 L36.659,75.241H19.403L0,0z M155.216,18.84v56.455h-15.799v-6.091c-2.713,5.302-8.556,7.954-17.524,7.954 c-4.297,0-8.199-0.734-11.702-2.199c-3.504-1.469-6.521-3.517-9.045-6.149c-2.528-2.631-4.486-5.79-5.878-9.478 c-1.398-3.682-2.091-7.783-2.091-12.291c0-4.439,0.714-8.519,2.147-12.239c1.431-3.726,3.431-6.919,5.994-9.59 c2.563-2.667,5.615-4.738,9.157-6.203c3.542-1.468,7.461-2.201,11.759-2.201c4.293,0,7.839,0.64,10.625,1.917 c2.79,1.28,4.976,3.309,6.559,6.091V18.84H155.216z M124.081,32.712c-1.97,0-3.828,0.359-5.572,1.077 c-1.743,0.719-3.241,1.737-4.491,3.059s-2.235,2.852-2.955,4.587c-0.723,1.735-1.08,3.625-1.08,5.658 c0,2.041,0.357,3.931,1.08,5.667c0.72,1.737,1.722,3.26,3.014,4.585c1.286,1.322,2.801,2.343,4.548,3.056 c1.743,0.719,3.598,1.076,5.571,1.076c2.047,0,3.94-0.357,5.683-1.076c1.743-0.713,3.238-1.716,4.491-2.998 c1.251-1.283,2.236-2.812,2.958-4.587c0.72-1.771,1.08-3.717,1.08-5.833c0-2.036-0.36-3.922-1.08-5.664 c-0.723-1.737-1.707-3.246-2.958-4.528c-1.253-1.286-2.766-2.282-4.547-3.001C128.042,33.072,126.127,32.712,124.081,32.712z M188.084,0v18.84h8.123v12.744h-8.123v43.658h-16.807V31.583h-8.234V18.84h8.234V0H188.084z M204.33,75.295V0h16.919v23.305c4.061-4.255,9.475-6.385,16.241-6.385c4.061,0,7.785,0.734,11.169,2.2 c3.385,1.466,6.316,3.537,8.8,6.206c2.48,2.669,4.415,5.827,5.808,9.476c1.392,3.646,2.088,7.61,2.088,11.897 c0,4.439-0.696,8.517-2.088,12.243c-1.393,3.722-3.365,6.937-5.922,9.645c-2.557,2.704-5.584,4.813-9.082,6.314 c-3.496,1.506-7.313,2.258-11.448,2.258c-1.73,0-3.271-0.132-4.625-0.393c-1.354-0.262-2.672-0.693-3.948-1.289	c-1.279-0.596-2.558-1.419-3.835-2.462c-1.279-1.048-2.633-2.315-4.061-3.811v6.091H204.33z M234.616,32.601 c-2.039,0-3.907,0.36-5.607,1.079c-1.699,0.719-3.174,1.744-4.415,3.071c-1.247,1.325-2.229,2.86-2.946,4.604 c-0.719,1.744-1.076,3.641-1.076,5.687c0,2.047,0.339,3.961,1.021,5.742c0.677,1.778,1.643,3.315,2.886,4.6 c1.246,1.289,2.72,2.297,4.419,3.016c1.698,0.719,3.53,1.078,5.489,1.078c2.039,0,3.91-0.359,5.608-1.078s3.188-1.744,4.474-3.07 c1.284-1.324,2.282-2.861,3-4.604c0.719-1.739,1.08-3.635,1.08-5.683c0-2.046-0.361-3.943-1.08-5.687 c-0.718-1.744-1.695-3.258-2.94-4.548c-1.249-1.289-2.718-2.312-4.419-3.069C238.411,32.978,236.581,32.601,234.616,32.601z").attr({ stroke: 'silver', 'strokeWidth': 0, fill: '#eee' });

var redRect = s.rect(273.442, -50, 14.137, 14.134).attr({fill: '#EC5A4F' });

redRect.animate({
    x: 273.442,
    y: 61.10
}, 1000);

var greenRect = s.rect(273.442, -90, 14.137, 14.134).attr({fill: '#27A570' });

greenRect.animate({
    x: 273.442,
    y: 46.983
}, 1000);

var pinkRect = s.rect(287.579, -180, 14.137, 14.134).attr({fill: '#F597AA' });

pinkRect.animate({
    x: 287.579,
    y: 46.983
}, 1000);

var blueRect = s.rect(287.579, -120, 14.137, 14.134).attr({fill: '#6590E7' });

blueRect.animate({
    x: 287.579,
    y: 61.105
}, 1000);


squareGroup.attr({
  mask: path
});



function draw() {  

  var size = /*Math.random()*15*/80 + 300,
      sx = Math.random()*350,
      sy = Math.random()*90,
      width = 35,
      height = 35,
      opacity = Math.random()*8,
      fill = '#444',
      counter = Math.random()*760;
      square = s.rect(sx, sy, width, height);
  square.attr({
    'fill': fill,
    'fill-opacity': opacity
  });
  square.data('xOffset', sx); 
  square.data('sx', sx);
  square.data('yOffset', sy); 
  square.data('sy', sy);
  square.data('width', width);
  square.data('height', height);
  square.data('counter', counter); 
  squares.push(square);
  squareGroup.add(square);   

  
}
var strikeCount = 0;
function animate() { 

if (strikeCount < 600){
  draw();
  strikeCount++;
  console.log(strikeCount);
}
  
if (strikeCount == 600){
  bg.attr('fill', '#444')
}  
  
  window.requestAnimationFrame(animate);
}

animate();

body {
  font-family: Times New Roman, cursive;
  background: #dedede;
  overflow:hidden;
}

#svg {
  height: 79px;
  width: 300px;
  display: block;
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  margin: auto;
}