Skip to main content
SimilarExport ZIP
100%

stroke-pattern-fill

✓ Published0🌍 Public
11wheel
Last edited Sep 3, 2017
Created on Jul 6, 2017

Two overlapping random paths are filled and stroked with striped patterns, using SVG `mask` elements to combine both effects without the banding artifact that occurs when a pattern is applied directly to a stroke. The blue and red diagonal stripes are defined as `pattern` fills, while white `path` masks with thick strokes reveal the underlying rectangles. The animation re-renders the shapes each frame, with the example built on D3 v4 and utility libraries like lodash for data manipulation.

AI-generated description

A mask lets you use the same pattern for stroke and fill without a banding effect.

Used in The Word Choices That Explain Why Jane Austen Endures.

Similar vizzes

Loading thumbnail…

patterns masked

A grid of horizontal and vertical stripes is partially revealed through a circular mask, creating a layered pattern where the lines cross and overlap within the masked region. The visualization uses raw SVG APIs, including `document.createElementNS` to construct rectangles and a mask with a circle, alongside `setAttribute` to position elements. The stripes form a woven texture, and the mask highlights a central focal area while leaving the surrounding space empty.

Gguts
76% match
Loading thumbnail…

Fork of patterns masked

This example uses SVG masks to create a geometric pattern of horizontal and vertical stripes that disappear within a circular region. Two complementary masks (`circle-mask` and `circle-mask2`) control which stripes are visible, with the horizontal lines masked by a black circle and the vertical lines masked by its inverse. All elements are created dynamically using the native `document.createElementNS` API, rendering 100 rectangles in each direction without any external libraries.

Gguts
74% match
Loading thumbnail…

Fork of Fill & Stroke

This example demonstrates the visual contrast between filled and stroked SVG shapes—a rectangle, circle, and triangulated path each appear twice, once with solid fill and once with a white fill and black stroke. The rendering uses raw SVG elements (`<rect>`, `<circle>`, `<path>`) within an inline `<svg>` tag, with a white background rectangle. No JavaScript libraries are employed; the geometry is defined statically in the markup, and the path coordinates are hardcoded. The piece shows how fill and stroke alter the perception of identical forms.

AAdriana Giraldo
74% match
Loading thumbnail…

Fork of Fill & Stroke

Three pairs of SVG shapes—rectangles, circles, and triangular paths—demonstrate the visual difference between a default black fill and identical shapes with a white fill and black stroke. The top row uses plain fills, while the bottom row applies `stroke` and `stroke-width` attributes. Hand-coded path data with Bézier curves defines the triangle outlines. The static HTML page relies on raw Scalable Vector Graphics elements without any JavaScript libraries.

Kkavindubopitiya03@gmail.com
74% match
Loading thumbnail…

Stroke Dash Interpolation

A closed path, rendered as a dark stroke using a cardinal-closed line generator, loops through seven points on an SVG canvas. A dashed gray duplicate of the same path overlays it, while the dark stroke animates its `stroke-dasharray` from a zero-length dash to the full path length and back, creating a continuous drawing effect. The animation uses `transition.attrTween` with `d3.interpolateString` and `getTotalLength()` to compute the path length, cycling indefinitely via the transition’s `end` event. The example relies on D3 v3’s `d3.svg.line` and SVG path elements.

Mmbostock
73% match
Loading thumbnail…

Fork of Fill & Stroke

Three pairs of shapes—a rectangle, circle, and chevron-like path—demonstrate the contrast between default SVG fill behavior and explicit stroke styling. The first set renders with only black fill, while the second set adds a thick black stroke and white fill. The page uses raw SVG elements (`rect`, `circle`, `path`) directly in the HTML, with no external libraries. All shapes are drawn using basic geometric coordinates and path data on a 960×500 canvas, illustrating fundamental SVG rendering properties.

SSalahAnwer-dev
73% match
Loading thumbnail…

Fork of SVG Fundamentals

Horizontal and vertical stripes cross an SVG canvas to form a grid, while two mask layers reveal or hide rows and columns based on overlapping d3 symbols. The code uses d3.select, range, join, and symbol to generate 100 rectangles in each direction, with masks built via d3.mask and inverted fills. Both masks position five symbol paths (from d3.symbols) across the center, controlling visibility of the striped pattern. The rendering relies entirely on SVG elements and D3’s data-join to create the layered visual effect.

GGeorgi Dimitrov
73% match
Loading thumbnail…

SVG path animation

This example animates the stroke of SVG path elements to create a continuous drawing effect. It uses D3.js (v3) with a queue to load an external SVG file containing complex path data, then applies an infinite, looping transition. The animation interpolates the `stroke-dasharray` attribute using `d3.interpolateString` and `transition.attrTween`, calculating the path’s total length with `getTotalLength()` to reveal each path progressively. The paths are styled with CSS, setting a black stroke on a transparent fill.

KKoGor
73% match