How to create an inset shadow on an svg circle stroke?
<p>How can i create the following widget in SVG?</p>

<p><a href="https://i.stack.imgur.com/ShvtX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ShvtX.png" alt="enter image description here"></a></p>

<p>I'm fine with the shapes itself but i'm struggling with the inset shadow on the back circle. </p>

<p>I've tried a radial gradient, which 'works' but it doesn't look that great and I have to fiddle with the stop values on the order of thousandths of a percent to get it exactly right and it just feels totally hacky.</p>

<p>Is there a better way?</p>

<p>Code to produce the SVG:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg width="180" height="180" version="1.1" xmlns="http://www.w3.org/2000/svg"&gt;
  &lt;circle cx="90" cy="90" r="72" fill="none" stroke="#ddd" stroke-width="18"&gt;&lt;/circle&gt;
  &lt;path class="main-arc" d="M 90 18 A 72 72 0 1 1 85.47908259388944 18.142075553164446" fill="transparent" stroke-width="18" stroke="black" stroke-linecap="round" style="stroke-dasharray: 452.389; stroke-dashoffset: 366.435;"&gt;
  &lt;/path&gt;
&lt;/svg&gt;</code></pre>
</div>
</div>
</p>