JSFiddle - React, Tailwind, and code Playground

HTML

<div class='hole first'>
  <div class='hole second'>
     <div class='hole third'>

     </div>
  </div>
</div>

CSS

.hole {
  height: 100vh;
  background: radial-gradient(circle at center, transparent 25%, cyan 25.5%);
  background-size: 100% 100%;
  background-position: 50% 50%;
  transition: all 2.5s ease;
}
.hole.second {
    background: radial-gradient(circle at center, transparent 35%, magenta 35.5%);
    background-size: 100% 100%;
    background-position: 50% 50%;
    transition: all 2s ease;
}
.hole.third {
    background: radial-gradient(circle at center, transparent 45%, yellow 45.5%);
    background-size: 100% 100%;
    background-position: 50% 50%;
    transition: all 1.9s ease;
}
.hole:hover {
  background-size: 400% 400%; /* should be 100% * (100 / transparent % of radial gradient */
}
body {
  background: black;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}