<div id="ball"></div>
<div id="white-ball"></div>

<svg version="1.1" id="dribbble" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 4255.2 1039.4" xml:space="preserve">
<style type="text/css">
	.path{fill:none;stroke-width:100;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
</style>
<path class="path" d="M513.5,586.3c0,0-78.5-52.7-161.7-29c-30,8.5-131.3,60.3-123.3,203.3s91,196,182,195s150-78,180-153
	s122-320,115.3-466c-5.6-122.9-36-235.4-86.7-237.4c-84.7-3.3-122.2,75.3-125.7,222.4c-4,168,102.3,601,209.1,613
	c84.3,9.5,175.9-156.3,185.9-326.3c7.7-131.6-32-155.3,66-88.7s156,2.4,145.3,121.7c-8.6,96.6-18,295,71.3,301s173.3-137,184-214.3
	s18.7-173.7,18.7-173.7s-31.3,388,95.3,388.3s174-248,231-340.3c42.3-68.6,91.7-157.7,115.7-299c23.4-137.6,17.3-194.4-47.3-204.2
	c-64.7-9.8-92.7,68.2-113.3,221.5s14.7,436.7,65.3,523.3c50.7,86.7,84,97,134.7,98.3c50.7,1.3,156.7-52.3,171.3-173.7
	c14.7-121.3-46-198.3-91.3-187s62.7,204.3,177.3,111.7c96.7-78.1,186-186,219.7-362.7c33.1-173.6,11-228.7-37-235.3
	c-48-6.7-95.2,50.6-114.7,207.3c-21.2,170,24.5,453.3,55.3,522.7c26.7,60,63.7,118,145,118c81.3,0,136.3-52,164.3-176.7
	s-95.3-204.7-106.7-174c-11.3,30.7,62.7,178,186.7,102.7s186.7-194.7,218.7-338s30.3-252.7-30.3-256.7c-60.7-4-95.1,80.1-109,185.3
	c-18.7,141.3-4.3,440.6,62,555.3c54.7,94.7,109.2,103.6,140,105.3c40.7,2.3,164-51.3,158-197.3s-122-211.3-112.7-134
	c9.3,77.3,113.3,119.3,212,88c90.9-28.9,221.8-193.8,236.7-399.3c14.1-194.3-48.7-218.7-80.7-215.3s-130,67.3-130.7,277.3
	s31.5,423.2,111.3,508.7c27.8,29.8,56,59.5,106.5,63c54,3.7,75.1-10.7,106.2-27.7c87.1-47.6,251.8-148.7,269.3-257.3
	c10.7-66-21.7-151.3-126.3-124.7c-104.7,26.7-147,162-111.7,266.7c35.3,104.7,128,151.3,228.7,146.7
	c100.7-4.7,204.7-52.7,260.7-168.7"/>
</svg>
body {
  background-color: #333;
  overflow: hidden;
}

#dribbble {
  min-width: 100%;
  height: 150px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.path {
  stroke-dasharray: 15800;
  stroke-dashoffset: 15800;
  animation: dash 5s ease-in-out forwards;
  animation-iteration-count: infinite;
  stroke:#fff;
}

@keyframes dash {
  0% {
    stroke-dashoffset: 15800;
  }
  30% {
    stroke-dashoffset: 0;
  }
  70% {
    stroke-dashoffset: 0;
  }
  85% {
    stroke-dashoffset: 15800;
  }
}

#ball {
  width: 0px;
  height: 0px;
  display: block;
  background-color: #ec4989;
  border-radius: 50%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  transform: translate(-102px,-30px);
  z-index: -1;
  animation: scale 5s ease-in-out forwards;
  animation-iteration-count: infinite;
  
  transition-property:all;
  -moz-transition-property: all; /* Firefox 4 */
  -webkit-transition-property:all; /* Safari and Chrome */
  -o-transition-property:all; /* Opera */
}

@keyframes scale {
  24% {
    width: 0px;
    height: 0px;
  }
  40% {
    width: 8000px;
    height: 8000px;
  }
  70% {
    width: 8000px;
    height: 8000px;
  }
  87% {
    opacity: 1;
  }
  90% {
    width: 0px;
    height: 0px;
    opacity: 0;
  }
}

#white-ball {
  width: 0px;
  height: 0px;
  display: block;
  background-color: #fff;
  border-radius: 50%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  transform: translate(-102px,-30px);
  z-index: 1;
  animation: bounce 5s ease-in-out forwards;
  animation-iteration-count: infinite;

  transition-property:all;
  -moz-transition-property: all; /* Firefox 4 */
  -webkit-transition-property:all; /* Safari and Chrome */
  -o-transition-property:all; /* Opera */
}

@keyframes bounce {
  27% {
    width: 0px;
    height: 0px;
  }
  33% {
    width: 36px;
    height: 36px;
    top: -20px;
  }
  36% {
    width: 30px;
    height: 32px;
  }
  43% {
    width: 30px;
    height: 28px;
    top: 15px;
  }
  50% {
    width: 30px;
    height: 32px;
    top: -16px;
  }
  57% {
    width: 30px;
    height: 28px;
    top: 15px;
  }
  64% {
    width: 30px;
    height: 32px;
    top: -12px;
  }
  71% {
    width: 30px;
    height: 28px;
    top: 15px;
  }
  78% {
    width: 30px;
    height: 32px;
    top: -8px;
  }
  80% {
    width: 0px;
    height: 0px;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.