Skip to main content
SimilarExport ZIP
100%

Stroke fun waterfall

✓ Published0🌍 Public
HHerst
Last edited Apr 7, 2018
Created on Dec 10, 2017

This visualization is a test harness for evaluating browser rendering oddities in SVG strokes and text. It displays a grid of waterfall-style test cases with varying text, stroke widths, font sizes, and opacity settings, all rendered using D3.js v4. The tool demonstrates differences between `paint-order` and double-painting techniques, as well as `geometricPrecision` and `spacingAndGlyphs` text-rendering options. Users can adjust parameters via a fixed control panel or URL query string to isolate specific rendering behaviors across different browser engines.

AI-generated description

A waterfall to test various things out and report various browser oddities.

Can also be set using the URL through the parameters usePaintOrder, useGeomPrec, text, textLength, fontSizeFactor, and strokeWidthFactor.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Fun with <text>

This demo shows three different SVG techniques for giving `<text>` elements a white outline so they remain readable on varied backgrounds: two stacked text elements with a thick stroke, one text element using the `paint-order` attribute, and a `<filter>` with `feMorphology`, `feColorMatrix`, and `feMerge` effects. A dark green backdrop provides contrast. The D3 v4 code includes zooming and panning via `d3.zoom`, and interactive controls adjust font size, stroke width, rotation, and other text properties. Users can set initial camera position and parameters through URL search parameters.

HHerst
74% match
Loading thumbnail…

text label test

This visualization demonstrates six distinct techniques for making text labels readable when placed on top of colored bars. It compares plain labels against those with background rectangles, SVG filters, paint-order strokes, and CSS text shadows, using black, blue, red, and yellow bars as backdrops. Built with D3 v5 and rendered as SVG, the example leverages SVG filter primitives like `feFlood` and `feComposite`, as well as CSS `text-shadow` and the `paint-order` property to enhance legibility. The code includes no data binding and is purely a static test of label styling approaches.

EEE2dev
72% match
Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example demonstrates the styling and rendering capabilities of SVG shapes and paths in a web browser. The visualization employs CSS classes to apply a consistent black stroke with a width of 10 units to line elements, while path elements within those lines receive a rounded join and cap, plus a teal color (#25656d). The page embeds D3 version 7.8.5 via a CDN link, logging the library to the console. The minimal body and overflow-hidden styles suggest a fullscreen presentation of the geometric elements.

HHızır Gökhan Uyduran
72% match
Loading thumbnail…

D3 testing

A collection of hand-drawn SVG shapes and paths demonstrates how to style vector graphics with D3 v5. The example renders a static composition of lines and curved paths on a 960×500 SVG canvas, using the `select` method to target the SVG element. CSS classes define stroke properties, including color, width, and round line caps and joins, while the `overflow: hidden` body style trims the viewport. The code focuses on basic SVG styling and selection patterns rather than data binding or dynamic updates.

Mmarissaverdonck
72% match
Loading thumbnail…

circle-stroke

A small cluster of circles illustrates an inverse relationship between stroke width and radius. Each circle’s red outline is drawn with a stroke width proportional to 1/r, so smaller circles have thicker strokes and larger circles thinner ones, while all strokes contain roughly the same number of red pixels. The composition is generated with D3.js, using SVG `circle` elements and inline `strokeWidth` bindings, with positions placed on a central layout. The code also uses lodash (via `d3_.js`) to handle array transformations, and the visualization is rendered as an animated SVG scene.

11wheel
71% match
Loading thumbnail…

Fun with &lt;text&gt;

This example demonstrates three different SVG techniques for adding a white outline to text so it remains legible over any background. The first uses two stacked `<text>` elements, the second relies on the `paint-order` attribute, and the third applies a `<filter>` with `feMorphology`, `feColorMatrix`, and `feMerge`. The map is interactive with d3.zoom for panning and zooming, and controls adjust font size, stroke width, rotation, and other text properties.

HHerst
71% match
Loading thumbnail…

stroke-width

This example demonstrates the visual impact of varying stroke widths on a simple pattern. It presents five white squares, each filled with vertical line textures of increasing thickness, from one to nine pixels, while the squares’ own black outlines also grow in width. The visualization is built using D3.js (v5) and the `textures` library, specifically calling `textures.lines().orientation().strokeWidth()` to generate each pattern within an SVG canvas. The code directly manipulates SVG `rect` and texture attributes to create a clear comparative scale.

Zzoniyac
70% match
Loading thumbnail…

scrollytest6

This example, titled "scrollytest6," is an animated, scroll-driven data visualization that combines SVG and WebGL rendering within the D3.js framework. The visualization demonstrates a technique for synchronizing narrative content with user scrolling, likely transitioning between different chart states or datasets as the user progresses through the page. The visualization uses D3's data parsing capabilities (d3-dsv) and custom scroll-handling logic to create a dynamic, story-telling experience. The rendering is hybrid: SVG is used for crisp, interactive elements while WebGL handles performance-intensive graphics, with animations smoothly tying the scroll steps together. The example is part of a series of scroll-based experiments by the author 35degrees, building upon earlier iterations (scrollytest1-5) to refine the technique. The visualization is built with D3 and licensed under MIT.

335degrees
70% match