Skip to content
Tools & Workflow

Export SVG with the right viewBox

Crop to the drawing, not the artboard.

Responsive isometric scenes need a plan for narrow screens. Sometimes the answer is to scale everything down with clamp(), and sometimes it is to hide secondary blocks entirely. What rarely works is letting the scene overflow sideways, which makes the page scroll horizontally and feels broken on a phone.

Your toolkit

  • Triangle-grid paper and a soft pencil
  • A browser with a Layers panel
  • A snippets file of finished scenes
Share

8 comments

  1. Bea Kowalski

    Thanks for covering reduced motion. It is so often an afterthought.

    Reply to Bea Kowalski
  2. Mateo Rossi

    Any plans for a video version of this one?

    Reply to Mateo Rossi
  3. Rosa Medina

    This is the clearest explanation of draw order I have read.

    Reply to Rosa Medina
  4. Alex Moreau

    Has anyone tried this with container queries? Feels like a good fit.

    Reply to Alex Moreau
    1. Jonah BergAuthor

      Agreed, this is the part most tutorials skip.

      Reply to Jonah Berg
      1. June Park

        Thanks! A follow-up is already in the drafts.

        Reply to June Park
  5. Soren Dahl

    Bookmarked. The table alone is worth it.

    Reply to Soren Dahl
  6. Dana Ortiz

    I teach an intro CSS class and I am going to use this as the final project.

    Reply to Dana Ortiz

Leave a comment

Your email address won’t be published. Required fields are marked.