Skip to main content
SimilarExport ZIP
100%

GNU parallel logo

✓ Published0🌍 Public
PPhilippe Rivière
Last edited Jul 27, 2017
Created on Jul 27, 2017

This example replicates the GNU parallel logo using D3.js (v4). A grid of nine groups is generated with `d3.range()`, each containing 15 rectangles positioned via `translate` and `x` attributes. The rectangles alternate black and white fills with gray strokes, creating a barcode-like pattern. Below, styled `text` and `tspan` elements render the "GNU parallel" wordmark, with bold and italic segments, all within an SVG canvas. The data is procedural, derived from ranges rather than an external dataset.

AI-generated description

Challenged by @curran

mit Licensed

Similar vizzes

Loading thumbnail…

Symbol Fork of SVG Fundamentals - D3 (group)

This example shows a grid of horizontal and vertical bars overlaid on an SVG canvas, with a circular symbol-shaped mask revealing a cross-hatched pattern at the center. The visualization uses D3 v7 to generate 100 rectangles in each direction, positioning them by index and sizing them to cover the full viewport width and height. Two masks, created with `d3.symbol` and a star symbol type, are applied to the rectangles to alternate black and white fills, producing the contrasting central motif.

SSidney Oluoch
71% match
Loading thumbnail…

Fork of Fork of full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric composition using D3 v7 with SVG rendering, layering horizontal and vertical striped rectangles over masked symbol shapes. The code generates 50 horizontal and vertical bars positioned incrementally, then applies two masks—one containing a row of D3 symbols (circles, crosses, diamonds, etc.) and another with a large central triangle. The masks alternate inverted fills, creating intersecting cutout effects where the stripes show through the symbol shapes. The visualization updates dynamically to the browser window dimensions, demonstrating D3’s `range`, `symbol`, and `join` methods for procedural art.

Rroyable88
71% match
Loading thumbnail…

Fork of Fork of Fork of Fork of SVG Fundamentals - D3 (group)

This example demonstrates a grid-based pattern created by overlaying horizontal and vertical rectangles, each clipped by a circular mask to reveal a central window. The visualization uses D3’s `select`, `range`, `append`, and `join` APIs to generate 100 vertical and 100 horizontal bars, which are grouped in separate `<g>` elements. Two SVG masks (`circle-mask` and `circle-mask-2`) apply inverse coloring to the bars, producing a crosshatched effect that is visible only within the circular region. The code runs in React and renders fully with SVG, drawing on D3 version 7.6.1.

SSidney Oluoch
71% match
Loading thumbnail…

Fork of d3-get-it-right-04

This example creates a hundred horizontal and vertical striped rectangles overlaid to form a grid, with a symbol-shaped hole cut through the pattern. The code uses d3.select, d3.range, and d3.join to bind data to SVG rect elements. Two SVG masks, one inverted and one normal, are built with d3.symbol and a d3.symbols[0] path (a circle) to punch a central circular reveal. The result shows layered d3.mask and d3.symbol APIs combined on a full-window SVG canvas.

Tthymdi
71% match
Loading thumbnail…

Fork of with D3 and group elements

This example generates an SVG grid of horizontal and vertical rectangles, precisely 960 by 500 pixels, using the D3.js library. The grid is composed of two groups of rectangles, each with a stroke width of 8 pixels, and is overlaid with circular masks to create a focal point in the center. The code leverages D3's `select`, `append`, `attr`, and `range` methods to build the structure, along with custom `setAttributes` and `join` helpers for efficient element creation. The visualization demonstrates how to combine SVG masks with D3's data-driven rect generation to produce a geometric pattern with a central spotlight effect.

Pparag776
71% match
Loading thumbnail…

d3d3d3 3

This example generates a grid of 100 horizontal and vertical stripes, each using a mask to reveal differently-shaped symbol outlines at the center of the screen. The horizontal bars are masked by shapes like circles and crosses, while the vertical bars are masked by their inverses, creating a striking geometric interplay between foreground and background. Built with React and D3, the code uses `d3.range`, `d3.symbol`, and `d3.symbols` to construct paths, with masks defined via SVG and applied using the `mask` attribute. The visualization renders entirely through SVG, with a flickering effect caused by the contrasting masked regions.

GGusnaRWX
70% match
Loading thumbnail…

d3d3d3

This example shows a full-screen pattern of intersecting horizontal and vertical bars, each rendered as a set of thin SVG rectangles. The bars are generated using `d3.range` and joined to `rect` elements, but only the central circular area is visible due to two SVG masks. The first mask reveals the horizontal bars through a white circle on a black background, while the second mask hides the vertical bars in the same region using a black circle on white. The result is a cross-hatched grid with a circular cutout, built with React and D3 v7.

GGusnaRWX
70% match
Loading thumbnail…

Fork of D3 Implementation

Two sets of 100 striped rectangles overlay each other at right angles, revealing a circular window at the center through SVG masks. Built with d3.select and d3.range, the code generates horizontal and vertical bars filled with alternating colors. Each set applies a mask combining a full-screen rect with a 200-pixel-radius circle, one using a white circle on black and the other inverting the colors. The result forms a crosshatched grid visible only inside the overlapping circular region, rendered as vector SVG graphics scaled to the full browser viewport.

AArnulfotos
70% match