JSFiddle - React, Tailwind, and code Playground
HTML
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<linearGradient id="gradient" gradientUnits="userSpaceOnUse" x1="30" y1="100" x2="50" y2="0">
<stop offset="0" style="stop-color:black"/>
<stop offset="1" style="stop-opacity:0.2; stop-color:black"/>
</linearGradient>
<path fill="url(#gradient)" d="M50.069,0.078c-27.595,0-49.966,22.371-49.966,49.966c0,27.595,22.371,49.966,49.966,49.966 s49.966-22.371,49.966-49.966C100.035,22.448,77.664,0.078,50.069,0.078z M50.01,85.062c-19.316,0-34.976-15.66-34.976-34.976 c0-19.317,15.659-34.976,34.976-34.976c19.317,0,34.977,15.659,34.977,34.976C84.987,69.401,69.327,85.062,50.01,85.062z">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 50 50" to="360 50 50" begin="0s" dur="3s" repeatCount="indefinite"/>
</path>
</svg>
<br><br><br><br>
<svg version="1.1" id="Layer_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 57 57"
enable-background="new 0 0 57 57" xml:space="preserve">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="35.561" y1="16.8825" x2="24.3898" y2="54.2972">
<stop offset="0" style="stop-color:#4F4F4F"/>
<stop offset="3.405529e-02" style="stop-color:#606060"/>
<stop offset="0.1147" style="stop-color:#848484"/>
<stop offset="0.2033" style="stop-color:#A2A2A2"/>
<stop offset="0.2999" style="stop-color:#BBBBBB"/>
<stop offset="0.4078" style="stop-color:#CECECE"/>
<stop offset="0.5335" style="stop-color:#DBDBDB"/>
<stop offset="0.6931" style="stop-color:#E3E3E3"/>
<stop offset="1"...