<!-- <svg id="icon-star" width="32" viewBox="-1 0 34 32">
<title>star</title>
<path class="gradient-path" d="M16 23l9 6-4-10 9-6h-10l-4-10-4 10h-10l9 6-4 10 9-6z"></path>
</svg> -->
<svg id="icon-heart" width="32" viewBox="-2 -2 32 32">
<title>heart</title>
<path class="gradient-path" d="M14 26c-0.25 0-0.5-0.094-0.688-0.281l-9.75-9.406c-0.125-0.109-3.563-3.25-3.563-7 0-4.578 2.797-7.313 7.469-7.313 2.734 0 5.297 2.156 6.531 3.375 1.234-1.219 3.797-3.375 6.531-3.375 4.672 0 7.469 2.734 7.469 7.313 0 3.75-3.437 6.891-3.578 7.031l-9.734 9.375c-0.187 0.187-0.438 0.281-0.688 0.281z"></path>
</svg>
html { background: #222; height: 100%; }
body { min-height: 100%; display: flex; justify-content: space-between; }
svg { display: block; margin: auto; max-width: 500px; width: 90%; max-height: 90vh; }

.gradient-path { 
  fill: none; /* No fill so we're just enjoying the stroke */
  stroke-width: 2; /* Make the stroke a bit wider so we can see it better */
  stroke-linecap: round; /* Make the stroke edges nice & round */
  stroke-linejoin: round; /* Smooth out corners */
  
  --total-offset: 0; /* CSS var that will be populated by the JS for the CSS animation */
  animation: stroke-anim 6s linear infinite;
}

/* Go from the current `stroke-dashoffset` (set in the JS), to the total offset (provided by the JS in the CSS var */
@keyframes stroke-anim {
  to { stroke-dashoffset: var(--total-offset); }
}
console.clear();

// How many copies of the path to make (more = smoother gradient, but more clones of the path)
var resolution = 14;

// Using Array.from to...
var gradientPaths = Array.from(
  
  // ...find all .gradient-path elements...
  document.querySelectorAll('.gradient-path'),
  
  // ...and run this function over them:
  function(path){

    // Get the length of the path
    var length = path.getTotalLength();
    
    // How big each segment of the gradient should be
    var segmentLength = ( length / resolution );

    // Create a group for all of the new paths to reside in
    var g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
    path.parentNode.insertBefore(g, path.nextSibling);
    
    // Apply some styles for all the cloned paths on the <g> to be inherited
    g.style.strokeDasharray =  segmentLength + ' ' + ( length - segmentLength );

    for (var i = 0; i < resolution; i++) {
      // Clone the path
      var c = path.cloneNode();
      
      // Give it a nice color spanning the entire spectrum
      c.style.stroke = 'hsl(' + (i / resolution) * 360 + ', 75%, 60%)';
      
      // How much the stroke-dash should be offset (`stroke-dashoffset`)
      var offset = length * ( i / resolution );
      c.style.strokeDashoffset = offset;
      
      // Pass along the necessary offset for the CSS animation as a CSS var
      c.style.setProperty('--total-offset', (length + offset) );
      
      // Add the cloned path to the group
      g.appendChild(c);
    }

    return path;

  });
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://codepen.io/shshaw/pen/epmrgO.js