title: Split Color SVG Line
body: <p>I'm currently coding a design mockup into HTMl and I'm trying to figure out the best way to achieve this look responsively. As you see, there's a purple line that stems from the hero CTA button in the bottom right corner. How would I go about changing the line color when it enters the new section; purple to white?</p>
  
  <p>I thought about making two separate lines, but It's difficult to always have them line up right. I wonder if there's some sort of masking trick?</p>
  
  <p>I added a red circle to show the interlacing I'm having issues with.
  <a href="https://i.stack.imgur.com/flapM.png" rel="nofollow noreferrer">Screenshot</a></p>