JSFiddle - React, Tailwind, and code Playground

by Victor

HTML

<div class="colorball">
  <div class="colorball__circle"></div>
</div>

SCSS

$dim: 100px;
$length: 5s;
body {
  background:#6aa3cc
;
  width: 100%;
  height: 100vh;
  padding: 2rem;
    transition: all $length linear;
    
    box-shadow: 
    inset 0 $dim*1*2 0 rgba(255,255,255,0.2),
 inset 0 $dim/2*2 0 rgba(255,255,255,0.2),
  inset 0 $dim/3*2 0 rgba(255,255,255,0.2),
   inset 0 $dim/4*2 0 rgba(255,255,255,0.2);

  &:hover {
    background: #292c2d;
      box-shadow: 
    inset 0 $dim*1*2 0 rgba(0,0,0,0.2),
 inset 0 $dim/2*2 0 rgba(0,0,0,0.2),
  inset 0 $dim/3*2 0 rgba(0,0,0,0.2),
   inset 0 $dim/4*2 0 rgba(0,0,0,0.2);
    
    .colorball {
    background: #9385a3;
    transform: translateX(calc(100vw - 200px)) translateY(calc(100vh - 120px));
  
    .colorball__circle {
        position: absolute;
        /* top: $dim; */
        left: $dim/1.25;
        
    }
  }
  }
}
.colorball {
  /* border: 1px solid red; */
  width: $dim;
  height: $dim;
  border-radius: $dim;
  background: #f2ad46;
  position: relative;
  overflow: hidden;
  transition: all $length linear;
  
  &__circle {
    width: $dim/2;
        height: $dim/2;

      /* border: 1px solid red; */
        border-radius: $dim;
        box-shadow: 0 0 0 $dim/3 rgba(255,255,255,0.3),  0 0 0 $dim/1.6 rgba(255,255,255,0.3),  0 0 0 $dim/1.2 rgba(255,255,255,0.3);
        
        position: absolute;
        top: -($dim/2);
        left: -($dim/3.5);

transition: all $length ease-in;
  }
 
}