bouncy-ball

100%

✓ Published0🌍 Public

Last edited Sep 6, 2016

Created on Sep 6, 2016

A lime-green circle bounces vertically inside a fixed 200-by-400 SVG canvas against a black background. The animation loops indefinitely, alternating between a quick downward fall and an upward rebound. Built with D3 v4, the bounce uses chained `transition()` calls with `ease(d3.easeQuadIn)` for the fall and `ease(d3.easeQuadOut)` for the rise, repositioning the circle's `cy` attribute between 0 and 260 pixels. A recursive `on('end', bounce)` callback restarts the cycle.

AI-generated description

Built with blockbuilder.org for bouncy-ball.

mit Licensed

Similar vizzes

Loading thumbnail…

Bouncing Balls

Fifteen circles bounce in a sinusoidal wave across a dark background. Each ball follows a vertical, sine-based path at a fixed horizontal interval, with its vertical position shifting over time to create a flowing, animated pattern. The visualization uses D3.js version 7’s `select`, `range`, `scaleOrdinal`, and `schemePastel2` to generate a pastel color palette for the circles. The animation is driven by a JavaScript `setInterval` timer, updating the circles’ `cy` attributes at roughly 60 frames per second via D3’s `.join()` API.

EErik Sundahl

78% match

Loading thumbnail…

Ball Bounce

A circle rests at the center of the screen, and the user can click and drag it with the mouse. Upon release, the ball's velocity is calculated from the drag distance and time, causing it to move and bounce off the window edges. The ball can be grabbed again mid-motion to be thrown anew. The visualization uses D3 v7’s `select`, `timer`, and event handlers on the SVG to manage rendering, with state tracked for position and momentum.

Hhmkyriacou

77% match

Loading thumbnail…

animate_test

A single SVG circle bounces vertically in an infinite loop, moving from a center point down and back up over a five-second cycle. The example demonstrates basic SVG animation using the native `animate` element, which specifies the `cy` attribute’s keyframe values, duration, and indeterminate repetition. The scene is rendered entirely with JavaScript-created SVG elements on a blank 960×960 canvas, with no external libraries or data sources involved.

Ggaudi84

75% match

Loading thumbnail…

Bouncing Balls

Ten colorful circles bounce around a canvas, affected by gravity and repelling each other when they touch. Users can click and drag any ball to fling it, with a spring-like pull force applied toward the mouse cursor. The simulation runs on HTML5 Canvas with requestAnimationFrame, using physics calculations for velocity, dampening, and collision detection between boundaries and other circles.

CCurran Kelleher

73% match

Loading thumbnail…

Circles bouncing inside a rectangle

This example shows twenty colored circles bouncing and colliding within a rectangular boundary, with each circle moving at a constant speed and bouncing off the walls. The visualization adapts D3.js’s force layout to animate the circles, using custom gravity and collision functions to handle wall reflections and circle-to-circle collisions. The code relies on `d3.layout.force` for the simulation loop, `d3.geom.quadtree` for efficient collision detection, and SVG elements for rendering. Circle positions and velocities are manually updated in the tick function, while a static rectangle outlines the containment area, and the data consists of randomly generated circles with varied radii and colors.

663anp3ca

72% match

Loading thumbnail…

Untitled

A tiny SVG viewport shows 1,000 randomly placed circles bouncing and wrapping around its edges, with a live frames-per-second counter in the corner. The animation runs through `d3.timer`, updating each circle’s `cx` and `cy` attributes based on randomized velocity values. All rendering uses SVG elements and D3’s data join, with positions recalculated on every tick to keep the motion continuous.

KKanishk Mamgain

72% match

Loading thumbnail…

D3 - Transitions -> easeBounceOut

Five bouncing circles demonstrate the d3.easeBounceOut easing function on an SVG. A button click triggers updateAll, which regenerates random x-coordinates and animates each circle’s cx attribute via a one-second transition. The code uses D3 v7’s selection.join and transition.ease APIs, rendering with SVG circles at a fixed vertical position and radius.

SSubhendu Karmakar

72% match

Loading thumbnail…

Ease

Ten colored circles bounce horizontally across an SVG canvas, each demonstrating a different D3 easing function: elastic, bounce, linear, sine, quadratic, cubic, poly, circle, exponential, and back. The animation repeats continuously, with each circle labeled by its easing type. The visualization uses D3 v6 transitions with the `.ease()` method and `d3.ease*` functions, rendered in an HTML page with JavaScript.

Vvivianaaai@qq.com

71% match