Nunchuks

100%

✓ Published0🌍 Public

Last edited May 19, 2016

Created on May 18, 2016

This example demonstrates how nested SVG `<g>` elements inherit their parent’s transform, creating a chain of rotating, scaling, and translating line segments that resembles a pair of nunchuks. The code uses D3 to append four nested groups, each one calling a function that draws a horizontal line. During animation, each group applies its own `rotate`, `translate`, and `scale` transforms via `attr`, with rotation speeds doubling at each level, while `requestAnimationFrame` drives the continuous motion.

AI-generated description

An example of the concept of nested SVG <g> elements, each having their own transform. This shows how the transforms nest such that the parent transform is applied to all children.

Built with blockbuilder.org

<div align="center"><a href="http://www.simplehitcounter.com" target="_blank"><img src="http://simplehitcounter.com/hit.php?uid=2105758&f=16777215&b=0" border="0" height="18" width="83" alt="web counter"></a></div>

mit Licensed

Similar vizzes

Loading thumbnail…

Scale & translate

A short, looping D3.js v4 animation demonstrates the interplay of SVG transform operations. It starts with four circles, one red at (100,100) and three at the origin, and then sequentially applies `translate` and `scale` transforms via `transition()` calls. The example highlights how `scale()` scales the coordinate system, not just the element, showing that a subsequent `translate` must compensate for the scaling factor to maintain a desired position. The circles use SVG attributes and fill-opacity styling.

PPatrick Wojda

71% match

Loading thumbnail…

Nested Elements

This example demonstrates nested SVG elements—groups containing circles and text—animated through a fruit bowl metaphor. D3 selections and data joins update the visualization as fruits are eaten or replaced, with transitions smoothly moving groups and resizing circles. The code imports `scaleOrdinal` for color and radius mapping, alongside `select` and `range` from d3.v7, and uses `transition().duration()` to animate changes.

PPenguin-jpg

71% match

Loading thumbnail…

SVG Playground

This example shows three identical SVG figures arranged in a row, each displaying a yellow circle with a rectangular hat, but dressed in different colors. A separate group of green lines, one straight and one zigzag polyline, crosses below them. The code uses raw SVG elements like `circle`, `rect`, `line`, and `path` within grouped `<g>` tags, applying transforms, fills, strokes, and CSS classes. D3 v6 is loaded for scripting, but the visualization relies entirely on static SVG markup without data binding or dynamic updates.

Ddabrze3@gmail.com

70% match

Loading thumbnail…

Gist f4dd5c4b997e02efe9be

Four animated SVGs show a square deforming as its four corner points move along a continuously shrinking path. Each panel uses a different rule for selecting the next point: constant interpolation, gradually increasing step size, random step length, and a step inversely proportional to the remaining distance. The code relies on `d3.select`, `transition`, and `setInterval`, drawing line segments with `path` elements while updating point positions via the geometric helper functions defined in `geomtry.js`.

11wheel

70% match

Loading thumbnail…

Fork of Shapes with SVG jls

This example shows nested SVG shapes stacked to demonstrate hierarchical grouping and transform inheritance. The visualization places circles and rectangles inside `<g>` elements, with successive groups translating downward and applying fills, strokes, and explicit overrides for individual shape colors. A separate group containing a line and a path is styled via CSS using the `.lines` class, which sets stroke color and width. The code uses raw SVG markup within an HTML page, leveraging React as the framework and scaling the entire composition with a `scale()` transform.

Jjlspangl

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

69% match

Loading thumbnail…

Multiple SVGs

Three stacked SVG panels show parallel animated sequences of circles moving horizontally across colored backgrounds. Each SVG contains ten circles driven by an array of numeric values, with one panel displaying a static blue dot alongside an expanding green-outlined circle, while the other two panels animate yellow and red outlines using D3 v5 transitions. The example demonstrates creating multiple independent SVG containers via d3.select and append, applying staggered transition.attr calls with a two-second duration to position circles at calculated coordinates.

NNita

69% match

Loading thumbnail…

rotating the circles

Three SVG circle groups swap positions and sizes in a looping rotation, with circles entering and exiting as the dataset cycles through three IDs. The animation uses D3 v4 selections with keyed data joins, `transition()` for staggered movement, and `attr("r")` to grow new circles from radius zero while shrinking departing ones. The example demonstrates D3’s enter, update, and exit pattern with data-driven `cy` coordinates and a one-second duration, all rendered in animated SVG within a minimal blockbuilder setup.

PPatrick Wojda

69% match