An abstract geometric background is a handful of SVG polygons layered at different opacities, and you can write one by hand in about twenty lines — no design tool required.
This is a short, practical page. If you want a lightweight decorative background for a hero section or a page divider, inline SVG is smaller than an image, scales to any viewport without a second file, and can be recoloured in CSS.
What makes the style work
- A small shape vocabulary. Triangles and quadrilaterals, nothing more. Complexity comes from arrangement, not from shapes.
- Flat fills. Two or three colours from one palette. Gradients are optional and usually make it worse.
- Varied opacity. This is what creates depth. Overlapping shapes at 0.6 to 0.9 produce intermediate tones you never had to choose.
- Deliberate asymmetry. Symmetry reads as a pattern; asymmetry reads as a composition.
Building one
Start with the canvas. Set a viewBox and let CSS handle the display size, so the same markup works at any width:
<svg viewBox="0 0 1280 258" xmlns="http://www.w3.org/2000/svg" role="presentation"></svg>
The role="presentation" matters. A decorative background should be removed from the accessibility tree; without it a screen reader may announce a graphic that carries no information. If the SVG is purely decorative, add aria-hidden="true" as well.
Then add shapes with <path>. The d attribute uses three commands: M to move to a point, L to draw a line, Z to close the shape.
<path d="M0,200 L500,100 L1000,200 Z" fill="#343247"/>
Add opacity to layer them:
<path d="M0,180 L640,60 L1280,220 Z" fill="#1d1934" opacity="0.85"/>
Repeat with different vertices and fills. Four to eight shapes is usually enough; past that it stops reading as a composition.
Using it in a Drupal theme
Two sensible routes:
- As a CSS background. Save the SVG in your theme, reference it with
background-image: url(...), and attach the stylesheet through your theme's library. This keeps it out of the markup entirely, which is right for decoration. - Inlined in a Twig template. Use this only when you need CSS to recolour individual shapes — a background image cannot be styled from outside. Include the file rather than pasting the markup, so there is one copy.
Where the file goes and how the library is declared matters more than it sounds — organising theme CSS sensibly is what stops decorative assets accumulating in a folder nobody can navigate.
Two things to check
- Contrast. Whatever text sits over this has to remain readable at the busiest point of the background, not the calmest. Test the worst case.
- Weight. Hand-written SVG is tiny. SVG exported from a design tool routinely carries editor metadata and unnecessary precision; run it through an optimiser before shipping.
Common questions
Should I use SVG or an image file?
SVG for flat geometry — it is smaller and resolution-independent. A raster format for anything photographic.
Will it work on a dark theme?
Only if you plan for it. Inline the SVG and drive the fills from CSS custom properties, or ship a second file.
Does an inline SVG hurt performance?
A few polygons, no. It adds bytes to the HTML, which is not cached separately, so a background reused across many pages is better as an external file.
Next
Decorative backgrounds are the easy part of a theme. The parts that decide whether a site is maintainable are structure and CSS organisation — if you are building a Drupal front end and want it to still make sense in a year, that is what a Drupal themer does, and a quick description of your project is enough to tell whether you need one.