Area Tiles & Perimeter Paths

Click squares on a grid to build shapes and watch area and perimeter update in real time. Switch to rectangle mode to see the formulas in action. All computation runs in your browser.

Mode

Try an example

Learn (Rectangles)

Practice (Irregular Shapes)

Challenge (Optimization)

Click cells to shade or unshade them

Shaded = 1 square unitBorder = perimeter edge

Area

0

square units

Perimeter

0

units

Reference Guide

Area with Square Tiles

Area measures the space inside a flat shape. When a shape is drawn on a grid, you can count the shaded squares to find the area.

Area=number of shaded squares\text{Area} = \text{number of shaded squares}

Each small square on the grid equals one square unit. A shape that covers 12 squares has an area of 12 square units.

Perimeter

Perimeter is the total distance around the outside of a shape. On a grid, count every edge that separates a shaded cell from an empty cell or from the border.

Perimeter=number of exposed edges\text{Perimeter} = \text{number of exposed edges}

A single square has a perimeter of 4. Two squares side by side share one edge, so their combined perimeter is 6.

Same Area, Different Perimeter

Two shapes can cover the same number of squares (same area) but have different perimeters. Compact shapes have smaller perimeters while long, thin shapes have larger perimeters.

  • A 3 × 4 rectangle has area 12 and perimeter 14
  • A 1 × 12 strip has area 12 and perimeter 26
  • An L-shape with 12 tiles might have perimeter 18

Try the challenge presets to build shapes that hit a target area and perimeter at the same time.

Rectangle Formulas

For rectangles, there are quick formulas instead of counting every tile or edge.

Area=l×w\text{Area} = l \times w
Perimeter=2(l+w)\text{Perimeter} = 2(l + w)

Here l is the length (height) and w is the width. A 5 × 3 rectangle has area 15 and perimeter 16.