SVG Stripes

100%

✓ Published0🌍 Public

Last edited May 13, 2016

Created on May 13, 2016

A striped pattern fills a large rectangle, with gray diagonal lines created by a tilted SVG pattern. The example uses D3.js version 3.5.5 to construct an SVG `defs` element containing a `pattern` that rotates 45 degrees, then applies it as the fill for a single `rect` via CSS. The pattern itself is drawn with a simple `line` element, and the rectangle is positioned and sized through D3’s attribute chaining. This demonstrates how to define reusable SVG patterns programmatically with D3.

AI-generated description

Built with blockbuilder.org

Similar vizzes

Loading thumbnail…

Starting with D3

This example creates a full-screen SVG pattern of horizontal and vertical stripes using D3’s `select`, `range`, and `join` methods. Two sets of 100 rectangles are generated, each masked to reveal or hide a circular region at the center. The code uses SVG `mask` elements with black-and-white circles to produce a cross-shaped visual intersection. The data is synthetic, generated via `range(n)`, and rendered entirely with D3 v6 and SVG attributes.

Pphilmae

77% match

Loading thumbnail…

some

This example generates a geometric pattern of horizontal and vertical stripes across the full browser window, using D3.js version 7.9.0 to create SVG rectangles. Two circular masks reveal the stripes: the first mask shows horizontal lines within a white circle on black, while the second displays vertical lines in the inverse, creating an intersecting visual effect. The code uses D3's `select`, `range`, and `.join` API to efficiently append and position 100 rectangles in each direction, with the masks defined as separate SVG elements.

AAdityan Nainar

76% match

Loading thumbnail…

SVG Image Background

This example shows eight geometric shapes—four rectangles and four circles—arranged in a grid, each filled with a different placeholder image from LoremPixel and outlined with a categorical color from D3’s `schemeCategory10`. The visualization demonstrates how SVG patterns can embed raster images via the `pattern` element and `image` reference. Using D3 v4’s selection and append methods, the code defines a pattern for each shape ID and then applies the pattern as the fill for each `rect` and `circle`, with `objectBoundingBox` units to tile the image evenly.

SSpaceActuary

76% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates how D3.js can generate and manipulate SVG elements to create a visual pattern. It creates 100 horizontal rectangles that span the full width of the browser window, with each rectangle positioned at increasing vertical intervals. The code uses D3’s `select` and `range` functions, along with a data join (`join('rect')`) to bind data to SVG `<rect>` elements. A mask with the ID `circle-mask` is referenced, though its definition is commented out, leaving the rectangles fully visible in the rendered output.

OOluro Olaoluwa

76% match

Loading thumbnail…

D3 Shapes SVG Fundamentals

This example demonstrates how D3 SVG masks can create geometric patterns from overlapping rectangular bands. Two sets of perpendicular stripes, each consisting of 100 horizontal and vertical rects, are filtered through circular mask shapes generated with the `symbol` API. The first mask uses a filled star symbol to hide the horizontal lines, while the second, inverted mask reveals the vertical lines through the same symbol shape. The code uses `d3.select`, `d3.range`, and `d3.symbols` with the `join` pattern to render the full-screen SVG grid.

Ssubratanp

76% match

Loading thumbnail…

Fork of SVG Fundamentals

Horizontal and vertical stripes cross an SVG canvas to form a grid, while two mask layers reveal or hide rows and columns based on overlapping d3 symbols. The code uses d3.select, range, join, and symbol to generate 100 rectangles in each direction, with masks built via d3.mask and inverted fills. Both masks position five symbol paths (from d3.symbols) across the center, controlling visibility of the striped pattern. The rendering relies entirely on SVG elements and D3’s data-join to create the layered visual effect.

GGeorgi Dimitrov

76% match

Loading thumbnail…

SVG + JS

This example uses JavaScript and the SVG API to construct a full-screen pattern of thin vertical and horizontal rectangles. It defines two SVG groups, each masked by a circle: one group displays vertical lines, the other horizontal lines, with the masks being inverses of each other. The resulting visualization shows a grid of perpendicular lines, with a circular region in the center showing only vertical lines, while the surrounding area displays only horizontal lines. The code programmatically creates SVG elements, including masks and groups, without using any external visualization libraries.

MMarta

75% match

Loading thumbnail…

D3 JS SHAPES

This example displays an interactive grid of horizontal and vertical stripes that intersect to create a dynamic pattern. The visualization uses D3.js to generate 100 rectangles along both the x and y axes on an SVG canvas, with each line masked by custom patterns containing all D3 symbols. Two masks are created—one inverted and one not—to alternate which lines remain visible as the symbols overlap. The code leverages `d3.range`, `d3.symbols`, and `d3.symbol` to populate the mask shapes, with each symbol scaled to 8000 units for visibility. The result is a geometric composition where the stripe intersections reveal distinct symbol shapes across the full viewport.

TTehran Mammadov

75% match