.container
  svg(viewBox="0 0 425 225")
    path(d="M20,20 C20,200 400,0 400,200")
  .element
  h1 "M20,20 C20,200 400,0 400,200"
View Compiled
:root {
  --path: "M20,20 C20,200 400,0 400,200";
}
* {
  box-sizing: border-box;
}
body {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
  min-height: 100vh;
  background: #ddd;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
}
@media (prefers-color-scheme: dark) {
  body {
    background: #222;
  }
}
.container {
  position: relative;
  height: calc(var(--height) * 1vmin);
  width: calc(var(--width) * 1vmin);
  border: 2px solid #222;
}
@media (prefers-color-scheme: dark) {
  .container {
    border: 2px solid #ddd;
  }
}
h1 {
  position: absolute;
  top: calc(50% + (calc(var(--height) / 2) * 1vmin));
  -webkit-transform: translate(0, 50%);
          transform: translate(0, 50%);
  color: #ddd;
  font-weight: normal;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 1.25rem;
  width: calc(var(--width) * 1vmin);
}
.element {
  height: 40px;
  width: 40px;
  background: rgba(128,191,255,0.5);
  border: 2px #80bfff solid;
  position: absolute;
  top: 0%;
  left: 0%;
  offset-path: path(var(--path));
  -webkit-animation: travel 2s infinite alternate linear;
          animation: travel 2s infinite alternate linear;
}
svg {
  position: absolute;
  height: calc(var(--height) * 1vmin);
  opacity: 0.5;
  width: calc(var(--width) * 1vmin);
}
svg path {
  fill: none;
  stroke-width: 4px;
  stroke: #222;
}
@media (prefers-color-scheme: dark) {
  svg path {
    stroke: #ddd;
  }
}
@-webkit-keyframes travel {
  from {
    offset-distance: 0%;
  }
  to {
    offset-distance: 100%;
  }
}
@keyframes travel {
  from {
    offset-distance: 0%;
  }
  to {
    offset-distance: 100%;
  }
}
(function() {
  const CONTAINER = document.querySelector('.container')
  const VMIN = Math.min(window.innerHeight, window.innerWidth) / 100
  CONTAINER.style.setProperty('--width', 425 / VMIN)
  CONTAINER.style.setProperty('--height', 225 / VMIN)
})()
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/d3/5.15.0/d3.min.js