half circle border gradient

by sunil puvvada

HTML

<svg width="300" height="300">
    <linearGradient id="linearColors1" x1="0" y1="0" x2="1" y2="1">
       <stop offset="0%" stop-color="#ffe04b"></stop>
       <stop offset="100%" stop-color="#ffe04b"></stop>
    </linearGradient>
    <!-- green color -->
    <linearGradient id="linearColors2" x1="0.5" y1="0" x2="0.5" y2="1">
       <stop offset="0%" stop-color="#9ed541"></stop>
       <stop offset="100%" stop-color="#9ed541"></stop>
    </linearGradient>
    <!-- green color -->
    <!-- red color -->
    <linearGradient id="linearColors5" x1="0.5" y1="1" x2="0.5" y2="0">
       <stop offset="0%" stop-color="#e50000"></stop>
       <stop offset="100%" stop-color="#e50000"></stop>
    </linearGradient>
    <!-- red color -->
    <!-- dark Orange color -->
    <linearGradient id="linearColors6" x1="0" y1="1" x2="1" y2="0">
       <stop offset="0%" stop-color="#ff8d00"></stop>
       <stop offset="100%" stop-color="#ff8d00"></stop>
    </linearGradient>
     <!-- dark Orange color --> 
   <path d="M150 10 a120 120 0 0 1 103.9230 60"
        fill="none" stroke="url(#linearColors1)" stroke-width="8" />
  <path d="M253.9230 70 a120 120 0 0 1 0 120"
        fill="none" stroke="url(#linearColors2)" stroke-width="8" /> 
  <path d="M46.077 190 a120 120 0 0 1 0 -120"
        fill="none" stroke="url(#linearColors5)" stroke-width="8" />
  <path d="M46.077 70 a120 120 0 0 1 103.9230 -60"
        fill="none" stroke="url(#linearColors6)" stroke-width="8" />
</svg>