quilt block

100%

✓ Published0🌍 Public

Last edited Oct 3, 2016

Created on Sep 30, 2016

The visualization displays a grid of 7 by 10 quilt squares, each filled with a randomly selected geometric texture pattern. Every 500 milliseconds, the entire grid regenerates with new textures and color combinations, creating an animated patchwork effect. The code uses d3.js v4 to construct SVG rectangles, textures.min.js to generate patterns like lines, circles, and paths, and d3-timer to manage the looping updates. Each square’s fill is set to a texture URL, producing a continuously shifting mosaic.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

quilt block (random texture)

This example generates a 50-by-30 grid of colored and textured rectangles, forming a quilt-like pattern where vertical bands define colors and horizontal bands define texture patterns. The visualization uses D3 v4 with SVG rendering, plus the textures library to create circle and path-based patterns. A nested ordinal scale maps three color categories from ColorBrewer to three texture generators, applying each texture in each color. The code initializes texture definitions using D3’s selection `.call` method, then binds grid data to rectangles positioned in a fixed 25-pixel cell layout.

Aannabsmylie

91% match

Loading thumbnail…

quilt block (random texture)

This example generates a quilt-like grid of 50 by 30 rectangles, each filled with one of three random texture patterns. The textures—lines, circles, and lighter lines—are applied using the `textures` library, and each cell selects a texture via a random index. The SVG is built with D3 v4, using data joins to create rows and columns, while the texture API’s `.url()` method assigns the fill. The result is a visually varied, patterned mosaic whose texture placement is entirely stochastic.

Aannabsmylie

90% match

Loading thumbnail…

quilt block

A quilt-like grid of 1,500 small squares fills an SVG canvas, each tile rendered with a yellow circular texture pattern over a dark background. The code generates the grid data programmatically with nested loops, assigning each cell an x, y, width, and height. It uses the textures library’s `textures.circles()` to create the pattern, applies it via `t.url()` as the fill, and relies on D3 v4 selections to append and position the rectangles.

Aannabsmylie

90% match

Loading thumbnail…

quilt block (random color)

A grid of 1,500 small squares fills the screen, each cell randomly assigned a harmonious golden-ratio-based color from a custom HSL-to-RGB function. The visualization shows how a quilt-like pattern emerges from uniform geometry with varied fills. Built with D3 v4, the code generates row and column data arrays, then binds them to SVG rectangles using `selectAll`, `data`, and `enter`. The `randomColor` closure iterates through hues via the golden ratio, while white strokes separate each square, creating a subtle grid structure.

Aannabsmylie

89% match

Loading thumbnail…

simple grid

A 200-by-200 pixel SVG canvas displays a 4x4 grid of 50-pixel squares, each filled with the same circular texture pattern. The example uses D3 v4 to append the SVG container and rect elements, while the texture is generated with the textures.js library, specifically via `textures.circles()`. Each square’s fill is set to `t.url()`, which returns a data URI referencing the shared texture, demonstrating how to apply a repeating pattern across multiple shapes without duplicating the pattern definition.

Aannabsmylie

75% match

Loading thumbnail…

canvas-squares

The visualization displays a grid of small squares that animate across the canvas in rhythmic waves. Using D3.js and the Canvas API, the code schedules repeated intervals that spawn rectangular shapes, which grow from thin lines into full squares while moving in alternating directions. Each square’s animation is driven by a custom timer that interpolates between start and end coordinates, with colors cycling through a palette of blues, purples, and greens. The effect creates a cascading, kinetic pattern across the full viewport, with random elements influencing which squares appear and how they stagger.

11wheel

73% match

Loading thumbnail…

orientation

A 2x5 grid of black-bordered squares displays ten distinct texture fills generated by the textures.js library. The patterns include hexagons, crosses, caps, woven lines, waves, squares, circles, a complemented circle set, and diagonally oriented lines. D3.js v5 selects the SVG element and appends each rectangle, assigning the texture’s `url()` as the fill style via `d3.select('svg')` and chained `.attr()` calls. The example demonstrates the variety of available texture API options, including shape, size, and line orientation parameters.

Zzoniyac

72% match

Loading thumbnail…

Square Grid

A grid of gray squares fills the view, with each square representing a single unit, arranged so that rows of ten, blocks of one hundred, and groups of one thousand are visually distinct. The count, displayed as a large number, animates upward or downward as the grid randomly updates to a new total between zero and ten thousand, using transitions to add or remove squares. The visualization uses D3 v4 with data joins and tweens to interpolate the numeric label, while the grid’s layout is computed via `d3.range` and positional math. This example is forked from Mike Bostock’s original block.

GGerardoFurtado

72% match