Accelerate, Then Coast III

100%

Accelerate, Then Coast III

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Apr 10, 2014

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.

AI-generated description

An example of Accelerate, Then Coast easing. In comparison to cubic-in-out easing, accelerate-then-coast easing restricts the maximum angular speed of the gears. Linear easing also uses constant speed, but lacks slow-in and slow-out. Use the radio buttons to compare easing functions.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Accelerate, Then Coast

An interactive easing function compares constant acceleration with constant speed. A black curve shows the combined ease, with brown and steelblue dashed lines representing acceleration and coasting phases. A slider adjusts acceleration, and an animated circle travels along the path. This example implements the `easeAccelerateThenCoast` function and uses `d3.svg.line`, `d3.scale.linear`, `transition.attrTween`, and SVG rendering in D3 v3.

Mmbostock

83% match

Loading thumbnail…

Accelerate, Then Coast II

This interactive example visualizes a configurable easing function that reflects the "Accelerate, Then Coast" curve to produce slow-out effects. Two sliders adjust the acceleration exponent and the reflection center, allowing comparison between symmetric in-out easing and asymmetric alternatives. The SVG displays the easing curve with axes, while an animated circle traces its path over five seconds, updating reference lines to show progress. The code uses D3 v3 for scales, axes, transitions, and range inputs, with custom easing functions `easeReflect` and `easeAccelerateThenCoast` implemented in JavaScript.

Mmbostock

82% match

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

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

75% match

Loading thumbnail…

linked-gears

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.

11wheel

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

71% match

Loading thumbnail…

Transition Easing Comparison in v4

Ten animated steel-blue circles demonstrate ten D3 v4 easing functions, with each circle labeled by its easing type (easeElastic, easeBounce, easeLinear, and so on). Every circle repeatedly transitions horizontally 210 to 720 pixels and back over four seconds using `transition().ease()` with the corresponding default function. The example uses SVG elements rendered in an HTML page loading d3.v4.min.js, and each animation loops indefinitely via the transition’s `"end"` event. The static labels and moving circles highlight the distinct acceleration, deceleration, and overshoot patterns of each easing curve.

Dd3noob

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

70% match