annotate.css

#annotationLayer {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
}
body:has(#debug:checked) {
  #annotationLayer {
    display: block;
  }

  #result {
    --s: 100px; /* control the size */

    --_g: #0000 90deg, #d8dee910 0;
    background: conic-gradient(from 90deg at 2px 2px, var(--_g)) 0 0 / var(--s)
        var(--s),
      conic-gradient(from 90deg at 1px 1px, var(--_g)) 0 0 / calc(var(--s) / 5)
        calc(var(--s) / 5);
    /* compensate for viewport adjustment to see the labels*/
    background-position-x: 20px;
    background-position-y: 20px;
  }
}
.annotation {
  fill: none;
  stroke: #5e81ac;
}
.point {
  fill: #d8dee9;
  stroke: #bf616a;
  cursor: pointer;
}
.control-point {
  fill: #d8dee9;
  stroke: #a3be8c;
  cursor: pointer;
}

.coordinate-text {
  font-size: 0.8em;
  fill: #ebcb8b;
}

#originalSVG {
  path {
    stroke-width: 1px;
  }
}