JSFiddle - React, Tailwind, and code Playground

by navyflower

HTML

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="300" viewBox="0 0 500.00001 300" id="svg2"><g id="layer1" transform="translate(0 -752.362)"><ellipse id="my-circle" cx="257.013" cy="907.735" rx="201.742" ry="111.465" fill="#fff" stroke="#007400" stroke-width="3"/></g></svg>

CSS

/* line 2, ../sass/ani1.scss */
#my-circle {
  stroke: blue;
  stroke-dasharray: 1100;
  stroke-dashoffset: 500;
  -moz-animation: draw-first-shape 1s forwards 3;
  -webkit-animation: draw-first-shape 1s forwards 3;
  animation: draw-first-shape 1s forwards 3;
}

@-moz-keyframes draw-first-shape {
  from {
    stroke-dashoffset: 1100;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@-webkit-keyframes draw-first-shape {
  from {
    stroke-dashoffset: 1100;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes draw-first-shape {
  from {
    stroke-dashoffset: 1100;
  }
  to {
    stroke-dashoffset: 0;
  }
}

/*# sourceMappingURL=ani1.css.map */