JSFiddle - React, Tailwind, and code Playground

HTML

<div class="port">
    <div class="message">HARMO</div>
    <div class="radar"> </div>  
    <ul class="spots"> 
      <li></li> 
      <li></li>
    </ul>
  </div>

CSS

.message {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  color: red;
  float: left;
  margin-top: 20px;
}
.port {
  background-color: black;
  border-radius: 8px;
  height: 150px;
  width: 100%;
  overflow: hidden;
  position: relative;
}
.radar {
  background-color: green;
  background-image: linear-gradient (to right, rgba (0,0,0,0.9) 25%, rgba (0,0,0,0.1) 50%, rgba (0,0,0,0.9) 75%);
  color: white;
  height: 100%;
  width: 3%;
  animation: 2.5s linear 0s infinite alternate move-eye;
}

@keyframes move-eye {
  from { margin-left: -20%; }
  to { margin-left: 120%; }
}
ul.spots  {
  position: absolute;
  top: 0;
  left: 0;
  animation: 25s linear 0s infinite move-planes;
}
ul.spots li  {
  display: block;
  height: 3px;
  width: 3px;
  border-radius: 50%;
  background-color: green;
}
ul.spots li:last-child {
  transform: translate(40px, 20px);
}

@keyframes move-planes {
  from {
    top: 0%;
    left: 0%;
  }
  to {
    top: 50%;
    left: 100%;
  }
}