Houndstooth

100%

✓ Published0🌍 Public

Last edited Jul 22, 2011

Created on Jul 22, 2011

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.

AI-generated description

Similar vizzes

Loading thumbnail…

CSS3 dots patterns

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.

Aabernier

74% match

Loading thumbnail…

Gist 962cd79b5bff0c8b28a25691831eb7f0

This example displays a grid-patterned background for a web page, rendered using CSS on an HTML body element. It shows a repeating tiled texture created by an external image file called `bk.png`. The code sets the background image and applies initial positioning, sizing, and repetition properties to control how the pattern displays across the viewport. Using standard CSS background properties, it establishes a simple, static visual foundation without any interactive or animated elements, relying solely on the bitmap image for its appearance.

RRainboylvx

69% 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

66% match

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

65% 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

64% match

Loading thumbnail…

Hexagonal SVG gradient experiment

A grid of hexagons fills the page, each one displaying a linear gradient oriented along one of three angles, with colors randomly drawn from a dark rainbow palette. The animation progressively reveals hexagons starting from the center, growing outward in a wave-like pattern. Built with D3 v5 and SVG, the code constructs hexagon paths using trigonometric calculations and applies randomized gradient definitions through the SVG `defs` element.

AAjayyy

64% match

Loading thumbnail…

SCSS mixing for CSS3 gradients

This example shows how to define a reusable gradient mixin in SCSS that generates CSS3 gradients with cross-browser support. The mixin takes two color arguments and outputs background-color as a fallback, followed by gradient declarations for Mozilla, WebKit, Opera, and the standard syntax. The code uses the `@mixin` and `@include` directives from Sass, applying the mixin to a `.my_div` class with a `$background_color` variable and white. It does not include any data source or rendering logic, only the styling approach for gradients.

Aackuser

63% match

Loading thumbnail…

Fork of HTML Starter

This example displays a pattern of black vertical and horizontal stripes through a circular aperture. The SVG uses dynamically created `<rect>` elements to construct the stripe grids. A white circular overlay, styled with CSS, masks a second SVG containing perpendicular lines, creating an optical moiré effect as the two grids intersect. The page is built with plain HTML, CSS, and JavaScript, using the SVG namespace and DOM manipulation via `createElementNS`.

Ggyan9427

63% match