JSFiddle - React, Tailwind, and code Playground

by Dogbert

HTML

<button>
Toggle
</button>

<svg width="580" height="400" xmlns="http://www.w3.org/2000/svg">
 <g>
  <ellipse ry="115.5" rx="401" id="svg_4" cy="53.449997" cx="323" fill="#0062ff" opacity="0.5"/>
  <ellipse ry="71.5" rx="378" id="svg_2" cy="33.449997" cx="301" fill="#0062ff" opacity="0.7"/>
  <ellipse ry="48.600006" rx="276" id="svg_1" cy="8.550003" cx="240" fill="#0062ff" opacity="1"/>
 </g>
</svg>

CSS

ellipse {
  transition: all 0.5s;
  transform: translateY(600px);
}

ellipse:nth-child(3) {
  transition-delay: 0s;
}

ellipse:nth-child(2) {
  transition-delay: .05s;
}

ellipse:nth-child(1) {
  transition-delay: .1s;
}

.go ellipse {
  transform: translateY(0);
}

JavaScript

document.querySelector('button').addEventListener('click', () => {
  document.querySelector('svg').classList.toggle('go');
})