Adding a wave pattern with .svg Dawn/origin Screenshots attached

Store Design
, , ,
1

Hey! I want to add a wave pattern to the website and at the moment I just included the pattern in the images but thats not working due to quality being lossed based on screensize and it just being inconsistent etc, is there a way i can add a custom liquid between each section with the .svg overlapping into the section above or below to create this same effect but in a better way. maybe there is another way someone knows to achieve this.

Screenshots below:

svg.PNG
svg.PNG1218×709 474 KB

Website: https://okell-s.myshopify.com/

Password: beer

2

Yes it can be done by making changes in the theme code. You can add svg of wave pattern

3

Thanks but how do I go about doing that

4

Here is a complete solution for adding waves in your shopify store section.

add wishlist feature in shopify store (2)
add wishlist feature in shopify store (2)1280×720 55.9 KB

Video Guide: https://youtu.be/lqvhTrNzKVc

#shopify-section-{{ section.id }} {
    transform: translateY(-102px);
    margin-bottom: -102px;
    --mask: radial-gradient(96.55px at 50% 136.5px, #000 99%, #0000 101%) calc(50% - 140px) 0 / 280px 100%, radial-gradient(96.55px at 50% -66.5px, #0000 99%, #000 101%) 50% 70px / 280px 100% repeat-x;
    -webkit-mask: var(--mask);
    padding-top: 100px;
    background: red;

}