Add linear gradient to circle SVG
I am trying to add a gradient that I got online to an SVG circle. This is my gradient
background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
I am trying to add this type of gradient to my circle instead of "fill =" yellow. I tried to insert a gradient into the code, but nothing. Tried searching / playing with it but getting nothing. my code
Codepen http://codepen.io/anon/pen/wdaMVR
.circlesvg{
position: absolute;
left: 0;
top: 0;
}
#firstCircle{
animation: fadeAndScale 33s ease-in infinite;
-ms-animation: fadeAndScale 33s ease-in infinite;
-webkit-animation: fadeAndScale 33s ease-in infinite;
-moz-animation: fadeAndScale 33s ease-in infinite;
-o-animation: fadeAndScale 33s ease-in infinite;
transition-timing-function: linear;
}
@keyframes fadeAndScale{
0%{
z-index: 100;
transform: scale(0);
transform: translate(200px, 200px);
}
100%{
z-index: 0;
transform: scale(200);
}
}
<svg width="100%" height="100%" class="circlesvg">
<circle id="firstCircle" cx="0" cy="0" r="40" fill="yellow"></circle>
</svg>
+3
source to share
1 answer
You will need to use SVG <linearGradient>
and then refer to it as a fill:
<defs>
<linearGradient id="gradient">
<stop offset="0%" stop-color="#a18cd1"/>
<stop offset="100%" stop-color="#fbc2eb"/>
</linearGradient>
</defs>
<circle id="firstCircle" cx="0" cy="0" r="40" fill="url(#gradient)"></circle>
+3
source to share