Search code examples
svgfade

SVG fade color of object

I want to fade the fill color of a svg circle from one color to another color, like from red to black.

<svg height="100" width="100">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" fade-to="black"/>
</svg>

What would I do in place of the fade-to="black"?

Solution

  • You will want to use the radial gradient to have this work. You can play around with the offset numbers for the desired effect.

    <svg height="100" width="100">
  <defs>
    <radialGradient id="myGradient">
      <stop offset="10%" stop-color="red" />
      <stop offset="95%" stop-color="black" />
    </radialGradient>
  </defs>

  <!-- using my radial gradient -->
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="url('#myGradient')"/>
</svg>

    Hope this helps!

    Edit***: After doing some more research and figuring out how to do what you were suggesting, this is what I came up with:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    .redBall{
        fill: red;
        z-index: 1;
        -webkit-animation: pulsateMore 3s ease-out;
        -webkit-animation-iteration-count: infinite; 
    }

    @-webkit-keyframes pulsateMore {
        0% { 
        fill: red;
        }
        50% { 
        fill: black;
        }
        00% { 
        fill: red;
        }
    }
    </style>
    <!-- <link rel="stylesheet" href="style.css" /> -->
</head>
<body>
    <svg height="100" width="100">
        <circle class="redBall" cx="50" cy="50" r="40"/>
    </svg>
</body>
</html>

    You can manipulate this code from here to have a Javascript function that will have an onClick event that will trigger the circle to go from red to black, instead of pulsating. If this has helped you, please accept the answer, thanks!