title: How animate gradient inside SVG?
body: <p>I have <em>linear-gradient (45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%)</em> inside SVG image. How makes it move? I tried with background-position and also with box-shadow but I found it pretty hard.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="34" height="24.395" viewBox="0 0 400 287"&gt;
    &lt;defs&gt;
      &lt;style&gt;
        .cls-1 {
          fill-rule: evenodd;
          fill: url(#linear-gradient);
        animation: x 15s ease infinite;
        }
       
       @keyframes x {
  0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
          }
      &lt;/style&gt;
      &lt;linearGradient id="linear-gradient" x1="56.5" y1="287" x2="343.5" gradientUnits="userSpaceOnUse"&gt;
        &lt;stop offset="0" stop-color="#f09433"/&gt;
        &lt;stop offset="0.25" stop-color="#e6683c"/&gt;
        &lt;stop offset="0.5" stop-color="#dc2743"/&gt;
        &lt;stop offset="0.75" stop-color="#cc2366"/&gt;
        &lt;stop offset="1" stop-color="#bc1888"/&gt;
      &lt;/linearGradient&gt;
    &lt;/defs&gt;
    &lt;path class="cls-1" d="M196,7c9.509,1.576,19.244,4.725,22,13,7,8.987-.365,24.476-7,29l-8,3v8c2.26,3.747.8,8.887,2,14,3.284,13.977,2.432,28.97,6,44,6.458,27.2,11.867,53.589,26,73,2.983,4.1,6.112,7.586,12,10,36.526,0.848,54.767-13.747,75-29l12-13a227.127,227.127,0,0,0,29-27c-4.891-5.648-5.507-9.725-5-16,2.088-9.819,7.9-9.908,10-12,7.749-.662,11.613.284,18,2,3.692,4.6,8,12.05,3,22-3.773,5.558-8.622,7.322-24,7-4.087,13.637-17.663,30.068-25,42-11.854,19.28-20.973,44.271-27,69-0.333,0-11.667-4-12-4-12.069-4.331-19.629-5.775-33-8-37.2-6.188-96.361-10.952-134-2-8.638,2.055-18.722,2.438-28,5-7.537,2.081-15.394,5.292-24,6v-2c-1.7-4.788-2.174-10.6-4-16-2.147-6.351-5.072-13.33-8-20-10.872-24.766-28.112-45.709-40-70-10.048.457-16.658-.6-21-6-3.6-4.065-5.164-12.109-2-18,6.09-6.646,8.6-10.485,26-4,2.556,3.98,7.69,9.39,5,18-0.972,3.109-3.965,5.362-4,7,12.645,20.892,58.718,52.784,83,63,10.311,4.338,29.18,7.461,39,1,29-19.081,37.819-95.909,38-145-18.311-4.1-26.547-34.248-6-41C191.579,8.782,194.443,8.251,196,7ZM86,257c14.254-2.637,29.666-7.6,43-11,5.7-1.415,14.974-1.907,22-3,32.584-8.333,78.627-2.443,113,3,12.606,2,44.6,6.76,48,15l-4,14c-55.444-22.284-162.952-22.755-218,0C88.667,268.667,87.333,263.333,86,257Z"/&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>