<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300">
  <style>
    text {
      font: 20px sans-serif;
      fill: #888888;
    }
  </style>

  <foreignObject width="200" height="200" x="40" y="40">
    <div xmlns="http://www.w3.org/1999/xhtml" style="background:conic-gradient(red,#ff0,#0f0,#0ff,#00f,#f0f,red);background:conic-gradient(in hsl longer hue,red,red);border-radius:50%;height:100%;width:100%" />
  </foreignObject>
  <text x="140" y="30" text-anchor="middle">0°</text>
  <text x="240" y="80" dominant-baseline="middle">60°</text>
  <text x="240" y="200" dominant-baseline="middle">120°</text>
  <text x="140" y="250" dominant-baseline="hanging" text-anchor="middle">180°</text>
  <text x="46" y="200" dominant-baseline="middle" text-anchor="end">240°</text>
  <text x="46" y="80" dominant-baseline="middle" text-anchor="end">300°</text>
</svg>

