JSFiddle - React, Tailwind, and code Playground

by Ayyappan Sakthivadivel

HTML

<div class="div-wrapper">
  <div class="snake">
    <div class="content">
    </div>
  </div>
</div>


</div>

CSS

.div-wrapper {
  padding: 20px;
  width: 150px;
  height: 150px;
  margin: 50px;
}
.snake {
  border: 10px solid lime;
  display: inline-block;
  position: relative;
  padding: 1vw;
  height: 100%;
  width: 100%;
}
.snake:before {
  width: 8vw;
  height: 8vw;
  content: '';
  position: absolute;
  display: block;
  background-color: white;
  animation: around linear 10s infinite;
  transform: rotate(45deg);
  z-index: 1
}
.snake.red:before {
  background-color: red;
}
@keyframes around {
  0% {
    top: calc(-4vw - 1px);
    left: calc(100% - 4vw + 1px);
  }
  25% {
    top: calc(100% - 4vw + 1px);
    left: calc(100% - 4vw + 1px);
  }
  50% {
    top: calc(100% - 4vw + 1px);
    left: calc(-4vw - 1px);
  }
  75% {
    top: calc(-4vw - 1px);
    left: calc(-4vw - 1px);
  }
  100% {
    top: calc(-4vw - 1px);
    left: calc(100% - 4vw + 1px);
  }
}