https://www.motivatedmornings.work
How can I achieve this background effect in source with preferably an SVG? It has a focal point so, no matter the screen size, you still see the curve.
a/o @Webdeersign can you unleash your magic?
You could do it with LockUp SVG, with the ochre shape anchored on the top and left. Then you’d have the choice for it to scale down either disproportionately (with the width) or in proportion (using aspect ratio in the parent LockUp stack). The illustration could sit above the SVG in a LockUp Image stack and be anchored whatever distance off from the centre to provide a focal point that is always relative to the centre of the screen. Since the curve covers the full width, you could just set the stack to be 100vw wide, and it would scale responsively.
2 Likes
I quickly knocked up something here — this is with a fixed aspect ratio (3:2). Obviously there are different ways the image could be positioned and treated — this is with a position relative to the centre, and sized in vw (but the sizing also be absolute, or even be clamped using the ‘none included in calculation’ option under units.)
2 Likes
Oh wow, James, that looks great!
I guess to get the effect of the original site would be to not scale but center the image?
Yes, I didn’t look too closely at what they had done, but the image could remain a fixed size, scale with responsive units, or it could scale at a different rate to the page (using a calc with both fixed and responsive units) or it could have a maximum and minimum size, and scale in between (with clamp). Likewise the SVG could scale in different ways.
This is a great example of a situation where LockUp can come into its own, and it shows the power of having these various kinds of units and calculations available.
My inclination would be to recreate the page using Source Grid, and I’d have a Grid Item underneath everything else that overlapped the whole page, and put the LockUp into that. Then text, navigation etc. could be layered over that with Source Grid and other Source stacks.
1 Like
As James says, there are various ways you could achieve this kind of thing. Here is a quick demo of it using just Source stacks:
You can download the project file here.
6 Likes
There are several ways to do this as James and Stuart have shown. That site has a few issues with some screen sizes or aspect ratios and these can all be sorted out with Source.
1 Like
Thank you all for your help. I really appreciate it and is one of the reasons I love this place. You guys rock!!
NB I’ve marked Stuarts reply as solution, not because James’ isn’t (as it is) but because it answers the topic title.
I will work with both your solutions and see what will work best in this case. 🙏
1 Like
No worries. Easy to think that things like this are harder to achieve than they actually are. Probably just that curve that makes it look more interesting. As in essence it is just 2 columns over a background image.
2 Likes
Stuart, for some weird reason when I change the shape location from warehouse to a local file (same SVG contents, only difference is the # color) it won’t display. Only way I can get it is with a custom CSS in a coder stack 😂
What could be causing that, or rather: how can I fix it?
RW/stacks doesn’t like SVGs added as images through the stack settings and changes it to a png.
Ah I see. Thank you for clearing that up.
Fingers crossed it’ll be fixed in Stacks Pro…
1 Like