Lichen.js Pattern Showcase

100%

Lichen.js Pattern Showcase

✓ Published0🌍 Public

Last edited Oct 9, 2018

Created on Oct 9, 2018

This block showcases the variety of pattern-generating methods available in Lichen.js, a utility for extending D3. Rendered as animated SVG, the display cycles through multiple pattern types, including chevron arcs, plaids, and stripes, with some patterns' parameters limited by the UI. The chevronArc.js module demonstrates the library's low-level path construction, using custom arc calculations to draw notched chevron shapes based on inner/outer radii, start/end angles, and indent values. The visualization highlights the flexibility of the library while acknowledging its interface constraints.

AI-generated description

A more formal attempt at creating a utility to extend d3.js, lichen.js.

This block shows some of the methods of some of the patterns in the library. In some cases the user interface limits setting more complex method parameters (such as multiple widths for plaid and stripe patterns).

forked from <a href='http://bl.ocks.org/Andrew-Reid/'>Andrew-Reid</a>'s block: <a href='http://bl.ocks.org/Andrew-Reid/1d835f33b0f0d1a730f84ffdee8f15c5'>Lichen.js Pattern Showcase</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Dynamic pattern animation

This example demonstrates interactive map-based drawing with dynamically animated SVG patterns. Users draw polygons or rectangles on a Leaflet map, selecting between none, diagonalHatch, or diagonalHash pattern fills via a dropdown control. The D3.js library animates the selected patterns—diagonalHatch drops and diagonalHash spins—while a separate toggle applies a blur filter to reveal hardware acceleration differences across browsers. Rendering uses Leaflet’s SVG overlay pane, with controls built through Leaflet’s L.Control extension API.

KKoGor

74% match

Loading thumbnail…

Gist 67b47524ed8ed829d021

This animated SVG visualization, rendered with D3.js, explores how geometric forms can be generated through code. The page loads a script called `circle-lattice.js` that draws a grid of small, semitransparent red rectangles, each with a faint stroke trail that animates to show their movement or placement over time. The layout is minimal—a single heading "Scripts" above the canvas—and the emphasis is on the lattice of shapes as they are built and possibly repositioned, revealing structural patterns through the animation. The visualization uses D3's data-binding and SVG rendering to create a dynamic, generative composition.

11wheel

72% match

Loading thumbnail…

Circular Geometric Patterns

This interactive visualization cycles through circular geometric patterns, drawing a series of overlapping circles and a connecting polyline at the center of an SVG canvas. The pattern evolves automatically as a timer increments both the number of nodes and a "skip factor" that determines the angular spacing between points. Built with React and D3 v5, it uses `d3.range`, `d3.line`, and `d3.curveLinearClosed` to generate points along a circle and construct the path, while React's `useState` and `useEffect` drive the animation loop.

CCurran Kelleher

69% match

Loading thumbnail…

Radial Colors

This radial visualization generates a circular patchwork of colored arcs by iterating a Lindenmayer system 20 times, starting from a single symbol and expanding it through string-rewriting rules. Each iteration produces a ring of segments, with arc angles determined by d3.scaleBand and radii mapped from the iteration count. The SVG paths are rendered using d3.arc, while colors derive from d3.schemeAccent via d3.scaleOrdinal. The pseudorandom pattern emerges from the L-system rules defined in the code, with data generated procedurally rather than sourced externally.

CCurran Kelleher

68% match

Loading thumbnail…

pattern

A fruit bowl of circles animates as apples, lemons, and peaches are added, removed, or changed over time. This example uses D3 v5’s `select` and `scaleOrdinal` for colors and radii, with a custom transition to animate circle sizes and positions. The SVG rendering supports the dynamic updates triggered by timed `setTimeout` events, demonstrating data-driven state changes in a declarative D3 workflow.

YYanxxx447

68% match

Loading thumbnail…

Circular Geometric Patterns

A grid of overlapping circular geometric patterns radiates from the center of an SVG canvas, each layer composed of translucent circles and a blue polyline connecting nodes arranged around a circle. The visualization iterates through combinations of node counts and skip factors, generating distinct starburst-like shapes. Using React, it renders each pattern as a `Star` component that computes node positions with trigonometry and draws circles plus a `d3.line` path with `curveLinearClosed`. The code leverages `d3.range` to generate data and controls parameters like radius and center coordinates.

CCurran Kelleher

68% match

Loading thumbnail…

Idempotent Rendering Pattern

This example demonstrates the idempotent rendering pattern for D3 visualizations, showing a scatter plot of penguin bill length versus bill depth using a clean, green background. The chart renders circles for each data point and includes labeled axes via a reusable `axes` module. The code applies the join pattern with `selection.selectAll(...).data([null]).join(...)` for both SVG elements and axes, ensuring that updates are deterministic and render correctly on each call. It uses `scaleLinear` and `extent` to compute scales, with margins and dimensions passed through a shared state object.

SSubhendu Karmakar

68% match

Loading thumbnail…

Fork of orientation

This visualization showcases ten different texture patterns—hexagons, crosses, caps, woven, waves, squares, circles, complement circles, lines with varying orientations, and nylon—each rendered inside a distinct square outlined in black. Built with D3.js and the texture.js library, the patterns are generated using textures.paths(), textures.circles(), and textures.lines(), with each texture applied as a fill to an SVG rectangle via t.url(). Custom colors, stroke widths, and backgrounds differentiate the patterns.

Zzach b.

68% match