* { box-sizing: border-box; margin: 0px; padding: 0px; }
.css-api-fetch-wrapper {
  position: relative;
  display: inline-block;
  font-size: 0px;
  width: 10px;
  background: lime;
  &::before {
    content: url(http://css-api.propjockey.io/animated.svg.php);
  }
  .css-api-fetch {
    font-size: 1rem;
    container: css-api-fetch / size;
    position: absolute;
    inset: 0px;
    &::before, * {
      --x_px: 100cqw;
      --y_px: 100cqh;
      --x: tan(atan2(var(--x_px), 1px));
      --y: tan(atan2(var(--y_px), 1px));
    }
    &::before {
      counter-reset: x var(--x) y var(--y);
      content: counter(x) " - " counter(y);
      white-space: pre;
      position: absolute;
      left: 110cqw;
      top: 10px;
    }
  }
}

@property --x_px {
  syntax: "<length>"; initial-value: 0px; inherits: false;
}
@property --y_px {
  syntax: "<length>"; initial-value: 0px; inherits: false;
}
@property --x {
  syntax: "<integer>"; initial-value: 0; inherits: false;
}
@property --y {
  syntax: "<integer>"; initial-value: 0; inherits: false;
}