section.example
  each i in new Array(10)
    div
    
section.step-show
  h2 STEP SHOW
  div

%inner-round-corner {
  position: relative;
  overflow: hidden;
  
  &::after {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    border-radius: 50%;
  }
}

@mixin inner-round-corner(
  $size: 20px,
  $direction: 'top-left',
  $color: skyblue
) {
  @extend %inner-round-corner;
  width: $size;
  height: $size;

  &::after {
    border: $size/2 solid $color;
    
    @if $direction == 'top-left' {
      top: -50%;
      left: -50%;
    } @else if $direction == 'top-right' {
      top: -50%;
      right: -50%;
    } @else if $direction == 'bottom-right' {
      bottom: -50%;
      right: -50%;
    } @else {
      bottom: -50%;
      left: -50%;
    }
  }
}

// demo

$colors: tan, salmon, coral, tomato;
$directions: 'top-left', 'top-right', 'bottom-right', 'bottom-left';

@keyframes step-show {
  0%, 10% {
    transform: translate3d(-50px, 50px, 0) scale3d(.25, .25, 1);
  }
  45%, 55% {
    transform: translate3d(-50px, 50px, 0) scale3d(.5, .5, 1);
  }
  90%, 100% {
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1) ;
  }
}

html, body {
  width: 100%;
  height: 100%;
}

body {
  background-image: radial-gradient(circle farthest-corner at center, #2a2c2b 0%, #1e1e20 100%);
}

.example {
  overflow: hidden;
  div {
    float: left;
    margin: 10px;
    
    @for $i from 1 through 10 {
      &:nth-child(#{$i}) {
        @include inner-round-corner(
          $i * 15px,
          nth($directions, ($i - 1) % 4 + 1),
          nth($colors, random(4)) 
        );
      }
    }
  }
}

.step-show {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  
  div {
    @include inner-round-corner(100px, 'bottom-left', steelblue);
    border: 1px solid #666;
    
    &::after {
      animation: step-show 2s infinite alternate ease-in-out;
    }
  }
}