fractal cloud

by jpeter06

HTML

<body>
  <div class="cloud" id="cloud-base"></div>
  <div class="cloud" id="cloud-back"></div>
  <div class="cloud" id="cloud-mid"></div>
  <div class="cloud" id="cloud-front"></div>
  <svg width="0" height="0"> 
  <!--Top Layer-->
    <filter id="filter-base">
      <feTurbulence id="ft-base" type="fractalNoise" baseFrequency="0.011" numOctaves="5" seed="8517" />     
      <feDisplacementMap  in="SourceGraphic" scale="120" />
    </filter>
    <filter id="filter-back">
      <feTurbulence id="ft-back" type="fractalNoise" baseFrequency="0.011" numOctaves="3"  seed="8517"/>     
      <feDisplacementMap  in="SourceGraphic" scale="120" />
    </filter>
  <filter id="filter-mid">
        <feTurbulence id="ft-mid" type="fractalNoise" baseFrequency="0.011" numOctaves="3" seed="8517"/>
      <feDisplacementMap  in="SourceGraphic" scale="120" />
    </filter>
    <filter id="filter-front">
        <feTurbulence id="ft-front" type="fractalNoise" baseFrequency="0.009" numOctaves="4" seed="8517"/>
      <feDisplacementMap  in="SourceGraphic" scale="50" />
    </filter>
</svg>
<script>
var filters=[];
filters.push( document.getElementById("ft-base"));
filters.push( document.getElementById("ft-back"));
filters.push( document.getElementById("ft-mid"));
filters.push(  document.getElementById("ft-front"));
var bf=0.011
window.setInterval(function(){
	bf=bf+0.0001;
	for(var i=0;i<filters.length;i++)
  	filters[i].setAttribute("baseFrequency", 0.01);
  	filters[i].setAttribute("seed", 8517);
	console.log("timeout");
}, 1000);
</script>
</body>

CSS

:root {
  --cseed: 8517;
  --ctop: 0px;
  --cwidth: 400px; /*calc( 100% - 100px);*/
  --cheight: 100px;
}

body {
  width: 100vw;
  height: 100vh;
  background: linear-gradient(0deg, #62a0d8 0%, #2178d1 50%, #085cb3 100%);
  padding: 1%;
  overflow: hidden;
}

body::before {
  counter-reset: mouse-x var(--cwidth, 245)
  content: counter(mouse-x)
}
.cloud {
  width: calc( 100px + var(--cwidth));
  height: calc( var(--cheight) + 0px);
  border-radius: 50%;
  position: absolute;
  top: 0px;
  left: -100px;
}

#cloud-base {
  top: calc( 20px + var(--ctop));
  height: calc( var(--cheight) + 0px);
  filter: url(#filter-base);
  box-shadow: 200px 170px 19px 40px rgba(255, 255, 255, 0.9);
}
#cloud-back {
  top: calc( 20px + var(--ctop));
  height: calc( var(--cheight) - 70px);;
  width: calc( 0px + var(--cwidth));
  filter: url(#filter-back);
  box-shadow: 200px 200px 10px 40px rgba(215, 215, 215, 0.3);
}

#cloud-mid {
  top: calc( 10px + var(--ctop));
  width: calc( 80px + var(--cwidth));
  height: calc( var(--cheight) - 65px);
  filter: url(#filter-mid);
  box-shadow: 210px 250px 28px 30px rgba(66, 105, 146, 0.2);
}

#cloud-front {
  top: calc( 0px + var(--ctop));
  width: calc( var(--cwidth) - 50px);
  height: calc( var(--cheight) - 60px);
  left: -20px;
  filter: url(#filter-front);
  box-shadow: 210px 272px 30px 0px rgba(0, 0, 0, 0.4);
}

#filter-front, #filter-mid, #filter-back, #filter-base{
  seed:var(--cseed);
}
 svg filter{ seed:8517}