Lichen.js Basic Example

100%

Lichen.js Basic Example

✓ Published0🌍 Public

Last edited Apr 13, 2018

Created on Feb 6, 2018

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.

AI-generated description

A very simple demonstration of lichen.js patterns with d3.js.

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

83% match

Loading thumbnail…

Lichen.js Pattern Showcase

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.

Aandrew-reid

79% match

Loading thumbnail…

SVG Stripes

A striped pattern fills a large rectangle, with gray diagonal lines created by a tilted SVG pattern. The example uses D3.js version 3.5.5 to construct an SVG `defs` element containing a `pattern` that rotates 45 degrees, then applies it as the fill for a single `rect` via CSS. The pattern itself is drawn with a simple `line` element, and the rectangle is positioned and sized through D3’s attribute chaining. This demonstrates how to define reusable SVG patterns programmatically with D3.

SSpaceActuary

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

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

71% match

Loading thumbnail…

Fork of HTML Starter

This example showcases a geometric pattern created by layering two sets of parallel stripes overlaid with circular masks. It uses the D3.js library to build SVG elements and generate the mask paths, drawing on the `range`, `select`, `append`, `attr`, and `symbol` APIs from D3. The code creates a 100×100 grid pattern where overlapping translucent stripes form a subtle checkerboard effect within a central circle, demonstrating the use of reusable SVG masks and declarative data-driven rendering.

Bbhattrahul007

70% match

Loading thumbnail…

SVG fundamentals

This example demonstrates the SVG fundamentals of creating and styling basic shapes. It generates 100 rectangular elements, each positioned 20 pixels apart with a 10-pixel width, creating a striped pattern across the canvas. The code uses the Document Object Model’s `createElementNS` method to construct SVG nodes and sets attributes like `x`, `width`, and `height` directly. The visualization uses no external libraries, relying instead on native browser APIs to build a static grid pattern from repetitive geometric primitives.

MManya Sohal

68% match

Loading thumbnail…

Starting with D3

This example creates a full-screen SVG pattern of horizontal and vertical stripes using D3’s `select`, `range`, and `join` methods. Two sets of 100 rectangles are generated, each masked to reveal or hide a circular region at the center. The code uses SVG `mask` elements with black-and-white circles to produce a cross-shaped visual intersection. The data is synthetic, generated via `range(n)`, and rendered entirely with D3 v6 and SVG attributes.

Pphilmae

68% match