<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 480" width="480" height="480"
     role="img" aria-labelledby="t">
  <title id="t">A circle with geometric construction lines</title>
  <defs>
    <radialGradient id="body" cx="38%" cy="32%" r="75%">
      <stop offset="0%"  stop-color="#FFC46B"/>
      <stop offset="45%" stop-color="#FF7A3D"/>
      <stop offset="100%" stop-color="#DE3A1F"/>
    </radialGradient>
    <filter id="soft" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur stdDeviation="14"/>
    </filter>
    <pattern id="dots" width="24" height="24" patternUnits="userSpaceOnUse">
      <circle cx="3" cy="3" r="1" fill="#16394B" opacity=".14"/>
    </pattern>
  </defs>
  <!-- ground + frame -->
  <rect width="480" height="480" fill="#F0F4F5"/>
  <rect width="480" height="480" fill="url(#dots)"/>
  <rect x="18" y="18" width="444" height="444" fill="none" stroke="#16394B" opacity=".25"/>
  <!-- center guides -->
  <g stroke="#16394B" stroke-width="1" opacity=".25" stroke-dasharray="5 7">
    <line x1="240" y1="34" x2="240" y2="446"/>
    <line x1="34" y1="240" x2="446" y2="240"/>
  </g>
  <!-- compass ring, slow-rotating ticks -->
  <circle cx="240" cy="240" r="172" fill="none" stroke="#16394B" opacity=".45"/>
  <g stroke="#16394B" stroke-width="2" opacity=".5">
    <line x1="240" y1="60" x2="240" y2="75" transform="rotate(0 240 240)"/>
    <line x1="240" y1="60" x2="240" y2="75" transform="rotate(30 240 240)"/>
    <line x1="240" y1="60" x2="240" y2="75" transform="rotate(60 240 240)"/>
    <line x1="240" y1="60" x2="240" y2="75" transform="rotate(90 240 240)"/>
    <line x1="240" y1="60" x2="240" y2="75" transform="rotate(120 240 240)"/>
    <line x1="240" y1="60" x2="240" y2="75" transform="rotate(150 240 240)"/>
    <line x1="240" y1="60" x2="240" y2="75" transform="rotate(180 240 240)"/>
    <line x1="240" y1="60" x2="240" y2="75" transform="rotate(210 240 240)"/>
    <line x1="240" y1="60" x2="240" y2="75" transform="rotate(240 240 240)"/>
    <line x1="240" y1="60" x2="240" y2="75" transform="rotate(270 240 240)"/>
    <line x1="240" y1="60" x2="240" y2="75" transform="rotate(300 240 240)"/>
    <line x1="240" y1="60" x2="240" y2="75" transform="rotate(330 240 240)"/>
    <animateTransform attributeName="transform" type="rotate"
                      from="0 240 240" to="360 240 240" dur="90s" repeatCount="indefinite"/>
  </g>
  <!-- orbiting accent -->
  <g>
    <circle r="9" fill="#128E8B" opacity=".25"/>
    <circle r="4.5" fill="#0F7C7A"/>
    <animateMotion dur="16s" repeatCount="indefinite"
      path="M 68 240 a 172 172 0 1 1 344 0 a 172 172 0 1 1 -344 0"/>
  </g>
  <!-- glow + the circle itself -->
  <circle cx="240" cy="240" r="132" fill="#FF6A3D" filter="url(#soft)" opacity=".38">
    <animate attributeName="opacity" values="0.3;0.52;0.3" dur="7s" repeatCount="indefinite"/>
  </circle>
  <circle cx="240" cy="240" r="118" fill="url(#body)" stroke="#16394B" stroke-width="1.5" opacity="1"/>
  <ellipse cx="205" cy="192" rx="50" ry="28" transform="rotate(-28 205 192)" fill="#fff" opacity=".16"/>
  <!-- radius annotation -->
  <line x1="240" y1="240" x2="323.4" y2="156.6" stroke="#16394B" stroke-width="1.5" opacity=".7"/>
  <circle cx="240" cy="240" r="3" fill="#16394B"/>
  <circle cx="323.4" cy="156.6" r="3" fill="#16394B"/>
  <text x="297" y="186" font-family="Georgia, 'Times New Roman', serif" font-style="italic"
        font-size="20" fill="#16394B" opacity=".8">r</text>
  <text x="456" y="452" text-anchor="end" font-family="ui-monospace, Menlo, monospace"
        font-size="11" fill="#16394B" opacity=".45">fig. 1 — circle</text>
</svg>