master

Branches (1)

Manage

Manage

master

animate
/
cloud.html

<html>
<head>
<style type="text/css">
	body {
  width: 100vw;
  height: 100vw;
  background: linear-gradient(165deg, #527785 0%, #7FB4C7 100%);
  padding: 1%;
}

.cloud {
  width: 500px;
  height: 275px;
  border-radius: 50%;
  position: absolute;
  top: -35vh;
  left: -25vw;
}

#cloud-back {
  filter: url(#filter-back);
  box-shadow: 300px 300px 30px -20px #fff;
}

#cloud-mid {
  filter: url(#filter-mid);
  box-shadow: 300px 340px 70px -60px rgba(158, 168, 179, 0.5);
    left: -25vw;
}

#cloud-front {
  filter: url(#filter-front);
  box-shadow: 300px 370px 60px -100px rgba(0, 0, 0, 0.3);
    left: -25vw;
}

</style>
</head>
<body>
	<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-back">
      <feTurbulence type="fractalNoise" baseFrequency="0.012" numOctaves="4"
seed="0" />
      <feDisplacementMap  in="SourceGraphic" scale="170" />
    </filter>
       <filter id="filter-mid">
        <feTurbulence type="fractalNoise"  baseFrequency="0.012" numOctaves="2"
seed="0"/>
      <feDisplacementMap  in="SourceGraphic" scale="150" />
    </filter>
    <filter id="filter-front">
        <feTurbulence type="fractalNoise" baseFrequency="0.012" numOctaves="2"
seed="0"/>
      <feDisplacementMap  in="SourceGraphic" scale="100" />
    </filter>
</svg>
</body>
</html>