Fork of Double Harmonic

100%

Fork of Double Harmonic

✓ Published0🌍 Public

Last edited Jan 7, 2026

Created on Jan 7, 2026

A fork of the "Double Harmonic" example animates a small black circle tracing a complex path composed of two overlapping circular motions. The code uses D3 v6 selections and joins to render and update SVG elements every 50 milliseconds, calculating the circle's position with sine and cosine functions driven by two radii and a time step. It draws the path as two connected lines from the center to the ball, while a larger blue shadow circle marks the moving point. This visualizes parametric motion and harmonic oscillation in an abstract, looping animation.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Double Harmonic

A double pendulum animation built with D3.js v6 renders a black tracing line and white ball in SVG. The code uses `select`, `range`, and `setInterval` to update circle and line positions at each tick, computing the pendulum’s path from cosine and sine functions with a fixed psi ratio. The full-screen SVG shows two connected rods and the swinging tip, with ball radius and arm lengths as constants.

Wwgloss

87% match

Loading thumbnail…

Fork of Double Harmonic

This example shows a double pendulum animation, drawing a small ball as the endpoint of two connected, rotating line segments. The code uses d3.js v6 with a time-driven `setInterval` loop to update the pendulum's position based on a constant time step and a phase-shift ratio (`psi`). It renders the scene as SVG, creating the arm lines, a moving ball, and a large hollow circle marker at the endpoint. The visualization demonstrates the harmonic motion of the two-segment system.

Ggiulius540

86% match

Loading thumbnail…

Fork of Double Harmonic Black and white

A black-and-white animated line traces a double pendulum motion, with two connected arms sweeping from a fixed center point and a small circle riding at the tip. The circle alternates between white and black fills while a larger shadow circle follows underneath. The animation updates every 50 milliseconds using JavaScript’s `setInterval`, and d3 v6 selection methods like `selectAll`, `data`, and `join` bind new positions to SVG `<line>` and `<circle>` elements.

Wwgloss

85% match

Loading thumbnail…

Fork of Double Harmonic

A two-link pendulum traces a spherical path as two connected circles rotate around a fixed center point. The animation uses `setInterval` to update the positions every 50 milliseconds, with the second circle’s motion offset by a constant psi value that creates the harmonic fork effect. The SVG rendering uses `selectAll` and `join` to update circle and line elements, applying black strokes for the pendulum arms and a white circle with a black border for the joint. The visualization responds to browser window dimensions, setting its size based on `window.innerWidth` and `window.innerHeight`.

TTehran Mammadov

85% match

Loading thumbnail…

Fork of Double Harmonic

This example animates a double pendulum system, tracing the motion of two connected masses as they swing around a fixed center point. The code uses `d3.select` to create SVG circles and lines, updating their positions every frame with `setInterval` and `range(1)` to compute the pendulum’s coordinates. It relies on D3 v6’s data joins (`selectAll` and `join`) to render the moving balls, connecting rods, and shadow markers, with an animation loop that advances the angle `t` and the ratio `psi`.

KKerim

84% match

Loading thumbnail…

Fork of Double Harmonic

A double pendulum is drawn as two black line segments connected by a dark circle, with a white ring tracing the path of the second mass against a full-screen SVG. The animation runs on a 50-millisecond timer, updating the pendulum’s position based on trigonometric functions of a time variable. It is rendered with D3 v6, using `select`, `range`, and `join` operations to create and update the `line` and `circle` elements. The pendulum’s motion follows a classic two-arm harmonic pattern with a fixed frequency ratio.

Wwhiteswallow87

84% match

Loading thumbnail…

Fork of Fork of Double Harmonic Black and white

A web document displays a black-and-white composition of fifteen circles, all centered on a large, static canvas and rendered with an SVG. The circles are overlaid at the same center point, each with a fixed radius, creating a layered, harmonic pattern inspired by a double pendulum. The code uses d3.select to append an SVG element, d3.range to generate the data, and d3.enter to create the circle elements, with dimensions based on window.innerWidth and window.innerHeight.

Xxani

81% match

Loading thumbnail…

Double Harmonic

Two concentric pendulum arms trace a slowly evolving path. A large circle rotates around the center, and a smaller circle rotates around it, creating a complex harmonic motion. The visualization uses SVG elements, including circles and lines, and is updated at a fixed interval. The code employs D3’s `select`, `range`, and data join methods to render the animation, based on the `d3` library version 6.

Wwgloss

81% match