Jquery Svg Shift Color Animation

I'm trying to make an svg animation where the color of the svg slides to an other color. My goal is to make kind of a running light. I'm not trying to fade the fill color of the wh

Solution 1:

Here is one way to do it: with an animated linear gradient.

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="403.5px" height="13px" viewBox="0 0 403.5 13" enable-background="new 0 0 403.5 13" xml:space="preserve">
<defs>
  <linearGradient id="orange-grad" gradientUnits="userSpaceOnUse">
    <stop offset="0" stop-color="orange"/>
    <stop offset="0" stop-color="orange">
      <animate attributeName="offset" attributeType="XML"
               begin="0s" dur="5s" fill="freeze" from="0" to="1" />
    </stop>
    <stop offset="0" stop-color="#80A993">
      <animate attributeName="offset" attributeType="XML"
               begin="0s" dur="5s" fill="freeze" from="0" to="1" />
    </stop>
    <stop offset="1" stop-color="#80A993"/>
  </linearGradient>
</defs>
<g fill="url(#orange-grad)">
    <path d="M0.017,0L1.5,0.002L1.484,13H0L0.017,0z"/>
    <path d="M6.017,0L7.5,0.002L7.484,13H6L6.017,0z"/>
    <path d="M12.017,0L13.5,0.002L13.484,13H12L12.017,0z"/>
    <path d="M18.017,0L19.5,0.002L19.484,13H18L18.017,0z"/>
    <path d="M36.017,0L37.5,0.002L37.484,13H36L36.017,0z"/>
    <path d="M42.017,0L43.5,0.002L43.484,13H42L42.017,0z"/>
    <path d="M24.017,0L25.5,0.002L25.484,13H24L24.017,0z"/>
    <path d="M30.017,0L31.5,0.002L31.484,13H30L30.017,0z"/>
    <path d="M48.017,0L49.5,0.002L49.484,13H48L48.017,0z"/>
    <path d="M54.017,0L55.5,0.002L55.484,13H54L54.017,0z"/>
    <path d="M60.017,0L61.5,0.002L61.484,13H60L60.017,0z"/>
    <path d="M66.017,0L67.5,0.002L67.484,13H66L66.017,0z"/>
    <path d="M72.017,0L73.5,0.002L73.484,13H72L72.017,0z"/>
    <path d="M78.017,0L79.5,0.002L79.484,13H78L78.017,0z"/>
    <path d="M84.017,0L85.5,0.002L85.484,13H84L84.017,0z"/>
    <path d="M90.017,0L91.5,0.002L91.484,13H90L90.017,0z"/>
    <path d="M96.017,0L97.5,0.002L97.484,13H96L96.017,0z"/>
    <path d="M102.017,0l1.483,0.002L103.484,13H102L102.017,0z"/>
    <path d="M108.017,0l1.483,0.002L109.484,13H108L108.017,0z"/>
    <path d="M114.017,0l1.483,0.002L115.484,13H114L114.017,0z"/>
    <path d="M120.017,0l1.483,0.002L121.484,13H120L120.017,0z"/>
    <path d="M126.017,0l1.483,0.002L127.484,13H126L126.017,0z"/>
    <path d="M144.017,0l1.483,0.002L145.484,13H144L144.017,0z"/>
    <path d="M150.017,0l1.483,0.002L151.484,13H150L150.017,0z"/>
    <path d="M132.017,0l1.483,0.002L133.484,13H132L132.017,0z"/>
    <path d="M138.017,0l1.483,0.002L139.484,13H138L138.017,0z"/>
    <path d="M156.017,0l1.483,0.002L157.484,13H156L156.017,0z"/>
    <path d="M162.017,0l1.483,0.002L163.484,13H162L162.017,0z"/>
    <path d="M168.017,0l1.483,0.002L169.484,13H168L168.017,0z"/>
    <path d="M174.017,0l1.483,0.002L175.484,13H174L174.017,0z"/>
    <path d="M180.017,0l1.483,0.002L181.484,13H180L180.017,0z"/>
    <path d="M186.017,0l1.483,0.002L187.484,13H186L186.017,0z"/>
    <path d="M192.017,0l1.483,0.002L193.484,13H192L192.017,0z"/>
    <path d="M198.017,0l1.483,0.002L199.484,13H198L198.017,0z"/>
    <path d="M204.017,0l1.483,0.002L205.484,13H204L204.017,0z"/>
    <path d="M210.017,0l1.483,0.002L211.484,13H210L210.017,0z"/>
    <path d="M216.017,0l1.483,0.002L217.484,13H216L216.017,0z"/>
    <path d="M222.017,0l1.483,0.002L223.484,13H222L222.017,0z"/>
    <path d="M228.017,0l1.483,0.002L229.484,13H228L228.017,0z"/>
    <path d="M234.017,0l1.483,0.002L235.484,13H234L234.017,0z"/>
    <path d="M252.017,0l1.483,0.002L253.484,13H252L252.017,0z"/>
    <path d="M258.017,0l1.483,0.002L259.484,13H258L258.017,0z"/>
    <path d="M240.017,0l1.483,0.002L241.484,13H240L240.017,0z"/>
    <path d="M246.017,0l1.483,0.002L247.484,13H246L246.017,0z"/>
    <path d="M264.017,0l1.483,0.002L265.484,13H264L264.017,0z"/>
    <path d="M270.017,0l1.483,0.002L271.484,13H270L270.017,0z"/>
    <path d="M276.017,0l1.482,0.002L277.484,13H276L276.017,0z"/>
    <path d="M282.017,0l1.482,0.002L283.484,13H282L282.017,0z"/>
    <path d="M288.017,0l1.482,0.002L289.484,13H288L288.017,0z"/>
    <path d="M294.017,0l1.482,0.002L295.484,13H294L294.017,0z"/>
    <path d="M300.017,0l1.482,0.002L301.484,13H300L300.017,0z"/>
    <path d="M306.017,0l1.482,0.002L307.484,13H306L306.017,0z"/>
    <path d="M312.017,0l1.482,0.002L313.484,13H312L312.017,0z"/>
    <path d="M318.017,0l1.482,0.002L319.484,13H318L318.017,0z"/>
    <path d="M324.017,0l1.482,0.002L325.484,13H324L324.017,0z"/>
    <path d="M330.017,0l1.482,0.002L331.484,13H330L330.017,0z"/>
    <path d="M336.017,0l1.482,0.002L337.484,13H336L336.017,0z"/>
    <path d="M342.017,0l1.482,0.002L343.484,13H342L342.017,0z"/>
    <path d="M360.017,0l1.482,0.002L361.484,13H360L360.017,0z"/>
    <path d="M366.017,0l1.482,0.002L367.484,13H366L366.017,0z"/>
    <path d="M348.017,0l1.482,0.002L349.484,13H348L348.017,0z"/>
    <path d="M354.017,0l1.482,0.002L355.484,13H354L354.017,0z"/>
    <path d="M372.017,0l1.482,0.002L373.484,13H372L372.017,0z"/>
    <path d="M378.017,0l1.482,0.002L379.484,13H378L378.017,0z"/>
    <path d="M384.017,0l1.482,0.002L385.484,13H384L384.017,0z"/>
    <path d="M390.017,0l1.482,0.002L391.484,13H390L390.017,0z"/>
    <path d="M396.017,0l1.482,0.002L397.484,13H396L396.017,0z"/>
    <path d="M402.017,0l1.482,0.002L403.484,13H402L402.017,0z"/>
</g>
</svg>

Update: How to manually trigger and reverse direction

Here I've used a different way of creating the graph. This variant uses a clipping path and slides an orange rect back and forth behind the clip. As requested by OP, I have added the ability to trigger the animation and switch directions by mousing over a couple of buttons.

This example uses vanilla Javascript and a timeout function for basic animation. If you wanted, you could switch to using a window.requestAnimationFrame() approach if there is a lot going on on your page and the animation doesn't run smoothly.

var graphPosition = 0;
var graphStep = 6;
var graphRunning = false;

var orangeRect = document.getElementById("orange");


document.getElementById("forwards").addEventListener("mouseenter", function() {
  graphStep = 6;
  startGraphRunning();
});

document.getElementById("backwards").addEventListener("mouseenter", function() {
  graphStep = -6;
  startGraphRunning();
});



function startGraphRunning()
{
  // If already running, do nothing
  if (graphRunning) return;

  graphRunning = true;

  // Perform the first step in the animation
  animationStep();
}


function animationStep()
{
  // Calculate new position of orang rectangle
  var  newPos = graphPosition += graphStep;
  if (newPos < 0 || newPos > 408)
  {
    // Stop animation if we have reach min or max position
    graphRunning = false;
  }
  else
  {
    // Update x position of orange rect
    graphPosition = newPos;
    // We want right hand edge of rectangle to be at "graphPosition",
    // so we position rect at (graphPosition - rectangle-width)
    orangeRect.setAttribute("x", graphPosition - orangeRect.width.baseVal.value);
  }

  // If animation is still running, call this function again in 50mS
  if (graphRunning)
    setTimeout(animationStep, 50);
}

div {
  display: inline-block;
  padding: 10px;
  background-color: #eee;
  border: solid 1px black;
  margin: 20px 20px 0 0;
}

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="403.5px" height="13px" viewBox="0 0 403.5 13" enable-background="new 0 0 403.5 13" xml:space="preserve">
<defs>
  <clipPath id="graph">
    <path d="M0.017,0L1.5,0.002L1.484,13H0L0.017,0z"/>
    <path d="M6.017,0L7.5,0.002L7.484,13H6L6.017,0z"/>
    <path d="M12.017,0L13.5,0.002L13.484,13H12L12.017,0z"/>
    <path d="M18.017,0L19.5,0.002L19.484,13H18L18.017,0z"/>
    <path d="M36.017,0L37.5,0.002L37.484,13H36L36.017,0z"/>
    <path d="M42.017,0L43.5,0.002L43.484,13H42L42.017,0z"/>
    <path d="M24.017,0L25.5,0.002L25.484,13H24L24.017,0z"/>
    <path d="M30.017,0L31.5,0.002L31.484,13H30L30.017,0z"/>
    <path d="M48.017,0L49.5,0.002L49.484,13H48L48.017,0z"/>
    <path d="M54.017,0L55.5,0.002L55.484,13H54L54.017,0z"/>
    <path d="M60.017,0L61.5,0.002L61.484,13H60L60.017,0z"/>
    <path d="M66.017,0L67.5,0.002L67.484,13H66L66.017,0z"/>
    <path d="M72.017,0L73.5,0.002L73.484,13H72L72.017,0z"/>
    <path d="M78.017,0L79.5,0.002L79.484,13H78L78.017,0z"/>
    <path d="M84.017,0L85.5,0.002L85.484,13H84L84.017,0z"/>
    <path d="M90.017,0L91.5,0.002L91.484,13H90L90.017,0z"/>
    <path d="M96.017,0L97.5,0.002L97.484,13H96L96.017,0z"/>
    <path d="M102.017,0l1.483,0.002L103.484,13H102L102.017,0z"/>
    <path d="M108.017,0l1.483,0.002L109.484,13H108L108.017,0z"/>
    <path d="M114.017,0l1.483,0.002L115.484,13H114L114.017,0z"/>
    <path d="M120.017,0l1.483,0.002L121.484,13H120L120.017,0z"/>
    <path d="M126.017,0l1.483,0.002L127.484,13H126L126.017,0z"/>
    <path d="M144.017,0l1.483,0.002L145.484,13H144L144.017,0z"/>
    <path d="M150.017,0l1.483,0.002L151.484,13H150L150.017,0z"/>
    <path d="M132.017,0l1.483,0.002L133.484,13H132L132.017,0z"/>
    <path d="M138.017,0l1.483,0.002L139.484,13H138L138.017,0z"/>
    <path d="M156.017,0l1.483,0.002L157.484,13H156L156.017,0z"/>
    <path d="M162.017,0l1.483,0.002L163.484,13H162L162.017,0z"/>
    <path d="M168.017,0l1.483,0.002L169.484,13H168L168.017,0z"/>
    <path d="M174.017,0l1.483,0.002L175.484,13H174L174.017,0z"/>
    <path d="M180.017,0l1.483,0.002L181.484,13H180L180.017,0z"/>
    <path d="M186.017,0l1.483,0.002L187.484,13H186L186.017,0z"/>
    <path d="M192.017,0l1.483,0.002L193.484,13H192L192.017,0z"/>
    <path d="M198.017,0l1.483,0.002L199.484,13H198L198.017,0z"/>
    <path d="M204.017,0l1.483,0.002L205.484,13H204L204.017,0z"/>
    <path d="M210.017,0l1.483,0.002L211.484,13H210L210.017,0z"/>
    <path d="M216.017,0l1.483,0.002L217.484,13H216L216.017,0z"/>
    <path d="M222.017,0l1.483,0.002L223.484,13H222L222.017,0z"/>
    <path d="M228.017,0l1.483,0.002L229.484,13H228L228.017,0z"/>
    <path d="M234.017,0l1.483,0.002L235.484,13H234L234.017,0z"/>
    <path d="M252.017,0l1.483,0.002L253.484,13H252L252.017,0z"/>
    <path d="M258.017,0l1.483,0.002L259.484,13H258L258.017,0z"/>
    <path d="M240.017,0l1.483,0.002L241.484,13H240L240.017,0z"/>
    <path d="M246.017,0l1.483,0.002L247.484,13H246L246.017,0z"/>
    <path d="M264.017,0l1.483,0.002L265.484,13H264L264.017,0z"/>
    <path d="M270.017,0l1.483,0.002L271.484,13H270L270.017,0z"/>
    <path d="M276.017,0l1.482,0.002L277.484,13H276L276.017,0z"/>
    <path d="M282.017,0l1.482,0.002L283.484,13H282L282.017,0z"/>
    <path d="M288.017,0l1.482,0.002L289.484,13H288L288.017,0z"/>
    <path d="M294.017,0l1.482,0.002L295.484,13H294L294.017,0z"/>
    <path d="M300.017,0l1.482,0.002L301.484,13H300L300.017,0z"/>
    <path d="M306.017,0l1.482,0.002L307.484,13H306L306.017,0z"/>
    <path d="M312.017,0l1.482,0.002L313.484,13H312L312.017,0z"/>
    <path d="M318.017,0l1.482,0.002L319.484,13H318L318.017,0z"/>
    <path d="M324.017,0l1.482,0.002L325.484,13H324L324.017,0z"/>
    <path d="M330.017,0l1.482,0.002L331.484,13H330L330.017,0z"/>
    <path d="M336.017,0l1.482,0.002L337.484,13H336L336.017,0z"/>
    <path d="M342.017,0l1.482,0.002L343.484,13H342L342.017,0z"/>
    <path d="M360.017,0l1.482,0.002L361.484,13H360L360.017,0z"/>
    <path d="M366.017,0l1.482,0.002L367.484,13H366L366.017,0z"/>
    <path d="M348.017,0l1.482,0.002L349.484,13H348L348.017,0z"/>
    <path d="M354.017,0l1.482,0.002L355.484,13H354L354.017,0z"/>
    <path d="M372.017,0l1.482,0.002L373.484,13H372L372.017,0z"/>
    <path d="M378.017,0l1.482,0.002L379.484,13H378L378.017,0z"/>
    <path d="M384.017,0l1.482,0.002L385.484,13H384L384.017,0z"/>
    <path d="M390.017,0l1.482,0.002L391.484,13H390L390.017,0z"/>
    <path d="M396.017,0l1.482,0.002L397.484,13H396L396.017,0z"/>
    <path d="M402.017,0l1.482,0.002L403.484,13H402L402.017,0z"/>
  </mask>
</defs>

<g clip-path="url(#graph)">
  <rect x="0" y="0" width="408" height="13" fill="green"/>
  <rect x="-408" y="0" width="408" height="13" fill="orange" id="orange"/>
</g>

</svg>

<br />
<div id="forwards">Forwards</div>
<div id="backwards">Backwards</div>