A SMIL Satellite - version 0.1

100%

A SMIL Satellite - version 0.1

✓ Published1🌍 Public

Last edited Feb 29, 2020

Created on Feb 24, 2020

A SMIL Satellite demonstrates SVG animation using SMIL's animateMotion and mpath elements, moving satellite circles along a defined path to simulate orbital motion. The scene includes a planet with gradient and filter effects, stars, and multiple satellites orbiting at different sizes, speeds, and rotations. The code uses d3.v5 and SVG rendering, referencing gradient definitions, filters for atmosphere and clouds, and motion paths—though SMIL animation may fail in this embedded context, working only when loading the SVG file directly in a browser. The example compares SMIL against JavaScript or CSS animation approaches.

AI-generated description

A SMIL animation - the 3rd type of SVG animation possibility compared to JS or CSS animation.

Doesn't seem to work here, although it does in a separate file:

Try loading the SMIL_Satellite.svg file separately in a browser - that works.

MIT Licensed

Similar vizzes

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

70% match

Loading thumbnail…

Fork of SVG Fundamentals

This SVG example demonstrates a simplified animated solar system, showing nine planets orbiting a glowing central sun on a black background. Each planet moves along its own elliptical path defined by an SVG `<path>` element, with its motion driven by the `animateMotion` and `mpath` APIs. The sun uses a `radialGradient` fill and a `filter` with `feGaussianBlur` to create a pulsing glow effect. The rendering is achieved entirely through raw SVG elements and CSS styling.

AARQz1947

69% match

Loading thumbnail…

Fork of Fork of SVG Fundamentals

A dynamic SVG landscape demonstrates fundamental shapes, gradients, and animation using native SMIL animations and CSS transitions. The main scene features an animated radial gradient sky, a pulsing sun moving via the `animate` element, and layered landscape paths filled with linear gradients. A second view shows interactive SVG primitives—including circles, rectangles, lines, and curved paths—with hover effects that scale elements and change fill colors. The work relies solely on standard SVG features without external libraries, rendering entirely through the browser's SVG engine.

Ccssergio

69% match

Loading thumbnail…

Fork of Exercise 1: SVG Fundamentals--gradient

This example animates a stylized sunrise and sunset using only SVG and embedded SMIL animations. It uses a `radialGradient` for the sky and two `linearGradient` fills for layered landscape paths, with the sun’s vertical position and gradient stop colors cycling over 15 seconds. The scene relies on `defs`, `animate` elements, and Bézier path curves, with no external JavaScript libraries.

WWeeeLi

69% match

Loading thumbnail…

Fork of SVG shapes and animation sandbox

This example is a colorful, animated SVG scene showing layered sky bands, drifting clouds, and a stylized pink flower. The visualization uses raw SVG elements—including rectangles, circles, ellipses, and paths—to construct the imagery. Cloud movement is driven by the `animateMotion` API, which follows predefined curved paths at varying speeds. The scene relies entirely on static SVG markup and SMIL animations, with no JavaScript libraries or data sources involved.

Sszhang99

68% match

Loading thumbnail…

Fork: SVG Fundamentals

This example presents a minimalist animated landscape of rolling hills beneath a glowing sun. It demonstrates the use of raw SVG elements—including `<rect>`, `<circle>`, and `<path>`—to construct the scene. Gradients defined within `<defs>` create the sky and terrain coloring. The animation relies on SMIL `<animate>` tags to cycle the sun's position and smoothly shift gradient stop colors between palettes, suggesting a slow transition from day to night.

BBaffling Science

68% match

Loading thumbnail…

SVG Fundamental

This example demonstrates fundamental SVG drawing and animation techniques within an HTML page. It renders a landscape scene with a moving sun, animated gradient backgrounds, and layered curved landmasses defined by SVG path elements. The code uses native SVG features including `radialGradient` and `linearGradient` definitions, `<circle>`, `<rect>`, and `<path>` elements, and the `d` attribute with commands like `M`, `L`, `Q`, and `C`. Animations are implemented with the `<animate>` element, changing the sun’s `cy` position and color stops over fifteen-second cycles.

BBart van Pelt

68% match

Loading thumbnail…

Satellite

This visualization shows a rotating globe with a graticule and sphere outline from the perspective of a satellite orbiting Earth. The animation continuously adjusts the camera tilt and rotation, creating a dynamic view of the planet’s surface. It uses the D3.js graphics pipeline with `d3.geo.satellite` for projection, `d3.geo.clipCircle` for visibility clipping, and the Canvas API for rendering. The data source is a graticule and sphere generated on the fly, with real-time animation driven by a timer and elapsed time.

Mmbostock

68% match