.box {
  display:inline-block;
  width:150px;
  height:200px;
  position:relative;
  border:1px solid;
  background:
    linear-gradient(blue 0 0) center/100% 1px no-repeat,
    linear-gradient(blue 0 0) center/1px 100% no-repeat;
}

.box i{
  content:"";
  position:absolute;
  width:30px;
  height:30px;
  border-radius:50%;
  background:radial-gradient(at 30% 30%,#0000,#000a) red;
  left:0;
  top:50%;
  transform:translateY(-50%);
}
.start .parabolic1 i {
  animation:
    x 1s linear infinite alternate,
    y1 1s infinite cubic-bezier(var(--p1,0),667,var(--p2,1),667) alternate;
}
.start .sinusoidal1 i {
  animation:
    x 1s linear infinite alternate,
    y1 1s infinite cubic-bezier(var(--s1,0.5),1725,var(--s2,0.5),-1725) alternate;
}

@keyframes x { to {left:calc(100% - 30px)}}
@keyframes y1 {to {top:49.9%}}


/**/
d {position:fixed;height:4px;width:4px;background:#222;border-radius:50%}
button {border:none;border-radius:10px;padding:10px 20px;cursor:pointer;position:fixed;bottom:20px;right:20px;font-family:sans-serif;font-size:30px;background:#c82629;color:#fff;}
.panel {position: fixed;top: 20px;right: 20px;padding: 10px;border: 1px solid;border-radius: 10px;background: #0001;font-family: sans-serif;}
.panel div:first-child {border-bottom: 1px solid;padding-bottom: 10px;margin-bottom: 10px;}