How to animate fill in a linear-gradient for svg? - html

Question

How can I animate the fill for gradient colors in SVG? I want the fill to operate from opacity 0 to opacity of 1.
.header-anim {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
#logo-anim path:nth-child(1) {
stroke-dasharray: 1032;
stroke-dashoffset: 1032;
animation: line-anim 2s ease forwards, fill-black 0.5s ease forwards 2s;
}
#logo-anim path:nth-child(2) {
stroke-dasharray: 1056;
stroke-dashoffset: 1056;
animation: line-anim 2s ease forwards, fill-gradient 0.5s ease forwards 2s;
}
#keyframes line-anim {
to {
stroke-dashoffset: 0;
}
}
#keyframes fill-black {
from {
fill: transparent;
}
to {
fill: black;
}
}
#keyframes fill-gradient {
from {
fill: transparent;
}
to {
fill: url(#paint0_linear_0_1);
}
}
<div class="header-anim">
<svg id="logo-anim" width="234" height="233" viewBox="0 0 234 233" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M75.4995 83.1013L104.5 52.7419V149.908C103.841 155.213 101.512 163.152 96.6892 169.739C91.8749 176.315 84.6232 181.5 73.9995 181.5H22.7751C7.00798 158.997 -14.2991 102.251 23.2132 49.8815C28.6996 42.432 39.475 31.0305 53.8821 21.2016C68.2922 11.3708 86.2418 3.17637 106.088 1.99737C153.179 -0.800073 186.647 23.6983 201.465 38.5H185.579C179.439 32.991 168.434 25.3772 154.676 19.7975C140.599 14.0886 123.543 10.47 105.813 13.5101C86.2158 15.0713 42.0989 30.215 20.6414 78.3625C13.4533 92.9381 5.42859 131.796 29.7138 172.272L30.9052 174.257L32.2302 172.358L46.7825 151.5H61.9399C64.1719 151.674 67.4856 151.286 70.3053 149.49C73.2521 147.614 75.4995 144.295 75.4995 139V83.1013Z" stroke="black" stroke-width="3" />
<path d="M73.0043 222.051C57.832 216.175 42.4098 206.947 31.499 193H47.399C57.5515 202.587 82.9475 219.5 114 219.5C134.223 219.5 176.537 213.946 203.746 173.335L203.755 173.322L203.763 173.309C216.107 154.033 233.106 104.05 202.245 58.1629L201.228 56.6509L199.939 57.9393L177.879 80H162.148C159.838 79.5594 156.458 79.7889 153.599 81.9385C150.614 84.1823 148.5 88.2825 148.5 95V149.392L119.5 179.298V83.5C119.5 77.8938 121.122 69.4609 125.935 62.4762C130.694 55.5707 138.617 50 151.5 50H210.265C225.204 69.4906 246.888 120.188 217.2 171.752C187.163 223.922 135.874 232.968 114.135 231.006L114.094 231.002L114.052 231.001C104.628 230.673 89.0193 228.254 73.0043 222.051Z" stroke="url(#paint0_linear_0_1)" stroke-width="3" />
<defs>
<linearGradient
id="paint0_linear_0_1"
x1="131.003"
y1="48.5"
x2="131.003"
y2="232.748"
gradientUnits="userSpaceOnUse">
<stop stop-color="#A77027" />
<stop offset="0.53125" stop-color="#F1E189" />
<stop offset="1" stop-color="#A77027" />
</linearGradient>
</defs>
</svg>
</div>
codepen link for reproduced error.
Currently the gradient fill just snap into existence instead of slowly fading in like black fill. How can I achieve this animation? Thank you

Answer 1

You can't animate in "paint" fills, such as gradients, like you can with colours.
What you can do instead is animate the fill-opacity. And in fact it actually simplifies the SVG. Because use can use the same fill animation for both paths.
.header-anim {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
#logo-anim path:nth-child(1) {
stroke-dasharray: 1032;
stroke-dashoffset: 1032;
fill: black;
fill-opacity: 0;
animation: line-anim 2s ease forwards, fill-anim 0.5s ease forwards 2s;
}
#logo-anim path:nth-child(2) {
stroke-dasharray: 1056;
stroke-dashoffset: 1056;
fill: url(#paint0_linear_0_1);
fill-opacity: 0;
animation: line-anim 2s ease forwards, fill-anim 0.5s ease forwards 2s;
}
#keyframes line-anim {
to {
stroke-dashoffset: 0;
}
}
#keyframes fill-anim {
from {
fill-opacity: 0;
}
to {
fill-opacity: 1;
}
}
<div class="header-anim">
<svg id="logo-anim" width="234" height="233" viewBox="0 0 234 233" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M75.4995 83.1013L104.5 52.7419V149.908C103.841 155.213 101.512 163.152 96.6892 169.739C91.8749 176.315 84.6232 181.5 73.9995 181.5H22.7751C7.00798 158.997 -14.2991 102.251 23.2132 49.8815C28.6996 42.432 39.475 31.0305 53.8821 21.2016C68.2922 11.3708 86.2418 3.17637 106.088 1.99737C153.179 -0.800073 186.647 23.6983 201.465 38.5H185.579C179.439 32.991 168.434 25.3772 154.676 19.7975C140.599 14.0886 123.543 10.47 105.813 13.5101C86.2158 15.0713 42.0989 30.215 20.6414 78.3625C13.4533 92.9381 5.42859 131.796 29.7138 172.272L30.9052 174.257L32.2302 172.358L46.7825 151.5H61.9399C64.1719 151.674 67.4856 151.286 70.3053 149.49C73.2521 147.614 75.4995 144.295 75.4995 139V83.1013Z" stroke="black" stroke-width="3" />
<path id="path-with-grad" d="M73.0043 222.051C57.832 216.175 42.4098 206.947 31.499 193H47.399C57.5515 202.587 82.9475 219.5 114 219.5C134.223 219.5 176.537 213.946 203.746 173.335L203.755 173.322L203.763 173.309C216.107 154.033 233.106 104.05 202.245 58.1629L201.228 56.6509L199.939 57.9393L177.879 80H162.148C159.838 79.5594 156.458 79.7889 153.599 81.9385C150.614 84.1823 148.5 88.2825 148.5 95V149.392L119.5 179.298V83.5C119.5 77.8938 121.122 69.4609 125.935 62.4762C130.694 55.5707 138.617 50 151.5 50H210.265C225.204 69.4906 246.888 120.188 217.2 171.752C187.163 223.922 135.874 232.968 114.135 231.006L114.094 231.002L114.052 231.001C104.628 230.673 89.0193 228.254 73.0043 222.051Z" stroke="url(#paint0_linear_0_1)" stroke-width="3" />
<defs>
<linearGradient
id="paint0_linear_0_1"
x1="131.003"
y1="48.5"
x2="131.003"
y2="232.748"
gradientUnits="userSpaceOnUse">
<stop stop-color="#A77027" />
<stop offset="0.53125" stop-color="#F1E189" />
<stop offset="1" stop-color="#A77027" />
</linearGradient>
</defs>
</svg>
</div>