Streaming live at 10am (PST)

Get vector / svg as flexible graphic?


#1

Hey!

I need to have a line go from one point to another point, and then follow this responsively, as indicated in this simple illustration

So the line would go from top left corner to bottom right corner regardless of its containers width.

How could this be achieved in Webflow? Custom code? Canvas? Anyone know where I could go read and learn?

TIA!
/Jesper


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


#2

Hi, honestly I would simply add all of these as SVG. You could obviously do individual each, and position around, but it’ll be too much tweaking unnecessarily. I’d import it all as one file. Really large at like 3000x2000 from the vector program canvas. Then scale it down in one piece.


#3

Hi! Yes, but the problem is: the two boxes are symbols for text: a word each. And then these two need to be connected with a line, no matter the width of the browser.

So I can’t figure out how to have a svg show out of proportions…


#4

Ah gotcha. Yeah you’ll have to tweak this manually inch by inch, or rather, pixel by pixel. But, with so many devices it’s nearly impossible to make the lines touch exactly all the time. With this layout, only 1 file can guarantee they stay together for every device.


#5

Hello @Fagerlund

Are you looking for something like this?


#6

Yes I am. Yes yes yes. :smile: @aaronocampo


#7

So… how to do this… any hints? :slight_smile: @aaronocampo


#8

I’m sorry @Fagerlund

Here is my preview link of that site, go to page ‘Responsive Line’ and you’ll find there how I built it

https://preview.webflow.com/preview/testingplayground?preview=eaf772107fb9b54c77952adb2d2647e2

If you need any further assistance let me know :wink:


#9

Really nice @aaronocampo, such a simple solution :slight_smile:


#10

Agree with @cyberdave here: great simple solution, easy to use and understand… (if only my brain could get around code)

Thank you so much!


#11

I’m not a coder either :stuck_out_tongue_winking_eye: I just made some research online and started to play with what I found.

I like these kinds of challenges! :grinning:

Glad I could help