<div class="not-supported"> Your browser doesn't support this demo. It is only supported in the latest version of Chrome Canary</div>

<svg viewbox="0,0 10,10" width="200px" height="200px">
  <path class="track" fill="none" stroke-width="0.25" d="M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0" />
  <circle class="marker" r="1" fill="orange"></circle>
</svg>

<div class="info"></div>

@property --100vw {
  syntax: "<length>";
  initial-value: 0px;
  inherits: false;
}

:root {
  --100vw: 100vw;
  --int-width: calc(10000 * tan(atan2(var(--100vw), 10000px)));
}

@function --wideness(
  --lower-bound <integer>: 400,
  --upper-bound <integer>: 1200
) {
  result: calc(
    (
        clamp(var(--lower-bound), var(--int-width), var(--upper-bound)) -
          var(--lower-bound)
      ) / (var(--upper-bound) - var(--lower-bound))
  );
}

.track {
  stroke: #ccc;
}

.marker {
  offset-path: path("M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0");
  offset-distance: calc(--wideness(400, 800) * 100%);
}

/* Aesthetic Styles */

@layer pen {
  * {
    margin: 0px;
    padding: 0px;
  }

  body {
    background: #333;

    height: 100vh;
    display: grid;
    place-items: center;
  }

  .info {
    display: flex;
    flex-flow: column;
    gap: 10px;

    position: absolute;
    text-align: right;

    top: 4rem;
    right: 4rem;
    counter-reset: wideness calc(--wideness(400, 1200) * 100) int-width
      var(--int-width);

    font-family: sans-serif;
    font-size: 16px;
    color: #bbb;

    &::before {
      content: "Wideness: " counter(wideness) "%";
    }

    &::after {
      content: "Width: " counter(int-width) "px";
    }
  }

  .not-supported {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100vw;
    height: 40px;

    font-weight: 600;
    text-align: center;

    background-color: #ffbd59aa;
  }

  @supports (border: --dashed-border()) {
    .not-supported {
      display: none;
    }
  }
}