title: CSS radial gradient to SVG radial gradient
body: <p>is it possible to make an radial gradient in SVG like it is here in CSS <a href="http://codepen.io/A973C/pen/hnEaf" rel="nofollow">http://codepen.io/A973C/pen/hnEaf</a> (i mean the lights in the trafficlight)</p>
  
  <pre><code>.red{
    background: red;
    background-image: radial-gradient(brown, transparent);
    background-size: 15px 15px; 
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: absolute;
    top: 20px;
    left: 35px;
    animation: 13s red infinite;
    border: dotted 2px red;
    box-shadow: 
      0 0 20px #111 inset,
      0 0 10px red;
  }
  </code></pre>
  
  <p>my SVG gradient looks like this <a href="http://jsfiddle.net/x9a2Lyx1/" rel="nofollow">http://jsfiddle.net/x9a2Lyx1/</a> 
  I dont really understand how i can repeat the gradient like its in the css example</p>