A CodePen by Zyad Sherif.

index.html

<div class="container">
  <div class="cap"></div>
  <div class="bob bob1"></div>
  <div class="arn arn1"></div>
  <div class="bob bob2"></div>
  <div class="arn arn2"></div>
  <div class="stick"></div>
  <div class="dot1 dot"></div>
  <div class="dot2 dot"></div>
  <div class="dot3 dot"></div>
  <div class="dot4 dot"></div>
  <div class="dot5 dot"></div>
  <div class="dot6 dot"></div>
  <div class="arrow arrow1"></div>
  <div class="arrow arrow2"></div>
</div>
<h1>Insta<span>bug</span></h1>

style.css

*{
  -webkit-font-smoothing:antialiased;
}
body{
  background-color: #fbfbfb;
}

h1{
  font-size: 100px;
  text-align: center;
  font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
  font-weight: 100;
  color: #030018;
}

h1 span{
  color: #1a84da;
}

.container{
  width: 300px;
  height: 300px;
  margin: 100px auto 40px;
  border: 10px solid #1a84da;
  border-radius: 9999em;
  position:relative;
  box-shadow: 20px 90px 90px -70px #a3a3a3;
}

.cap{
  width: 70px;
  height: 90px;
  position: absolute;
  border-radius: 9999em;
  border-top: 20px solid #1a84da;
  top: -29px;
  left: 50%;
  margin-left: -35px;
}

div.stick{
  width: 10px;
  height: 300px;
  background-color: #030018;
  position: absolute;
  left: 50%;
  margin-left: -5px;
}



div.dot{
  width: 25px;
  height: 25px;
  background-color: #030018;
  border-radius: 9999em;
  position: absolute;
}

div.dot1{
  top: 60px;
  left: 80px;
  
}
div.dot2{
  top: 140px;
  left: 50px;
  
}
div.dot3{
  top: 220px;
  left: 80px;
  
}
div.dot4{
  top: 60px;
  right: 70px;
  
}
div.dot5{
  top: 140px;
  right: 50px;
  
}
div.dot6{
  top: 220px;
  right: 70px;
  
}

.arn{
  position: absolute;
  width: 10px;
  height: 80px;
  background-color: #1a84da;
}

.arn1{
  top: -80px;
  left: 100px;
  transform: skew(40deg, -10deg);
}

.arn2{
  top: -80px;
  right: 100px;
  transform: skew(-40deg, 10deg);
}

.bob{
  position: absolute;
  width: 25px;
  height: 25px;
  border-radius: 9999em;
  background-color: #1a84da;
}

.bob1{
  top: -90px;
  left: 60px;
}

.bob2{
  top: -90px;
  right: 60px;
}

.arrow{
  
  width: 0; 
	height: 0; 
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	
	border-bottom: 60px solid black;
}

.arrow.arrow1{
  position: absolute;
  bottom: 0;
  left: 132px;
  transform: skew(-10deg, 0);
}

.arrow.arrow2{
  position: absolute;
  bottom: 0;
  right: 132px;
  transform: skew(10deg, 0);
}

@-webkit-keyframes bullet {
  0%   { transform: scale(1,1); }
  100% { transform: scale(2,2); }
}
@-moz-keyframes bullet {
  0%   { transform: scale(1,1); }
  100% { transform: scale(2,2); }
}
@-o-keyframes bullet {
  0%   { transform: scale(1,1); }
  100% { transform: scale(2,2); }
}
@keyframes bullet {
  0%   { transform: scale(1,1); }
  100% { transform: scale(1.5,1.5); }
}

@-webkit-keyframes text{
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}
@-moz-keyframes text {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}
@-o-keyframes text {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}
@keyframes text {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}

.container:hover .dot1{
  -webkit-animation: ease-out bullet .2s 1; /* Safari 4+ */
  -moz-animation:   ease-out bullet .2s 1; /* Fx 5+ */
  -o-animation:     ease-out bullet .2s 1; /* Opera 12+ */
  animation:        ease-out bullet .2s 1; /* IE 10+ */
}

.container:hover .dot2{
  -webkit-animation: ease bullet .2s .1s 1; /* Safari 4+ */
  -moz-animation:   ease bullet .2s .1s 1; /* Fx 5+ */
  -o-animation:     ease bullet .2s .1s 1; /* Opera 12+ */
  animation:        ease bullet .2s .1s 1; /* IE 10+ */
}

.container:hover .dot3{
  -webkit-animation: ease bullet .2s .3s 1; /* Safari 4+ */
  -moz-animation:   ease bullet .2s .3s 1; /* Fx 5+ */
  -o-animation:     ease bullet .2s .3s 1; /* Opera 12+ */
  animation:      ease   bullet .2s .3s 1; /* IE 10+ */
}
.container:hover .dot6{
  -webkit-animation: ease bullet .2s .5s 1; /* Safari 4+ */
  -moz-animation:   ease bullet .2s .5s 1; /* Fx 5+ */
  -o-animation:    ease  bullet .2s .5s 1; /* Opera 12+ */
  animation:        ease bullet .2s .5s 1; /* IE 10+ */
}
.container:hover .dot5{
  -webkit-animation: ease bullet .2s .7s 1; /* Safari 4+ */
  -moz-animation:  ease  bullet .2s .7s 1; /* Fx 5+ */
  -o-animation:     ease bullet .2s .7s 1; /* Opera 12+ */
  animation:       ease  bullet .2s .7s 1; /* IE 10+ */
}
.container:hover .dot4{
  -webkit-animation: ease bullet .2s .9s 1; /* Safari 4+ */
  -moz-animation:   ease bullet .2s .9s 1; /* Fx 5+ */
  -o-animation:     ease bullet .2s .9s 1; /* Opera 12+ */
  animation:       ease  bullet .2s .9s 1; /* IE 10+ */
}

.container:hover .bob2{
  -webkit-animation: bullet .2s 1.1s 1; /* Safari 4+ */
  -moz-animation:    bullet .2s 1.1s 1; /* Fx 5+ */
  -o-animation:      bullet .2s 1.1s 1; /* Opera 12+ */
  animation:         bullet .2s 1.1s 1; /* IE 10+ */
}

.container:hover .bob1{
  -webkit-animation: bullet .2s 1.3s 1; /* Safari 4+ */
  -moz-animation:    bullet .2s 1.3s 1; /* Fx 5+ */
  -o-animation:      bullet .2s 1.3s 1; /* Opera 12+ */
  animation:         bullet .2s 1.3s 1; /* IE 10+ */
}

.container:hover{
  -webkit-animation: bullet .4s 1.5s 1; /* Safari 4+ */
  -moz-animation:    bullet .4s 1.5s 1; /* Fx 5+ */
  -o-animation:      bullet .4s 1.5s 1; /* Opera 12+ */
  animation:         bullet .4s 1.5s 1; /* IE 10+ */

}

.container:hover + h1{
   -webkit-animation: text 1s 1.5s 1; /* Safari 4+ */
  -moz-animation:    text 1s 1.5s 1; /* Fx 5+ */
  -o-animation:      text 1s 1.5s 1; /* Opera 12+ */
  animation:         text 1s 1.5s 1; /* IE 10+ */
}