Rate Gauge SVG with 3 needle position and emulation of conical gradient

Half circle presented as 4 sectors. Each sector has border that fills with its specific linear gradient. Together they emulates conical gradient, which is not supported by SVG standard. Needle can be in two positions. In the middle by default and near to right edge. Second position could be achieved by adding `#good` to svg file url address in browser or in img tag src parameter.

by AntowaKartowa

HTML

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="288" height="162" fill="none" preserveAspectRatio="xMidYMid">
  <defs>
    <!--
    The needle of the gauge can point in three different directions. It depends on
    how this file has referenced. To keep things simple, you can save the code that 
    was presented as an SVG file on your computer. Then, you can open it in your 
    browser by dragging it into the window. The needle is pointing in the middle of 
    the gauge, tilted slightly (5 degrees). Then, in the address bar of your browser, 
    add the suffix "#bad" to the file location path and press Enter. Then SVG reloads, 
    causing the needle to tilt left. You can try the same thing, 
    but use the "#good" suffix.

    This is also true if you reference this file in `IMG` tag or 
    in `background` CSS property.

    There is also available needle shaking/wiggling animation as an option. To activate 
    it in the SVG source code, look for the `.needle` selector rules in the style block. 
    Uncomment the line with the rule `animation: wiggling 1s infinite alternate;` 
    and then save the file.
    -->
    <style>
      :root {
        --bad: -75deg;
        --avg: 5deg;
        --good: 75deg;
        --current-deg: var(--avg);
      }
      .needle {
        transform: rotate(var(--current-deg));
        transform-origin: 144px 148px;
        // animation: wiggling 1s infinite alternate;
      }
      #bad:target .needle { --current-deg: var(--bad); }
      #good:target .needle { --current-deg: var(--good); }

      @keyframes wiggling {
        0% { transform: rotate(var(--current-deg)) }
        5% { transform: rotate(calc(var(--current-deg) + 6deg)) }
        15% { transform: rotate(calc(var(--current-deg) - 5deg)) }
        20% { transform: rotate(calc(var(--current-deg) + 4deg)) }
        25% { transform:...