At the top of this image there is an Arch I created in Foundry using the Mask stack. I’m trying to recreate the Arch in Source, I’m assuming I’m going to need a 3rd party stack but I’m not sure which one. Does anyone have any suggestions?
Thank you
You don’t need an additional stack as there are several ways to do this in Source.
What you referred to as the arch is more commonly called a page divider or shape divider. Googling page divider finds this useful site Free Web Design Shape Dividers Pack [50+ Dividers]. Either find and download the SVG shape you want or create one. Or download the one use used in your screenshot.
In brief, you add a Container to hold everything shown in your screenshot and then force an SVG image of the divider shape you want to use, up to the top of that Container.
The way I create these page dividers is to add to a Container, a Coder( set to stacks) containing an SVG stack. Add the classes w-100 to both (which forces the image to go edge to edge. In addition, add the class pos-tl into the Coder, to pin the divider to the top (or pos-bl to pin the divider to the bottom).
In the SVG stack, add the code for the SVG you want to use - check out the Source Knwoledge Base if not not sure how to do this.
Below is the type of thing you ned to paste into the SVG file loaded from https://shapedividers.com
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.28 2.17" preserveAspectRatio="none"><path d="M0 .5c3.07.55 9.27-.42 16.14 0 6.88.4 13.75.57 19.14-.11V0H0z" fill="#000000"/><path d="M0 1c3.17.8 7.29-.38 10.04-.55 2.75-.17 9.25 1.47 12.67 1.3 3.43-.17 4.65-.84 7.05-.87 2.4-.02 5.52.88 5.52.88V0H0z" opacity=".5" fill="#000000"/><path d="M0 1.85c2.56-.83 7.68-.3 11.79-.42 4.1-.12 6.86-.61 9.58-.28 2.73.33 5.61 1.17 8.61 1 3-.19 4.73-.82 5.3-.84V.1H0z" opacity=".5" fill="#000000"/></svg>'
This code is 3 different opacity waves on top of each other, and the colour can be set in the SVG stack.
6 Likes
your original stack may well work just fine in Source. Can’t imagine it is one that taps into much of the underlying framework code.
but yes - I’d agree with @Webdeersign. there are countless online generators for these kind of shapes. most have an export to svg code that you can just drop into a Source svg stack (and adapt its max-width to e.g. 9999px so that it fills the full width of the page). The other advantage of using the svg code is that you can switch out the colour values it contains for Source colour variables so that the shapes pick up some of the site colours. Or you can set the colours in the generator and output to a png file which you can then just use in an image stack. lots of options that are available for free :)
alternatively there are stacks out there that do this if you prefer. i know 1LD has got one for sure though can’t quite recall the name of it.
2 Likes