How to low poly svg background generator free online
- Step 1Open the tool — Go to /svg-tools/svg-polygon-gen. There is no upload step — this tool generates from settings, not from a source image. You will see four controls and a live preview area.
- Step 2Set the dimensions — Enter Width (200–3840, default 1200) and Height (100–3840, default 600) in user units. These become the SVG
viewBoxand thewidth/heightattributes. Match your hero's aspect ratio so the triangulation looks balanced. - Step 3Choose point density — Drag the Point density slider (8–300, default 50). Lower values give a sparse, chunky faceted look; higher values pack in smaller triangles. The visible triangle count is roughly twice the point count plus the eight anchors.
- Step 4Set the four palette colours — Click each of the four colour swatches to open your OS colour picker. The palette is fixed at four entries — you recolour the existing swatches; there is no add or remove button. Colours are swept across the X axis, so swatch one paints the left edge and swatch four the right.
- Step 5Generate and re-roll — Click Generate. Because the interior points are random with no seed, each click yields a different mesh — keep clicking until the composition reads well. The metrics panel reports the Points and Triangles in the result.
- Step 6Export the SVG — Download
low-poly-bg.svgor copy the inline markup. Paste it directly into your page, or reference the saved file from a CSSbackground-image. There is no PNG export — keep it as SVG to preserve scalability.
The four controls and their real ranges
Exactly four options exist, matching the tool's schema and UI. Width/height step by 20 in the slider/number inputs; the underlying schema allows any integer in range.
| Control | Type | Range | Default | What it does |
|---|---|---|---|---|
| Point density | slider | 8 – 300 | 50 | Number of random interior points seeding the Delaunay mesh |
| Width | number (px) | 200 – 3840 | 1200 | Output width in user units; sets viewBox and width attribute |
| Height | number (px) | 100 – 3840 | 600 | Output height in user units; sets viewBox and height attribute |
| Palette | 4 colour swatches | any 4 hex colours | #6366f1 #818cf8 #a5b4fc #c7d2fe | Swept left-to-right across the canvas; fixed at four entries |
Point density to approximate triangle count and file size
Triangle counts measured from the actual Bowyer-Watson output (eight anchors plus N interior points). Triangles ≈ 2 × (N + 8) minus boundary edges. File sizes are uncompressed estimates for a 1200×600 canvas and gzip to roughly a third.
| Point density | Total points (with anchors) | Approx triangles | Rough SVG size | Look |
|---|---|---|---|---|
| 8 (minimum) | 16 | ~22 | 3–5 KB | Very angular, minimalist facets |
| 30 | 38 | ~66 | 8–12 KB | Clean low-poly, distinct shards |
| 50 (default) | 58 | ~106 | 12–20 KB | Balanced classic low-poly |
| 100 | 108 | ~205 | 22–40 KB | Fine faceting, reads as texture |
| 200 | 208 | ~404 | 45–80 KB | Dense; triangles blur at distance |
| 300 (maximum) | 308 | ~604 | 70–120 KB | Very fine, near-impressionistic |
Cookbook
Concrete recipes for getting a usable background, with the exact markup the tool emits.
What the output markup looks like
A self-contained SVG: an opaque palette-gradient backing rect (so border slivers never show as transparent cracks), followed by one <polygon> per triangle. Real output, abbreviated.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 600" width="1200" height="600"> <defs><linearGradient id="poly-bg" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0.000%" stop-color="#6366f1"/> <stop offset="25.000%" stop-color="#818cf8"/> ... <stop offset="100%" stop-color="#6366f1"/> </linearGradient></defs> <rect width="1200" height="600" fill="url(#poly-bg)"/> <polygon points="0.0,0.0 412.3,118.7 0.0,300.0" fill="#6f6ff4" opacity="0.91"/> <polygon points="412.3,118.7 740.0,0.0 600.0,300.0" fill="#8a93fa" opacity="0.95"/> ... one polygon per triangle ...
Inline it as a hero background
Paste the copied markup directly into your HTML and pin it behind your content. No external request, no flash of unstyled background.
<section class="hero">
<!-- paste the generated <svg> here -->
<svg xmlns="..." viewBox="0 0 1200 600" ...>...</svg>
<div class="hero__content">Your headline</div>
</section>
<style>
.hero { position: relative; }
.hero > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__content { position: relative; z-index: 1; }
</style>Use the saved file as a CSS background
Download low-poly-bg.svg, drop it in your assets, and reference it. cover keeps it filling the box at any breakpoint.
.hero {
background-image: url('/img/low-poly-bg.svg');
background-size: cover;
background-position: center;
}
/* SVG scales cleanly — no @2x asset needed */Brand-matched palette
Set the four swatches to your brand ramp from dark (left) to light (right). The X-axis sweep then runs your gradient across the hero.
Swatch 1 (left edge): #0f172a (deep navy) Swatch 2: #1e3a8a Swatch 3: #3b82f6 Swatch 4 (right edge): #93c5fd (light blue) Generate -> a diagonal-feeling navy->sky faceted wash.
Re-roll for a better composition
Same settings, different mesh. Because points are random with no seed, click Generate repeatedly and keep the one whose large facets land where you want them.
Settings: density 40, 1600x900, brand palette. Click 1 -> big facet over the logo area (reject) Click 2 -> calmer top-left, busy bottom (reject) Click 3 -> even shard distribution (keep, download)
Edge cases and what actually happens
You expected to upload a photo to 'low-poly' it
Not supportedThere is no file input. This tool generates abstract meshes from a palette, not from an image — it does no tracing or edge detection. For a photo-derived look, choose colours sampled from your image. To work with an existing vector instead, see /svg-tools/svg-pattern-tiler or /svg-tools/svg-blob-generator.
Same settings produce a different result each click
By designInterior points use Math.random() with no seed parameter, so every Generate yields a new mesh. This is intentional re-roll behaviour, not a bug. There is no way to reproduce an exact previous mesh from settings alone — download the one you like.
You want a fifth palette colour
Not supportedThe palette is fixed at four swatches in the UI; you recolour them but cannot add or remove entries. Four colours sweep across the X axis. If you need a wider gradient, place your most saturated colours at the ends.
Point density set below 8
ClampedThe slider's minimum is 8 and the engine clamps to at least 8 (Math.max(8, ...)). Even at the minimum you still get the eight fixed anchors, so the canvas is always fully covered.
Point density set above 300
ClampedThe slider caps at 300 and the engine clamps with Math.min(..., 300). You cannot generate the 1000-plus-triangle meshes some galleries show — the maximum here is roughly 600 triangles at 300 points.
A thin sliver appears near the border
MitigatedThe triangulation is good-enough rather than numerically robust, so a tiny gap can occur. An opaque backing rect filled with the same palette gradient sits under the mesh, so any uncovered sliver shows a matching neighbour colour instead of a transparent crack.
Extreme aspect ratio (e.g. 3840×100)
SupportedWidth and height are independent within their ranges, so very wide or very tall banners work. At extreme ratios the triangles stretch; raise point density to keep facets from becoming long and thin.
You wanted a PNG
Not supportedOutput is SVG only (image/svg+xml, filename low-poly-bg.svg). There is no raster export. If you must have a PNG, open the SVG and export from a browser or editor, or rasterise on your side.
Frequently asked questions
Does this turn my photo into low-poly art?
No. It is a generative tool with no file input — it cannot trace, sample, or edge-detect a photo. It scatters random points across a blank canvas and colours the resulting triangles from your four-swatch palette. For a photo-like result, set the palette to colours pulled from your image.
Is it really free?
Yes. The tool's minimum tier is free, it runs entirely in your browser, and nothing is uploaded. No account is required to generate and download a background.
Why does it look different every time I click Generate?
Interior points are random with no seed control, so each Generate builds a new mesh from new points. That is intentional — treat it as a re-roll button and keep clicking until the composition works.
How do I reproduce a background I liked yesterday?
You can't regenerate an exact mesh from settings, because there is no seed. The reliable approach is to download the SVG when you like it and keep the file. The settings only control density, size, and colours — not the specific point positions.
How many triangles will I get?
Roughly twice the point count plus a bit, because of the eight fixed anchors. At the default 50 points you get about 106 triangles; at the 300-point maximum, about 604. The metrics panel reports the exact Points and Triangles for each result.
Can I add more than four colours?
No. The palette is fixed at four swatches. You change their values but cannot add or remove entries. Put your boldest colours at the first and last swatches, since the palette sweeps left to right.
How big is the file?
A default 50-point, 1200×600 background is roughly 12–20 KB uncompressed and gzips to about a third of that. Higher density means more polygons and a larger file — a 300-point mesh can reach 70–120 KB uncompressed.
What sizes can I generate?
Width is 200–3840 and height is 100–3840 user units. Set them to match your hero's aspect ratio. The values become the SVG viewBox and the width/height attributes.
Can I export a PNG?
No. The only output is SVG (low-poly-bg.svg). Keeping it as SVG is the point — it scales to any size without re-exporting. If you need a raster, open the SVG in a browser or editor and export from there.
Will there be transparent gaps at the edges?
No. Four corner anchors and four edge-midpoint anchors guarantee the mesh reaches every border, and an opaque palette-gradient backing rect sits underneath, so any rare sliver shows a matching colour rather than transparency.
Can I animate the background?
Not from this tool — it emits a static SVG. You can animate it yourself with CSS, for example a slow opacity or hue shift on the whole <svg>, since each triangle is a real DOM element you can target.
What if I need other generated SVG art?
Try the sibling generators: /svg-tools/svg-blob-generator for organic blobs, /svg-tools/svg-wave-divider for section dividers, and /svg-tools/svg-pattern-tiler for repeating tiles. To shrink any SVG afterwards, run /svg-tools/svg-pro-minifier.
Privacy first
Every JAD SVG tool runs entirely in your browser using the DOM API and Canvas. Your SVG files never leave your device — verified by zero outbound network requests during processing.