Advanced

Tutor model

i62 💰:9.4

i52 💰:7.9

🏆 i67 💰:62.5

i70 💰:125.0

i68 💰:125.0

🏆 i66 💰:75.0

i65 💰:125.0

i63 💰:62.5

i61 💰:75.0

i60 💰:9.4

i60 💰:37.5

i58 💰:62.5

i57 💰:22.5

i57 💰:37.5

i56 💰:45.0

⚡ i55 💰:11.25

i55 💰:37.5

i54 💰:62.5

i52 💰:35.0

i51 💰:37.5

i49 💰:15.0

i49 💰:62.5

i48 💰:11.3

i47 💰:7.5

i44 💰:25.0

i43 💰:37.5

i42 💰:187.5

i40 💰:5.0

i39 💰:100.0

i38 💰:37.5

i37 💰:11.0

i36 💰:187.5

i34 💰:12.5

i33 💰:37.5

i30 💰:1.0

i29 💰:1.5

i28 💰:150.0

i23 💰:20.0

i20 💰:4.0

i18 💰:1.0

i16 💰:25.0

i13 💰:1.5

Keep session private

What would you like to learn?

Override for the tutor's lesson content generation calls. Auto uses the system default (Claude Sonnet 5 for lesson text, Opus 5 for diagrams).

Lesson generation model

System default

i58 💰:18.8

i31 💰:11.0

i25 💰:31.3

Tutoring abilities

How do your favorite block-building video games make flat screens look like real 3D worlds?

Artists and builders use special **isometric dot paper** to draw 3D shapes so that every side stays easy to measure.

On isometric paper, dots do not form flat squares. Instead, they make a pattern shaped like the letter **Y**.

To draw in 3D, you only connect dots in **three directions**: straight up and down, slanted up-left, or slanted up-right.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      background: #f8f9fa;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 12px;
      height: 100%;
      min-height: 100%;
      user-select: none;
    }

    .controls {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      justify-content: center;
      width: 100%;
      max-width: 480px;
      z-index: 2;
    }

    .btn {
      font-size: 13px;
      font-weight: 600;
      padding: 6px 12px;
      border-radius: 20px;
      border: 1px solid #e2e8f0;
      background: #ffffff;
      color: #64748b;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 5px;
      transition: all 0.2s ease;
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    }

    .btn.active-all {
      background: #1e2945;
      color: #ffffff;
      border-color: #1e2945;
    }
    .btn.active-vert {
      background: #0284c7;
      color: #ffffff;
      border-color: #0284c7;
    }
    .btn.active-left {
      background: #059669;
      color: #ffffff;
      border-color: #059669;
    }
    .btn.active-right {
      background: #d97706;
      color: #ffffff;
      border-color: #d97706;
    }

    .canvas-container {
      position: relative;
      width: 100%;
      max-width: 420px;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 240px;
    }

    svg {
      width: 100%;
      height: 100%;
      max-height: 320px;
      overflow: visible;
    }

    .grid-dot {
      fill: #cbd5e1;
      transition: fill 0.2s ease, r 0.2s ease;
    }

    .axis-line {
      stroke-width: 3.5;
      stroke-linecap: round;
      transition: stroke-dashoffset 0.4s ease, opacity 0.3s ease;
    }

    .center-dot {
      fill: #1e2945;
      stroke: #ffffff;
      stroke-width: 2;
    }

    .label-tag {
      font-size: 12px;
      font-weight: 700;
      fill: #ffffff;
      text-anchor: middle;
      dominant-baseline: central;
    }

    .tag-bg {
      rx: 10px;
      ry: 10px;
      transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .dir-group {
      transition: opacity 0.3s ease;
    }
    
    .hidden {
      opacity: 0.08;
      pointer-events: none;
    }
  </style>
</head>
<body>

  <div class="controls">
    <button class="btn active-all" id="btn-all" onclick="setMode('all')">✦ All 3</button>
    <button class="btn" id="btn-vert" onclick="setMode('vert')">↕ Vertical</button>
    <button class="btn" id="btn-left" onclick="setMode('left')">↖ Up-Left</button>
    <button class="btn" id="btn-right" onclick="setMode('right')">↗ Up-Right</button>
  </div>

  <div class="canvas-container">
    <svg id="isoSvg" viewBox="0 0 360 270">
      <defs>
        
        <marker id="arrow-vert" markerWidth="6" markerHeight="6" refX="4" refY="3" orient="auto">
          <path d="M0,1 L5,3 L0,5 Z" fill="#0284c7" />
        </marker>
        <marker id="arrow-left" markerWidth="6" markerHeight="6" refX="4" refY="3" orient="auto">
          <path d="M0,1 L5,3 L0,5 Z" fill="#059669" />
        </marker>
        <marker id="arrow-right" markerWidth="6" markerHeight="6" refX="4" refY="3" orient="auto">
          <path d="M0,1 L5,3 L0,5 Z" fill="#d97706" />
        </marker>
      </defs>

      
      <g id="gridDots"></g>

      
      
      <g id="grp-vert" class="dir-group">
        <line class="axis-line" x1="180" y1="135" x2="180" y2="40" stroke="#0284c7" marker-end="url(#arrow-vert)" />
        <line class="axis-line" x1="180" y1="135" x2="180" y2="230" stroke="#0284c7" marker-end="url(#arrow-vert)" />
        <g transform="translate(180, 26)">
          <rect class="tag-bg" x="-44" y="-11" width="88" height="22" fill="#0284c7" />
          <text class="label-tag" y="1">Straight Up</text>
        </g>
      </g>

      
      <g id="grp-left" class="dir-group">
        <line class="axis-line" x1="180" y1="135" x2="41.4" y2="55" stroke="#059669" marker-end="url(#arrow-left)" />
        <line class="axis-line" x1="180" y1="135" x2="318.6" y2="215" stroke="#059669" marker-end="url(#arrow-left)" />
        <g transform="translate(42, 40)">
          <rect class="tag-bg" x="-38" y="-11" width="76" height="22" fill="#059669" />
          <text class="label-tag" y="1">Up-Left</text>
        </g>
      </g>

      
      <g id="grp-right" class="dir-group">
        <line class="axis-line" x1="180" y1="135" x2="318.6" y2="55" stroke="#d97706" marker-end="url(#arrow-right)" />
        <line class="axis-line" x1="180" y1="135" x2="41.4" y2="215" stroke="#d97706" marker-end="url(#arrow-right)" />
        <g transform="translate(318, 40)">
          <rect class="tag-bg" x="-42" y="-11" width="84" height="22" fill="#d97706" />
          <text class="label-tag" y="1">Up-Right</text>
        </g>
      </g>

      
      <circle class="center-dot" cx="180" cy="135" r="5" />
    </svg>
  </div>

  <script>
    // Draw Isometric Dot Grid
    // Isometric grid spacing: dx = 46.19 (R * cos(30)), dy = 26.67
    // Standard equilateral triangular lattice
    const svg = document.getElementById('gridDots');
    const cx = 180;
    const cy = 135;
    const step = 46.188; // 80 * cos(30) ~ step along axes is 80, 40, etc.
    const hStep = 46.188;
    const vStep = 26.667;

    for (let r = -5; r <= 5; r++) {
      for (let c = -5; c <= 5; c++) {
        let x = cx + c * hStep;
        let y = cy + r * (vStep * 2) + ((Math.abs(c) % 2 === 1) ? vStep : 0);
        if (x >= 15 && x <= 345 && y >= 15 && y <= 255) {
          const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
          circle.setAttribute('cx', x.toFixed(1));
          circle.setAttribute('cy', y.toFixed(1));
          circle.setAttribute('r', '2.5');
          circle.setAttribute('class', 'grid-dot');
          svg.appendChild(circle);
        }
      }
    }

    function setMode(mode) {
      const gVert = document.getElementById('grp-vert');
      const gLeft = document.getElementById('grp-left');
      const gRight = document.getElementById('grp-right');

      const btnAll = document.getElementById('btn-all');
      const btnVert = document.getElementById('btn-vert');
      const btnLeft = document.getElementById('btn-left');
      const btnRight = document.getElementById('btn-right');

      // Reset button classes
      btnAll.className = 'btn';
      btnVert.className = 'btn';
      btnLeft.className = 'btn';
      btnRight.className = 'btn';

      if (mode === 'all') {
        btnAll.classList.add('active-all');
        gVert.classList.remove('hidden');
        gLeft.classList.remove('hidden');
        gRight.classList.remove('hidden');
      } else if (mode === 'vert') {
        btnVert.classList.add('active-vert');
        gVert.classList.remove('hidden');
        gLeft.classList.add('hidden');
        gRight.classList.add('hidden');
      } else if (mode === 'left') {
        btnLeft.classList.add('active-left');
        gVert.classList.add('hidden');
        gLeft.classList.remove('hidden');
        gRight.classList.add('hidden');
      } else if (mode === 'right') {
        btnRight.classList.add('active-right');
        gVert.classList.add('hidden');
        gLeft.classList.add('hidden');
        gRight.classList.remove('hidden');
      }
    }
  </script>
</body>
</html>

What happens when we connect these three directions to build our very first 3D block?

A **cube** is a 3D shape where all sides and edges are the exact same length.

Start by drawing a front vertical line, add the bottom slanted lines like a wide V, and draw matching lines to close the top diamond.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <title>Drawing 3D Prisms on Isometric Dot Paper</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      user-select: none;
      -webkit-user-select: none;
    }
    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #ffffff;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 12px 16px;
      gap: 10px;
    }
    .stepper-nav {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      width: 100%;
      max-width: 420px;
    }
    .step-btn {
      flex: 1;
      padding: 6px 4px;
      font-size: 13px;
      font-weight: 600;
      border: 1px solid #e2e8f0;
      background: #f8fafc;
      color: #64748b;
      border-radius: 8px;
      cursor: pointer;
      text-align: center;
      transition: all 0.25s ease;
      white-space: nowrap;
    }
    .step-btn.active {
      background: #22b7ff;
      color: #ffffff;
      border-color: #22b7ff;
      box-shadow: 0 2px 6px rgba(34, 183, 255, 0.35);
    }
    .canvas-container {
      position: relative;
      width: 100%;
      max-width: 440px;
      aspect-ratio: 4 / 3;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }
    .grid-dot {
      fill: #cbd5e1;
      transition: fill 0.3s ease;
    }
    .guide-dot {
      fill: #94a3b8;
    }
    .edge {
      stroke: #1e2945;
      stroke-width: 3.5;
      stroke-linecap: round;
      stroke-linejoin: round;
      opacity: 0;
      transition: opacity 0.35s ease, stroke-dashoffset 0.4s ease;
    }
    .edge.visible {
      opacity: 1;
    }
    .edge.highlight {
      stroke: #0284c7;
      stroke-width: 4.5;
    }
    .face {
      opacity: 0;
      transition: opacity 0.45s ease;
    }
    .face.visible {
      opacity: 0.85;
    }
    .vertex-dot {
      fill: #22b7ff;
      stroke: #ffffff;
      stroke-width: 2;
      opacity: 0;
      transition: opacity 0.3s ease, transform 0.3s ease;
      transform-origin: center;
    }
    .vertex-dot.visible {
      opacity: 1;
    }
    .controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      width: 100%;
    }
    .ctrl-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: 1px solid #e2e8f0;
      background: #f8fafc;
      color: #1e2945;
      font-size: 14px;
      cursor: pointer;
      transition: background 0.2s ease, border-color 0.2s ease;
    }
    .ctrl-btn:hover {
      background: #f1f5f9;
      border-color: #cbd5e1;
    }
    .ctrl-btn.play-btn {
      width: 42px;
      height: 42px;
      background: #22b7ff;
      color: #ffffff;
      border-color: #22b7ff;
      font-size: 15px;
      box-shadow: 0 2px 8px rgba(34, 183, 255, 0.3);
    }
  </style>
</head>
<body>

  <div class="stepper-nav">
    <button class="step-btn active" onclick="setStep(0)">1. Front line</button>
    <button class="step-btn" onclick="setStep(1)">2. Bottom V</button>
    <button class="step-btn" onclick="setStep(2)">3. Side lines</button>
    <button class="step-btn" onclick="setStep(3)">4. Top diamond</button>
  </div>

  <div class="canvas-container">
    <svg viewBox="0 0 400 300">
      
      <g id="dotGrid"></g>

      
      <g id="cubeFaces">
        
        <polygon id="faceTop" class="face" points="200,50 269.28,90 200,130 130.72,90" fill="#bae6fd" />
        
        <polygon id="faceLeft" class="face" points="130.72,90 200,130 200,210 130.72,170" fill="#7dd3fc" />
        
        <polygon id="faceRight" class="face" points="200,130 269.28,90 269.28,170 200,210" fill="#38bdf8" />
      </g>

      
      <g id="cubeEdges">
        
        <line id="edgeFront" class="edge" x1="200" y1="210" x2="200" y2="130" />

        
        <line id="edgeBottomL" class="edge" x1="200" y1="210" x2="130.72" y2="170" />
        <line id="edgeBottomR" class="edge" x1="200" y1="210" x2="269.28" y2="170" />

        
        <line id="edgeSideL" class="edge" x1="130.72" y1="170" x2="130.72" y2="90" />
        <line id="edgeSideR" class="edge" x1="269.28" y1="170" x2="269.28" y2="90" />

        
        <line id="edgeTopFL" class="edge" x1="200" y1="130" x2="130.72" y2="90" />
        <line id="edgeTopFR" class="edge" x1="200" y1="130" x2="269.28" y2="90" />
        <line id="edgeTopBL" class="edge" x1="130.72" y1="90" x2="200" y2="50" />
        <line id="edgeTopBR" class="edge" x1="269.28" y1="90" x2="200" y2="50" />
      </g>

      
      <g id="cornerDots">
        <circle id="dot-b0" class="vertex-dot" cx="200" cy="210" r="4.5" />
        <circle id="dot-t0" class="vertex-dot" cx="200" cy="130" r="4.5" />
        <circle id="dot-bl" class="vertex-dot" cx="130.72" cy="170" r="4.5" />
        <circle id="dot-br" class="vertex-dot" cx="269.28" cy="170" r="4.5" />
        <circle id="dot-tl" class="vertex-dot" cx="130.72" cy="90" r="4.5" />
        <circle id="dot-tr" class="vertex-dot" cx="269.28" cy="90" r="4.5" />
        <circle id="dot-tb" class="vertex-dot" cx="200" cy="50" r="4.5" />
      </g>
    </svg>
  </div>

  <div class="controls">
    <button class="ctrl-btn" onclick="prevStep()" aria-label="Previous">◀</button>
    <button id="playBtn" class="ctrl-btn play-btn" onclick="togglePlay()" aria-label="Auto Play">▶</button>
    <button class="ctrl-btn" onclick="nextStep()" aria-label="Next">▶</button>
  </div>

  <script>
    // Generate precise isometric background dots
    const dotGrid = document.getElementById('dotGrid');
    const dx = 69.282; // 80 * cos(30)
    const dy = 40;     // 80 * sin(30)
    
    for (let row = 0; row <= 7; row++) {
      const y = 10 + row * dy;
      const xOffset = (row % 2 === 0) ? 200 : 200 - dx / 2;
      for (let col = -3; col <= 3; col++) {
        const x = xOffset + col * dx;
        if (x >= 10 && x <= 390) {
          const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
          circle.setAttribute('cx', x.toFixed(2));
          circle.setAttribute('cy', y.toFixed(2));
          circle.setAttribute('r', '2.5');
          circle.setAttribute('class', 'grid-dot');
          dotGrid.appendChild(circle);
        }
      }
    }

    let currentStep = 0;
    let isPlaying = false;
    let autoInterval = null;

    const stepElements = [
      // Step 0: Front line
      {
        edges: ['edgeFront'],
        dots: ['dot-b0', 'dot-t0'],
        faces: []
      },
      // Step 1: Bottom V
      {
        edges: ['edgeFront', 'edgeBottomL', 'edgeBottomR'],
        dots: ['dot-b0', 'dot-t0', 'dot-bl', 'dot-br'],
        faces: []
      },
      // Step 2: Side lines
      {
        edges: ['edgeFront', 'edgeBottomL', 'edgeBottomR', 'edgeSideL', 'edgeSideR'],
        dots: ['dot-b0', 'dot-t0', 'dot-bl', 'dot-br', 'dot-tl', 'dot-tr'],
        faces: []
      },
      // Step 3: Top diamond + faces
      {
        edges: ['edgeFront', 'edgeBottomL', 'edgeBottomR', 'edgeSideL', 'edgeSideR', 'edgeTopFL', 'edgeTopFR', 'edgeTopBL', 'edgeTopBR'],
        dots: ['dot-b0', 'dot-t0', 'dot-bl', 'dot-br', 'dot-tl', 'dot-tr', 'dot-tb'],
        faces: ['faceTop', 'faceLeft', 'faceRight']
      }
    ];

    const allEdges = ['edgeFront', 'edgeBottomL', 'edgeBottomR', 'edgeSideL', 'edgeSideR', 'edgeTopFL', 'edgeTopFR', 'edgeTopBL', 'edgeTopBR'];
    const allDots = ['dot-b0', 'dot-t0', 'dot-bl', 'dot-br', 'dot-tl', 'dot-tr', 'dot-tb'];
    const allFaces = ['faceTop', 'faceLeft', 'faceRight'];
    const stepBtns = document.querySelectorAll('.step-btn');
    const playBtn = document.getElementById('playBtn');

    function renderStep() {
      // Buttons
      stepBtns.forEach((btn, idx) => {
        btn.classList.toggle('active', idx === currentStep);
      });

      const activeConfig = stepElements[currentStep];

      // Edges
      allEdges.forEach(id => {
        const el = document.getElementById(id);
        const isVisible = activeConfig.edges.includes(id);
        el.classList.toggle('visible', isVisible);
      });

      // Vertex dots
      allDots.forEach(id => {
        const el = document.getElementById(id);
        const isVisible = activeConfig.dots.includes(id);
        el.classList.toggle('visible', isVisible);
      });

      // Faces
      allFaces.forEach(id => {
        const el = document.getElementById(id);
        const isVisible = activeConfig.faces.includes(id);
        el.classList.toggle('visible', isVisible);
      });
    }

    function setStep(step) {
      currentStep = step;
      renderStep();
    }

    function nextStep() {
      currentStep = (currentStep + 1) % 4;
      renderStep();
    }

    function prevStep() {
      currentStep = (currentStep - 1 + 4) % 4;
      renderStep();
    }

    function togglePlay() {
      isPlaying = !isPlaying;
      playBtn.textContent = isPlaying ? '⏸' : '▶';
      if (isPlaying) {
        autoInterval = setInterval(() => {
          nextStep();
        }, 3200);
      } else {
        clearInterval(autoInterval);
      }
    }

    // Initial render
    renderStep();
  </script>
</body>
</html>

Cubes have equal sides, but what if you want to draw a shape that looks like a cereal box or a brick?

A **rectangular prism** is a 3D solid box with rectangular faces.

You draw it just like a cube, but you stretch one slanted direction longer by counting more dots.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding: 12px;
      user-select: none;
    }

    .toolbar {
      display: flex;
      gap: 8px;
      margin-bottom: 10px;
      flex-wrap: wrap;
      justify-content: center;
    }

    .btn {
      background: #ffffff;
      border: 2px solid #e2e8f0;
      border-radius: 8px;
      padding: 6px 14px;
      font-size: 14px;
      font-weight: 600;
      color: #1e2945;
      cursor: pointer;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
      transition: background 0.2s, border-color 0.2s, color 0.2s;
    }

    .btn.active {
      background: #22b7ff;
      border-color: #22b7ff;
      color: #ffffff;
    }

    .canvas-container {
      width: 100%;
      max-width: 480px;
      background: #ffffff;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.06);
      border: 1px solid #e6e8ec;
      position: relative;
      overflow: hidden;
    }

    svg {
      display: block;
      width: 100%;
      height: auto;
    }

    .slider-panel {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin-top: 10px;
      background: #ffffff;
      padding: 8px 16px;
      border-radius: 20px;
      border: 1px solid #e2e8f0;
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    }

    .slider-label {
      font-size: 14px;
      font-weight: 600;
      color: #1e2945;
    }

    input[type=range] {
      accent-color: #22b7ff;
      cursor: pointer;
      width: 130px;
    }

    .badge {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 700;
      background: #e0f2fe;
      color: #0369a1;
      min-width: 60px;
      text-align: center;
    }
  </style>
</head>
<body>

  <div class="toolbar">
    <button id="btnCube" class="btn" onclick="setPreset(2)">Cube (2×2×2)</button>
    <button id="btnPrism" class="btn active" onclick="setPreset(5)">Stretched Prism (2×5×2)</button>
  </div>

  <div class="canvas-container">
    <svg id="isoSvg" viewBox="0 0 460 340">
      
    </svg>
  </div>

  <div class="slider-panel">
    <span class="slider-label">Slanted Dots:</span>
    <input type="range" id="depthSlider" min="2" max="6" value="5" step="1" oninput="onSliderChange(this.value)">
    <span id="badgeValue" class="badge">5 dots</span>
  </div>

  <script>
    const svg = document.getElementById('isoSvg');
    const slider = document.getElementById('depthSlider');
    const badge = document.getElementById('badgeValue');
    const btnCube = document.getElementById('btnCube');
    const btnPrism = document.getElementById('btnPrism');

    // Isometric projection basis vectors
    // 30 degrees down-right for X (width), 150 degrees down-left (or 30 up-right) for Y (depth), Vertical for Z (height)
    const unit = 28; // grid spacing
    const cos30 = Math.cos(Math.PI / 6); // ~0.866
    const sin30 = Math.sin(Math.PI / 6); // 0.5

    const dx = unit * cos30; // ~24.25
    const dy = unit * sin30; // 14

    // Center anchor in SVG coordinates
    const originX = 145;
    const originY = 240;

    // Convert 3D grid coords (w, d, h) to SVG (x, y)
    // w = right-down axis (30 deg)
    // d = right-up axis (-30 deg) -> slanted stretch
    // h = vertical up axis (-90 deg)
    function isoToScreen(w, d, h) {
      const x = originX + (w * dx) + (d * dx);
      const y = originY + (w * dy) - (d * dy) - (h * unit);
      return [x, y];
    }

    function renderGrid() {
      let dotsHtml = '<g fill="#cbd5e1">';
      // Generate standard isometric dot lattice
      for (let row = -2; row <= 10; row++) {
        for (let col = -1; col <= 13; col++) {
          const sx = 20 + col * dx;
          const sy = 20 + row * unit * 2 + ((col % 2 !== 0) ? unit : 0);
          if (sx >= 10 && sx <= 450 && sy >= 10 && sy <= 330) {
            dotsHtml += `<circle cx="${sx}" cy="${sy}" r="2" />`;
          }
        }
      }
      dotsHtml += '</g>';
      return dotsHtml;
    }

    function drawPrism(depth) {
      const W = 2; // Width
      const H = 2; // Height
      const D = depth; // Depth (stretching axis)

      // Vertices
      const p000 = isoToScreen(0, 0, 0); // Front-left-bottom
      const p100 = isoToScreen(W, 0, 0); // Front-right-bottom
      const p101 = isoToScreen(W, 0, H); // Front-right-top
      const p001 = isoToScreen(0, 0, H); // Front-left-top

      const p010 = isoToScreen(0, D, 0); // Back-left-bottom
      const p110 = isoToScreen(W, D, 0); // Back-right-bottom
      const p111 = isoToScreen(W, D, H); // Back-right-top
      const p011 = isoToScreen(0, D, H); // Back-left-top

      let html = renderGrid();

      // Shaded faces
      // Front face
      html += `<polygon points="${p000[0]},${p000[1]} ${p100[0]},${p100[1]} ${p101[0]},${p101[1]} ${p001[0]},${p001[1]}" fill="#93c5fd" opacity="0.35" />`;
      // Top face
      html += `<polygon points="${p001[0]},${p001[1]} ${p101[0]},${p101[1]} ${p111[0]},${p111[1]} ${p011[0]},${p011[1]}" fill="#60a5fa" opacity="0.45" />`;
      // Right (slanted) face
      html += `<polygon points="${p100[0]},${p100[1]} ${p110[0]},${p110[1]} ${p111[0]},${p111[1]} ${p101[0]},${p101[1]}" fill="#3b82f6" opacity="0.55" />`;

      // Edges (Visible solid lines)
      const edges = [
        [p000, p100], [p100, p101], [p101, p001], [p001, p000], // Front face
        [p001, p011], [p101, p111], [p100, p110],             // Slanted depth edges
        [p011, p111], [p111, p110]                            // Back-top & Back-right
      ];

      edges.forEach(([pA, pB]) => {
        html += `<line x1="${pA[0]}" y1="${pA[1]}" x2="${pB[0]}" y2="${pB[1]}" stroke="#1e2945" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />`;
      });

      // Highlight the stretched slanted edge dots
      html += `<g fill="#22b7ff">`;
      for (let d = 0; d <= D; d++) {
        const [cx, cy] = isoToScreen(W, d, 0);
        html += `<circle cx="${cx}" cy="${cy}" r="4.5" stroke="#ffffff" stroke-width="1.5" />`;
      }
      html += `</g>`;

      // Stretched edge accent guide
      html += `<line x1="${p100[0]}" y1="${p100[1]}" x2="${p110[0]}" y2="${p110[1]}" stroke="#22b7ff" stroke-width="3" stroke-linecap="round" />`;

      // Labels / Dot counting arrows
      const midX = (p100[0] + p110[0]) / 2 + 12;
      const midY = (p100[1] + p110[1]) / 2 + 16;
      html += `<text x="${midX}" y="${midY}" fill="#0284c7" font-weight="bold" font-size="14" text-anchor="start">${D} dots slanted →</text>`;

      // Height label
      html += `<text x="${p000[0] - 10}" y="${(p000[1] + p001[1]) / 2 + 4}" fill="#64748b" font-weight="600" font-size="13" text-anchor="end">${H} dots</text>`;

      // Front width label
      html += `<text x="${(p000[0] + p100[0]) / 2 - 4}" y="${(p000[1] + p100[1]) / 2 + 18}" fill="#64748b" font-weight="600" font-size="13" text-anchor="middle">${W} dots</text>`;

      svg.innerHTML = html;
    }

    function updateState(val) {
      const d = parseInt(val, 10);
      slider.value = d;
      badge.textContent = d + (d === 1 ? ' dot' : ' dots');
      btnCube.classList.toggle('active', d === 2);
      btnPrism.classList.toggle('active', d === 5);
      drawPrism(d);
    }

    function onSliderChange(val) {
      updateState(val);
    }

    function setPreset(val) {
      updateState(val);
    }

    // Initial render
    drawPrism(5);
  </script>
</body>
</html>

Why do some drawings look flat or crooked when beginners try them?

A common mistake is drawing a flat horizontal line across the page instead of following the slanted dots.

Always make sure your side edges follow the diagonal dots so your shape looks pop-out 3D instead of flat!

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="aspect-ratio" content="4:3">
  <title>Drawing 3D Prisms on Isometric Dot Paper</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      color: #1e2945;
      background: transparent;
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .grid-container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      width: 100%;
    }
    .panel {
      background: #ffffff;
      border-radius: 12px;
      padding: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
    }
    .panel.wrong {
      border-top: 4px solid #ef4444;
      box-shadow: 0 2px 8px rgba(239, 68, 68, 0.1);
    }
    .panel.correct {
      border-top: 4px solid #10b981;
      box-shadow: 0 2px 8px rgba(16, 185, 129, 0.1);
    }
    .badge {
      font-size: 14px;
      font-weight: 700;
      padding: 4px 10px;
      border-radius: 20px;
      margin-bottom: 8px;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
    .badge-wrong {
      background: #fee2e2;
      color: #b91c1c;
    }
    .badge-correct {
      background: #d1fae5;
      color: #047857;
    }
    svg {
      width: 100%;
      height: auto;
      max-height: 240px;
      display: block;
    }
    .dot {
      fill: #cbd5e1;
      transition: fill 0.3s ease;
    }
    .guide-line {
      stroke-dasharray: 4,4;
      stroke-width: 1.5;
    }
    .guide-wrong {
      stroke: #ef4444;
      opacity: 0.6;
    }
    .guide-correct {
      stroke: #10b981;
      opacity: 0.6;
    }
    .edge {
      fill: none;
      stroke-width: 3.5;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: stroke-dashoffset 0.6s ease, opacity 0.3s ease;
    }
    .edge-wrong {
      stroke: #ef4444;
    }
    .edge-correct {
      stroke: #10b981;
    }
    .face-top {
      fill: #34d399;
      opacity: 0.25;
    }
    .face-left {
      fill: #059669;
      opacity: 0.35;
    }
    .face-right {
      fill: #10b981;
      opacity: 0.15;
    }
    .controls {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 8px;
    }
    .step-btn {
      background: #f1f5f9;
      border: 1px solid #cbd5e1;
      color: #1e2945;
      font-size: 13px;
      font-weight: 600;
      padding: 6px 14px;
      border-radius: 20px;
      cursor: pointer;
      outline: none;
      transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    }
    .step-btn:hover {
      background: #e2e8f0;
    }
    .step-btn.active {
      background: #22b7ff;
      border-color: #22b7ff;
      color: #ffffff;
      box-shadow: 0 2px 6px rgba(34, 183, 255, 0.4);
    }
  </style>
</head>
<body>

  <div class="grid-container">
    
    <div class="panel wrong">
      <div class="badge badge-wrong">✕ Flat (Horizontal)</div>
      <svg viewBox="0 0 200 210">
        
        <g class="dots">
          
          <circle cx="20" cy="25" r="2.5" class="dot"/>
          <circle cx="60" cy="25" r="2.5" class="dot"/>
          <circle cx="100" cy="25" r="2.5" class="dot"/>
          <circle cx="140" cy="25" r="2.5" class="dot"/>
          <circle cx="180" cy="25" r="2.5" class="dot"/>
          
          <circle cx="40" cy="59.6" r="2.5" class="dot"/>
          <circle cx="80" cy="59.6" r="2.5" class="dot"/>
          <circle cx="120" cy="59.6" r="2.5" class="dot"/>
          <circle cx="160" cy="59.6" r="2.5" class="dot"/>
          
          <circle cx="20" cy="94.3" r="2.5" class="dot"/>
          <circle cx="60" cy="94.3" r="2.5" class="dot"/>
          <circle cx="100" cy="94.3" r="2.5" class="dot"/>
          <circle cx="140" cy="94.3" r="2.5" class="dot"/>
          <circle cx="180" cy="94.3" r="2.5" class="dot"/>
          
          <circle cx="40" cy="128.9" r="2.5" class="dot"/>
          <circle cx="80" cy="128.9" r="2.5" class="dot"/>
          <circle cx="120" cy="128.9" r="2.5" class="dot"/>
          <circle cx="160" cy="128.9" r="2.5" class="dot"/>
          
          <circle cx="20" cy="163.6" r="2.5" class="dot"/>
          <circle cx="60" cy="163.6" r="2.5" class="dot"/>
          <circle cx="100" cy="163.6" r="2.5" class="dot"/>
          <circle cx="140" cy="163.6" r="2.5" class="dot"/>
          <circle cx="180" cy="163.6" r="2.5" class="dot"/>
          
          <circle cx="40" cy="198.2" r="2.5" class="dot"/>
          <circle cx="80" cy="198.2" r="2.5" class="dot"/>
          <circle cx="120" cy="198.2" r="2.5" class="dot"/>
          <circle cx="160" cy="198.2" r="2.5" class="dot"/>
        </g>

        
        <line x1="40" y1="128.9" x2="160" y2="128.9" class="guide-line guide-wrong"/>
        <line x1="40" y1="59.6" x2="160" y2="59.6" class="guide-line guide-wrong"/>

        
        <rect x="50" y="59.6" width="100" height="69.3" fill="#ef4444" opacity="0.1"/>
        <rect x="50" y="59.6" width="100" height="69.3" class="edge edge-wrong"/>
        <line x1="100" y1="59.6" x2="100" y2="128.9" class="edge edge-wrong"/>
      </svg>
    </div>

    
    <div class="panel correct">
      <div class="badge badge-correct">✓ 3D (Diagonal Dots)</div>
      <svg viewBox="0 0 200 210">
        
        <g class="dots">
          
          <circle cx="20" cy="25" r="2.5" class="dot"/>
          <circle cx="60" cy="25" r="2.5" class="dot"/>
          <circle cx="100" cy="25" r="2.5" class="dot"/>
          <circle cx="140" cy="25" r="2.5" class="dot"/>
          <circle cx="180" cy="25" r="2.5" class="dot"/>
          
          <circle cx="40" cy="59.6" r="2.5" class="dot"/>
          <circle cx="80" cy="59.6" r="2.5" class="dot"/>
          <circle cx="120" cy="59.6" r="2.5" class="dot"/>
          <circle cx="160" cy="59.6" r="2.5" class="dot"/>
          
          <circle cx="20" cy="94.3" r="2.5" class="dot"/>
          <circle cx="60" cy="94.3" r="2.5" class="dot"/>
          <circle cx="100" cy="94.3" r="2.5" class="dot"/>
          <circle cx="140" cy="94.3" r="2.5" class="dot"/>
          <circle cx="180" cy="94.3" r="2.5" class="dot"/>
          
          <circle cx="40" cy="128.9" r="2.5" class="dot"/>
          <circle cx="80" cy="128.9" r="2.5" class="dot"/>
          <circle cx="120" cy="128.9" r="2.5" class="dot"/>
          <circle cx="160" cy="128.9" r="2.5" class="dot"/>
          
          <circle cx="20" cy="163.6" r="2.5" class="dot"/>
          <circle cx="60" cy="163.6" r="2.5" class="dot"/>
          <circle cx="100" cy="163.6" r="2.5" class="dot"/>
          <circle cx="140" cy="163.6" r="2.5" class="dot"/>
          <circle cx="180" cy="163.6" r="2.5" class="dot"/>
          
          <circle cx="40" cy="198.2" r="2.5" class="dot"/>
          <circle cx="80" cy="198.2" r="2.5" class="dot"/>
          <circle cx="120" cy="198.2" r="2.5" class="dot"/>
          <circle cx="160" cy="198.2" r="2.5" class="dot"/>
        </g>

        
        
        <g id="faces" style="opacity: 0; transition: opacity 0.4s ease;">
          <polygon points="100,25 160,59.6 100,94.3 40,59.6" class="face-top"/>
          <polygon points="40,59.6 100,94.3 100,163.6 40,128.9" class="face-left"/>
          <polygon points="100,94.3 160,59.6 160,128.9 100,163.6" class="face-right"/>
        </g>

        
        <g id="step1-lines">
          <line x1="100" y1="94.3" x2="100" y2="163.6" class="edge edge-correct"/>
        </g>

        
        <g id="step2-lines" style="opacity: 0; transition: opacity 0.4s ease;">
          <line x1="100" y1="163.6" x2="40" y2="128.9" class="edge edge-correct"/>
          <line x1="100" y1="163.6" x2="160" y2="128.9" class="edge edge-correct"/>
          <line x1="40" y1="128.9" x2="40" y2="59.6" class="edge edge-correct"/>
          <line x1="160" y1="128.9" x2="160" y2="59.6" class="edge edge-correct"/>
          <line x1="100" y1="94.3" x2="40" y2="59.6" class="edge edge-correct"/>
          <line x1="100" y1="94.3" x2="160" y2="59.6" class="edge edge-correct"/>
        </g>

        
        <g id="step3-lines" style="opacity: 0; transition: opacity 0.4s ease;">
          <line x1="40" y1="59.6" x2="100" y2="25" class="edge edge-correct"/>
          <line x1="160" y1="59.6" x2="100" y2="25" class="edge edge-correct"/>
        </g>
      </svg>
    </div>
  </div>

  
  <div class="controls">
    <button class="step-btn active" onclick="setStep(1)">1. Vertical ↕</button>
    <button class="step-btn" onclick="setStep(2)">2. Diagonals ↗↖</button>
    <button class="step-btn" onclick="setStep(3)">3. 3D Prism ⬡</button>
  </div>

  <script>
    let currentStep = 1;
    let timer = null;

    function setStep(step, userAction = true) {
      if (userAction && timer) {
        clearInterval(timer);
      }
      currentStep = step;

      const buttons = document.querySelectorAll('.step-btn');
      buttons.forEach((btn, idx) => {
        btn.classList.toggle('active', idx + 1 === step);
      });

      const s2 = document.getElementById('step2-lines');
      const s3 = document.getElementById('step3-lines');
      const faces = document.getElementById('faces');

      if (step === 1) {
        s2.style.opacity = '0';
        s3.style.opacity = '0';
        faces.style.opacity = '0';
      } else if (step === 2) {
        s2.style.opacity = '1';
        s3.style.opacity = '0';
        faces.style.opacity = '0';
      } else if (step === 3) {
        s2.style.opacity = '1';
        s3.style.opacity = '1';
        faces.style.opacity = '1';
      }
    }

    // Auto-advance calmly
    timer = setInterval(() => {
      const next = (currentStep % 3) + 1;
      setStep(next, false);
    }, 3200);
  </script>
</body>
</html>

Grab a sheet of isometric dot paper and try counting 3 dots high, 3 dots left, and 3 dots right to build your own 3D world.

math

Drawing 3D Prisms on Isometric Dot Paper. Sketch cubes and rectangular prisms accurately on isometric dot paper using standard 30-degree axes.

Isometric Drawing & The Third Dimension

Representing 3D Shapes: Isometric and 2D Drawings

Interactive Isometric Drawing Tool

When introducing isometric sketching within the Curriculum for Excellence framework (MTH 2-16c), bridge concrete manipulation with graphic representation using physical multilink or interlocking cubes. Have learners build physical block prisms first, align their viewpoint to a front corner to see the three standard visible faces, and transfer the physical model unit-by-unit onto the isometric dot grid using a ruler.

Drawing 3D Prisms on Isometric Dot Paper

The Three Magic Lines

Drawing a 3D Cube

Drawing a Rectangular Prism