CODEWITHSUNDEEP
htmlcsssvgsvg-animate
Meesum Raza
Meesum Raza

Reputation: 21

How to add color flowing from bottom to top in svg using css

I am a newbiew SVG animator and I am trying to make a logo for my website and I have made four rectangles in Figma and all have different paths. So I am trying to fill the rectangles with a smooth transition which starts from bottom most rectangle to the top most, I want the color to fill like it's a color going from the bottom most to the top most, further I want a different color in every rectangle, so could anyone please help me out.

*{
    padding: 0%;
    margin:  0%;
    box-sizing:  border-box;
}

body{
    width: 100%;
    height:  100%;
    background-color:  rgb(32,35,48);
}

#logo{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50px, -50px);
    animation: line-fill 5s ease forwards 1.2s;

}

#logo path:nth-child(1){
    stroke-dasharray: 680px;
    stroke-dashoffset: 680px;
    animation: line-anim 2s ease forwards 0.2s;
}
#logo path:nth-child(2){
    stroke-dasharray: 680px;
    stroke-dashoffset: 680px;
    animation: line-anim 2s ease forwards 0.4s;
}
#logo path:nth-child(3){
    stroke-dasharray: 680px;
    stroke-dashoffset: 680px;
    animation: line-anim 2s ease forwards 0.6s;
}
#logo path:nth-child(4){
    stroke-dasharray: 680px;
    stroke-dashoffset: 680px;
    animation: line-anim 2s ease forwards 0.8s;
}

@keyframes line-anim{
    to{
        stroke-dashoffset: 0;       
    }
}

@keyframes line-fill{
    from{
        fill: transparent;
    }
    to{
        fill: white;
    }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    
</head>
<body>
    <svg id="logo" width="291" height="282" viewBox="0 0 291 282" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M5 225.5H2.5V228V277V279.5H5H286H288.5V277V228V225.5H286H5Z" stroke="white" stroke-width="5"/>
    <path d="M5 2.5H2.5V5V54V56.5H5H286H288.5V54V5V2.5H286H5Z" stroke="white" stroke-width="5"/>
    <path d="M5 76.5H2.5V79V128V130.5H5H286H288.5V128V79V76.5H286H5Z" stroke="white" stroke-width="5"/>
    <path d="M5 150.5H2.5V153V202V204.5H5H286H288.5V202V153V150.5H286H5Z" stroke="white" stroke-width="5"/>
    </svg>
    <script type="text/javascript" src="app.js"></script>
</body>
</html>

Upvotes: 2

Views: 475

Answers (1)

Jenny Dcruz
Jenny Dcruz

Reputation: 57

You can use this method to implement color flow for SVGs:

<svg>
  <rect width="100%" height="100%">
    <animate attributeName="fill" dur="5s" values="pink;purple;pink" repeatCount="indefinite" />
  </rect>
</svg>

Upvotes: 1

Related Questions