Streaming live at 10am (PST)

Split Color SVG Line

I’m currently implementing with a design into Webflow 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?

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?

I added a red circle to show the interlacing I’m having issues with.


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

What about a white drop shadow with no blur? It won’t perfectly line up but it might look interesting. issue is it will also show over the image.

Definitely sounds like a good possibility, but yeah, it would show over the image and the client needs it to be lined up.

The only other thing I can think of is to create an identical line in each box it will cross and line them up using absolute positioning. But from a design standpoint, I personally think it’s kind of distracting. Is there an actual reason for it?

The client is the reason :confused: . It’s their design.

Honestly, if it were my client, I’d tell them that they’ll be charged extra for that part of the design due to the complexity. Alternatively tell them that that part of the design is confusing on mobile and doesn’t really make design sense. As a designer, I honestly think it’s distracting and kind of pointless. Sorry I’m not more help.