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>
    </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)"></path>
  </svg>