Guides · · Maxwell Prehoda
12 Isometric Animation Examples, From Zaxxon to Monument Valley (Plus Copyable CSS)
Isometric animation shows a scene from a fixed, raised angle with no vanishing point, so every object keeps its true size wherever it moves. That is why it works for games, explainers and product diagrams: you can see a whole system at once and still read every part. The eight examples below trace the style from Zaxxon and Knight Lore through SimCity 2000 to Monument Valley and Hades, and each one teaches a different rule for making things move in isometric space.
A note on terms: most "isometric" art is technically dimetric. True isometric axes sit at 30 degrees, but pixel artists and games mostly use a 2:1 grid (about 26.6 degrees) because the lines step cleanly across pixels. Our own Hairline Animations use the same 2:1 grid, and the last four entries are ours, with live CSS you can copy.
1. Zaxxon (Sega, 1981): Best for showing height in a view that hides it
Platform: Arcade game, Wikipedia history
Zaxxon was one of the first games to use isometric projection, released in Japanese arcades in December 1981 and in North America in April 1982. Isometric views flatten height, so Sega gave the player two cues: an altimeter on screen and a shadow under the ship that shows how high it is.
It was also the first arcade game advertised on television. The design lesson is the one every isometric animator relearns: if something moves up and down, give it a shadow or a ground line, or viewers cannot tell height from distance.
Watch out for: Without a ground reference, vertical motion in isometric reads as sliding. Animate the shadow with the object, shrinking and fading it as the object rises.
2. Knight Lore (Ultimate Play the Game, 1984): Best for cut-away rooms and drawing order
Platform: ZX Spectrum game, Wikipedia history
Written by Chris and Tim Stamper, Knight Lore popularised isometric 3D rooms in a flip-screen format, 128 of them, each a single cut-away room. Its Filmation engine used image masking so sprites could overlap without their contents colliding, and Edge later called it "the single greatest advance in the history of video games."
Masking is the core problem of isometric art in any medium: near objects must hide far ones, so everything is drawn back to front. Our Elevator Cutaway below is a pure-CSS take on the same cut-away idea, with faces filled white so nearer lines hide the ones behind.
Watch out for: Get the draw order wrong and objects pop through each other mid-move. Sort by depth every frame, or keep moving objects on a layer above the static scene.
3. Marble Madness (Atari Games, 1984): Best for physics and momentum on isometric courses
Platform: Arcade game, trackball, Wikipedia history
Mark Cerny's isometric platformer sends a marble through six maze-like courses against the clock. The courses are abstract landscapes inspired by M. C. Escher; Cerny stored each one as a heightmap and rendered it with a ray tracer, which gave it shadows and anti-aliasing, while Bob Flanagan built a three-dimensional physics model for the marble.
That pairing explains why it still feels good: the motion obeys the slopes you can see. If you animate a ball, a car or a parcel across an isometric scene, its speed should change with the terrain, not glide at a constant rate.
Watch out for: Isometric slopes are hard to read without shading. Give rising and falling surfaces different tones before you rely on motion to explain them.
4. SimCity 2000 (Maxis, 1993): Best for city and system views with many layers
Platform: PC and Mac game, Wikipedia history
The original SimCity was top-down; Will Wright and Fred Haslam's sequel moved to a "near-isometric dimetric view" with land at different elevations, and added an underground layer for water pipes, subways and road tunnels. It is the reference point for every isometric city block since.
Layers are the idea to steal: one view for the surface, one for what runs beneath it, toggled in place. Our City Block Night Shift below is a pure-CSS take on an isometric city block, with one lit window at a time.
Watch out for: City scenes fill up fast. Animate one thing at a time (a car, a window, a pipe) or the viewer has nowhere to look.
5. Monument Valley (ustwo games, 2014): Best for impossible geometry and calm, puzzle-like motion
Platform: iOS, Android and more, ustwo games
Princess Ida walks through isometric architecture built on illusions and impossible structures, and the player manipulates the buildings themselves to reveal paths that only connect from this exact angle. Critics compared it to "a vibrant M. C. Escher drawing", and the developers also cite Japanese prints and minimalist sculpture. It won a 2014 Apple Design Award and was followed by Monument Valley 2 (2017) and Monument Valley 3 (December 2024).
Isometric projection is what makes the trick possible: with no perspective, a near edge and a far edge can line up perfectly. Its puzzles are slow and deliberate, a pace that suits explainers and brand pieces that want to feel thoughtful.
Watch out for: Impossible geometry only works from one fixed angle. Lock the camera; any rotation or perspective breaks the illusion.
6. Hades (Supergiant Games, 2020): Best for fast character animation in an isometric world
Platform: Game, isometric view
Supergiant's action game is presented in an isometric view, with art led by Jen Zee, and in 2021 it became the first game to win a Hugo Award. Unlike the slow puzzles of Monument Valley, it is all speed: dashes, attacks and effects that have to read instantly from a fixed angle.
It shows that isometric does not have to mean static. Characters can move fast as long as the camera stays fixed and the ground plane is clear, so the eye always knows where the floor is.
Watch out for: Characters in isometric views need poses designed for the angle. Animation drawn for a side view looks wrong when tilted; plan key poses from the camera's point of view.
7. eBoy Pixoramas: Best for dense isometric worlds full of small stories
Platform: Pixel art studio, Berlin and Los Angeles
eBoy, founded in 1997 by Kai Vermehr, Steffen Sauerteig and Svend Smital, makes 8-bit-style pixel art rendered as isometric illustrations of cityscapes. Its largest works, Pixoramas, are detailed isometric cities that can take more than 1,000 hours to assemble; the studio has made more than 20 since 1998.
Pixoramas are still images, but they are the best reference there is for animating isometric scenes: every corner holds a small event (a car, a person, a sign) that could become a loop. Pick three and you have a looping scene.
Watch out for: This density is a lifetime of practice. For a product animation, use a tenth of the detail and let one event at a time move.
8. LottieFiles isometric animations: Best for ready-made isometric loops for apps
Platform: LottieFiles, Lottie JSON, dotLottie, MP4, GIF
LottieFiles lists 525 free isometric UI animations, downloadable as dotLottie, Lottie JSON, MP4 and GIF, from creators such as Ision Industries (cube loaders), plus premium ones. Lottie files play in apps and websites with a small player library, which makes them a quick route to an isometric loader or empty state.
If you would rather not add a player, our Isometric Cube Loader below is a pure-CSS take on the same kind of loop: eight hairline cubes burst apart and spring back into one block.
Watch out for: Check each file's license on LottieFiles before shipping it, and watch file size: detailed isometric scenes can produce heavy JSON.
9. Our Hairline Animations directory: Best for copy-paste isometric line art for products
Platform: Motions directory, free, inline SVG and CSS Ours
Sixty isometric hairline animations: devices, scenes, processes and loaders drawn in one constant thin stroke on a 2:1 grid, with white faces drawn back to front so near objects hide far lines, a single accent colour, and motion that moves once and settles like a spring. Parcel to Doorstep, below, rides a parcel from warehouse to van to door.
Each one is inline SVG and CSS with no JavaScript, two custom properties for colour and size, and a prefers-reduced-motion guard. Use them for onboarding, empty states, feature sections and docs.
Watch out for: Line art reads small. Keep each animation at a size where the stroke stays crisp, and use the accent for the one thing you want noticed.
10. Our Isometric Hairline explainer (Studio): Best for isometric product explainers in video
Platform: Motions Animation Studio, prompt is CC0 Ours
A tidy isometric line-art explainer: constant 2px strokes, white faces and one vermilion accent as a parcel travels from warehouse to doorstep on the grid, each object extruding into place. It is the hairline style as a full scene, built for video rather than a web page.
Describe your own process in the Animation Studio, from signup flow to supply chain, then scrub the timeline, tune the springs and export MP4, GIF, HTML or React.
Watch out for: Explainers in line art need a strong order of events. Storyboard the path the accent takes before you add objects around it.
11. Our Isometric Cloud Architecture (Studio): Best for infrastructure and system diagrams that move
Platform: Motions Animation Studio, prompt is CC0 Ours
On an isometric ground plate, an app's services drop in and stack up as blocks, from load balancer to object storage, their links pulse with traffic, and a spike makes the workers autoscale from four to six. Isometric became a common style for cloud diagrams because every edge stays parallel, so grouping and depth read without distortion.
Pair it with our Exploded Isometric UI Layers, which tilts an app screen into interface, logic and data layers, for a full architecture story.
Watch out for: Diagrams must match the real system. Label every block with the service your team actually runs, or engineers will stop trusting the deck.
12. Our Desk Diorama (Studio): Best for cosy isometric room scenes in the Blender style
Platform: Motions Animation Studio, prompt is CC0 Ours
An isometric cut-away home office on a floating slab furnishes itself piece by piece: oak planks, sage walls, a walnut desk, a display, a jointed lamp, a plant, a steaming mug and a chair, while a checklist ticks to 7 of 7 before the lamp clicks on at dusk. Isometric room dioramas are a favourite practice piece for 3D artists in free tools such as Blender.
This version is built as code, so the furniture, colours and checklist are all editable, and it renders straight to video. For a whole block instead of a room, see our Isometric Miniature City.
Watch out for: Dioramas are easy to over-furnish. Every object should arrive for a reason, ideally one tied to the story you are telling.
How to choose an isometric style
Decide the grid, the level of detail and the medium before you draw anything.
Match the grid to the medium
Pixel art and crisp line art on screens use a 2:1 dimetric grid (lines at about 26.6 degrees) because the steps land cleanly on pixels; that is what classic games and our Hairline Animations use. Technical drawings and vector illustrations can use true 30 degree isometric. Pick one and never mix them in a scene.
Match the detail to the job
Product UI and docs want sparse line art with one accent (Hairline, our cube loader). Explainers want a clear path through a scene (Marble Madness, our parcel explainer). Brand pieces can go dense like eBoy, as long as only one thing moves at a time. The more detail, the slower and fewer the movements should be.
Match the motion to the projection
Isometric views hide height and depth, so motion has to supply them: shadows for height (Zaxxon), back-to-front drawing for overlap (Knight Lore), speed that follows slopes (Marble Madness), and a camera that never rotates (Monument Valley). Springs and short settles suit the style; perspective camera moves break it.
Draw your first isometric loop today
Start from a single object on a 2:1 grid: a box that lifts and settles, a cube that splits, a parcel that slides. Give it a shadow, one accent colour and a spring. When that feels right, add a second object and a path between them.
To skip the setup, copy a snippet from our Hairline Animations, or describe a full scene in the Studio: Claude draws the isometric art, choreographs the motion and checks every frame, and you can export MP4, GIF, HTML or React.
Make an 8-second isometric line-art animation on a 2:1 dimetric grid showing [process, e.g. an order moving from cart to warehouse to doorstep]. One constant 2px stroke, white faces drawn back to front, one accent colour [hex] for the moving object only. Each object extrudes into place on a spring (about 0.5s, slight overshoot), the accent object moves along a dashed path at a steady pace, and its shadow stays on the ground plane. No camera rotation or perspective. Hold the final frame for 1.5 seconds. If the viewer prefers reduced motion, show the finished scene with a 0.3s fade.
Common questions
What is isometric animation?
Animation drawn in isometric (or near-isometric) projection: a fixed, raised view with no vanishing point, so objects keep their size as they move. It is used in games, explainers, infographics and product illustration.
What is the difference between isometric and dimetric?
In true isometric projection the three axes are equally foreshortened, with lines at 30 degrees. Most digital "isometric" art uses a 2:1 pixel grid, about 26.6 degrees, which is technically dimetric, because those lines step cleanly across pixels.
How do you make an isometric animation in CSS?
Either rotate a flat element into place with transforms (for example a rotateX then rotateZ on a container) or draw the shapes in SVG on a 2:1 grid and animate them with CSS keyframes. Our Hairline snippets use the SVG route, with white faces drawn back to front.
What software is used for isometric animation?
Blender and Cinema 4D with an orthographic camera for 3D, After Effects or Illustrator with an isometric grid for 2D, pixel editors for pixel art, Lottie for app-ready loops, and SVG plus CSS for the web. Our Studio builds isometric scenes as code and exports video.
What was the first isometric video game?
Data East's Treasure Island (1981, Japan) is credited as the first arcade game in the style, and Sega's Zaxxon was the first released internationally, in 1982, according to Wikipedia's history of isometric game graphics.