<h1>CSS offset-path: ray() animation</h1>
<div class="box">
<!-- <svg class="plane" width="90" height="70" viewBox="0 0 90 70">
<path stroke="#181c21" class="path plane" d="m38.056561,4.386863c-0.586136,0 -1.107681,0.240613 -1.547703,0.677117c-0.43961,0.436077 -0.803249,1.060985 -1.105896,1.841453c-0.60508,1.560679 -0.977318,3.753087 -1.180946,6.378638c-0.203182,2.620523 -0.23745,5.671947 -0.153076,8.938395c-7.240604,2.970366 -21.925862,9.103491 -23.10556,10.472843c-1.570616,1.823208 -1.063179,3.912663 -0.430244,5.299751l24.142197,-4.913754c0.510326,6.4035 1.235912,12.745731 1.868229,17.715393c-2.360985,0.690937 -6.76815,2.055286 -7.677814,2.901402c-1.253193,1.165512 -1.253193,4.929501 -1.253193,4.929501l9.88092,-0.80365c0.232769,1.622536 0.378304,2.569187 0.378304,2.569187l0.014431,0.085464l0.077927,0l0.181957,0l0.077995,0l0.014435,-0.085464c0,0 0.145256,-0.946732 0.378227,-2.569187l9.883835,0.80365c0,0 0,-3.763988 -1.253193,-4.929501c-0.91,-0.846428 -5.320366,-2.213829 -7.680691,-2.904591c0.631054,-4.954422 1.355366,-11.272388 1.865307,-17.655201l23.859238,4.85675c0.632927,-1.387089 1.143303,-3.476543 -0.427315,-5.299751c-1.165123,-1.352394 -15.495529,-7.349104 -22.825523,-10.358953c0.087616,-3.308828 0.055405,-6.40176 -0.150143,-9.052284l0,-0.00631c-0.20372,-2.622749 -0.576351,-4.812962 -1.180988,-6.372328c-0.30254,-0.780253 -0.663174,-1.405215 -1.103001,-1.841453c-0.440044,-0.436505 -0.961491,-0.677117 -1.547714,-0.677117l0,0z" fill-opacity="null" stroke-opacity="null" stroke-width="2" fill="#05111c"></path>
</svg> -->
  <img src="https://gw.alicdn.com/tfs/TB1cEbbbDnI8KJjy0FfXXcdoVXa-128-128.png" alt="" class="plane" />
<!--   <img src="https://gw.alicdn.com/tfs/TB1WGmRjm_I8KJjy0FoXXaFnVXa-100-100.png" class="plane" alt=""> -->
</div>
html {
  height: 100%;
}

body {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.box {
  position: relative;
  width: 500px;
  height: 500px;
  border: 2px dashed #888;
  border-radius: 100px;
  flex: none;
  // transform-style: preserve-3d;
}

.plane {
  position: absolute;
  top: 50%;
  left: 50%;
  // width: 60px;
  animation: plane 5s infinite linear;
  offset-distance: 250px;
  // offset-rotate: auto 145deg;
  offset-rotate: auto 140deg;
  offset-path: ray(0deg) padding-box;
}

@keyframes plane {
  to {
    offset-path: ray(360deg) padding-box;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.