How to use SVG to design a wave image for background
Question
Application Type
Mobile

Hi Guys,

I am trying to create a wave shape for my dashboard header container and i am trying to achieve as shown below.

I got some custom codes using SVG to achieve this settings, but unfortunately i havnt used an SVG before. So I would need some help how to use it.

Can some one help me how to incorporate the below code into outsystems.

url - https://www.geeksforgeeks.org/how-to-create-a-wave-image-for-a-background-using-html-and-css/

Code -

    <style

        svg { 

            display: inline-block; 

            position: absolute; 

            top: 0; 

            left: 0; 

        

        .container { 

            display: inline-block; 

            position: absolute; 

            width: 100%; 

            padding-bottom: 100%; 

            vertical-align: middle; 

            overflow: hidden; 

            top: 0; 

            left: 0; 

        

        body { 

            overflow: hidden; 

        

    </style

</head

  

<body style="text-align:center;"

    <h1 style="color:white;"

        Geeks For Geeks 

    </h1

      

    <div class="container"

        <svg viewBox="0 0 500 500" 

            preserveAspectRatio="xMinYMin meet"

            style="z-index: -2;"

              

            <path d="M0, 100 C150, 200 350, 

                0 500, 100 L500, 00 L0, 0 Z" 

                style="stroke: none;  

                fill:rgba(30, 144, 225, 0.5);"> 

            </path

        </svg

    </div

      

    <div class="container"

        <svg viewBox="0 0 500 500" 

            preserveAspectRatio="xMinYMin meet"

            style="z-index:-1;"

              

            <path d="M0, 80 C300, 0 400,  

                300 500, 50 L500, 00 L0, 0 Z" 

                style="stroke: none;  

                fill:rgba(153, 50, 204, 0.5);"> 

            </path

        </svg

    </div

      

    <div class="container"

        <svg viewBox="0 0 500 500" 

            preserveAspectRatio="xMinYMin meet"

            style="z-index:-3;"

              

            <path d="M0, 100 C150, 300 350, 

                0 500, 100 L500, 00 L0, 0 Z" 

                style="stroke: none;  

                fill:rgba(220, 20, 60, 0.5);"> 

            </path

        </svg

    </div>

mvp_badge
MVP
Solution

Hi,

For the mentioned use-case, you can use/refer to the InlineSVG Utilities defined in the OutSystemsUI module.

Style Guide | Inline SVG

check this sample app:  SVGDemo

Refer to the attached .oml file


Hope this helps you!


Kind regards,

Benjith Sam

MobileLabSVGDemo.oml

Thanks Benjith,

Really appreciate your help. 

mvp_badge
MVP

You're welcome.

I'm glad that it helped you  :)


Kind regards,

Benjith Sam

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.