How to Add Animated Gradient to an Svg Path

How to add animated gradient to an svg path?

You can use the SMIL animation of SVG. The idea is to animate the color-stop or the offset of the gradient to create the needed effect:

svg { border:1px solid; width:200px;}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"    viewBox="10 10 24 24">    <defs>        <linearGradient id="linear-gradient" x1="-100%" y1="0" x2="200%" y2="0" >            <stop offset="0" stop-color="red">               <animate attributeName="offset" values="0;0.2;0.5" dur="2s" repeatCount="indefinite"  />             </stop>            <stop offset="0.5" stop-color="yellow">                <animate attributeName="offset" values="0.5;0.7;0.8;1" dur="2s" repeatCount="indefinite"  />             </stop>        </linearGradient>    </defs><path fill="url(#linear-gradient)" d="M20,31 C15.4189994,27.2225585 12.5023327,24.2225585 11.25,22 C10.2743515,20.6156479 10,19.6181623 10,18.1428571 C10,15.5113854 12.4883456,13 15,13 C17.3176009,13 18.9621484,13.8491346 20,15.5714286 C21.0382977,13.8491346 22.6828452,13 25,13 C27.5116544,13 30,15.5113854 30,18.1428571 C30,19.6181623 29.7256485,20.6156479 28.75,22 C27.497816,24.2225585 24.5811493,27.2225585 20,31 Z" /></svg>

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

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>

Can I apply a gradient along an SVG path?

CSS Images Module - Level 4 has introduced conic-gradient. According to MDN, it's supported in all major browsers except IE.

Although it's not, technically, a gradient along a path, since your path is a circle, the desired outcome can be achieved with:

.loader {
  --size: 7.5rem;
  --stroke-size: .5rem;
  --diff: calc(calc(var(--size)/2) - var(--stroke-size));
  background-image: conic-gradient(transparent 25%, red);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  -webkit-mask:radial-gradient(circle var(--diff),transparent 98%,#fff 100%);
          mask:radial-gradient(circle var(--diff),transparent 98%,#fff 100%);
  animation: rotate 1.2s linear infinite;
  margin: 0 auto;
}
@keyframes rotate {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(1turn);
  }
}
body {
  background: #f9fcfc url(https://picsum.photos/id/22/1323/880) 100% /cover;
  margin: 0;
  min-height: 100vh;
  padding-top: 2.5rem;
}
 * { box-sizing: border-box; }

<div class="loader"></div>

Animating a SVG gradient

You just need a time period for the animation. Add dur="5s" for instance as an attribute of the animate element.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">  <defs>    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">      <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" />      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" >        <animate           attributeName="offset"           from="0%"          to="100%"          dur="5s"          repeatCount="indefinite"/>      </stop>      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />    </linearGradient>  </defs>  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" /></svg>

How to Add Animated Gradient to an Svg Path