<!-- 
  ONLY WORKS IN CHROME :/
-->

<!--  Uses CSS animations -->
<svg id="starry" filter="url(#goo)" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="goo">
      <!-- apply blur -->
      <feGaussianBlur in="SourceGraphic" stdDeviation="20" result="blur" />
      <!-- 
          applies blur to where the color collide.
          feColorMatrix: changes colors based on the matrix values. 
      -->
      <feColorMatrix in="blur" 
                     mode="matrix" 
                     values="1 0 0 0 0  
                             0 1 0 0 0  
                             0 0 1 0 0  
                             0 0 0 55 -10" 
                     result="goo" />
      <!-- adjusts how/where effect is applied  -->
      <feComposite in="SourceGraphic" in2="goo" operator="atop"/> <!-- over, in, atop, out, xor and lighter -->
    </filter>
  </defs>
  
  <g class="starry-els">
    <ellipse id="el1" rx="80" ry="200" />
    <ellipse id="el2" rx="200" ry="80" />
    <ellipse id="el3" rx="200" ry="80" />
    <ellipse id="el4" rx="80" ry="200" />
  </g>
</svg>

<svg id="asdf" xmlns="http://www.w3.org/2000/svg" filter="url(#asdf_goo)">
  <defs>
    <filter id="asdf_goo">
      <feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur" />
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
<!--       <feComposite in="SourceGraphic" in2="goo" operator="atop"/> -->
    </filter>
  </defs>

  <g class="flub-els">
    <ellipse id="el1"></ellipse>
    <ellipse id="el2"></ellipse>
    <ellipse id="el3"></ellipse>
    <ellipse id="el4"></ellipse>
  </g>
</svg>

<!--  Uses SVG Animate element  -->
<svg id="blob" xmlns="http://www.w3.org/2000/svg" filter="url(#goo)">
  <defs>
    <filter id="goo">
      <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
      <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
    </filter>
  </defs>
<g>
  <ellipse id="el1" cx="250" cx="250" r="100">
    <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="360 250 250" to="0 250 250" dur="6s" repeatCount="indefinite"/>
  </ellipse>
  <ellipse id="el2" cx="250" cy="250" r="100">
    <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 250 250" to="360 250 250" dur="6s" repeatCount="indefinite"/>
  </ellipse>
  <ellipse id="el3" cx="250" cy="250" r="100">
    <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 250 250" to="360 250 250" dur="6s" repeatCount="indefinite"/>
  </ellipse>
  <ellipse id="el4" cx="250" cy="250" r="100">
    <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="360 250 250" to="0 250 250" dur="6s" repeatCount="indefinite"/>
  </ellipse>
  </g>
</svg>

<svg id="qwerty" xmlns="http://www.w3.org/2000/svg" filter="url(#lines_goo)">
  <defs>
    <filter id="lines_goo">
      <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
      <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
    </filter>
  </defs>
  
  
  <line x1="250" y1="500" 
          x2="250" y2="20" 
          stroke="white" 
          stroke-width="20"/>
  
<!--   <line x1="300" y1="500" 
          x2="300" y2="-5" 
          stroke="red" 
          stroke-width="10">
    <animateTransform attributeName="transform"
                      attributeType="XML"
                      type="rotate"
                      from="0 250 250"
                      to="360 250 250"
                      dur="10s"
                      repeatCount="indefinite"/>
  </line>
 -->
  
  <ellipse id="el2">
    <animate attributeType="XML"
      attributeName="cx"
      from="150" to="350"
      dur="1s"
      fill="freeze"/>
  </ellipse>
  <ellipse class="blob">
    <animateTransform attributeType="xml" attributeName="transform" type="translate" from="0" to="300 -100" dur="4s" repeatCount="indefinite"/>
  </ellipse>
  <ellipse class="blob">
    <animateTransform attributeType="xml" attributeName="transform" type="translate" from="0" to="-300 100" dur="4s" repeatCount="indefinite"/>
  </ellipse>
  <ellipse class="blob">
    <animateTransform attributeType="xml" attributeName="transform" type="translate" from="-300 -100" to="0" dur="4s" repeatCount="indefinite"/>
  </ellipse>
  <ellipse class="blob">
    <animateTransform attributeType="xml" attributeName="transform" type="translate" from="300 100" to="0" dur="4s" repeatCount="indefinite"/>
  </ellipse>
  <ellipse id="el4">
    <animate attributeType="XML"
      attributeName="cx"
      from="350" to="100"
      dur="5s"
      fill="freeze"/>
  </ellipse>
</svg>

html {
  background: #e1e1e1;
  display: flex;
  align-items: top;
  justify-content: center;
  height: 100%;
}

// Comment this to remove global fill to see each svg element 
// svg { 
//   ellipse, circle {
//     fill: crimson !important;
//   }
// }

@keyframes from0to360 {
  from{transform:rotate(0);}
  to{transform:rotate(360deg);}
}

@keyframes from360to0 {
  from{transform:rotate(360deg);}
  to{transform:rotate(0deg);}
}

@keyframes from360to0scaled {
  from{transform:rotate(360deg) scale(2); }
  to{transform:rotate(0deg) scale(-0.25);}
}

#starry { 
  border: solid thin crimson;
  padding: 20px;
  min-width: 500px;
  min-height: 500px;
  
  ellipse {
    cx: 250; // position elements in the center
    cy: 250; // position elements in the center
    transform-origin: center; // rotate animation origin
  }
}

#asdf { 
  // background-color: #d5d5d5;
  padding: 20px;
  min-width: 500px;
  min-height: 500px;
  
  ellipse {
    animation-duration: 8s;
    animation-name: from360to0scaled;
    animation-direction: alternate;
    cx: 250; // position elements in the center
    cy: 250; // position elements in the center
    rx: 100; 
    ry: 80;
    transform: skewY(25deg);
    transform-origin: center; // rotate animation origin

    &#el1 {  
      animation-duration: 5s;
      cx: 180;
    }
    &#el2 {  
      cy: 180;
      animation-duration: 6s;
    }
    &#el3 {  
      animation-duration: 4s;
      cy: 300;
    }
    &#el4 {  
      cx: 300;
    }
  }
  ellipse {
    fill: crimson;
  }
}

#blob { 
  // padding: 20px;
  min-width: 500px;
  min-height: 500px;
  
  ellipse {
    fill: royalblue;
    animation-duration: 10s;
    animation: none;
    cx: 250; // position elements in the center of svg 
    cy: 250; // position elements in the center of svg
    rx: 150; // radius size
    ry: 160;  // radius size

    &#el1 {  
      cx: 180;
      cy: 280;
    }
    &#el2 {  
      cy: 270;
    }
    &#el3 {  
      cx: 200;
    }
    &#el4 {  
      cx: 280;
      cy: 200;
    }
  }
}

#qwerty { 
  padding: 20px;
  min-width: 500px;
  min-height: 500px;
  
  ellipse {
    animation: none;
    cx: 250; // position elements in the center
    cy: 250; // position elements in the center
    rx: 20;
    ry: 200;

//     &:nth-of-type(even){
//       fill: #ffeaea;
//     }
//     &:nth-of-type(odd){
//       fill: #ff1212;
//     }
    &.blob {
      ry: 20;
      fill: orange;
    }
  }
}

#line {
  x1: 250px;
  y1: 500px;
  x2: 250; 
  y2: 0;
  stroke: white; 
  stroke-width:10;
}

#el1{
  animation: from0to360 20s linear infinite;
  fill: crimson;  
}

#el2 {
  animation: from360to0 20s linear infinite;
  fill: teal;
}

#el3{
  animation: from0to360 20s linear infinite;
  fill: orange;
}

#el4 {
  animation: from360to0 20s linear infinite;
  fill: royalblue;
}