CSS3 dots patterns

100%

CSS3 dots patterns

✓ Published0🌍 Public

Last edited Feb 12, 2012

Created on Jul 21, 2011

This example demonstrates a purely CSS-based technique for generating dot patterns without any images or JavaScript. It uses two stacked `linear-gradient` functions to create a repeating grid of dots: one gradient controls the vertical fading of each dot, while the other defines the horizontal spacing and color opacity. The pattern is applied via `background-image` with a `background-size` of `.25em`, producing a seamless tiled texture. A second CSS file shows how to apply a simple red color style, though the core visualization relies entirely on CSS3 gradients and no external libraries or data sources.

AI-generated description

Similar vizzes

Loading thumbnail…

Polka dot

A single web page uses only CSS to create a repeating polka-dot pattern across a maroon background. The page defines a radial-gradient with two layered positions, setting tan circular dots at 20% size with transparent surroundings, tiled at a 30-pixel grid and offset by 15 pixels to form the staggered dot matrix. No JavaScript runs beyond a commented-out alert, and no external data is loaded, so the visualization is purely a static CSS background experiment from a Gist. The split view shows the CSS source alongside a live preview, with the HTML body left empty.

335degrees

78% match

Loading thumbnail…

Houndstooth

This example creates a houndstooth pattern entirely with CSS background gradients. It layers multiple linear-gradient declarations in the `background-image` property to form the classic black-and-white checkered textile motif. The pattern uses both white and dark gray (#333) diagonal stripes, with varying angle directions and transparent gaps to build the interlocking shape. The `background-size` and `background-position` values repeat the tile across the page, producing a seamless, scalable texture without any JavaScript or image assets.

Aabernier

74% match

Loading thumbnail…

pacman css3pattern

A CSS-only pattern generates a tiled Pac-Man maze background using stacked linear and radial gradients. The code defines repeating horizontal blue stripes, a white dot grid, and black geometric shapes that form the maze walls, with a yellow radial gradient creating Pac-Man’s body. Each element is positioned via pixel-based offsets and scaled using the background-size property, producing a seamless repeating tile. The effect relies entirely on gradient functions like `-webkit-linear-gradient` and `-webkit-radial-gradient`, with no images or external assets.

Aabernier

71% match

Loading thumbnail…

Invisible Dots

A grid of 50 black rounded squares fills the browser window, each one a styled `<div>` created dynamically by a `for` loop that calls `document.createElement` and appends it to the body. The squares appear as a uniform, static pattern, yet the title suggests the presence of invisible dots. No external libraries or data sources are used; the visualization relies solely on raw HTML, CSS (flexbox layout with fixed `84px` dimensions and `margin` spacing), and vanilla JavaScript to construct the display.

CCurran Kelleher

70% match

Loading thumbnail…

500 glowing dots

Five hundred glowing dots scatter across a dark, square SVG canvas. Each dot consists of a larger outer circle filled with a cyan radial gradient and a smaller, brighter white inner circle created using SVG `radialGradient` definitions. A plain `for` loop generates the dots at random positions within a fixed boundary, using D3 v4 to append `circle` elements and apply CSS classes for styling. The result is a dense, luminous field of varied-sized orbs against a near-black background.

PPatrick Wojda

69% match

Loading thumbnail…

dot-density

Five square SVG rectangles display a graduated sequence of dot-density textures using the textures.js library for D3 v5. Each rectangle uses a `textures.circles()` pattern with progressively smaller circle sizes, from large to tiny dots, and applies the texture via `style("fill", t.url())`. The example demonstrates how varying pattern scale creates visual differentiation across identical shapes.

Zzoniyac

68% match

Loading thumbnail…

Mathematical Graphic Patterns

This example generates an animated, abstract screensaver-like pattern using a grid of circles on an HTML canvas. A 30×30 grid animates each point over time, with positions and radii driven by sine and cosine functions of a continuously increasing time variable, creating swirling, rhythmic motion. The code uses the Canvas API’s 2D rendering context (`canvas.getContext('2d')`) and `requestAnimationFrame` to update frames, with a semi-transparent black overlay to create fading trails. Circle colors shift smoothly through RGB values based on grid position, while the canvas dynamically resizes to the browser window.

CConvert-Jade

68% match

Loading thumbnail…

Gist 8d9b109e150b883ed9c2

A plain SVG rectangle demonstrates a horizontal linear gradient, transitioning from light blue on the left to a warm orange on the right, with a dark gray border. The gradient is defined inside the SVG’s `<defs>` block, using `<linearGradient>` with two `<stop>` elements, and applied via the `fill` property in a linked CSS file. The example renders a single static shape, showing the SVG gradient syntax and CSS integration without any JavaScript or data processing.

Aabernier

68% match