JSFiddle - React, Tailwind, and code Playground

by Ayyappan Sakthivadivel

HTML

<svg height="500" width="500" class="ball ball-one">
  <defs>
    <radialGradient id="grad1" cx="50%" cy="50%" r="100%" fx="55%" fy="15%">
      <stop offset="0" style="stop-color:rgb(255,255,255);stop-opacity:0.2" />
      <stop offset="60%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
    </radialGradient>
    <radialGradient id="grad2" cx="50%" cy="50%" r="50%" fx="75%" fy="50%">
      <stop offset="0" style="stop-color:rgb(0,0,0);stop-opacity:0.5" />
      <stop offset="100%" style="stop-color:rgb(255,255,255);stop-opacity:0.5" />
    </radialGradient>    
  </defs>
  <ellipse cx="200" cy="70" rx="55" ry="55" fill="url(#grad1)" />
  <ellipse cx="200" cy="140" rx="55" ry="10" fill="url(#grad2)" />
  Sorry, your browser does not support inline SVG.
</svg>

CSS

div div.ball {
    width: 20px;
    position: relative;
    display: inline-block;
    margin: 25px;
    height: 20px;
    border-radius: 50%;
    z-index: 999;
}
.ball-one {
    animation: jump .5s ease 0s infinite alternate;
}
@keyframes jump {
    0% {transform: scaleY(.8);}
    100% {
        transform: translateY(-70px);
    }   
}