<svg viewBox="0 0 100 100">
    
    <clipPath id="clip">
      <path d="M 50 0 a 50 50 0 0 1 0 100 50 50 0 0 1 0 -100 v 8 a 42 42 0 0 0 0 84 42 42 0 0 0 0 -84" />
    </clipPath>

    <foreignObject x="0" y="0" width="100" height="100" clip-path="url(#clip)">
        <div class="gradient" xmlns="http://www.w3.org/1999/xhtml" />
    </foreignObject>
</svg>

svg {
  max-width: 240px;
}

div.gradient {
  width: 100px; height: 100px;
  border-radius: 50%;
  background-image: conic-gradient(from 270deg, #ff4800 10%, #dfd902 35%, #20dc68, #0092f4, #da54d8 72% 75%, #ff4800 95%);
}