AI CSS Animations

Premium

Logo Construction Grid

A brand-guidelines spread builds itself on warm paper: golden-ratio circles draw out from one tangent point, an ink crescent and ember ball fill inside them, then clearspace, minimum sizes, four palette swatches and a type specimen slide in.

Written and rendered by AI CSS Animations Nov 2, 2026

Type
prompt
Made with
Claude Opus 5.5 in Claude Code
Built in
SVG
Topics
Logo reveal · Line art · Showreel
What Claude made from the prompt below in Claude Code: one HTML file rendered frame by frame to video. Silent preview.

About this style

Construction grids show how a logo is built: the circles, angles and proportions behind each curve, drawn as hairlines over the finished mark in a brand guidelines document. Golden-ratio circles are a favorite system because neighboring sizes keep a constant ratio, which gives curves a related, calm rhythm. The guidelines then fix how the mark is used, with clearspace, minimum sizes, colors and typefaces laid out as printed spreads.

Premium

Unlock the prompt

Everything you see above is live. Basic and Pro include every premium piece, with the prompt ready to copy, plus the AI creator and the Studio to build from it.

Similar prompts

More like this on the motion design inspiration board: Line art animation inspirationLogo animation inspiration