Beta

Dots SVG background, flat

Free
Dots SVG background, flat

Tiny, evenly spaced dots repeat across a solid field and thin out behind the center. Try this pattern on a presentation title slide or a recipe card.

Sign in to download. Free SVGs are free with any account.

dotspatternpolkarepeatanimatedbackgroundflat

How to use it

HTML <img>
<img src="https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/ISsECJeD3jVf/amnt.svg" alt="Dots" width="48" height="48">
Inline SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 900" preserveAspectRatio="xMidYMid slice"><defs><pattern id="denseDots" width="32" height="32" patternUnits="userSpaceOnUse"><circle cx="16" cy="16" r="2" fill="#8BB9C5"/></pattern><pattern id="sparseDots" width="96" height="96" patternUnits="userSpaceOnUse"><circle cx="48" cy="48" r="2" fill="#8BB9C5"/></pattern></defs><rect width="1600" height="900" fill="#17465D"/><path d="M0 0H440C520 220 520 680 440 900H0Z M1160 0H1600V900H1160C1080 680 1080 220 1160 0Z" fill="url(#denseDots)"/><path d="M440 0H1160C1080 220 1080 680 1160 900H440C520 680 520 220 440 0Z" fill="url(#sparseDots)"/></svg>
CSS background-image
.dots {
  background-image: url("https://db.amnt.io/storage/v1/object/public/generated_images/svg-api/ISsECJeD3jVf/amnt.svg");
  background-size: contain;
}
React
import DotsSvg from "./dots.jsx"; // from the React tab above

<DotsSvg width={48} height={48} />

Made with AMNT

AMNT SVG 1.1 drew this from the words Dots: Repeat tiny, evenly spaced dots across a solid field, thinning the pattern behind the center. as part of the pack Animated Backgrounds, Flat. Want one like it? Make your own in the SVG studio.

Rest of Animated Backgrounds, Flat

Whole pack

Similar SVGs

Licence: free. A Free account may use it for personal work; Pro and Max download it with a commercial licence, fixed at download, forever. No credit needed. Read the licence