Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of SVG Animation Playground

Public visualization

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.

Comments

Sign in to join the discussion.

MIT Licensed