SVG dots background
An SVG dot pattern usually becomes a data URI inside background-image, with background-size setting the repeating tile's dimensions. This generator builds a 32 by 32px tile with a single 1.5px radius dot centered inside it, exports ready CSS, and lets you adjust spacing and opacity without ever opening a vector editor.
At 0.08 opacity over a white background, the black dot still leaves the text area comfortably above the WCAG 4.5:1 minimum contrast ratio, so the texture works even behind full paragraphs of copy.
Doubling the tile from 32 to 64px without scaling the dot radius proportionally makes each dot look smaller and more spaced out, useful on wide banners where too small a tile would create repetitive visual noise.
At 0.3 opacity the dot already competes with small text for the eye's attention, so this setting belongs on decorative strips with no overlapping text content, never on the area where a paragraph will actually be read.
For simple geometry, usually yes: it scales without losing sharpness, stays editable and is often lightweight. For photographic textures or very dense noise, an optimized PNG/WebP may be more efficient.
Because SVG describes the dot as vector math, so the same few bytes of code scale to any screen density without blurring, while a PNG would need a separate @2x or @3x version for retina screens, each one an extra network request.
It depends on font weight and size, but as a practical rule, opacity above 0.15 over a background the same color family as the text already reduces effective contrast enough to risk falling under the WCAG 4.5:1 minimum required for normal text.
No: because the SVG uses a proportional viewBox, changing the background-size value in the generated CSS is enough; the dot's own drawing stays identical, only the repeat distance between one dot and the next grows.
No: a data URI for a single circle usually stays under 200 bytes of code, versus several kilobytes for an equivalent PNG, and because it is embedded directly in the CSS, the browser makes no additional HTTP request to load it at all.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 128" role="img" aria-label="Pattern preview"><defs><pattern id="p" width="32" height="32" patternUnits="userSpaceOnUse"><circle cx="16" cy="16" r="2.8" fill="#3DDC97"/></pattern></defs><rect width="100%" height="100%" fill="#101412"/><rect width="100%" height="100%" fill="url(#p)"/></svg>The pattern is generated locally and does not use a backend.