Skip to main content
SimilarExport ZIP
100%

Fly

✓ Published2🌍 Public
AAsrar Al Qassem
Last edited Feb 25, 2024
Created on Feb 25, 2024
Forked from HTML Starter

Three birds rendered as simplified SVG shapes—a grey circle for the body and two black paths for wings—flap in place within an 800-by-600 viewport. D3 transitions with `transition.attrTween` and `d3.interpolateString` alternate wing rotation between -45 and 45 degrees in a continuous loop, triggered recursively via the `on('end')` listener. The animation runs directly from a plain HTML file using D3 v6 and raw JavaScript, with no external data source; the birds are positioned at fixed coordinates (200,200), (400,300), and (400,150) and flap independently.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Hello HTML

Five small black bird shapes fly horizontally across a sky-blue SVG background, bouncing back when they leave the viewport. The birds are rendered as simple path elements and animated with `setInterval`, updating their x-coordinates every 50 milliseconds. The code uses D3 v7's `select`, `range`, and data joins to create and reposition the paths, starting from randomized positions.

NNanditha Reddy
81% match
Loading thumbnail…

Fork of Fork of Fork of Circles with D3 - FLYING

A small D3.js scene animates a stylized butterfly against a light blue background. The SVG graphic consists of an orange body circle, two yellow elliptical wings, and antennae-like details. Using D3 transitions with a sine-in-out easing, the wings rotate back and forth in a looping flapping motion, triggered by the `transition.attrTween` callback chain. The code selects the HTML container and appends an SVG element with fixed dimensions, managing the animation recursively through the `.on("end")` event.

66264kusuma@gmail.com
76% match
Loading thumbnail…

windmill rotating

The windmill rotates its four black blades continuously against a dark blue sky, with a green ground and gray base completing the static scene. Five small bird shapes fly once across the sky from left to right and then disappear. The D3 v7 code builds the SVG with explicit shape attributes, then uses `transition.attrTween` with `d3.interpolate` to create the infinite blade rotation, while the birds rely on a simple duration-based transition. Animation is driven entirely through D3's transition system without external data.

Nnagasai.mandalapu@gmail.com
73% match
Loading thumbnail…

Fork of Circles with D3

This example visualizes a simple animated ecosystem of birds and trees using the Svelte framework and D3.js. It shows three white birds with triangular beaks and brown trunks with green foliage, all moving across a light background. The rendering approach relies on custom `Bird` and `Tree` classes within `index.js`, updating positions each frame with cosine and sine trigonometry. D3 is included as a dependency, though the core animation logic uses Svelte's base ecosystem and Canvas drawing commands.

NNanditha Reddy
71% match
Loading thumbnail…

Bird's Landscape - D3.js

A D3.js-powered SVG landscape features a sky, sun, land, trees, and birds, with animated gradients simulating a 24-hour day-night cycle. The scene is constructed entirely via the SVG DOM API, using `createSVGElement` and `setAttribute` to build paths, gradients, and groups. Birds are cloned and transformed with CSS `scale` and `rotate`, while the sun and horizon colors animate through `animate` elements with timed `values` arrays.

FFelipe Maion
71% match
Loading thumbnail…

Fork of Fork of Fork of Bird's Landscape - D3.js

This example presents an animated SVG landscape featuring a bird, trees, dogs, stars, and flowers, all rendered programmatically. The scene includes a day-night cycle simulated through animated gradients, a moving truck, and flying birds with flapping wings. Built with D3.js v3 and vanilla JavaScript, the code dynamically creates SVG elements using `document.createElementNS`, applies CSS animations, and uses SMIL animations like `animateTransform` and `animateMotion` for movement. The sky and sun gradients are defined with SVG `radialGradient` and `linearGradient` elements, animating over a 24-second loop.

Nnagasai.mandalapu@gmail.com
70% match
Loading thumbnail…

Fork of Fork of Fork of Bird's Landscape - D3.js

This generative SVG landscape assembles an animated scene with a day-night cycle, birds, trees, dogs, stars, and flowers. Code builds the entire composition programmatically using the `createSVGElement` helper, `animateTransform` for wing flapping, and `radialGradient`/`linearGradient` with `animate` tags to shift sky colors over 24 seconds. Birds are copied and transformed via CSS `scale` and `translate`, while moving elements like a truck use synthetic animation. The piece references prior SVG experiments for the bird, sun, and land, using raw SVG paths rather than a high-level charting library.

Ggaddamthanmayeereddy759@gmail.com
70% match
Loading thumbnail…

Bees

This example presents an animated SVG scene where 20 bee-like figures move randomly across an 800×600 canvas. Each bee consists of a yellow circular body and two gray wings that continuously flap using `d3.interpolateString` within a recursive `transition.attrTween` loop. The bees’ positions are updated every 10 seconds via chained `transition` calls with `easeLinear`, selecting random coordinates from the viewport. The scene uses D3 v6 to build and animate the SVG elements directly within HTML, with no external data source.

AAsrar Al Qassem
70% match