$outline-color: #263238;
$fill-color: #ECEFF1;
$size: 100vmin;
$duration: 10s;
$outline-width: 1px;
.clip {
  height: 100%;
  width: 100%;
  background: $fill-color;
  clip-path: polygon(
    0 0,
    40% 40%,
    50% sin(60deg)*100%, 
    60% 40%,
    100% 0,
    50% 20%,
    0 0
  );
  
  animation: morph $duration linear infinite;
  
  @at-root {
    @keyframes morph {
      50% {
      clip-path: polygon(
          0 0,
          0 100%,
          50% 100%, 
          100% 100%,
          100% 0,
          50% 0,
          0 0
        );        
      }
    }
  }
 
}
.outline {
  position: absolute;
  top: 50%;
  left: 50%;
  height: $size;
  width: $size;
  margin: $size/-2;
  transform: scale(0.5);
  filter:
    drop-shadow(-1*$outline-width $outline-width 0 $outline-color)
    drop-shadow($outline-width $outline-width 0 $outline-color)
    drop-shadow(0 $outline-width 0 $outline-color)
    drop-shadow($outline-width 0 0 $outline-color)
    drop-shadow($outline-width -1*$outline-width 0 $outline-color)
    drop-shadow(-1*$outline-width -1*$outline-width 0 $outline-color)
    drop-shadow(0 -1*$outline-width 0 $outline-color)
    drop-shadow(-1*$outline-width 0 0 $outline-color);
}