laggy-pattern-fill

100%

laggy-pattern-fill

✓ Published0🌍 Public

Last edited Mar 16, 2018

Created on Mar 16, 2018

Clicking the teal bar toggles a pattern fill on 30 moving rectangles, demonstrating a sharp performance drop from 60 to 10 fps. The example compares SVG solid fills against `url(#grey-lines)` pattern fills as the rects animate via a `d3.timer`. It uses D3 selections and `attr` updates on an SVG canvas.

AI-generated description

Why is moving a rect with a pattern fill so laggy?

My laptop can animating 1000 solid rects at 60 fps, but 30 pattern filled rects slows down to 10 fps!

Similar vizzes

Loading thumbnail…

stroke-pattern-fill

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.

11wheel

71% match

Loading thumbnail…

Fork of D3 Selection Exploration

Two clusters of thin vertical rectangles orbit and pulse around a central point, alternating between red and pink fills as they shift position every frame. The animation runs on a 60fps interval, regenerating a 30-point dataset from sine and cosine functions to update each rectangle's x, y, and fill properties. The example uses D3 v6 selections with `.data()` and `.join("rect")` to bind the dynamic data to SVG elements, while the commented-out circle code and `vizData` module suggest alternative rendering approaches.

MMichael Bergerson

70% match

Loading thumbnail…

SVG + D3

A full-screen SVG pattern of 100 horizontal and vertical bars alternates in opacity according to two circular masks, revealing a central disc and its inverse. Using D3 v7, the code appends `rect` elements via `selectAll().data().join()`, sizing them by window dimensions. The masks are defined in SVG by combining a background `rect` with a `circle`, where white reveals and black conceals.

MMarta

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

69% match

Loading thumbnail…

Fun-animation

This example shows a screen-filling SVG animation of thin vertical lines that pulse outward into thicker bars over time. A circular mask reveals the animation at the center, with the mask radius itself expanding and contracting rhythmically. The code generates lines with a gradient color scheme based on their horizontal position, skipping every third line, and animates a subset of lines using SVG’s native `<animate>` element. The visualization uses raw JavaScript and the SVG DOM API, with no external libraries.

GGabriel Ing

68% match

Loading thumbnail…

Circles

A field of 1,000 small circles drifts randomly across an SVG canvas, wrapping around the edges when they exit the viewport. A text label in the corner displays a live frames-per-second counter. The animation uses `d3.timer` to update each circle's `cx` and `cy` attributes every frame, with positions stored in a data array generated from `d3.range(1000)` and `Math.random`. The code runs on D3 v3 and renders purely with SVG elements.

Mmbostock

68% match

Loading thumbnail…

Bars

Fifteen vertical bars of varying heights animate smoothly against a dark background, each pulsing up and down in a wave-like pattern. The bars shift in height based on a sine function, producing a continuous, flowing motion that changes over time. Using D3.js v7, the visualization renders SVG rectangles with a band scale for positioning and an ordinal color scale with pastel tones, while a `setInterval` loop drives the animation at 60 frames per second.

EErik Sundahl

68% match

Loading thumbnail…

nyc-d3-live-code

This example demonstrates interactive SVG animations built with d3.v3. A row of circles oscillates vertically, first transitioning to a flat line, then responding to mouseover events with animated shifts in amplitude. A recursive rectangle-drawing function adds shrinking squares, and hovering over a rect triggers a d3.transition that randomly repositions it and changes its fill color. The sketch uses d3.select, d3.range, .transition(), and event listeners on SVG shapes.

11wheel

67% match