AI CSS Animations

Hairline Animations: Isometric Line Art in CSS

60 isometric hairline animations: objects drawn in one constant thin stroke on a 2:1 grid, white faces hiding the lines behind them, one accent color, and motion that settles like a spring. Inline SVG and CSS you can paste anywhere.

Laptop Lid Opening

An isometric hairline laptop whose lid swings open on a spring, then the screen lights up line by line. The hinge runs on one @property angle and CSS trig, so the lid stays true to the grid.

device · objects · minimal

Phone Notification Card

A hairline isometric phone lying flat while a notification card slides in above its screen and settles on a spring. The card floats as its own white slab, so it hides the app grid beneath it.

device · ui · objects

Server Blade Slide Out

A hairline rack where one server blade slides out of its slot and settles with a spring. One @property length drives the moving front and the stretching top and side faces, so the blade stays exact.

device · infrastructure · objects

Mechanical Keyboard Typing

An isometric hairline mechanical keyboard where keycaps press down one after another and spring back, ending on the return key in the accent. Each key is a white box drawn back to front.

device · objects · ui

Camera Shutter Blink

A hairline isometric camera: the accent shutter button presses and the six-blade iris inside the lens closes and springs open. The iris is drawn in the lens plane and clipped to the glass.

device · objects · minimal

Router Signal Rings

A hairline isometric Wi-Fi router sends its signal out as three rings on the floor plane, each springing outward a beat after the last. The status light on the front is the single accent.

device · infrastructure · objects

Drone Hover

A hairline isometric quadcopter lifts off its landing pad, settles into a hover on a spring, then lands again. Each rotor spins inside its own top-face plane, so the blades sweep true ellipses.

device · objects · logistics

3D Printer Laying Layers

An isometric hairline 3D printer: the print head sweeps across, a new layer appears behind it, and the gantry steps up one layer height at a time. The nozzle tip is the one accent.

device · process · objects

Smartwatch Ticking Face

A hairline isometric smartwatch lying on its strap while the accent hand ticks round the dial in twelve sprung steps. The hand rotates inside the screen plane, so it sweeps a true iso ellipse.

device · objects · minimal

Headphones Sound Bars

Isometric hairline over-ear headphones with a row of equalizer bars rising between the cups, each on its own sprung delay. The bars scale inside their upright plane, so they stay on the grid.

device · objects · minimal

Espresso Machine Pour

A hairline isometric espresso machine pours a thin accent stream into the cup, and the crema line rises inside the rim. The level is clipped to the cup opening, so the front wall stays solid.

device · objects · process

Desk Lamp Switching On

A hairline isometric desk lamp swings its arm round the post on a spring, then switches on: dashed light lines drop and an accent pool lands on the desk. One @property angle drives arm and shade.

device · objects · minimal

Vending Machine Drop

An isometric hairline vending machine drops one accent can from its bottom shelf into the tray, where it lands with a small bounce. The front panel is cut with real holes, so the can falls behind it.

device · objects · logistics

Game Controller Combo

A hairline isometric game controller plays a short combo: the d-pad and face buttons press down in turn and spring back, ending on the accent button. Each button is a small cylinder.

device · objects · ui

Robot Arm Pick and Place

An isometric hairline robot arm lowers onto the accent part, grips it, swings it across on a soft spring and sets it down on the far pad. Two @property joint angles and CSS trig drive the arm.

device · process · logistics · objects

Smart Speaker Listening Ring

A hairline isometric smart speaker wakes: an accent arc sweeps once round the light ring on its top face and settles on a spring. The grille is a field of dots on the cylinder's visible half.

device · objects · minimal

Card Terminal Tap

An isometric hairline payment terminal: a contactless card glides in, dips for a tap and lifts away, then the accent check mark springs onto the screen. The card is a thin slab floating above.

device · ui · objects

Monitor Chart Drawing

A hairline isometric monitor on its stand: a line chart wipes across the screen from left to right, then the accent end point pops on a spring. The chart lives in the screen plane, so it stays square.

device · data · ui

Power Bank Charging

A hairline isometric power bank: a USB-C plug slides into the port on a spring, then four charge lights fill one after another, the last in the accent. The plug tip stretches out of the port exactly.

device · objects · minimal

Turntable Tonearm Drop

An isometric hairline turntable: the tonearm swings over the spinning record on a spring and lowers into the groove, with the headshell as the accent. Platter and arm turn in the top-face plane.

device · objects · minimal

Parcel to Doorstep

An accent parcel rides a conveyor off the warehouse shelf into a van, the van drives the road drawing route dashes behind it, and the parcel lands on the doorstep.

scene · logistics · process

Sorting Belt Diverter

White boxes ride a conveyor while a pusher fires on the accent box, shoving it off the belt down a chute into a bin. Inline SVG with layered copies so every hand-off keeps its depth.

process · logistics · scene

Stamping Press Line

A blank rides the belt under a C-frame press, the ram drops and rebounds on a spring, and the part leaves stamped in the accent color with an embossed ring. Isometric SVG and CSS.

process · scene · objects

City Block Night Shift

An isometric city block of hairline towers with window grids, rooftop tanks and a passing car, while one lit accent window hops from building to building in a calm loop.

scene · infrastructure · minimal

Rocket Launch and Landing

The tower arm swings clear, an accent-tipped rocket lifts off its pad on a growing flame, then comes back down tail first and settles on its legs in a puff of hairline smoke.

scene · process · objects

Wind Farm

Three hairline wind turbines on an isometric field turn their rotors in true dimetric projection, cabled to a small substation, with the nearest rotor picked out in the accent.

scene · infrastructure · objects

Solar Farm Day Cycle

An accent sun rises behind a field of tilted hairline solar panels, arcs across the sky on two eased axes and sets, while a glint slides over every panel as the light moves.

scene · infrastructure · minimal

Ship to Shore Crane

A quay crane lowers its spreader, lifts the accent container, trolleys out along the boom and sets it on the ship, which sails off as an empty one docks. Isometric SVG and CSS.

scene · logistics · process

Train over a Truss Bridge

A train with an accent locomotive crosses a hairline truss bridge, seen through the near truss, eases into the platform on the far bank, waits, then pulls away in a seamless loop.

scene · logistics · infrastructure

Coffee Bar Pour and Pickup

An accent cup pops under the espresso spout, fills, slides down the hairline counter past the grinder to the pickup mat and settles while two wisps of steam curl up.

scene · objects · process

Greenhouse Bloom

Water drips from the ridge pipe of a see-through hairline greenhouse, three seedlings grow and leaf out on springs, and the middle one opens an accent flower before the bed resets.

scene · process · objects

Mail Between Two Houses

An accent envelope walks the dashed route from one hairline house down the street to its neighbor, the mailbox flag snaps up on arrival, and a reply makes the trip back.

scene · logistics · process

Elevator Cutaway

A cutaway building in hairline isometric: the accent elevator car rides its cable up to the top floor, then down to the second and ground floors, doors sliding open at every stop.

scene · infrastructure · process

Desk Setup with Coffee

An isometric hairline workspace: lines of code type onto the monitor, a plant leans over the keyboard, and steam curls up from the accent mug in a slow, seamless loop.

scene · objects · minimal

Flat-Pack Cabinet Assembly

Panels of a flat-pack cabinet fly in from every side and snap together on springs: back, base, sides, shelf and top, with the accent drawer sliding home last before it all lifts away.

scene · objects · process

Parking Garage Entry

An accent car rolls up to the booth, the striped barrier arm swings up in true isometric, and the car eases into the open bay of a hairline parking garage before the arm drops.

scene · infrastructure · process

Bakery Deck Oven

A tray of pale dough slides into a hairline deck oven, the lift door drops, the timer hand sweeps once, then the door rises and the loaves come out risen and baked in the accent color.

scene · process · objects

Lighthouse Beam

A hairline lighthouse on its rock sweeps a translucent accent beam around in true isometric, passing behind the lantern and over the tower, while a small boat bobs past.

scene · infrastructure · minimal

Gantry Pick and Place

A cartesian gantry robot moves only along its three axes: the bridge rolls in x, the carriage in y, the z-axis drops, grips the accent part and sets it on a fixture across the table.

process · scene · objects

Forklift Put-Away

A hairline forklift lifts a pallet with an accent crate, drives it into the upper bay of a pallet rack, sets it on the beams and backs out, then comes back and brings it down again.

scene · logistics · process

Architecture Stack Lift

Three isometric slabs for app, API and database lift apart on a spring, a signal dot runs down the stack, and they settle back. Inline SVG layers moved by CSS translate.

infrastructure · data · process

Database Sync

Two isometric database cylinders trade one accent packet along a floor line, and each lid pulses as the write lands. Hairline SVG with CSS translate, scale and opacity.

data · infrastructure · process

Isometric Bar Chart Rise

Five isometric bars rise out of a hairline base plate on a staggered spring, the tallest capped in the accent, then sink and repeat. SVG boxes slid through clip paths.

data · process · minimal

Pie Chart Slice Lift

An extruded isometric pie chart slides its accent slice out on a spring, showing the cut walls behind it, then tucks it back. Elliptical SVG arcs with one CSS translate.

data · minimal · ui

Network Packet Route

An accent packet hops across a 3 by 3 grid of isometric network pads, turning at a right angle, and pings the host it reaches. SVG pads and routes, CSS translate and scale.

infrastructure · process · data

API Request Round Trip

A request packet crosses from an isometric browser window to a server rack, a status light blinks, and the response returns to draw the page. SVG with CSS translate and dashes.

infrastructure · process · ui

CI Pipeline Stages

Build, test and deploy blocks lift in turn on a hairline rail, each lit by the accent while it runs and checked off when it passes. Isometric SVG boxes with CSS keyframes.

process · infrastructure · ui

Pods Scaling Out

Two isometric pods on a node plate scale out to six as new cubes spring up with an accent flash, then scale back in. Hairline SVG cubes animated with CSS scale and fill.

infrastructure · process · objects

Cloud Region Servers

A hairline cloud hangs over three isometric server racks in a dashed region, sending an accent request down to each rack in turn. SVG racks with CSS translate and fill.

infrastructure · scene · data

Data Lock Secure

A padlock in front of an isometric data block snaps its shackle shut on a spring, then an accent perimeter ring settles around both. Hairline SVG with CSS translate and scale.

infrastructure · data · icon

Folder Files Rising

Three sheets rise out of an isometric file folder on staggered springs, the middle one tagged in the accent, then slide back in. Upright SVG planes moved by CSS translate.

ui · objects · data

Card Deck Stacking

Four isometric UI cards slide in along the grid and stack into a deck on a spring, the top card tagged in the accent, then lift away. Hairline SVG slabs with CSS translate.

ui · objects · process

Kanban Card Move

An accent card lifts off an isometric kanban board, glides from To do to Doing to Done and drops into place with a spring, then resets. Hairline SVG with CSS translate.

ui · process · objects

Isometric Cube Loader

Eight hairline cubes burst apart along their diagonals and spring back into one isometric block, the top corner cube capped in the accent. A calm SVG and CSS loading spinner.

loader · minimal · objects

Stacked Tiles Loader

Four isometric plates in a stack lift one after another in a soft ripple while an accent fill climbs to the top. A hairline SVG and CSS loading indicator on the 2:1 grid.

loader · minimal

Isometric Toggle Switch

An isometric switch slides its grip block along the track with a spring and settles on, lighting an accent groove, then slides back off. Hairline SVG boxes moved by CSS translate.

ui · objects · minimal

Extruded Progress Slab

A progress bar as an isometric slab that extrudes along its ruled base in three springy steps to full, accent on top, then clears. Hairline SVG through a clip path, CSS translate.

loader · ui · minimal

Message Queue Flow

Message blocks pop out of an isometric producer, step along a hairline queue bed in time and drop into the consumer, one tinted in the accent. SVG boxes with CSS translate and scale.

infrastructure · process · data

Cache Hit Grid

Lookups drop onto a 3 by 3 grid of isometric cache cells and each hit lights its cell in the accent before fading back, three cells in turn. Hairline SVG with CSS translate and fill.

data · infrastructure · process

Git Branch and Merge

An accent branch grows off the main line of an isometric commit graph, gains two commits and merges back with a ring pulse, on a dot grid. SVG lines grown with CSS scale.

process · data · minimal

How to use these hairline animations

Open any piece and copy the HTML and CSS. The drawing is inline SVG, so there are no image files to host. Each snippet's classes are prefixed with its own name, so several can share a page.

Set --hln-color to change the one accent and --hln-size to scale the panel. Strokes use vector-effect: non-scaling-stroke, so the hairline stays the same thin weight at every size, which is what makes the style read as precise.

The rules of the style: 2:1 isometric, one stroke weight, faces filled white and drawn back to front so near objects hide far lines, a single accent per frame, and motion that moves once and settles. Every snippet ships with a prefers-reduced-motion rule that holds the final frame.

Want a whole hairline film instead of a loop? The isometric hairline prompt gives Claude the full style to build one.

Frequently asked questions

What is a hairline animation?

Isometric line illustration in motion: every object drawn with the same thin stroke on a 2:1 grid, white faces that hide the lines behind them, and one accent color. It reads as calm and precise, which is why product and infrastructure teams use it for explainers.

How do I keep the line weight constant when the SVG scales?

Put vector-effect: non-scaling-stroke on every shape. The stroke width is then measured in screen pixels, not in viewBox units, so a small icon and a full-width hero share one hairline.

How do I draw isometric shapes in SVG?

Use a 2:1 dimetric grid: a point (x, y, z) lands at screen (x - y, (x + y) / 2 - z). Each box is three polygons, top, left and right, filled white and drawn from back to front.

Can Claude make hairline animations for me?

Yes. Paste the isometric hairline prompt into Claude Code for a full explainer film, or copy any snippet here and ask Claude to adapt the objects to your product.