Floating cells

Floating cells.markdown

Floating cells

A Pen by Louis Hoebregts on CodePen.

License.

index.html

<!-- Gooey effect from https://css-tricks.com/gooey-effect/ -->
<svg id="scene" viewBox="0 0 500 500">
 <filter id="gooey" x="0" y="0">
   <feGaussianBlur in="SourceGraphic" stdDeviation="12" result="blur" />
   <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 30  -6" result="goo" />
   <feBlend in="SourceGraphic" in2="goo" />
  </filter>
  <g id="bubbles" filter="url(#gooey)"></g>
</svg>
<h2>Click to generate a new scene</h2>

script.js

var svg = document.querySelector("#scene");
var g = svg.querySelector("#bubbles");
var opts, lines,  tweens = [];

function Line(){
  var line = {};
  line.dom = document.createElementNS("http://www.w3.org/2000/svg", "circle");
  line.cx = Math.random()*500;
  line.cy = Math.random()*500;
  line.r = Math.random()*20 + opts.minSize;
  line.fill = "hsl("+(Math.random()*opts.colorAngle+opts.color)+",70%,60%)";
  line.dom.setAttribute("cx", line.cx); 
  line.dom.setAttribute("cy", line.cy); 
  line.dom.setAttribute("r", line.r); 
  line.dom.setAttribute("fill", line.fill); 
  
  return line;
}

function addLine(i){
  lines.push(new Line());
  g.appendChild(lines[i].dom);
  tweens[i] = TweenMax.to(lines[i].dom,opts.speed, {
    attr : {
      cx : Math.random()*500,
      cy : Math.random()*500,
    },
    yoyo:true,
    repeat:-1,
    ease : Linear.easeNone
  });
};

function init(e){
  if(e){
    e.stopPropagation();
  }
  g.innerHTML = "";
  lines = [];
  opts = {
    speed : Math.floor(Math.random()*20)+8,
    minSize : Math.random()*20+2,
    color:Math.random()*300,
    colorAngle:Math.random()*60+20,
    amount : Math.floor(Math.random()*60)+10
  };
  color = Math.random()*300;
  for(var i=0;i<opts.amount;i++){
    addLine(i);
  }
}

document.body.addEventListener("click", init);
document.body.addEventListener("touchend", init);

init();

scripts

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

style.css

body{
  margin:0;
  display: flex;
  justify-content:center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  background: black;
}
svg{
  width: 80vmin;
  height: 80vmin;
  border: 1px solid white;
}
h2{
  position: fixed;
  bottom: 10px;
  left: 0;
  width: 100%;
  text-align:center;
  color: white;
  font-family:Helvetica, Verdana, sans-serif;
  font-weight: 100;
}