MWOxmxb

index.html

<div class="container" id="diagram-container" >
  <div class="hns-white-container"><svg class="hns-white" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 2000 2088.9" style="enable-background:new 0 0 2000 2088.9;" xml:space="preserve">
<style type="text/css">
	.st0{fill-rule:evenodd;clip-rule:evenodd;}
</style>
<path class="st0" d="M1726.6,681.4l-129.8-230.6l251.5,0.1c6.7,0,14.6,4.5,18.2,10.5c4,6.6,24.4,40.3,49,80.7
	c29.4,48.4,64.5,106.3,84.6,139.3H1726.6z M1261.4,2078c-6.1,10.9-14,10.9-16.6,10.9h-102.8c-54.4,0-117.1-0.1-154.5-0.1
	l399.6-717.4c10.4-18.5,3.7-42-14.8-52.3c-5.7-3.2-12.1-4.9-18.6-4.9l0,0l-681,0.9l-135.5-234.5h992c0.1,0,0.2,0,0.3,0s0.2,0,0.3,0
	c0.6,0,1.1-0.2,1.6-0.2c2.2-0.1,4.4-0.4,6.6-0.9c1.6-0.4,3.3-0.9,4.8-1.5c0.8-0.3,1.7-0.7,2.5-1c7.7-3.3,14.1-9.1,18.2-16.5
	L1727,758.2h270L1261.4,2078z M921.1,2050.7c-8.7-14.3-20-32.9-32.3-53.1c-41.3-68.2-94.2-155.5-100.2-165.1
	c-2-3.2-2.9-11.1,1.3-18.7c9.6-17.2,190.4-343,234.5-422.4l264.1-0.3L921.1,2050.7z M470.8,1601.8l-131.3-233.2l132.3-248
	l132.7,229.7C563.3,1428,498.9,1549.1,470.8,1601.8z M294.6,1638.1c-66.8,0-133.3,0-143,0l0,0c-6.5,0-14.4-4.6-18-10.5l-42.7-70.4
	C60.4,1507,21.5,1442.9,0,1407.5h273.4l129.8,230.6C374.9,1638.1,334.8,1638.1,294.6,1638.1L294.6,1638.1z M738.6,11
	c6.1-11,14-11,16.5-11h258.3L612.7,717.4c-0.3,0.6-0.5,1.2-0.8,1.9c-0.6,1.2-1.1,2.4-1.6,3.7c-0.4,1.2-0.8,2.4-1.1,3.7
	s-0.6,2.3-0.8,3.5c-0.2,1.4-0.4,2.8-0.4,4.3c0,0.6-0.2,1.2-0.2,1.9c0,0.5,0.1,0.9,0.2,1.4c0,1.4,0.2,2.8,0.4,4.2
	c0.1,1.2,0.3,2.3,0.6,3.5c0.3,1.2,0.7,2.4,1.1,3.6c0.4,1.2,0.8,2.3,1.3,3.5s1.1,2.2,1.7,3.2s1.2,2.1,2,3.1c0.7,1,1.5,2,2.4,2.9
	c0.8,0.9,1.6,1.8,2.5,2.7s1.8,1.5,2.8,2.3c1.1,0.8,2.2,1.6,3.3,2.3c0.4,0.3,0.8,0.6,1.2,0.9s0.9,0.3,1.4,0.6c2,1,4.1,1.9,6.2,2.5
	c0.8,0.2,1.5,0.5,2.3,0.7c2.8,0.7,5.7,1.1,8.7,1.1c0,0,0,0,0.1,0h0.1h17c0.1,0,0.2,0,0.2,0l0,0l663.9-0.9
	c17.6,30.5,50.4,88,78.3,136.9c21.4,37.6,39.2,68.6,53.2,93h-988c-0.4,0-0.8,0.1-1.3,0.2c-13.9,0.1-26.6,7.9-33.2,20.1l-163.6,306.6
	H3.1C120.8,1119.3,730.7,25,738.6,11z M1079.4,39.1l24,39.5c42.1,69.5,101.6,167.6,107.9,177.8c2,3.2,2.9,11.1-1.3,18.7L975.6,697.3
	l-264,0.3L1079.4,39.1z M1529.1,486.9l131.3,233.3l-133.9,247.5c-16-27.8-35.8-62.6-54.4-95.2c-36.8-64.4-63.6-111.3-78.7-137.5
	C1422.1,682.8,1497.5,544.5,1529.1,486.9z"/>
</svg></div>
  <div class="black-circle" id="black-circle">
<svg class="hns-black" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 2000 2088.9" style="enable-background:new 0 0 2000 2088.9;" xml:space="preserve">
<style type="text/css">
	.st0{fill-rule:evenodd;clip-rule:evenodd;}
</style>
<path class="st0" d="M1726.6,681.4l-129.8-230.6l251.5,0.1c6.7,0,14.6,4.5,18.2,10.5c4,6.6,24.4,40.3,49,80.7
	c29.4,48.4,64.5,106.3,84.6,139.3H1726.6z M1261.4,2078c-6.1,10.9-14,10.9-16.6,10.9h-102.8c-54.4,0-117.1-0.1-154.5-0.1
	l399.6-717.4c10.4-18.5,3.7-42-14.8-52.3c-5.7-3.2-12.1-4.9-18.6-4.9l0,0l-681,0.9l-135.5-234.5h992c0.1,0,0.2,0,0.3,0s0.2,0,0.3,0
	c0.6,0,1.1-0.2,1.6-0.2c2.2-0.1,4.4-0.4,6.6-0.9c1.6-0.4,3.3-0.9,4.8-1.5c0.8-0.3,1.7-0.7,2.5-1c7.7-3.3,14.1-9.1,18.2-16.5
	L1727,758.2h270L1261.4,2078z M921.1,2050.7c-8.7-14.3-20-32.9-32.3-53.1c-41.3-68.2-94.2-155.5-100.2-165.1
	c-2-3.2-2.9-11.1,1.3-18.7c9.6-17.2,190.4-343,234.5-422.4l264.1-0.3L921.1,2050.7z M470.8,1601.8l-131.3-233.2l132.3-248
	l132.7,229.7C563.3,1428,498.9,1549.1,470.8,1601.8z M294.6,1638.1c-66.8,0-133.3,0-143,0l0,0c-6.5,0-14.4-4.6-18-10.5l-42.7-70.4
	C60.4,1507,21.5,1442.9,0,1407.5h273.4l129.8,230.6C374.9,1638.1,334.8,1638.1,294.6,1638.1L294.6,1638.1z M738.6,11
	c6.1-11,14-11,16.5-11h258.3L612.7,717.4c-0.3,0.6-0.5,1.2-0.8,1.9c-0.6,1.2-1.1,2.4-1.6,3.7c-0.4,1.2-0.8,2.4-1.1,3.7
	s-0.6,2.3-0.8,3.5c-0.2,1.4-0.4,2.8-0.4,4.3c0,0.6-0.2,1.2-0.2,1.9c0,0.5,0.1,0.9,0.2,1.4c0,1.4,0.2,2.8,0.4,4.2
	c0.1,1.2,0.3,2.3,0.6,3.5c0.3,1.2,0.7,2.4,1.1,3.6c0.4,1.2,0.8,2.3,1.3,3.5s1.1,2.2,1.7,3.2s1.2,2.1,2,3.1c0.7,1,1.5,2,2.4,2.9
	c0.8,0.9,1.6,1.8,2.5,2.7s1.8,1.5,2.8,2.3c1.1,0.8,2.2,1.6,3.3,2.3c0.4,0.3,0.8,0.6,1.2,0.9s0.9,0.3,1.4,0.6c2,1,4.1,1.9,6.2,2.5
	c0.8,0.2,1.5,0.5,2.3,0.7c2.8,0.7,5.7,1.1,8.7,1.1c0,0,0,0,0.1,0h0.1h17c0.1,0,0.2,0,0.2,0l0,0l663.9-0.9
	c17.6,30.5,50.4,88,78.3,136.9c21.4,37.6,39.2,68.6,53.2,93h-988c-0.4,0-0.8,0.1-1.3,0.2c-13.9,0.1-26.6,7.9-33.2,20.1l-163.6,306.6
	H3.1C120.8,1119.3,730.7,25,738.6,11z M1079.4,39.1l24,39.5c42.1,69.5,101.6,167.6,107.9,177.8c2,3.2,2.9,11.1-1.3,18.7L975.6,697.3
	l-264,0.3L1079.4,39.1z M1529.1,486.9l131.3,233.3l-133.9,247.5c-16-27.8-35.8-62.6-54.4-95.2c-36.8-64.4-63.6-111.3-78.7-137.5
	C1422.1,682.8,1497.5,544.5,1529.1,486.9z"/>
</svg></div>
<div class="yellow-circle" id="yellow"><h1 class="yellow-circle-main-text">compute</h2></div>
<div class="orange-circle"><h1 class="orange-circle-main-text">bandwidth</h2></div>
<div class="blue-circle"> <h1 class="blue-circle-main-text">storage</h2></div>

</div>

mwoxmxb.markdown

MWOxmxb

A Pen by Alex Vela on CodePen.

License.

script.babel

t1 = gsap.timeline({paused: true});
t1.to('.black-circle', {
  ease: "elastic.out(1, 0.3)", 
  opacity: 0
}, 0).to('.hns-black', {
  ease: "elastic.out(1, 0.3)", 
  opacity: 0
}, "-=.8").to('.blue-circle', {
  ease: "elastic.out(1, 0.3)", 
  x: -60,
  y: 218,
  scale: 7,
  opacity: 1
}, "-=.7").to('.orange-circle', {
  ease: "elastic.out(1, 0.3)", 
  x: -207,
  y: -79,
  scale: 7,
  opacity: 1
}, "-=.5").to('.yellow-circle', {
  ease: "elastic.out(1, 0.3)", 
  x: 300,
  y: -79,
  scale: 7,
  opacity: 1
}, "-=.3").to('.hns-white', {
  ease: "elastic.out(1, 0.3)", 
  opacity: 1,
  scale: 1,
  x: 89,
}, "-=.2")



const logo = gsap.timeline({paused:true})
.to('.hns-black', {
  rotation: 360,
  transformOrigin: 'center',
  repeat: -1,
  ease: 'none'
})


document.querySelector(".hns-black").onclick = () => t1.play();
document.querySelector(".hns-white").onclick = () => t1.reverse();

document.querySelector(".hns-black").addEventListener("mouseenter", function(){
  logo.play();
})
document.querySelector(".hns-black").addEventListener("mouseleave", function(){
  logo.pause(0);
})

scripts

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

style.css

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap');

body {
  background: rgba(245, 204, 39, 0.25);
  display: flex;
  width: 85vw;
  height: 85vh;
  justify-content: center;
  align-items: center;

}


h1{
  color: #fff;
  font-size: 8px;
  position: absolute;
  width: 10px;
  text-transform: uppercase;
  font-family: 'Montserrat', serif;
}
svg {
  width: 80px;
  height: 80px;
  position: absolute;


}
.container{
  display: flex;
padding: 10rem;
}

.hns-white {
  
  opacity: 0;
  fill: rgba(0, 0, 0, 0.75);
  z-index: 20;
  margin-left: 0px;
  margin-top:-3px;
  
}
.hns-white:hover {
    fill: rgba(0, 0, 0, 0.35);
}



.hns-black {
    left: 36px;
  top: 37px;
  z-index: 10;
 opacity: 0;
  fill: #fff;
  opacity: 1;
}
.hns-black:hover {
    
}




.black-circle {
  background: #000;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  opacity: 1;
  position: absolute;
      margin-left: 52px;
    margin-top: -32px;
}


.yellow-circle {
  background: rgba(243, 245, 39, 0.45);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  opacity: 0;
}

.yellow-circle-main-text {
  
  right: 38px;
  top: 30px;
  line-height: .7;
}

.orange-circle {
  
  background: rgba(245, 157, 39, 0.45);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  opacity: 0;
}

.orange-circle-main-text {
  
  left: 4px;
  top: 35px;
  line-height: .7;
  margin: 0 auto;
}

.blue-circle {
  
  background: rgba(39, 187, 245, 0.65);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  opacity: 0;
}

.blue-circle-main-text {
  
  bottom: 28px;
  left: 19px;
  line-height: .7;
}