Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of SVG Animation Playground

Public visualization

Viewing a saved revision (read-only)

437995d4b0da4c1e851208b50396db1d

Fork of SVG Animation Playground

0 stars0🌍 Public
JJonas Carvalho
Last edited Mar 13, 2022
Created on Mar 13, 2022

This example demonstrates an SVG animation inspired by the opening crawl of Star Wars, featuring two rotating images and a spinning headline that fade in and out with a 3D perspective effect. The animation uses CSS keyframes defined in a separate stylesheet, with properties like `transform`, `opacity`, and `translateZ` to create scale, rotation, and depth transitions over a 10-second infinite loop. The scene is composed of inline SVG images loaded from external gist URLs, styled with the `Lato` font, and set against a fixed background image. The container uses `perspective` and `transform-style: preserve-3d` to enable the three-dimensional motion.

AI-generated description

A demonstration of SVG shapes.