JSFiddle - React, Tailwind, and code Playground

by zhuwei_leo

HTML

<svg id="bu-dao"  class="icon" width="500px" height="500px" viewBox="0 0 100 100" version="1.1"
       xmlns="http://www.w3.org/2000/svg">
    <defs>
      <linearGradient id="gradient-1" >
        <stop stop-color="green" offset="0"/>
        <stop stop-color="orange" offset=".33"/>
        <stop stop-color="orange" offset=".66"/>
        <stop stop-color="red" offset="1"/>
      </linearGradient>
      <clipPath id="sector-clip">
        <path d="M 10 50
                 A 40 40 0 1 1 90 50
                 Z
                 "
              transform="rotate(-40)"
              transform-origin="50 50"
        ></path>
      </clipPath>
    </defs>
    <rect width="100%" height="100%" fill="#ccc"></rect>
    <path d="M 10 50
             A 40 40 0 1 1 90 50
             h -20
             a 20 20 0 1 0 -40 0
             Z
             "
          fill="#333" fill-opacity=".6"></path>
    <path d="M 10 50
             A 40 40 0 1 1 90 50
             h -20
             a 20 20 0 1 0 -40 0
             Z
             "
          fill="url(#gradient-1)" clip-path="url(#sector-clip)" ></path>
  </svg>