title: SVG - how can I draw stroked circle with cuted element?
body: <p>Here is (not)exactly what I want get:</p>
  
  <p><a href="http://i.stack.imgur.com/nMbtl.png" rel="nofollow">http://i.stack.imgur.com/nMbtl.png</a></p>
  
  <p>My code:</p>
  
  <blockquote>
  <pre><code>           &lt;svg xmlns="http://www.w3.org/2000/svg" width="100%" height="300"&gt;
                  &lt;circle class="circle_shadow" cx="50%" cy="50%" r="6.6%" fill="#333333" /&gt;
                  &lt;circle class="circle_shadow" cx="50%" cy="50%" r="11%" fill="none" stroke="#333333" stroke-width="7%" /&gt;
                  &lt;circle class="circle_shadow" cx="50%" cy="50%" r="19%" fill="none" stroke="#333333" stroke-width="7%" /&gt;
                  &lt;circle class="circle_shadow" cx="50%" cy="50%" r="27%" fill="none" stroke="#333333" stroke-width="7%" /&gt;
                  &lt;circle class="circle_shadow" cx="50%" cy="50%" r="35%" fill="none" stroke="#333333" stroke-width="7%" /&gt;
              &lt;/svg&gt;
  </code></pre>
  </blockquote>