Hello Webflowers, hope you are having a great day!
I’ve come today with a problem that I keep facing in many projects that I work on. I’m trying to develop what you see in this image
I have two issues that I’m trying to solve, and they are both related just to the curved line that’s between the grey rectangle and the rectangles below it.
1- How do I develop it in a way that it’s ends are always in the center of both rectangles ( The grey and white ones) across all screens.
2- How to animate it in a way that it starts from the grey rectangle and then grows, or flows to the white rectangle?
I’ve tried using an SVG, div borders, and absolute positioning, but none of these were able to solve both issues at the same time. Would appreciate any help I can get. Thanks in advance!