linked-gears

100%

✓ Published0🌍 Public

Last edited Aug 22, 2016

Created on Jul 4, 2014

This example shows a system of linked gears rotating in continuous animation, rendered with D3.js as SVG. Each gear is composed of layered shapes—sun, planet, center, moon, and star—each with its own fill color, suggesting a stylized solar system or mechanical model. The visualization demonstrates hierarchical, orbiting motion: the center drives the planets, which in turn carry moons, all constrained by a ratio that makes the gears mesh. User interaction is limited to the form element, which is empty in this case.

AI-generated description

Similar vizzes

Loading thumbnail…

Epicyclic Gearing

This example visualizes an epicyclic gearing system, showing the relative rotation of a sun gear, three planet gears, and an outer annulus. A menu in the top-left fixes any of the three gear types as the frame of reference, altering the apparent motion of the others. The gears are drawn using SVG paths generated by a custom `gear` function, which defines tooth shapes and central holes. The animation continuously updates each gear's rotation via `d3.timer` and applies a transform to the frame group to compute the relative motion based on gear radius.

Mmbostock

83% match

Loading thumbnail…

Epicyclic Gearing

This example visualizes an epicyclic gear system, showing how a sun gear, three planet gears, and an outer annulus mesh and rotate together. A radio-button menu in the top-left switches the frame of reference, fixing either the annulus, planets, or sun in place while the other gears orbit accordingly. The animation runs via `d3.timer`, rotating each gear group based on its radius and tooth count, while `frame.attr("transform", ...)` applies the rotation offset for the selected reference. The code uses D3 v4 with SVG rendering, building each gear’s toothed path from trigonometric calculations and applying `fill-rule: evenodd` to create the cut-out centers.

IIgathi

82% match

Loading thumbnail…

Epicyclic Gearing (with svgsaver)

The visualization depicts a working model of an epicyclic gear system, with sun, planet, and annulus gears rendered as rotating SVG paths. It uses D3.js to animate the gears and update the frame of reference based on user selection via radio buttons. Clicking the graphic triggers the SvgSaver library to serialize the current SVG state into a downloadable file, demonstrating an interactive animation with export functionality.

HHypercubed

77% match

Loading thumbnail…

Fork of Exercise 1: SVG Fundamentals

Two gears made of interlocking cogs rotate continuously in opposite directions, driven by a small JavaScript animation embedded in the SVG. The code uses `animateTransform` with a `rotate` type to spin each gear group around its computed center, with speeds of 16 and 10 seconds per revolution. The gears are drawn as path elements with a brown fill and stroke, scaled and translated into place. The example demonstrates fundamental SVG manipulation and animation without external libraries.

Aape-ape-ape

75% match

Loading thumbnail…

Gist 67b47524ed8ed829d021

This animated SVG visualization, rendered with D3.js, explores how geometric forms can be generated through code. The page loads a script called `circle-lattice.js` that draws a grid of small, semitransparent red rectangles, each with a faint stroke trail that animates to show their movement or placement over time. The layout is minimal—a single heading "Scripts" above the canvas—and the emphasis is on the lattice of shapes as they are built and possibly repositioned, revealing structural patterns through the animation. The visualization uses D3's data-binding and SVG rendering to create a dynamic, generative composition.

11wheel

74% match

Loading thumbnail…

wheels on wheels on wheels

This interactive visualization animates layered rotating wheels, tracing complex rosette patterns onto a black canvas. Each wheel’s radius, rotation direction, and phasing can be adjusted via the dat.GUI controller, while a random mode continuously generates new designs. The SVG paths, stroked in white with the third wheel’s position marked in red, update in real time. Built with D3.js for rendering and dat.GUI for controls, it explores cyclic motion and symmetry, allowing users to stop randomization and fine-tune parameters to see the pattern evolve dynamically.

KKcnarf

73% match

Loading thumbnail…

Accelerate, Then Coast III

Two large gray and brown gears rotate in interlocking motion, comparing three easing functions via radio buttons: accelerate-then-coast, cubic-in-out, and linear. The animation uses D3 v3’s `d3.transition` and `attrTween` to tween the gear rotation, with custom easing functions `easeAccelerateThenCoast` and `easeReflect` controlling the speed profile. SVG paths drawn by `pathGear` define the gear teeth, while the form switches modes to highlight how each easing affects maximum angular speed and smooth acceleration.

Mmbostock

73% match

Loading thumbnail…

SVG Fundamentals - Orbiting Planet

This example demonstrates a simple animated solar system using SVG primitives. A gradient-filled circle represents the sun, while a smaller gradient-filled planet moves along an elliptical orbit path represented by a dashed grey ellipse. The animation is driven by SVG’s built-in `<animate>` elements, which update the planet’s `cx` and `cy` attributes over a five-second loop. Radial and linear gradients define the celestial bodies’ coloring, and the code directly uses React in the parent application, though this bare HTML file relies purely on native SVG and CSS.

AAngela Kochoska

72% match