Wibbly-wobbly behavior in Chrome (Blink)

100%

Wibbly-wobbly behavior in Chrome (Blink)

✓ Published0🌍 Public

Last edited Aug 11, 2017

Created on Aug 8, 2017

A continuously resizing SVG `<image>` element and a yellow rectangle reveal a rendering discrepancy in Chrome’s Blink engine: despite `preserveAspectRatio="xMinYMin"` on both the image and its referenced SVG, the graphic stretches while the rectangle stays fixed. Using d3.v4, the code animates both elements’ widths from 128 to 192 pixels over ten seconds via `transition.attr`. The effect intensifies with browser zoom, highlighting a bug where Blink ignores the image’s aspect-ratio constraint when loading external SVG files.

AI-generated description

Increase the zoom factor for a stronger effect on Google Chrome.

The widths of the <image> element inside the SVG is being changed continously but since preserveAspectRatio is set to xMinYMin (i.e. aspect ratio will be preserved and image will stick to topleft corner) it should have no effect. It does have an effect though in Mozilla Firefox (Gecko) as of version 54 and Google Chrome 61 (Blink). In latter the effect is even more pronounced when zoomed in.

(On a side note, the preserveAspectRatio attribute is set inside the SVG and on the image element, in Chrome latter does not override former if SVG images are referenced because of http://crbug.com/499373. Since in this example both attributes are set to the same value it makes no difference.)

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

CMYK halftone printing - chrome hack

This example demonstrates CMYK halftone printing by animating a continuously morphing color pattern. The animation cycles through the rainbow spectrum, converting each RGB color to CMYK values that determine the radii of dots in four rotated, multiply-blended patterns. The visualization uses D3 v4 with SVG patterns and a d3.timer to drive the animation, while a d3.scaleSqrt maps each CMYK component to circle radius. The code also includes a Chrome-specific fix that prevents rendering issues when any CMYK value reaches zero.

KKcnarf

66% match

Loading thumbnail…

van Wijk Smooth Zooming

A hexbin mesh forms the backdrop as two circular markers—a brown start point and a steelblue end point—define a zoom transition. The view continuously interpolates between these two camera positions using `d3.interpolateZoom`, which smoothly scales and translates the entire SVG group. The animation runs in an infinite loop, reversing direction each time it reaches a marker. The code builds the mesh from `d3.hexbin` and applies the zoom tween via `attrTween` on the group's transform.

Mmbostock

65% match

Loading thumbnail…

Border Animation

This example demonstrates a dynamic, organic border using CSS animations. A white, irregularly-shaped blob continuously morphs through different border-radius configurations, including a perfect circle at the midpoint, before shifting to a yellow hue. The animation is driven by the `borderrr` keyframes within the stylesheet. The page uses a minimal HTML structure with an SVG element and a `bundle.js` script, though the primary visual effect is achieved through pure CSS, not JavaScript or D3. The code references D3 v5 via CDN but the actual animation relies on CSS `@keyframes` and the `border-radius` property.

AAndrew-Kiwa

64% match

Loading thumbnail…

blur-transition

Four wavy line charts fade in and out against alternating black and white backgrounds, with each transition blending the strokes into a cohesive, gooey mass before snapping back into crisp lines. The animation cycles repeatedly, morphing between the two color schemes while new random line data replaces the old. It uses D3.js to generate the SVG paths and axes, applying SVG filters—`feGaussianBlur` and `feColorMatrix`—to create the blur-and-chrome effect, with `transition` calls animating the filter attributes and background color changes.

11wheel

63% match

Loading thumbnail…

SVG Geometric Zooming

A scatterplot of 2,000 normally distributed points demonstrates geometric zooming in SVG. The visualization shows how the entire coordinate system scales uniformly, with all circle radii increasing proportionally as the view magnifies. Built with D3 v4, the example uses `d3.zoom` attached to a background rectangle, applying the current transform directly to a group element containing all points. The code generates random positions via `d3.randomNormal` and renders each point as a circle with a `translate` transform, allowing the zoom handler to scale and pan the whole scene without recalculating individual positions.

Mmbostock

63% match

Loading thumbnail…

Chromatic Hover Sol LeWitt Art with D3

This example generates an abstract, grid-based composition inspired by Sol LeWitt, rendered as an SVG using D3.js. Two sets of thin rectangular strips, one horizontal and one vertical, are drawn across the full screen and masked by overlapping circular regions, creating a dynamic interplay of visible and hidden lines. A CSS animation continuously toggles the SVG’s fill and background colors between black and white, producing an inverted chromatic hover effect. The code relies on D3 selections, `range()`, and SVG `mask` elements to construct and layer the visual.

YYiorgos Bagakis

63% match

Loading thumbnail…

Transform Transitions

A grid of colored squares animates in response to mouse hovers, demonstrating smooth interpolation between different 2D SVG transforms. Each rect transitions from its original translate to a combined translate, scale, and rotate, then shrinks and fades before being removed. The code uses d3.v3 transitions with `.attr("transform")` to leverage matrix decomposition, automatically decomposing transforms into canonical translate, rotate, scale, and skew components. The visualization is built with a data-joined SVG rect per grid cell, filled with HSL colors based on position, and rendered entirely through D3’s selection and transition APIs.

Mmbostock

63% match

Loading thumbnail…

Restricted zoom behavior in d3

This example demonstrates restricted zoom behavior in d3.v5, bounding pan and zoom within a rectangular viewport. A field of 300 randomly positioned and sized circles is rendered in an SVG, and users can scroll to zoom up to 50x and drag to pan; when zooming out to the original scale, the view snaps back to the full extent. The implementation uses `d3.zoom()` with a custom `on("zoom")` handler that clamps translation based on viewport dimensions and scale, then updates the `<g>` element’s `transform` attribute, applying the constrained translation and scale.

GGerardoFurtado

63% match