title: Creating a Gradient Torus in HTML/CSS
body: <p>Simply put, I need to put a gradient on a dynamically sized circle with a transparent background. Is there a way to recreate the following image in <code>CSS/HTML</code>? </p>
  
  <p>As far as I can tell, neither radial gradients nor border-images are able to construct this shape. The key is that the center of the circle needs to be transparent, as I can not "fake" a torus by filling the center with white.</p>
  
  <p><a href="https://i.imgur.com/eBetWJ8.png" rel="nofollow noreferrer"><img src="https://i.imgur.com/eBetWJ8.png" alt="enter image description here"></a></p>
  
  <p>Update: This effect is fairly easily achievable in <code>SVG</code>, but I would like to know of an <code>HTML</code>/<code>CSS</code> only way to achieve it. See this example: <a href="http://codepen.io/MaxXiong/pen/rOGzgR" rel="nofollow noreferrer">http://codepen.io/MaxXiong/pen/rOGzgR</a></p>