To have a smooth background transition like this, I first started playing around with divs, rotating them, applying opacity, clip-path and such. I ended up with a lot of html code and awkward css hacks.
After watching Sarah Drasner’s Advanced SVG animations course I am more confident with embedding SVG to achieve certain shapes and effects in my projects, and stopped hacking around in css. In fact it was quite the revelation: SVG is xml, it integrates perfectly with HTML, we can style and animate it with css or script it with JS 😎
If like me you’re not an Illustrator expert but cannot find the exact SVG on the web matching your design, head over to Figma and create some neat shapes and export them as SVG.
By removing the width and height attributes of the SVG we allow it to fit its parent div. This is typically the first step when we need an SVG to be responsive.
The way an embedded SVG fits its viewport (parent div) is controlled by viewBox’s sidekick attribute — preserveAspectRatio.
By default the SVG will preserve its aspect ratio and position itself in the middle so that the entire viewBox is visible.
This is typically ideal, so we rarely touch the preserveAspectRatio attribute…until we do!
It would be nice to have the divider SVG keep its aspect ratio on smaller screen sizes, while on larger viewports have its height at 200px stretching its aspect ratio to fit the screen.
<svg
viewBox="0 0 100 200"
preserveAspectRatio="none"
>svg {
width: 100%;
max-height: 200px;
}
With the above changes in place, the image:
- does not take up too much vertical space on larger screens,
- gets stretched out on larger screens,
- does not shrink too much on smaller screens.
The neat thing is that we have a responsive solution without explicit media-queries 🤓
See codepen demo 👀
