<div class="services">
<svg width="664" height="1216" viewBox="0 0 664 1216">
            <g id="layer1">
                <path id="path1" d="M22.9998 1C22.9998 1 649.558 119 663 589.542C655.833 1135 1 1215 1 1215" stroke="#29A0EC" fill="none" />
            </g>
            <g id="oval" fill="none">
                    <path id="Oval" fill-rule="evenodd" clip-rule="evenodd" d="M84 90C87.3137 90 90 87.3137 90 84C90 80.6863 87.3137 78 84 78C80.6863 78 78 80.6863 78 84C78 87.3137 80.6863 90 84 90Z" fill="#29A0EC" />
                    <path id="Oval_2" opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M83.5 96C90.4036 96 96 90.4036 96 83.5C96 76.5964 90.4036 71 83.5 71C76.5964 71 71 76.5964 71 83.5C71 90.4036 76.5964 96 83.5 96Z" fill="#29A0EC" />
                    <path id="Oval_3" fill-rule="evenodd" clip-rule="evenodd" d="M83.5 101C93.165 101 101 93.165 101 83.5C101 73.835 93.165 66 83.5 66C73.835 66 66 73.835 66 83.5C66 93.165 73.835 101 83.5 101Z" stroke="#00A031" stroke-opacity="0.16" />
                    <path id="Oval_4" fill-rule="evenodd" clip-rule="evenodd" d="M83.5 106C95.9264 106 106 95.9264 106 83.5C106 71.0736 95.9264 61 83.5 61C71.0736 61 61 71.0736 61 83.5C61 95.9264 71.0736 106 83.5 106Z" stroke="#00A031" stroke-opacity="0.13" />
                    <path id="Oval_5" fill-rule="evenodd" clip-rule="evenodd" d="M83.5 111C98.6878 111 111 98.6878 111 83.5C111 68.3122 98.6878 56 83.5 56C68.3122 56 56 68.3122 56 83.5C56 98.6878 68.3122 111 83.5 111Z" stroke="#00A031" stroke-opacity="0.12" />
                    <path id="Oval_6" fill-rule="evenodd" clip-rule="evenodd" d="M83.5 117C102.002 117 117 102.002 117 83.5C117 64.9985 102.002 50 83.5 50C64.9985 50 50 64.9985 50 83.5C50 102.002 64.9985 117 83.5 117Z" stroke="#00A031" stroke-opacity="0.11" />
                    <path id="Oval_7" fill-rule="evenodd" clip-rule="evenodd" d="M83.5 123C105.315 123 123 105.315 123 83.5C123 61.6848 105.315 44 83.5 44C61.6848 44 44 61.6848 44 83.5C44 105.315 61.6848 123 83.5 123Z" stroke="#00A031" stroke-opacity="0.1" />
                    <path id="Oval_8" fill-rule="evenodd" clip-rule="evenodd" d="M84 131C109.957 131 131 109.957 131 84C131 58.0426 109.957 37 84 37C58.0426 37 37 58.0426 37 84C37 109.957 58.0426 131 84 131Z" stroke="#00A031" stroke-opacity="0.08" />
                    <path id="Oval_9" fill-rule="evenodd" clip-rule="evenodd" d="M83.5 139C114.152 139 139 114.152 139 83.5C139 52.8482 114.152 28 83.5 28C52.8482 28 28 52.8482 28 83.5C28 114.152 52.8482 139 83.5 139Z" stroke="#00A031" stroke-opacity="0.06" />
                    <path id="Oval_10" fill-rule="evenodd" clip-rule="evenodd" d="M83.5 147C118.57 147 147 118.57 147 83.5C147 48.4299 118.57 20 83.5 20C48.4299 20 20 48.4299 20 83.5C20 118.57 48.4299 147 83.5 147Z" stroke="#00A031" stroke-opacity="0.04" />
                    <path id="Oval_11" fill-rule="evenodd" clip-rule="evenodd" d="M83.5 156C123.541 156 156 123.541 156 83.5C156 43.4594 123.541 11 83.5 11C43.4594 11 11 43.4594 11 83.5C11 123.541 43.4594 156 83.5 156Z" stroke="#00A031" stroke-opacity="0.03" />
                    <path id="Oval_12" fill-rule="evenodd" clip-rule="evenodd" d="M83.5 166C129.063 166 166 129.063 166 83.5C166 37.9365 129.063 1 83.5 1C37.9365 1 1 37.9365 1 83.5C1 129.063 37.9365 166 83.5 166Z" stroke="#00A031" stroke-opacity="0.03" />
                </g>
        </svg>
    </div>
.services {
  display: flex;
  padding-top: 200px;
  padding-bottom: 200px;
}
svg {
  margin: 0 auto;
}
function positionOval() {
  var scrollY = window.scrollY || window.pageYOffset;
  var maxScrollY = document.documentElement.scrollHeight - window.innerHeight;
  var path = document.getElementById("path1");
  // Calculate distance along the path the car should be for the current scroll amount
  var pathLen = path.getTotalLength();
  var dist = pathLen * scrollY / maxScrollY;
  var pos = path.getPointAtLength(dist);
  // Calculate position a little ahead of the car (or behind if we are at the end), so we can calculate car angle
  if (dist + 1 <= pathLen) {
    var posAhead = path.getPointAtLength(dist + 1);
    var angle = Math.atan2(posAhead.y - pos.y, posAhead.x - pos.x);
  } else {
    var posBehind = path.getPointAtLength(dist - 1);
    var angle = Math.atan2(pos.y - posBehind.y, pos.x - posBehind.x);
  }
  // Position the car at "pos" totated by "angle"
  var oval = document.getElementById("oval");
  var oval_bbox = oval.getBBox();
  var half_width = oval_bbox.width / 2;
  var half_height = oval_bbox.height / 2;

  oval.setAttribute("transform",
                    "translate(" + (pos.x - half_width) + "," + (pos.y - half_height) + ") " +
                    "rotate(" + angle / Math.PI * 180 + "," + half_width + "," + half_height + ")");
}

function rad2deg(rad) {
  return 180 * rad / Math.PI;
}

// Reposition car whenever there is a scroll event
window.addEventListener("scroll", positionOval);

// Position the car initially
positionOval();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.