svg(id="dots", x="0px", y="0px", viewBox="0 0 600 600")
  g(id="dots-group")
    rect(id="dot-a",x="75",y="250",rx="30", ry="30", width="100",height="100")
    rect(id="dot-b",x="250",y="250",rx="30", ry="30", width="100",height="100")
    rect(id="dot-c",x="425",y="250",rx="30", ry="30", width="100",height="100")
View Compiled
@import url(https://fonts.googleapis.com/css?family=Roboto:300);
@iconW: 48px;

body{
  background-color: #7143E8;
  width: 100%;
  height: 100%;
  font-family: 'Roboto';
  color: #fff;
  -webkit-font-smoothing: antialiased;
  font-size: 28px;
  text-align: center;
  margin: 0;
  padding: 0;
}
p{
  margin-top: 100px;
}
#dots{
  width: @iconW;
  height: @iconW;  
  top: 50%;
  left: 50%;
  position: absolute;
  margin-top: @iconW * -0.5;
  margin-left: @iconW * -0.5;
  cursor: pointer;
  border-radius: 999px;
  transition: all 300ms ease-in;
  -moz-transition: all 300ms ease-in;
  -webkit-transition: all 300ms ease-in;
  &:hover{
    background-color: rgba(0,0,0,.075);
  }
  &:active{
    background-color: rgba(0,0,0,.15);
  }
  rect{
    fill: #FFFE82;
  }
}
View Compiled
var dots = $('#dots'),
    dotA = $('#dot-a'),
    dotB = $('#dot-b'),
    dotC = $('#dot-c'),
    dotsG = $('#dots-group'),
    dotsStatus = true;

var tl = new TimelineMax();
/*.to(dotA, timer, {attr:{rx:0, ry:0}, ease:Power4.easeOut})
*/
tl
   .to(dotA, .3, {attr:{x: 250, rx:50, ry: 50}, ease:Power1.easeOut})
   .to(dotC, .3, {attr:{x: 250, rx:50, ry: 50}, ease:Power1.easeOut}, '-=0.3')
   .to(dotC, .3, {attr:{width: 450, x:75}, ease:Power1.easeOut})
   .to(dotA, .3, {attr:{height: 450, y:75}, ease:Power1.easeOut})
   .to(dotsG, .3, {rotation:45, transformOrigin:"50% 50%", ease:Power1.easeOut}, '-=.3')
   .to(dotsG, .3, {scale:.75, transformOrigin:"50% 50%", ease:Power1.easeOut}, '-=.6')

tl.pause();

dots.click(function() {
  if (dotsStatus != false) {
    tl.play();
    dotsStatus = false;
  }
  else {
    tl.reverse();
    dotsStatus = true;
  }
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. //cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js