border-radius random animation

by Ting-Yuan Chang

HTML

<!-- https://9elements.com/io/css-border-radius/ -->
<!-- https://9elements.github.io/fancy-border-radius/ -->
<div class="block">

</div>

SCSS

.block {
  transition: border-radius 500ms ease;
  width: 300px;
  height: 300px;
  margin: auto;
  background-image: linear-gradient(45deg, #3023AE 0%, #FF0099 100%);
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  
  $minRadius: 15%;
  $randomRadius: 75;
  $maxRadius: 85%;
  @for $i from 0 through 19 {
    &.rand#{$i} {
      $rand1: random($randomRadius);
      $rand2: random($randomRadius);
      $rand3: random($randomRadius);
      $rand4: random($randomRadius);
      border-radius: $minRadius + $rand1 $maxRadius - $rand1 $minRadius + $rand2 $maxRadius - $rand2 
        unquote("/") $minRadius + $rand3 $minRadius + $rand4 $maxRadius - $rand4 $maxRadius - $rand3;
    }
  }
}

JavaScript

var block = document.querySelector('.block');

var randomMove = function() {
	var rand = Math.floor(Math.random() * 20);
  if(block.classList[1] !== undefined) {
    if(rand === parseInt(block.classList[1].substr(4))) {
    console.log(parseInt(block.classList[1].substr(4)))
    	rand = -1;
    }
  	block.classList.remove(block.classList[1]);
  }
  if(rand !== -1){
  	block.classList.add('rand' + rand);
  }
};

randomMove();
setInterval(randomMove, 500);