Skip to main content
SimilarExport ZIP
100%

Video

✓ Published1🌍 Public
CChristoph Diefenthal
Last edited Apr 3, 2020
Created on Apr 2, 2020
Forked from Catch me

A yellow backdrop fills the browser window as an animated solar system orbits a central sun, with two planets on circular tracks. Embedded within the rotating composition, a foreignObject element carries an HTML5 video player, displaying a sample movie clip within a circular mask. The visualization combines D3.js v5 for SVG graphics and animation timers, while integrating CSS styling for circular clipping. The video and planet rotations are driven by time-based delta calculations, creating a continuous, synchronized motion across mixed media elements.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Video2

A video plays inside a circular mask on a yellow canvas, while the entire composition spins and translates via D3's `d3.timer` and `attr` transforms. The example embeds an HTML5 `<video>` element within an SVG `foreignObject`, clipped by CSS `border-radius` and `-webkit-mask-image`. A second separate video control also appears. The code uses D3 v5 to manipulate SVG groups (`g`), circles, and transitions, demonstrating video integration with animated SVG graphics.

CChristoph Diefenthal
81% match
Loading thumbnail…

Dataviz 2 Solar System

An animated solar system visualization displays the Sun and planets with radial-gradient shading to create a more dimensional, planet-like appearance. Planetary positions are driven by astronomical distance ratios, with each body and its label animating into place through staggered transitions. The implementation uses D3 v7, employing `select`, `transition`, and `easeLinear` to coordinate circle radii, coordinates, and label opacity changes, while SVG `radialGradient` definitions supply the visual depth.

YYiyi Wu
73% match
Loading thumbnail…

Solar System

The animation displays the solar system with the Sun and planets to scale, mapping orbital distances and radii onto spatial positions for circles and labels. Built with D3.js, it uses selections and transitions with easeLinear to animate planet appearance and label opacity over staged delays. The code defines celestial body data (including Pluto) and renders it via SVG circles and text, with the Sun and each planet uniquely colored.

SSubhendu Karmakar
73% match
Loading thumbnail…

Solar System

This animated visualization depicts the solar system’s planets orbiting the sun, with each celestial body shown as a circle scaled by its relative radius and positioned by its distance in astronomical units. Planet names appear as labels below their circles. The animation uses D3 transitions to sequentially grow each circle and fade in its label, then smoothly updates positions and sizes. The code leverages D3 v7’s `select`, `transition`, and `easeLinear` APIs, with a custom data array containing each planet’s distance, radius, and color.

Pperez.h89@gmail.com
72% match
Loading thumbnail…

Orbiting Bodies

A stylized solar system animation built with D3.js renders a glowing central star surrounded by three orbital rings containing planets of varying sizes and colors. Each planet carries multiple moons that orbit independently, while the background features twinkling stars. The animation uses requestAnimationFrame to update positions over time, with planet coordinates calculated using trigonometric functions based on configurable speed and offset parameters.

CCurran Kelleher
72% match
Loading thumbnail…

Solar System

This example animates a stylized, not-to-scale model of the solar system, including the planets and Pluto, orbiting a central sun against a background image of space. Each planet moves along a circular path defined by SVG path elements, with its speed and orbital radius hardcoded. The visualization uses React for component structure and D3.js for generating the circular arc paths, while SVG’s `animateMotion` drives the continuous orbital animation.

CCurran Kelleher
72% match
Loading thumbnail…

Fork of Solar System

A solar system visualization animates the planets orbiting outward from a fixed Sun, with each planet's distance and radius scaled from astronomical units. Circles and text labels fade in sequentially from the Sun outward, then snap to new positions on any update, while exits shrink and disappear. The D3 code uses data joins with `transition()` and `easeLinear`, mapping planetary data to SVG `circle` and `text` elements with hardcoded color fills and label offsets.

Hhunsingeruk@gmail.com
71% 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
71% match