full width wave in CSS, SVG
I am building a website, it has a part that is in wave form, like this: PSD
I am currently using the PSD image, a PNG, to put on the site, but I would like the wave to have full width of the screen, my result
I would like a CSS solution, so I researched a bit, and talez is possible using SVG, however I do not I succeeded in creating
<svg viewbox="0 0 100 25">
<path fill="#9EAFFD" d="M0 30 V12 Q30 17 55 12 T100 11 V30z" />
</svg>This code I got on the internet, but I could not do what I need, 4 waves overlapping, I do not know about SVG, anyone?
In your snippet we're seeing the browser's default margin.
On the page we're seeing that the SVG is a different aspect ratio to its container. You can either make the container taller or allow the shape to distort into the existing container. preserveAspectRatio="none" would allow distortion.
body {
margin: 0;
}<svg viewbox="0 0 100 25" preserveAspectRatio="none">
<path fill="#9EAFFD" d="M0 30 V12 Q30 17 55 12 T100 11 V30z" />
</svg>
-
05:30
-
04:00
-
00:00
-
10:30
-
9:10
-
07:40
Firebase Cloud Functions: PubSub, "res.on is not a function"
-
04:00
TypeError: Cannot read properties of undefined (reading 'createMessageComponentCollector')
-
9:20
-
7:40
- typescript: tsc is not recognized as an internal or external command, operable program or batch file 111633 visits
- search for elements in a list 111072 visits
- In Chrome 55, prevent showing Download button for HTML 5 video 98836 visits
- RxJS5 - error - TypeError: You provided an invalid object where a stream was expected 96342 visits
- Ionic 2 - how to make ion-button with icon and text on two lines? 92540 visits
- NetBeans IDE - ClassNotFoundException: net.ucanaccess.jdbc.UcanaccessDriver 62054 visits
- Adding methods to es6 child class 22381 visits
