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>
Firebase Cloud Functions: PubSub, "res.on is not a function"
TypeError: Cannot read properties of undefined (reading 'createMessageComponentCollector')
I have a strange issueI've styled the scroll-bar of my ScrollPane in JavaFX using CSS, but now every time the ScrollPane is in focus, the border disappears
I'm using SVGZ images on HTML pages for their resizabilityThese SVGZ images contain PNGs that have been enlarged in specific ways that I want to preserve, pixelation and all