quilt block (random texture)

100%

quilt block (random texture)

✓ Published0🌍 Public

Last edited Sep 30, 2016

Created on Sep 29, 2016

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.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/annabsmylie/'>annabsmylie</a>'s block: <a href='http://bl.ocks.org/annabsmylie/0ad5c50200d5ef47a0129b99b1db004c'>quilt block</a>

forked from <a href='http://bl.ocks.org/annabsmylie/'>annabsmylie</a>'s block: <a href='http://bl.ocks.org/annabsmylie/71684611ee9f25d417dea96baaee9bcb'>quilt block (random color)</a>

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

95% match

Loading thumbnail…

quilt block

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.

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

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

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

74% 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…

Texture Test

A grid of 144 circles displays a factorial combination of three colors and three textures, creating a visual test for encoding categorical data. The circles are grouped into nine blocks, each pairing one color from a ColorBrewer palette with one texture from the Textures.js library, including lines, circles, and paths. Every second, a transition animates the circles to new random radii, using D3’s `transition.attr` and `setInterval`. The code builds nested ordinal scales to map color and texture pairs, generating unique SVG patterns via `textures.lines()`, `textures.circles()`, and `textures.paths()`.

Aannabsmylie

70% match

Loading thumbnail…

orientation

This example displays ten square panels arranged in two rows, each filled with a distinct geometric pattern such as hexagons, crosses, woven shapes, waves, and lines. It demonstrates the textures library’s ability to generate SVG patterns for filling shapes. Using d3 selections and the textures API, the code creates ten texture objects and applies them to the rectangles via `style.fill` with their `.url()` references.

Zzoniyac

70% match