Log in to AnswerLog in to Follow
Learn It
13Views
3Comments
Solved
How to use SVG to design a wave image for background
Question
Mobile
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>

0
0
on 8th Mar
Benjith Sam
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

1
0
on 8th Mar

Thanks Benjith,

Really appreciate your help. 

0
0
on 8th Mar
Benjith Sam
mvp_badge
MVP

You're welcome.

I'm glad that it helped you  :)


Kind regards,

Benjith Sam

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