SVG Jellyfish

index.html

<div class="container">
  <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="600px" height="600px" viewBox="0 0 600 600">
    <defs>
      <linearGradient id="edgeGrad" x1="0%" y1="0%" x2="0%" y2="100%">
        <stop offset="0%" style="stop-color:#3D80CF;stop-opacity:0.1" />
        <stop offset="100%" style="stop-color:#24B9BD;stop-opacity:0.2" />
      </linearGradient>
      <linearGradient id="bodyGrad" x1="0%" y1="0%" x2="0%" y2="100%">
        <stop offset="0%" style="stop-color:#3D80CF;stop-opacity:1" />
        <stop offset="100%" style="stop-color:#24B9BD;stop-opacity:0.2" />
      </linearGradient>
      <linearGradient id="tendrilGrad">
        <stop offset="5%" style="stop-color:#24B9BD;stop-opacity:1" />
        <stop offset="95%" style="stop-color:#3D80CF;stop-opacity:0" />
      </linearGradient>

      <circle id="bubble" fill="none" stroke="#00588D" cx="0" cy="2" r="2" />

      <clipPath id="jellyMask">
        <circle class="jellyMask" fill="#FF0000" cx="268.5" cy="193" r="70" />
      </clipPath>
      <clipPath id="jellyStrandMask">
        <path class="jellyStrandMask" fill="#FF0000" d="M457,228v192H171V228c4.7,0,7.1,2,9.1,3.7c1.7,1.4,2.8,2.3,5.3,2.3s3.6-0.9,5.3-2.3
	c2-1.7,4.4-3.7,9.1-3.7c4.7,0,7.1,2,9.1,3.7c1.7,1.4,2.8,2.3,5.3,2.3c2.5,0,3.6-0.9,5.3-2.3c2-1.7,4.4-3.7,9.1-3.7
	c4.7,0,7.1,2,9.1,3.7c1.7,1.4,2.8,2.3,5.3,2.3s3.6-0.9,5.3-2.3c2-1.7,4.4-3.7,9.1-3.7c4.7,0,7.1,2,9.1,3.7c1.7,1.4,2.8,2.3,5.3,2.3
	s3.6-0.9,5.3-2.3c2-1.7,4.4-3.7,9.1-3.7c4.7,0,7.1,2,9.1,3.7c1.7,1.4,2.8,2.3,5.3,2.3s3.3-0.9,5-2.3c2-1.7,4.8-3.7,8.8-3.7
	c4.7,0,7.1,2,9.1,3.7c1.7,1.4,2.8,2.3,5.3,2.3s3.6-0.9,5.3-2.3c2-1.7,4.4-3.7,9.1-3.7c4.7,0,7.1,2,9.1,3.7c1.7,1.4,2.8,2.3,5.3,2.3
	c2.5,0,3.6-0.9,5.3-2.3c2-1.7,4.4-3.7,9.1-3.7c4.7,0,7.1,2,9.1,3.7c1.7,1.4,2.8,2.3,5.3,2.3s3.6-0.9,5.3-2.3c2-1.7,4.4-3.7,9.1-3.7
	c4.7,0,7.1,2,9.1,3.7c1.7,1.4,2.8,2.3,5.3,2.3s3.6-0.9,5.3-2.3c2-1.7,4.4-3.7,9.1-3.7c4.7,0,7.1,2,9.1,3.7c1.7,1.4,2.8,2.3,5.3,2.3
	s3.3-0.9,5-2.3C450.1,230,453,228,457,228z" />
      </clipPath>
      <circle id="bgCircle" fill="url(#bodyGrad)" opacity="0.1" cx="300" cy="300" r="300" />
      <clipPath id="bgMask">
        <use xlink:href="#bgCircle" />
      </clipPath>
    </defs>
    <use xlink:href="#bgCircle" />
    <g class="maskedAll" clip-path="url(#bgMask)">
      <g class="jellyfishGroup">

        <g class="maskedJellyGroup" clip-path="url(#jellyMask)">
          <path class="frill" fill="#D0E6F2" opacity="0.8" d="M448.1,210.7c-1.7,1.4-2.5,2.3-5,2.3c-2.5,0-3.6-0.9-5.3-2.3c-2-1.6-4.4-3.7-9.1-3.7
	c-4.7,0-7.1,2.1-9.1,3.7c-1.7,1.4-2.8,2.3-5.2,2.3c-2.5,0-3.6-0.9-5.3-2.3c-2-1.6-4.4-3.7-9.1-3.7c-4.7,0-7.1,2.1-9.1,3.7
	c-1.7,1.4-2.8,2.3-5.2,2.3s-3.6-0.9-5.3-2.3c-2-1.6-4.4-3.7-9.1-3.7s-7.1,2.1-9.1,3.7c-1.7,1.4-2.8,2.3-5.2,2.3s-3.6-0.9-5.2-2.3
	c-2-1.6-4.4-3.7-9.1-3.7c-4.7,0-7.1,2.1-9.1,3.7c-1.7,1.4-2.8,2.3-5.2,2.3s-3.6-0.9-5.2-2.3c-2-1.6-4.4-3.7-9.1-3.7
	c-4,0-6.9,2.1-8.9,3.7c-1.7,1.4-2.5,2.3-5,2.3c-2.5,0-3.6-0.9-5.3-2.3c-2-1.6-4.4-3.7-9.1-3.7c-4.7,0-7.1,2.1-9.1,3.7
	c-1.7,1.4-2.8,2.3-5.2,2.3c-2.5,0-3.6-0.9-5.3-2.3c-2-1.6-4.4-3.7-9.1-3.7c-4.7,0-7.1,2.1-9.1,3.7c-1.7,1.4-2.8,2.3-5.2,2.3
	s-3.6-0.9-5.3-2.3c-2-1.6-4.4-3.7-9.1-3.7s-7.1,2.1-9.1,3.7c-1.7,1.4-2.8,2.3-5.2,2.3s-3.6-0.9-5.3-2.3c-2-1.6-4.4-3.7-9.1-3.7
	s-7.1,2.1-9.1,3.7c-1.7,1.4-2.8,2.3-5.2,2.3c-2.5,0-3.6-0.9-5.3-2.3c-2-1.6-4.4-3.7-9.1-3.7v6c2.5,0,3.6,0.9,5.2,2.3
	c2,1.6,4.4,3.7,9.1,3.7c4.7,0,7.1-2.1,9.1-3.7c1.7-1.4,2.8-2.3,5.2-2.3s3.6,0.9,5.2,2.3c2,1.6,4.4,3.7,9.1,3.7
	c4.7,0,7.1-2.1,9.1-3.7c1.7-1.4,2.8-2.3,5.3-2.3s3.6,0.9,5.3,2.3c2,1.6,4.4,3.7,9.1,3.7s7.1-2.1,9.1-3.7c1.7-1.4,2.8-2.3,5.2-2.3
	c2.5,0,3.6,0.9,5.3,2.3c2,1.6,4.4,3.7,9.1,3.7c4.7,0,7.1-2.1,9.1-3.7c1.7-1.4,2.8-2.3,5.2-2.3c2.5,0,3.6,0.9,5.3,2.3
	c2,1.6,4.4,3.7,9.1,3.7s6.9-2.1,8.9-3.7c1.7-1.4,3-2.3,5-2.3c2.5,0,3.6,0.9,5.3,2.3c2,1.6,4.4,3.7,9.1,3.7c4.7,0,7.1-2.1,9.1-3.7
	c1.7-1.4,2.8-2.3,5.2-2.3c2.5,0,3.6,0.9,5.3,2.3c2,1.6,4.4,3.7,9.1,3.7s7.1-2.1,9.1-3.7c1.7-1.4,2.8-2.3,5.3-2.3s3.6,0.9,5.3,2.3
	c2,1.6,4.4,3.7,9.1,3.7s7.1-2.1,9.1-3.7c1.7-1.4,2.8-2.3,5.2-2.3c2.5,0,3.6,0.9,5.3,2.3c2,1.6,4.4,3.7,9.1,3.7
	c4.7,0,7.1-2.1,9.1-3.7c1.7-1.4,2.8-2.3,5.2-2.3c2.5,0,3.6,0.9,5.3,2.3c2,1.6,4.4,3.7,9.1,3.7s6.9-2.1,8.9-3.7c1.7-1.4,3-2.3,5-2.3
	v-6C453,212,450.1,214,448.1,215.7z" />
          <path class="jellyBody" fill="url(#bodyGrad)" opacity="0.8" d="M452,191.1V40H171v150v6c2.5,0,3.6,0.9,5.3,2.3c2,1.7,4.4,3.7,9.1,3.7
	c4.7,0,7.1-2,9.1-3.7c1.6-1.4,2.8-2.3,5.3-2.3c2.5,0,3.6,0.9,5.2,2.3c2,1.7,4.4,3.7,9.1,3.7c4.7,0,7.1-2,9.1-3.7
	c1.7-1.4,2.8-2.3,5.3-2.3s3.6,0.9,5.3,2.3c2,1.7,4.4,3.7,9.1,3.7c4.7,0,7.1-2,9.1-3.7c1.7-1.4,2.8-2.3,5.3-2.3s3.6,0.9,5.3,2.3
	c2,1.7,4.4,3.7,9.1,3.7s7.1-2,9.1-3.7c1.7-1.4,2.8-2.3,5.3-2.3s3.6,0.9,5.3,2.3c2,1.7,4.4,3.7,9.1,3.7c4.7,0,6.9-2,8.9-3.7
	c1.7-1.4,3-2.3,5-2.3c2.5,0,3.6,0.9,5.3,2.3c2,1.7,4.4,3.7,9.1,3.7c4.7,0,7.1-2,9.1-3.7c1.6-1.4,2.8-2.3,5.3-2.3
	c2.5,0,3.6,0.9,5.3,2.3c2,1.7,4.4,3.7,9.1,3.7c4.7,0,7.1-2,9.1-3.7c1.7-1.4,2.8-2.3,5.3-2.3s3.6,0.9,5.3,2.3c2,1.7,4.4,3.7,9.1,3.7
	c4.7,0,7.1-2,9.1-3.7c1.7-1.4,2.8-2.3,5.3-2.3s3.6,0.9,5.3,2.3c2,1.7,4.4,3.7,9.1,3.7s7.1-2,9.1-3.7c1.7-1.4,2.8-2.3,5.3-2.3
	s3.6,0.9,5.3,2.3c2,1.7,4.4,3.7,9.1,3.7c4.7,0,8.9-3.7,8.9-3.7V191.1z" />

        </g>

        <g class="maskedJellyStrandGroup" clip-path="url(#jellyStrandMask)">
          <g class="jellyStrandGroup" fill="url(#tendrilGrad)">

            <path d="M259.6,653h-7.5c0-24.6,4.4-37,8.6-49c3.9-11.1,7.7-21.6,7.7-43c0-21.4-3.7-31.9-7.7-43
		c-4.2-12-8.6-24.4-8.6-49c0-24.6,4.4-37,8.6-49c3.9-11.1,7.7-21.6,7.7-43c0-21.4-3.7-31.9-7.7-43c-4.2-12-8.6-24.4-8.6-49
		c0-24.6,4.4-37,8.6-49c3.9-11.1,7.7-21.6,7.7-43h7.5c0,24.6-4.4,37-8.6,49c-3.9,11.1-7.7,21.6-7.7,43s3.7,31.9,7.7,43
		c4.2,12,8.6,24.4,8.6,49c0,24.6-4.4,37-8.6,49c-3.9,11.1-7.7,21.6-7.7,43c0,21.4,3.7,31.9,7.7,43c4.2,12,8.6,24.4,8.6,49
		s-4.4,37-8.6,49C263.3,621.1,259.6,631.6,259.6,653z" />
            <path d="M278.4,653h-7.5c0-24.6,4.4-37,8.6-49c3.9-11.1,7.7-21.6,7.7-43c0-21.4-3.7-31.9-7.7-43
		c-4.2-12-8.6-24.4-8.6-49c0-24.6,4.4-37,8.6-49c3.9-11.1,7.7-21.6,7.7-43c0-21.4-3.7-31.9-7.7-43c-4.2-12-8.6-24.4-8.6-49
		c0-24.6,4.4-37,8.6-49c3.9-11.1,7.7-21.6,7.7-43h7.5c0,24.6-4.4,37-8.6,49c-3.9,11.1-7.7,21.6-7.7,43s3.7,31.9,7.7,43
		c4.2,12,8.6,24.4,8.6,49c0,24.6-4.4,37-8.6,49c-3.9,11.1-7.7,21.6-7.7,43c0,21.4,3.7,31.9,7.7,43c4.2,12,8.6,24.4,8.6,49
		s-4.4,37-8.6,49C282.1,621.1,278.4,631.6,278.4,653z" />
            <path d="M240.8,653h-7.5c0-24.6,4.4-37,8.6-49c3.9-11.1,7.7-21.6,7.7-43c0-21.4-3.7-31.9-7.7-43
		c-4.2-12-8.6-24.4-8.6-49c0-24.6,4.4-37,8.6-49c3.9-11.1,7.7-21.6,7.7-43c0-21.4-3.7-31.9-7.7-43c-4.2-12-8.6-24.4-8.6-49
		c0-24.6,4.4-37,8.6-49c3.9-11.1,7.7-21.6,7.7-43h7.5c0,24.6-4.4,37-8.6,49c-3.9,11.1-7.7,21.6-7.7,43s3.7,31.9,7.7,43
		c4.2,12,8.6,24.4,8.6,49c0,24.6-4.4,37-8.6,49c-3.9,11.1-7.7,21.6-7.7,43c0,21.4,3.7,31.9,7.7,43c4.2,12,8.6,24.4,8.6,49
		s-4.4,37-8.6,49C244.6,621.1,240.8,631.6,240.8,653z" />
          </g>
        </g>

      </g>
      <g class="bubbleGroup">
        <use xlink:href="#bubble" />
        <use xlink:href="#bubble" />
        <use xlink:href="#bubble" />
        <use xlink:href="#bubble" />
        <use xlink:href="#bubble" />
        <use xlink:href="#bubble" />
        <use xlink:href="#bubble" />
        <use xlink:href="#bubble" />
        <use xlink:href="#bubble" />
        <use xlink:href="#bubble" />
        <use xlink:href="#bubble" />
        <use xlink:href="#bubble" />
        <use xlink:href="#bubble" />
        <use xlink:href="#bubble" />
        <use xlink:href="#bubble" />
        <use xlink:href="#bubble" />
        <use xlink:href="#bubble" />
        <use xlink:href="#bubble" />
        <use xlink:href="#bubble" />
        <use xlink:href="#bubble" />
        <use xlink:href="#bubble" />
        <use xlink:href="#bubble" />
        <use xlink:href="#bubble" />
        <use xlink:href="#bubble" />
        <use xlink:href="#bubble" />
        <use xlink:href="#bubble" />
        <use xlink:href="#bubble" />
        <use xlink:href="#bubble" />
        <use xlink:href="#bubble" />
        <use xlink:href="#bubble" />
      </g>
      <path class="starfish" fill="#01274E" d="M398.9,44.9c-6.2-2.1-16.5-5.5-16.5-13.2c0-5.4,7-11.9,9.7-18.9c2.8-7-4.4-9.4-9.6-4.1
	c-3.5,3.6-9.9,10.7-16.5,9.7c-3.8-0.6-9.9-6.6-15-13.1c-8-10.1-13.9-4.3-9.3,4.6c3.5,6.8,5.2,15.5,3.6,18.6
	c-1.6,3.2-4.1,7.5-18.2,10.6c-11.7,2.6-5.8,9.6-0.3,8.8c1.8-0.3,20-1.6,23.4,2.7c4.9,6.1,4.9,12.7,4.6,16c-1,11.9,9.3,11.4,9.7,3.3
	c0.1-1.5,2.8-15.2,8.4-17.5c5.7-2.3,8.8-3,22,0.2C405.2,55.2,405.3,47.1,398.9,44.9z M373.4,27.9c0,1.4-1.2,2.6-2.6,2.6
	s-2.6-1.2-2.6-2.6s1.2-2.6,2.6-2.6S373.4,26.4,373.4,27.9z M377.8,21.7c0,1-0.8,1.9-1.9,1.9s-1.9-0.8-1.9-1.9c0-1,0.8-1.9,1.9-1.9
	S377.8,20.7,377.8,21.7z M381.9,17.6c0,0.6-0.5,1.1-1.1,1.1c-0.6,0-1.1-0.5-1.1-1.1c0-0.6,0.5-1.1,1.1-1.1
	C381.5,16.6,381.9,17.1,381.9,17.6z M385.7,12.5c0,0.4-0.3,0.7-0.7,0.7s-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7S385.7,12.1,385.7,12.5z
	 M361.1,27.6c0,1.7-1.4,3.1-3.1,3.1s-3.1-1.4-3.1-3.1c0-1.7,1.4-3.1,3.1-3.1S361.1,25.8,361.1,27.6z M357.4,20c0,1.2-1,2.2-2.2,2.2
	c-1.2,0-2.2-1-2.2-2.2s1-2.2,2.2-2.2C356.5,17.9,357.4,18.8,357.4,20z M351.9,14.6c0,0.8-0.6,1.4-1.4,1.4s-1.4-0.6-1.4-1.4
	s0.6-1.4,1.4-1.4S351.9,13.8,351.9,14.6z M349.2,8.5c0,0.6-0.5,1.2-1.2,1.2s-1.2-0.5-1.2-1.2c0-0.6,0.5-1.2,1.2-1.2
	S349.2,7.8,349.2,8.5z M357.9,38.9c0,1.7-1.3,3-3,3s-3-1.3-3-3c0-1.7,1.3-3,3-3S357.9,37.2,357.9,38.9z M347.3,40.8c0,1.6-1.3,3-3,3
	s-3-1.3-3-3s1.3-3,3-3S347.3,39.2,347.3,40.8z M338.3,40.8c0,0.8-0.7,1.5-1.5,1.5c-0.8,0-1.5-0.7-1.5-1.5c0-0.8,0.7-1.5,1.5-1.5
	C337.7,39.3,338.3,40,338.3,40.8z M329,43.4c0,0.6-0.5,1-1,1s-1-0.5-1-1c0-0.6,0.5-1,1-1S329,42.8,329,43.4z M367,43.8
	c0,1.6-1.3,3-3,3s-3-1.3-3-3s1.3-3,3-3S367,42.1,367,43.8z M366.2,52.4c0,1.5-1.2,2.6-2.6,2.6c-1.5,0-2.6-1.2-2.6-2.6
	s1.2-2.6,2.6-2.6C365.1,49.8,366.2,50.9,366.2,52.4z M361.2,58.4c0,0.9-0.8,1.7-1.7,1.7c-0.9,0-1.7-0.8-1.7-1.7s0.8-1.7,1.7-1.7
	C360.5,56.7,361.2,57.5,361.2,58.4z M362.9,65.7c0,0.8-0.6,1.4-1.4,1.4c-0.8,0-1.4-0.6-1.4-1.4s0.6-1.4,1.4-1.4
	C362.3,64.4,362.9,65,362.9,65.7z M359.8,70.2c0,0.3-0.2,0.5-0.5,0.5s-0.5-0.2-0.5-0.5c0-0.3,0.2-0.5,0.5-0.5S359.8,69.9,359.8,70.2
	z M374.5,38.4c0,1-0.8,1.8-1.8,1.8c-1,0-1.8-0.8-1.8-1.8c0-1,0.8-1.8,1.8-1.8C373.7,36.6,374.5,37.4,374.5,38.4z M382.8,43.1
	c0,1.2-1,2.2-2.2,2.2s-2.2-1-2.2-2.2s1-2.2,2.2-2.2S382.8,41.9,382.8,43.1z M388.7,45.4c0,0.7-0.6,1.2-1.2,1.2s-1.2-0.6-1.2-1.2
	s0.6-1.2,1.2-1.2S388.7,44.7,388.7,45.4z M394,47.2c0,0.5-0.4,0.8-0.8,0.8c-0.5,0-0.8-0.4-0.8-0.8c0-0.5,0.4-0.8,0.8-0.8
	C393.6,46.3,394,46.7,394,47.2z M399.7,48.8c0,0.4-0.3,0.7-0.7,0.7s-0.7-0.3-0.7-0.7c0-0.4,0.3-0.7,0.7-0.7S399.7,48.4,399.7,48.8z" />
    </g>
    <circle id="circleEdge" fill="none" stroke="url(#edgeGrad)" stroke-width="18" cx="300" cy="300" r="290" />
  </svg>

  <svg class="vol" version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="45.7px" height="45.7px" viewBox="0 0 45.7 45.7">

    <g class="volGroup">
      <title>un/mute</title>
      <desc>Chartreuse by Parachute Pulse</desc>
      <circle fill="rgba(0,0,0,0)" stroke="rgba(0,0,0,0)" stroke-width="3.6522" stroke-miterlimit="10" cx="22.8" cy="22.8" r="21" />
      <g fill="#0D2D44">
        <path d="M13.7,19.8H13c-0.6,0-1.1,0.5-1.1,1.1v7.8c0,0.6,0.5,1.1,1.1,1.1h0.8c0.6,0,1.1-0.5,1.1-1.1V21
		C14.8,20.3,14.3,19.8,13.7,19.8z" />
        <path d="M19.8,16.8h-1c-0.6,0-1,0.4-1,1v11c0,0.6,0.4,1,1,1h1c0.6,0,1-0.4,1-1v-11C20.8,17.3,20.4,16.8,19.8,16.8z" />
        <path d="M25.8,13.8h-1c-0.6,0-1,0.4-1,1v14c0,0.6,0.4,1,1,1h1c0.6,0,1-0.4,1-1v-14C26.8,14.3,26.4,13.8,25.8,13.8z" />
        <path d="M31.8,17.8h-1c-0.6,0-1,0.4-1,1v10c0,0.6,0.4,1,1,1h1c0.6,0,1-0.4,1-1v-10C32.8,18.3,32.4,17.8,31.8,17.8z" />
      </g>
    </g>
  </svg>

</div>

script.js

var xmlns="http://www.w3.org/2000/svg", select = function(s) {
      return document.querySelector(s);
    }, selectAll = function(s) {
      return document.querySelectorAll(s);
    }, container = select('.container'), frill = select('.frill'), jellyMask = select('.jellyMask'), jellyBody = select('.jellyBody'),jellyInnerGroup = select('.jellyInnerGroup'), jellyStrandMask = select('#jellyStrandMask'), jellyStrandGroup = selectAll('.jellyStrandGroup path'), jellyfishGroup = select('.jellyfishGroup'), maskedJellyStrandGroup = select('.maskedJellyStrandGroup'), bubbleGroup = select('.bubbleGroup'), allBubbles = selectAll('.bubbleGroup use'), starfish = select('.starfish'), vol = select('.vol'), currentIframe = null;
//center the container cos it's pretty an' that
TweenMax.set(container, {
  position:'absolute',
  top:'50%',
  left:'50%',
  xPercent:-50,
  yPercent:-50
})

TweenMax.set(vol, {
  x:260,
  y:20
})

TweenMax.set(jellyfishGroup, {
  x:randomBetween(-100, 100),
  y:200
})
TweenMax.set(jellyMask, {
  transformOrigin:'50% 70%'
})

TweenMax.set(maskedJellyStrandGroup, {
  transformOrigin:'50% 0%'
})

TweenMax.to(jellyfishGroup, 66, {
  y:-100,
  repeat:-1,
  yoyo:true,
  ease:Power2.easeInOut
})

TweenMax.to(jellyfishGroup, 80, {
  x:randomBetween(-200, 200),
  repeat:-1,
  yoyo:true,
  ease:Power2.easeInOut
})

var jellyStrandTl = new TimelineMax({repeat:-1});
jellyStrandTl.staggerTo(jellyStrandGroup, 3, {
  y:-184,
  ease:Sine.easeInOut
}, 0.32);


var bodyStretch = TweenMax.fromTo([jellyMask], 3, {
  
 scaleX:1.4,
  scaleY:0.7
}, {
  repeat:-1,
  yoyo:true,
  scaleX:0.6,
  scaleY:1.7,
  
  ease:Sine.easeInOut
})

var strandStretch = TweenMax.fromTo([ maskedJellyStrandGroup], 3, {
  
  scaleX:1.1,
  scaleY:0.9
}, {
  repeat:-1,
  yoyo:true,
  scaleX:0.9,
  scaleY:1.1,
  
  ease:Sine.easeInOut
})

var tl = new TimelineMax({repeat:-1});
tl.to([jellyBody, frill, jellyStrandMask], 3, {
  x:-29,
  ease:Linear.easeNone
  //ease:Anticipate.easeInOut
})
//tl.add([bodyStretch, strandStretch], 0)
tl.timeScale(4)

var bubbleTl = new TimelineMax();

for(var i = 0; i < allBubbles.length; i++){
  
  var b = TweenMax.fromTo(allBubbles[i], randomBetween(16,40), {
    x:randomBetween(0, 600),
    y:randomBetween(590, 600),
    rotation:720
  },{
    x:randomBetween(0, 600),
    y:0,
    rotation:0,
    transformOrigin:randomBetween(-1900, 1900) + '% 50%',
    repeat:-1,
    ease:Linear.easeNone
  })
  
  bubbleTl.add(b, (i+1)/10)
}
bubbleTl.time(20)

function playStarfish(){
  
  var posX = randomBetween(100, 600);
  var val = randomBetween(1, 8)/10;
  console.log(val)
  TweenMax.set(starfish, {
    transformOrigin:'50% 50%',
    y:0,
    alpha:val,
    rotation:0,
    scale:val,
    x:posX
  })
  TweenMax.to(starfish, randomBetween(23, 67), {
    rotation:randomBetween(23, 720),
    y:600,
    ease:Linear.easeNone,
    onComplete:playStarfish
  })
}

function randomBetween(min,max)
{
    return Math.floor(Math.random()*(max-min+1)+min);
}
/*
vol.onclick = function(e){
  
  if(currentIframe === null){
    currentIframe = document.createElement('iframe');
    currentIframe.setAttribute('src', 'https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/60057245&amp;auto_play=true');
    currentIframe.setAttribute('width','0');
    currentIframe.setAttribute('height','0');

    currentIframe.setAttribute('scrolling','no');
    currentIframe.setAttribute('frameborder','no');
    container.appendChild(currentIframe);
    
    TweenMax.to(vol, 1, {
      alpha:0.4
    })
    return;
  }
   TweenMax.to(vol, 1, {
      alpha:1
    })    
   
   container.removeChild(currentIframe);
   currentIframe = null;
    
}
*/
playStarfish()
//ScrubGSAPTimeline(myTimeline);

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js"></script>

style.css

body{
  background-color:#031B25;
  overflow:hidden;
}
body, html {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

.container{
  width:900px;
  height:600px;
}

svg{
  position:absolute;
  width:100%;
}

.volGroup{
  cursor:pointer;
  display:none;
}

svg-jellyfish.markdown

SVG Jellyfish

Something soothing to look at and take your mind off things.

A Pen by Chris Gannon on CodePen.

License.