How to use Sass string replacement to animate changes in an SVG

Too Long; Didn't Read

Sometimes I want to have an SVG as a URL-encoded <code class="markup--code markup--p-code">background-image: url(path/to/your.svg);</code>&nbsp;, often on a pseudo element (<a href="https://codepen.io/tigt/post/optimizing-svgs-in-data-uris" target="_blank">see Taylor Hunters article about URL-encoding an SVG</a>). I love doing it this way, as it means my SVG is then inside my stylesheets and saves me an additional server request. I use Sass to run a string replacement function to edit the SVG’s code and therefore animate it. Pretty cool right?! Here’s an example of how to apply this technique to a simple SVG that has a single fill color.