Skip to main content
100%

Lichen.js Pattern Showcase

✓ Published0🌍 Public
Aandrew-reid
Last edited Apr 11, 2018
Created on Feb 6, 2018

A gallery of animated chevron arc patterns built with D3 v5 and the Lichen.js library, rendered as SVG. The chevronArc.js module defines a custom arc generator with configurable inner/outer radii, start/end angles, and indents, producing pointed chevron segments. The index.html page combines this with Lichen.js to generate multiple circular pattern variants, with hover cursors on interactive elements.

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).

Similar vizzes

Loading thumbnail…

Lichen.js Pattern Showcase

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.

663anp3ca
93% match
Loading thumbnail…

Lichen.js Basic Example

This example demonstrates how to create a simple striped pattern using the Lichen.js library and apply it as a fill to an SVG rectangle. The code defines a `ln.stripe()` pattern with alternating crimson, yellow, and steelblue bands of varying widths. It then uses the pattern’s `.use()` method to fill a 960 by 500 SVG rectangle, leveraging D3 v4 to select the SVG element. Lichen.js generates the pattern definition in the SVG's `<defs>` section, and the example shows the basic workflow for creating and applying reusable patterns.

Aandrew-reid
79% match
Loading thumbnail…

Arcs and Chevrons

Arcs and Chevrons is a custom D3.js visualization that creates arc-shaped segments with pointed "chevron" tails at their starting angles, rendered as SVG. Using the d3-shape library, the example extends the standard arc generator to produce curved, tapered sectors with angled corners. The data is a simple hardcoded array of two arc objects, each specifying a start angle, end angle, and implicitly an inner/outer radius, which are drawn into a 500x500 SVG canvas. The custom chevronArc function computes the geometry for each arc, including corner tangents and tail coordinates, to generate the distinctive chevron-shaped ends. This demonstrates how D3's modular shape utilities can be adapted to create novel, non-standard geometric forms.

Aandrew-reid
79% match
Loading thumbnail…

Chevrons and Arcs 2

Three large blue chevron-shaped arcs radiate from the center of an SVG canvas, each spanning roughly 120 degrees with distinct start and end angles. The custom chevronArc function, built on d3-path, draws each arc as a curved band with pointed indentations at both the head and tail, creating arrow-like forms. The arcs are positioned at different radial offsets, with inner and outer radii of 150 and 200 pixels, and the view is centered in a 500 by 500 pixel space.

Aandrew-reid
73% match
Loading thumbnail…

Pattern Module Demo

This demo showcases a set of reusable SVG pattern generators for D3.js, implemented as custom functions in a module called d3Pattern.js. Six distinct patterns—stripes, plaid, squares, circles, symbols, and checkers—are each created as SVG <pattern> elements within a single SVG canvas. The patterns are applied as fills to six circles arranged horizontally, with each circle using one of the pattern types via the pattern's `use()` method. The patterns are defined in the SVG `<defs>` section and support configurable properties such as colors, stripe widths, angles, and opacity. The example demonstrates how to generate and apply SVG patterns dynamically with D3, using a default 960x500 SVG canvas. The code relies on d3-selection-multi for multi-attribute selections and renders entirely as SVG.

Aandrew-reid
72% match
Loading thumbnail…

Pattern Module Demo 2

Six circles in a row demonstrate six custom SVG pattern types generated by a reusable D3 module. The patterns include striped, plaid, square, symbol-based, dotted, and checkerboard designs, each created programmatically through the `d3.patternStripes`, `d3.patternPlaid`, `d3.patternSquares`, `d3.patternSymbols`, and `d3.patternDots` functions. Each circle uses a distinct pattern fill, with options such as custom colors, widths, angles, and opacity. The code relies on d3-selection-multi.v1 for attribute chaining and renders SVG with D3 v4.

Aandrew-reid
72% 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
70% match
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
70% match