JSFiddle - React, Tailwind, and code Playground

by Nihar Raote

HTML

<!-- <svg id="box" viewbox="0 0 15 10">
  <path id="curve" d="M 1,2 C 1,3.5 3,3.5 3,2" fill="none" stroke="black" stroke-width="0.2"></path>
</svg> -->

<svg id="ani" viewbox="0 0 100 100">
    <circle class="cgroup" id="first" cx="10" cy="10" r="2" fill="black" stroke="none"></circle>
    <circle class="cgroup" id="second" cx="20" cy="10" r="2" fill="black" stroke="none"></circle>
    <circle class="cgroup" id="third" cx="30" cy="10" r="2" fill="black" stroke="none"></circle>
</svg>

CSS

#box {
  background-color: green;
}

#curve {
  animation-name: move;
  animation-duration: 1s;
  animation-timing-function: linear;
  /* animation-iteration-count: infinite; */
}

@keyframes move {
  0% { transform-origin: 2px 2px; }
  50% { transform-origin: 2px 2px; transform: rotate(180deg); }
  100% { transform-origin: 2px 2px; transform: rotate(360deg); }
}

#ani {
  background-color: red;
}

.cgroup {
  animation-name: bob;
  animation-duration: 2s;
  animation-timing-function: linear;
  animation-iteration-count: 3;
}

#second {
  animation-delay: 0.3s;
}
#third {
  animation-delay: 0.6s;
}

@keyframes bob {
  50% {
    transform: translateY(-5px);
  }
  100% {
    transform: translateY(0px);
  }
}