Concentric Number Diamond (5..1..5)

Beginner
⏱️ 8 min read
📚 Updated: Aug 2025
🎯 2 Code Examples
Symmetry (top + bottom)
Concentric number diamond output in JavaScript programming

What You’ll Learn

How to print a concentric number diamond where the row level goes 5,4,3,2,1,2,3,4,5 and each row stays symmetric around the center.

You’ll use a neat trick: compute each cell using distance from the center and a Math.max rule.

⭐ Pattern Output

For size = 5, the pattern looks like this:

Output
5 5 5 5 5 5 5 5 5
5 4 4 4 4 4 4 4 5
5 4 3 3 3 3 3 4 5
5 4 3 2 2 2 3 4 5
5 4 3 2 1 2 3 4 5
5 4 3 2 2 2 3 4 5
5 4 3 3 3 3 3 4 5
5 4 4 4 4 4 4 4 5
5 5 5 5 5 5 5 5 5
1

Complete JavaScript Program

Each row has a level value that goes 5..1..5. Each column uses distance from the center to compute the border value. The final cell is max(level, border).

JavaScript
const size = 5;
const cols = 2 * size - 1;
const center = size; // 1-based index of the middle column

for (let r = 1; r <= cols; r++) {
  const level = r <= size ? size - r + 1 : r - size + 1; // 5..1..5
  const row = [];

  for (let c = 1; c <= cols; c++) {
    const dist = Math.abs(center - c);
    const border = dist + 1;
    row.push(Math.max(level, border));
  }

  console.log(row.join(" "));
}
Try it Yourself

🧠 How It Works

1

Set size and width

size = 5 and cols = 2*size - 1 makes a 9×9 diamond canvas.

Setup
2

Compute the row level (5..1..5)

For row r, we compute level so the top half decreases and the bottom half increases.

Rows
3

Distance from center gives border value

border = |center - c| + 1 produces 1 at the center, then 2, 3… out to 5 at the edges.

Distance
4

Pick the final number with max()

Math.max(level, border) keeps large values around the outside while allowing smaller values near the center on middle rows.

Rule
=

Diamond symmetry

The same column rule works for every row. Only level changes to form the top + bottom halves.

2

Variation — Browser (document.write) Version

Print the same diamond in an HTML page using document.write:

HTML
<!DOCTYPE html>
<html>
<body>
<script>
var size = 5;
var cols = 2 * size - 1;
var center = size;

for (var r = 1; r <= cols; r++) {
  var level = r <= size ? size - r + 1 : r - size + 1;

  for (var c = 1; c <= cols; c++) {
    var dist = Math.abs(center - c);
    var border = dist + 1;
    var val = Math.max(level, border);
    document.write(val + " ");
  }
  document.write("<br>");
}
</script>
</body>
</html>
Try it Yourself

💡 Tips for Enhancement

Try These

  • Increase size to generate a larger diamond (size 7 → 13×13)
  • Pad values for alignment when size > 9 (use padStart)
  • Print without spaces by joining with "" if you want a compact look
  • Swap max with min (and adjust formulas) to explore inverted effects

Avoid

  • Using width values that aren’t 2*size - 1 (symmetry will break)
  • Mixing 0-based and 1-based indices without adjusting formulas
  • Forgetting the bottom half row-level increase (you’ll only print the top)

Key Takeaways

1

Diamond height and width are 2*size - 1.

2

Row levels go size..1..size to create top + bottom symmetry.

3

Distance from the center controls the outer border numbers.

4

Math.max(level, border) is a handy pattern-printing trick.

❓ Frequently Asked Questions

It’s closely related, but this version prints a diamond-like stack of rows (top half + bottom half). A full concentric square prints all 2*size - 1 rows with edge-based distance logic.
Yes—build each row as an array and join with "" instead of " ".
Use fixed-width formatting (e.g., String(val).padStart(2)) and join with a space so columns don’t shift.
Yes—print size - (Math.max(level, border) - 1) or switch the rule so you use Math.min with an adjusted baseline.

Explore More JavaScript Number Patterns!

Now that you’ve built a concentric diamond, try a full concentric square or mix the rule with stars for hybrid patterns.

All Number Patterns →
Did you know?

Many symmetric patterns can be expressed with one idea: compute a distance (to a center or to an edge) and then map that distance to a printed value.

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

12 people found this page helpful

JavaScript Number Pattern 46 JavaScript Number Pattern 48