Search code examples
csssvgradial-gradients

CSS radial gradient to SVG radial gradient

is it possible to make an radial gradient in SVG like it is here in CSS http://codepen.io/A973C/pen/hnEaf (i mean the lights in the trafficlight)

.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;
}

my SVG gradient looks like this http://jsfiddle.net/x9a2Lyx1/ I dont really understand how i can repeat the gradient like its in the css example

Solution

  • ive solved this using SVG Pattern -> http://jsfiddle.net/k5527kym/

    <pattern id="muster_c" patternUnits="userSpaceOnUse" width="2" height="2" x="0" y="0">
        <circle cx="1" cy="1" r="2" fill="url(#MyGradient)"/>
</pattern>