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

Imagine tracing the edge of a picture frame with your finger. How many straight lines do you slide across before you get back to where you started?

A **side** is an outer line that makes up the boundary of a flat 2D shape.

Some sides are **straight** like a wooden ruler, while other sides are **curved** like a round racetrack.

<!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;
      color: #1e2945;
      background: transparent;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 12px;
      min-height: 100%;
      user-select: none;
    }

    .shape-nav {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: center;
      width: 100%;
      max-width: 480px;
    }

    .shape-btn {
      background: #ffffff;
      border: 2px solid #e6e6e6;
      border-radius: 20px;
      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: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
    }

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

    .canvas-box {
      width: 100%;
      max-width: 320px;
      aspect-ratio: 1 / 1;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      margin: 8px 0;
    }

    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    .side-base {
      stroke: #d1d5db;
      stroke-width: 8;
      stroke-linecap: round;
      fill: none;
      transition: stroke 0.3s ease;
    }

    .side-highlight {
      stroke: #22b7ff;
      stroke-width: 9;
      stroke-linecap: round;
      fill: none;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .side-highlight.active {
      opacity: 1;
    }

    .num-tag {
      opacity: 0;
      transition: opacity 0.3s ease;
      font-weight: 700;
      font-size: 16px;
      fill: #ffffff;
      dominant-baseline: central;
      text-anchor: middle;
    }

    .num-tag.active {
      opacity: 1;
    }

    .num-bubble {
      fill: #0284c7;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .num-bubble.active {
      opacity: 1;
    }

    .bottom-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      max-width: 360px;
      gap: 10px;
    }

    .badge-count {
      font-size: 16px;
      font-weight: 700;
      color: #0284c7;
      background: #e0f2fe;
      padding: 6px 14px;
      border-radius: 12px;
      text-align: center;
      flex: 1;
    }

    .btn-action {
      background: #22b7ff;
      color: #ffffff;
      border: none;
      border-radius: 12px;
      padding: 8px 16px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      box-shadow: 0 2px 4px rgba(34, 183, 255, 0.25);
    }
  </style>
</head>
<body>

  <div class="shape-nav">
    <button class="shape-btn active" data-shape="triangle">Triangle</button>
    <button class="shape-btn" data-shape="square">Square</button>
    <button class="shape-btn" data-shape="pentagon">Pentagon</button>
    <button class="shape-btn" data-shape="circle">Circle</button>
  </div>

  <div class="canvas-box">
    <svg id="stage" viewBox="0 0 260 260"></svg>
  </div>

  <div class="bottom-bar">
    <div class="badge-count" id="countBadge">3 Straight Sides</div>
    <button class="btn-action" id="countBtn">Count ▶</button>
  </div>

  <script>
    const shapes = {
      triangle: {
        label: "3 Straight Sides",
        unit: "Straight",
        paths: [
          { d: "M 130 40 L 220 200", mx: 190, my: 110 },
          { d: "M 220 200 L 40 200", mx: 130, my: 220 },
          { d: "M 40 200 L 130 40",  mx: 70,  my: 110 }
        ]
      },
      square: {
        label: "4 Straight Sides",
        unit: "Straight",
        paths: [
          { d: "M 55 55 L 205 55",   mx: 130, my: 35 },
          { d: "M 205 55 L 205 205", mx: 225, my: 130 },
          { d: "M 205 205 L 55 205", mx: 130, my: 225 },
          { d: "M 55 205 L 55 55",   mx: 35,  my: 130 }
        ]
      },
      pentagon: {
        label: "5 Straight Sides",
        unit: "Straight",
        paths: [
          { d: "M 130 38 L 222 105", mx: 190, my: 62 },
          { d: "M 222 105 L 187 212", mx: 220, my: 165 },
          { d: "M 187 212 L 73 212",  mx: 130, my: 230 },
          { d: "M 73 212 L 38 105",   mx: 40,  my: 165 },
          { d: "M 38 105 L 130 38",   mx: 70,  my: 62 }
        ]
      },
      circle: {
        label: "1 Curved Side",
        unit: "Curved",
        paths: [
          { d: "M 130 45 A 85 85 0 1 1 129.9 45", mx: 130, my: 25 }
        ]
      }
    };

    let currentShape = 'triangle';
    let currentStep = 0;
    let timer = null;

    const stage = document.getElementById('stage');
    const countBadge = document.getElementById('countBadge');
    const countBtn = document.getElementById('countBtn');
    const shapeBtns = document.querySelectorAll('.shape-btn');

    function renderShape(shapeKey) {
      clearInterval(timer);
      timer = null;
      currentShape = shapeKey;
      currentStep = 0;
      const data = shapes[shapeKey];

      stage.innerHTML = '';
      data.paths.forEach((p, idx) => {
        const base = document.createElementNS('http://www.w3.org/2000/svg', 'path');
        base.setAttribute('d', p.d);
        base.setAttribute('class', 'side-base');

        const highlight = document.createElementNS('http://www.w3.org/2000/svg', 'path');
        highlight.setAttribute('d', p.d);
        highlight.setAttribute('class', 'side-highlight');
        highlight.id = `hl-${idx}`;

        const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
        circle.setAttribute('cx', p.mx);
        circle.setAttribute('cy', p.my);
        circle.setAttribute('r', '13');
        circle.setAttribute('class', 'num-bubble');
        circle.id = `bb-${idx}`;

        const txt = document.createElementNS('http://www.w3.org/2000/svg', 'text');
        txt.setAttribute('x', p.mx);
        txt.setAttribute('y', p.my);
        txt.setAttribute('class', 'num-tag');
        txt.textContent = idx + 1;
        txt.id = `num-${idx}`;

        stage.appendChild(base);
        stage.appendChild(highlight);
        stage.appendChild(circle);
        stage.appendChild(txt);
      });

      updateUI();
    }

    function updateUI() {
      const data = shapes[currentShape];
      data.paths.forEach((_, idx) => {
        const hl = document.getElementById(`hl-${idx}`);
        const bb = document.getElementById(`bb-${idx}`);
        const num = document.getElementById(`num-${idx}`);
        if (idx < currentStep) {
          hl.classList.add('active');
          bb.classList.add('active');
          num.classList.add('active');
        } else {
          hl.classList.remove('active');
          bb.classList.remove('active');
          num.classList.remove('active');
        }
      });

      if (currentStep === 0) {
        countBadge.textContent = data.label;
        countBtn.textContent = 'Count ▶';
      } else if (currentStep < data.paths.length) {
        countBadge.textContent = `${currentStep} / ${data.paths.length} ${data.unit}`;
        countBtn.textContent = 'Next →';
      } else {
        countBadge.textContent = `Total: ${data.paths.length} ${data.unit}`;
        countBtn.textContent = 'Restart ↺';
      }
    }

    function nextStep() {
      const total = shapes[currentShape].paths.length;
      if (currentStep >= total) {
        currentStep = 0;
      } else {
        currentStep++;
      }
      updateUI();
    }

    shapeBtns.forEach(btn => {
      btn.addEventListener('click', () => {
        shapeBtns.forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
        renderShape(btn.dataset.shape);
      });
    });

    countBtn.addEventListener('click', () => {
      nextStep();
    });

    renderShape('triangle');
  </script>
</body>
</html>

How can you count the sides on a shape without losing your place?

Pick one corner to be your starting dot. Then trace along each edge one by one until you reach the start again.

<!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, sans-serif;
      background: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 12px;
      user-select: none;
    }

    .tabs {
      display: flex;
      gap: 8px;
      width: 100%;
      max-width: 320px;
    }

    .tab-btn {
      flex: 1;
      padding: 8px 12px;
      border-radius: 8px;
      border: 2px solid #e2e8f0;
      background: #ffffff;
      font-size: 14px;
      font-weight: 700;
      color: #64748b;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      transition: all 0.2s ease;
    }

    .tab-btn.active {
      background: #e0f2fe;
      border-color: #22b7ff;
      color: #0284c7;
    }

    .stage {
      position: relative;
      width: 100%;
      max-width: 340px;
      height: 230px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    .base-path {
      fill: #ffffff;
      stroke: #e2e8f0;
      stroke-width: 8;
      stroke-linejoin: round;
    }

    .side-line {
      stroke-width: 8;
      stroke-linecap: round;
      stroke-linejoin: round;
      opacity: 0.15;
      transition: opacity 0.3s ease, stroke 0.3s ease;
    }

    .side-line.active {
      opacity: 1;
    }

    .badge-bg {
      transition: transform 0.25s ease, opacity 0.25s ease;
      transform-origin: center;
      cursor: pointer;
    }

    .badge-bg:hover {
      opacity: 0.85;
    }

    .badge-text {
      font-size: 14px;
      font-weight: 800;
      fill: #ffffff;
      text-anchor: middle;
      dominant-baseline: central;
      pointer-events: none;
    }

    .start-label {
      font-size: 12px;
      font-weight: 800;
      fill: #0284c7;
      text-anchor: middle;
      dominant-baseline: central;
    }

    .controls {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      width: 100%;
      max-width: 320px;
    }

    .action-btn {
      padding: 8px 16px;
      border-radius: 8px;
      border: none;
      background: #22b7ff;
      color: #ffffff;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: opacity 0.2s ease;
    }

    .action-btn:hover {
      opacity: 0.9;
    }

    .count-display {
      font-size: 15px;
      font-weight: 800;
      color: #0f172a;
      background: #ffffff;
      padding: 6px 14px;
      border-radius: 8px;
      border: 1px solid #e2e8f0;
    }
  </style>
</head>
<body>

  
  <div class="tabs">
    <button class="tab-btn active" id="tabTriangle" onclick="switchShape('triangle')">
      ▲ Triangle
    </button>
    <button class="tab-btn" id="tabRectangle" onclick="switchShape('rectangle')">
      ■ Rectangle
    </button>
  </div>

  
  <div class="stage">
    
    <svg id="svgTriangle" viewBox="0 0 300 220">
      <polygon class="base-path" points="150,30 260,190 40,190" />
      
      
      <line id="t-s1" class="side-line" x1="150" y1="30" x2="260" y2="190" stroke="#f59e0b" />
      
      <line id="t-s2" class="side-line" x1="260" y1="190" x2="40" y2="190" stroke="#10b981" />
      
      <line id="t-s3" class="side-line" x1="40" y1="190" x2="150" y2="30" stroke="#8b5cf6" />

      
      <g id="t-b1" class="badge-bg" onclick="setStep(1)">
        <circle cx="218" cy="105" r="14" fill="#f59e0b" />
        <text class="badge-text" x="218" y="105">1</text>
      </g>
      <g id="t-b2" class="badge-bg" onclick="setStep(2)">
        <circle cx="150" cy="204" r="14" fill="#10b981" />
        <text class="badge-text" x="150" y="204">2</text>
      </g>
      <g id="t-b3" class="badge-bg" onclick="setStep(3)">
        <circle cx="82" cy="105" r="14" fill="#8b5cf6" />
        <text class="badge-text" x="82" y="105">3</text>
      </g>

      
      <circle cx="150" cy="30" r="9" fill="#0284c7" />
      <circle cx="150" cy="30" r="4" fill="#ffffff" />
      <rect x="122" y="2" width="56" height="18" rx="5" fill="#e0f2fe" />
      <text class="start-label" x="150" y="12">Start</text>
    </svg>

    
    <svg id="svgRectangle" viewBox="0 0 300 220" style="display:none;">
      <rect class="base-path" x="40" y="40" width="220" height="140" rx="4" />
      
      
      <line id="r-s1" class="side-line" x1="40" y1="40" x2="260" y2="40" stroke="#f59e0b" />
      
      <line id="r-s2" class="side-line" x1="260" y1="40" x2="260" y2="180" stroke="#10b981" />
      
      <line id="r-s3" class="side-line" x1="260" y1="180" x2="40" y2="180" stroke="#8b5cf6" />
      
      <line id="r-s4" class="side-line" x1="40" y1="180" x2="40" y2="40" stroke="#ec4899" />

      
      <g id="r-b1" class="badge-bg" onclick="setStep(1)">
        <circle cx="150" cy="24" r="14" fill="#f59e0b" />
        <text class="badge-text" x="150" y="24">1</text>
      </g>
      <g id="r-b2" class="badge-bg" onclick="setStep(2)">
        <circle cx="274" cy="110" r="14" fill="#10b981" />
        <text class="badge-text" x="274" y="110">2</text>
      </g>
      <g id="r-b3" class="badge-bg" onclick="setStep(3)">
        <circle cx="150" cy="196" r="14" fill="#8b5cf6" />
        <text class="badge-text" x="150" y="196">3</text>
      </g>
      <g id="r-b4" class="badge-bg" onclick="setStep(4)">
        <circle cx="26" cy="110" r="14" fill="#ec4899" />
        <text class="badge-text" x="26" y="110">4</text>
      </g>

      
      <circle cx="40" cy="40" r="9" fill="#0284c7" />
      <circle cx="40" cy="40" r="4" fill="#ffffff" />
      <rect x="12" y="10" width="56" height="18" rx="5" fill="#e0f2fe" />
      <text class="start-label" x="40" y="20">Start</text>
    </svg>
  </div>

  
  <div class="controls">
    <button class="action-btn" id="nextBtn" onclick="nextSide()">
      Trace Side ➔
    </button>
    <div class="count-display" id="countDisplay">0 / 3 Sides</div>
  </div>

  <script>
    let currentShape = 'triangle';
    let currentStep = 0;

    function maxSides() {
      return currentShape === 'triangle' ? 3 : 4;
    }

    function render() {
      const max = maxSides();
      const prefix = currentShape === 'triangle' ? 't' : 'r';

      for (let i = 1; i <= max; i++) {
        const line = document.getElementById(`${prefix}-s${i}`);
        const badge = document.getElementById(`${prefix}-b${i}`);
        
        if (i <= currentStep) {
          line.classList.add('active');
          badge.style.opacity = '1';
        } else {
          line.classList.remove('active');
          badge.style.opacity = '0.25';
        }
      }

      document.getElementById('countDisplay').textContent = `${currentStep} / ${max} Sides`;
      document.getElementById('nextBtn').textContent = currentStep >= max ? '↺ Reset' : 'Trace Side ➔';
    }

    function switchShape(shape) {
      currentShape = shape;
      currentStep = 0;

      document.getElementById('tabTriangle').classList.toggle('active', shape === 'triangle');
      document.getElementById('tabRectangle').classList.toggle('active', shape === 'rectangle');

      document.getElementById('svgTriangle').style.display = shape === 'triangle' ? 'block' : 'none';
      document.getElementById('svgRectangle').style.display = shape === 'rectangle' ? 'block' : 'none';

      render();
    }

    function nextSide() {
      const max = maxSides();
      if (currentStep >= max) {
        currentStep = 0;
      } else {
        currentStep++;
      }
      render();
    }

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

    // Initialize with 1 side traced for immediate clarity
    setStep(1);
  </script>
</body>
</html>

A triangle always has **3 straight sides**, and a rectangle has **4 straight sides**.

What happens when shapes have even more sides, like a honeybee's honeycomb cell?

A **pentagon** is any closed shape with **5 straight sides**.

A **hexagon** is a closed shape that has **6 straight sides**.

<!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; -webkit-tap-highlight-color: transparent; }
  body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #1e2945;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: 12px;
    user-select: none;
  }
  .app-container {
    width: 100%;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .shape-tabs {
    display: flex;
    gap: 6px;
    width: 100%;
    justify-content: center;
  }
  .tab-btn {
    flex: 1;
    padding: 8px 4px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #64748b;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
  }
  .tab-btn.active {
    background: #22b7ff;
    color: #ffffff;
    border-color: #22b7ff;
    box-shadow: 0 2px 8px rgba(34, 183, 255, 0.3);
  }
  .stage-area {
    position: relative;
    width: 260px;
    height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  svg {
    width: 100%;
    height: 100%;
    overflow: visible;
  }
  .base-shape {
    fill: #f0f9ff;
    stroke: #cbd5e1;
    stroke-width: 3;
    stroke-linejoin: round;
    transition: all 0.3s ease;
  }
  .side-line {
    stroke-width: 7;
    stroke-linecap: round;
    stroke: transparent;
    transition: stroke 0.25s ease, stroke-width 0.25s ease;
  }
  .side-line.active {
    stroke: #0284c7;
    stroke-width: 8;
  }
  .side-badge {
    position: absolute;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #cbd5e1;
    color: #94a3b8;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%) scale(0.9);
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    pointer-events: none;
  }
  .side-badge.active {
    background: #0284c7;
    border-color: #0284c7;
    color: #ffffff;
    transform: translate(-50%, -50%) scale(1.15);
    box-shadow: 0 3px 10px rgba(2, 132, 199, 0.4);
  }
  .center-count {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }
  .count-num {
    font-size: 38px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1;
  }
  .count-label {
    font-size: 13px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
  }
  .controls {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
  }
  .ctrl-btn {
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #334155;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s ease;
  }
  .ctrl-btn:active {
    background: #f1f5f9;
  }
</style>
</head>
<body>

<div class="app-container">
  <div class="shape-tabs" id="tabs">
    <button class="tab-btn" onclick="setShape(0)">Triangle</button>
    <button class="tab-btn" onclick="setShape(1)">Square</button>
    <button class="tab-btn" onclick="setShape(2)">Pentagon</button>
    <button class="tab-btn active" onclick="setShape(3)">Hexagon</button>
  </div>

  <div class="stage-area" id="stageArea">
    <svg id="shapeSvg" viewBox="0 0 240 240">
      <polygon id="basePoly" class="base-shape" />
      <g id="sideLines"></g>
    </svg>
    <div id="badgesGroup"></div>
    <div class="center-count">
      <div class="count-num" id="liveCount">0</div>
      <div class="count-label">Sides</div>
    </div>
  </div>

  <div class="controls">
    <button class="ctrl-btn" id="playBtn" onclick="togglePlay()">
      <span id="playIcon">⏸</span> <span id="playText">Pause</span>
    </button>
    <button class="ctrl-btn" onclick="stepForward()">
      <span>+1 Side</span> →
    </button>
  </div>
</div>

<script>
  const SHAPES = [
    { name: "Triangle", sides: 3, rot: -90, radius: 95, badgeOffset: 24 },
    { name: "Square", sides: 4, rot: -45, radius: 90, badgeOffset: 22 },
    { name: "Pentagon", sides: 5, rot: -90, radius: 90, badgeOffset: 20 },
    { name: "Hexagon", sides: 6, rot: -90, radius: 90, badgeOffset: 18 }
  ];

  let currentShapeIdx = 3;
  let activeSide = 0;
  let isPlaying = true;
  let timer = null;

  function getVertices(sides, radius, rotDeg) {
    const pts = [];
    const center = 120;
    const rotRad = (rotDeg * Math.PI) / 180;
    for (let i = 0; i < sides; i++) {
      const angle = rotRad + (i * 2 * Math.PI) / sides;
      pts.push({
        x: center + radius * Math.cos(angle),
        y: center + radius * Math.sin(angle)
      });
    }
    return pts;
  }

  function renderShape() {
    const config = SHAPES[currentShapeIdx];
    const vertices = getVertices(config.sides, config.radius, config.rot);
    const center = 120;

    // Base polygon
    const pointsStr = vertices.map(p => `${p.x},${p.y}`).join(' ');
    document.getElementById('basePoly').setAttribute('points', pointsStr);

    // Side lines
    const linesGroup = document.getElementById('sideLines');
    linesGroup.innerHTML = '';
    
    // Badges container
    const badgesGroup = document.getElementById('badgesGroup');
    badgesGroup.innerHTML = '';

    for (let i = 0; i < config.sides; i++) {
      const p1 = vertices[i];
      const p2 = vertices[(i + 1) % config.sides];

      // SVG Line
      const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
      line.setAttribute('x1', p1.x);
      line.setAttribute('y1', p1.y);
      line.setAttribute('x2', p2.x);
      line.setAttribute('y2', p2.y);
      line.setAttribute('class', 'side-line' + (i < activeSide ? ' active' : ''));
      line.id = `line-${i}`;
      linesGroup.appendChild(line);

      // Midpoint & Badge offset outward
      const midX = (p1.x + p2.x) / 2;
      const midY = (p1.y + p2.y) / 2;
      const vx = midX - center;
      const vy = midY - center;
      const dist = Math.hypot(vx, vy) || 1;
      const bx = midX + (vx / dist) * config.badgeOffset;
      const by = midY + (vy / dist) * config.badgeOffset;

      const badge = document.createElement('div');
      badge.className = 'side-badge' + (i < activeSide ? ' active' : '');
      badge.id = `badge-${i}`;
      badge.textContent = i + 1;
      badge.style.left = `${(bx / 240) * 100}%`;
      badge.style.top = `${(by / 240) * 100}%`;
      badgesGroup.appendChild(badge);
    }

    document.getElementById('liveCount').textContent = activeSide;

    // Update tab styles
    const tabs = document.querySelectorAll('.tab-btn');
    tabs.forEach((tab, idx) => {
      tab.classList.toggle('active', idx === currentShapeIdx);
    });
  }

  function updateVisuals() {
    const config = SHAPES[currentShapeIdx];
    for (let i = 0; i < config.sides; i++) {
      const line = document.getElementById(`line-${i}`);
      const badge = document.getElementById(`badge-${i}`);
      if (line && badge) {
        if (i < activeSide) {
          line.classList.add('active');
          badge.classList.add('active');
        } else {
          line.classList.remove('active');
          badge.classList.remove('active');
        }
      }
    }
    document.getElementById('liveCount').textContent = activeSide;
  }

  function tick() {
    const total = SHAPES[currentShapeIdx].sides;
    if (activeSide >= total) {
      activeSide = 0;
    } else {
      activeSide++;
    }
    updateVisuals();
  }

  function startTimer() {
    stopTimer();
    timer = setInterval(tick, 900);
  }

  function stopTimer() {
    if (timer) {
      clearInterval(timer);
      timer = null;
    }
  }

  function togglePlay() {
    isPlaying = !isPlaying;
    const playIcon = document.getElementById('playIcon');
    const playText = document.getElementById('playText');
    if (isPlaying) {
      playIcon.textContent = '⏸';
      playText.textContent = 'Pause';
      startTimer();
    } else {
      playIcon.textContent = '▶';
      playText.textContent = 'Count';
      stopTimer();
    }
  }

  function stepForward() {
    if (isPlaying) {
      togglePlay();
    }
    tick();
  }

  function setShape(index) {
    currentShapeIdx = index;
    activeSide = SHAPES[index].sides;
    renderShape();
    if (isPlaying) {
      startTimer();
    }
  }

  // Initial setup
  setShape(3);
  startTimer();
</script>

</body>
</html>

Can a shape have curved sides instead of straight edges?

A circle has **0 straight sides** and **1 curved side** that loops smoothly all the way around.

Some shapes even mix both kinds: a half-circle has **1 straight side** across the bottom and **1 curved side** over the top.

<!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>Counting Sides on 2D Shapes</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      user-select: none;
      -webkit-user-select: none;
    }

    body {
      background: #f8f9fa;
      color: #1e2945;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-height: 100%;
      padding: 12px 10px;
    }

    .nav-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      justify-content: center;
      width: 100%;
      max-width: 440px;
    }

    .tab-btn {
      flex: 1 1 calc(25% - 6px);
      min-width: 76px;
      padding: 8px 4px;
      font-size: 14px;
      font-weight: 600;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      color: #64748b;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      transition: all 0.25s ease;
    }

    .tab-btn.active {
      background: #22b7ff;
      color: #ffffff;
      border-color: #22b7ff;
      box-shadow: 0 3px 8px rgba(34, 183, 255, 0.25);
    }

    .canvas-area {
      position: relative;
      width: 100%;
      max-width: 320px;
      height: 230px;
      background: #ffffff;
      border-radius: 12px;
      border: 1px solid #e2e8f0;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 8px 0;
    }

    svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    .side-path {
      fill: none;
      stroke: #cbd5e1;
      stroke-width: 7;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: stroke 0.3s ease, stroke-width 0.3s ease;
      cursor: pointer;
    }

    .side-path.active {
      stroke: #22b7ff;
      stroke-width: 9;
    }

    .side-path.curved.active {
      stroke: #a855f7;
      stroke-width: 9;
    }

    .fill-shape {
      fill: #f1f5f9;
      transition: fill 0.3s ease;
    }

    .badge-num {
      position: absolute;
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background: #ffffff;
      border: 2px solid #cbd5e1;
      color: #64748b;
      font-size: 14px;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      transform: translate(-50%, -50%);
      transition: all 0.3s ease;
      cursor: pointer;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
    }

    .badge-num.active {
      background: #22b7ff;
      border-color: #22b7ff;
      color: #ffffff;
      transform: translate(-50%, -50%) scale(1.15);
    }

    .badge-num.curved.active {
      background: #a855f7;
      border-color: #a855f7;
    }

    .summary-card {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      font-size: 14px;
      font-weight: 600;
      color: #1e2945;
      padding: 6px 14px;
      background: #ffffff;
      border-radius: 20px;
      border: 1px solid #e2e8f0;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    }

    .legend-item {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
    }

    .dot.straight { background: #22b7ff; }
    .dot.curved { background: #a855f7; }

    .controls {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 4px;
    }

    .btn-step {
      padding: 6px 14px;
      font-size: 14px;
      font-weight: 600;
      background: #ffffff;
      border: 1px solid #cbd5e1;
      border-radius: 6px;
      color: #334155;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .btn-step:active {
      background: #f1f5f9;
    }
  </style>
</head>
<body>

  
  <div class="nav-tabs">
    <button class="tab-btn active" onclick="selectShape('triangle')">△ Triangle</button>
    <button class="tab-btn" onclick="selectShape('square')">▢ Square</button>
    <button class="tab-btn" onclick="selectShape('circle')">◯ Circle</button>
    <button class="tab-btn" onclick="selectShape('semicircle')">◖ Half-circle</button>
  </div>

  
  <div class="canvas-area" id="stage">
    <svg viewBox="0 0 300 220" id="shapeSvg"></svg>
    <div id="badges"></div>
  </div>

  
  <div class="summary-card" id="summary">
    
  </div>

  
  <div class="controls">
    <button class="btn-step" onclick="prevSide()">← Trace Back</button>
    <button class="btn-step" onclick="nextSide()">Count Next →</button>
  </div>

  <script>
    const shapes = {
      triangle: {
        total: 3,
        fill: '<polygon points="150,30 250,180 50,180" class="fill-shape" />',
        sides: [
          { type: 'straight', d: 'M 150 30 L 250 180', badge: { x: 215, y: 100 } },
          { type: 'straight', d: 'M 250 180 L 50 180', badge: { x: 150, y: 198 } },
          { type: 'straight', d: 'M 50 180 L 150 30', badge: { x: 85, y: 100 } }
        ],
        straight: 3,
        curved: 0
      },
      square: {
        total: 4,
        fill: '<rect x="75" y="35" width="150" height="150" class="fill-shape" rx="4" />',
        sides: [
          { type: 'straight', d: 'M 75 35 L 225 35', badge: { x: 150, y: 20 } },
          { type: 'straight', d: 'M 225 35 L 225 185', badge: { x: 242, y: 110 } },
          { type: 'straight', d: 'M 225 185 L 75 185', badge: { x: 150, y: 200 } },
          { type: 'straight', d: 'M 75 185 L 75 35', badge: { x: 58, y: 110 } }
        ],
        straight: 4,
        curved: 0
      },
      circle: {
        total: 1,
        fill: '<circle cx="150" cy="110" r="75" class="fill-shape" />',
        sides: [
          { type: 'curved', d: 'M 150 35 A 75 75 0 1 1 149.9 35 Z', badge: { x: 235, y: 110 } }
        ],
        straight: 0,
        curved: 1
      },
      semicircle: {
        total: 2,
        fill: '<path d="M 60 150 A 90 90 0 0 1 240 150 Z" class="fill-shape" />',
        sides: [
          { type: 'curved', d: 'M 60 150 A 90 90 0 0 1 240 150', badge: { x: 150, y: 44 } },
          { type: 'straight', d: 'M 240 150 L 60 150', badge: { x: 150, y: 168 } }
        ],
        straight: 1,
        curved: 1
      }
    };

    let currentShapeKey = 'triangle';
    let currentSideIndex = 0;

    function renderShape() {
      const shape = shapes[currentShapeKey];
      const svg = document.getElementById('shapeSvg');
      const badgesContainer = document.getElementById('badges');
      const summaryContainer = document.getElementById('summary');

      // SVG markup
      let pathsHtml = shape.fill;
      shape.sides.forEach((side, i) => {
        const isCurved = side.type === 'curved' ? 'curved' : '';
        const isActive = i <= currentSideIndex ? 'active' : '';
        pathsHtml += `<path d="${side.d}" class="side-path ${isCurved} ${isActive}" onclick="setSide(${i})" />`;
      });
      svg.innerHTML = pathsHtml;

      // Badges
      let badgesHtml = '';
      shape.sides.forEach((side, i) => {
        const isCurved = side.type === 'curved' ? 'curved' : '';
        const isActive = i <= currentSideIndex ? 'active' : '';
        const bx = (side.badge.x / 300) * 100;
        const by = (side.badge.y / 220) * 100;
        badgesHtml += `<div class="badge-num ${isCurved} ${isActive}" style="left:${bx}%; top:${by}%;" onclick="setSide(${i})">${i + 1}</div>`;
      });
      badgesContainer.innerHTML = badgesHtml;

      // Summary label
      let summaryText = '';
      if (shape.straight > 0 && shape.curved > 0) {
        summaryText = `
          <div class="legend-item"><span class="dot straight"></span> ${shape.straight} Straight</div>
          <div class="legend-item"><span class="dot curved"></span> ${shape.curved} Curved</div>
        `;
      } else if (shape.straight > 0) {
        summaryText = `<div class="legend-item"><span class="dot straight"></span> ${shape.straight} Straight Sides</div>`;
      } else {
        summaryText = `<div class="legend-item"><span class="dot curved"></span> ${shape.curved} Curved Side</div>`;
      }
      summaryContainer.innerHTML = summaryText;
    }

    function selectShape(key) {
      currentShapeKey = key;
      currentSideIndex = 0;
      document.querySelectorAll('.tab-btn').forEach((btn, idx) => {
        const shapeKeys = ['triangle', 'square', 'circle', 'semicircle'];
        btn.classList.toggle('active', shapeKeys[idx] === key);
      });
      renderShape();
    }

    function setSide(index) {
      currentSideIndex = index;
      renderShape();
    }

    function nextSide() {
      const shape = shapes[currentShapeKey];
      currentSideIndex = (currentSideIndex + 1) % shape.total;
      renderShape();
    }

    function prevSide() {
      const shape = shapes[currentShapeKey];
      currentSideIndex = (currentSideIndex - 1 + shape.total) % shape.total;
      renderShape();
    }

    // Initialize
    renderShape();
  </script>
</body>
</html>

Whenever you see a shape in your classroom or home, place your finger on one edge and trace all the way around to count every side!

math

Counting Sides on 2D Shapes. Accurately count straight and curved sides on a variety of 2D polygons and closed shapes.

Early Level / KS1 Maths: What are 2D Shapes and Their Properties?

Count Sides and Corners on 2D Shapes

Exploring 2D Shapes and Properties in Early Years

At Early Level (P1 / ages 4-6), instruction should follow the Concrete-Pictorial-Abstract (CPA) progression. Begin with physical, multi-sensory manipulatives (e.g., lolly sticks, GeoStrips, playdough ropes, and giant tactile foam shapes) so children feel the distinction between a flat straight edge and a rounded curved boundary. To scaffold systematic counting, encourage physical marking strategies (placing a peg or sticker on the starting side) and rhythmic tactile finger tracing along the edges. Reinforce vocabulary consistently across varying orientations and non-standard examples to build rotational invariance and geometric fluency.

Counting Sides on 2D Shapes

What Is a Side?

How to Count Straight Sides

Shapes with 5 and 6 Sides