Concentric Number Pattern (5 to 1 to 5)
What You’ll Learn
How to print a symmetric sequence pattern where each row forms values like 5 4 3 2 1 2 3 4 5 at the bottom, and the top row is all 5.
You’ll learn a reusable trick: compute each cell using distance from the center and a simple max rule.
⭐ Pattern Output
For size = 5, the pattern looks like this:
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 5Complete JavaScript Program
We print size rows. Each row uses 2*size - 1 columns and the value is max(i, distanceFromCenter + 1).
const size = 5;
const cols = 2 * size - 1;
const center = size; // 1-based index of the middle column
for (let i = size; i >= 1; i--) {
const row = [];
for (let c = 1; c <= cols; c++) {
const dist = Math.abs(center - c);
row.push(Math.max(i, dist + 1));
}
console.log(row.join(" "));
}🧠 How It Works
Set the size
size = 5 controls the largest value and the number of rows.
Compute width
cols = 2*size - 1 makes a symmetric row with a single center column.
Rows go from 5 down to 1
The outer loop prints the top row as all 5s, then gradually allows smaller values as i decreases.
Distance from center decides the border value
dist = |center - c| is 0 at the center and grows outward. dist + 1 becomes 1..5.
max(i, dist+1) builds the row
The max rule keeps large numbers on the border and reveals smaller numbers toward the center on lower rows.
Variation — Browser (document.write) Version
Print the same pattern in an HTML page using document.write:
<!DOCTYPE html>
<html>
<body>
<script>
var size = 5;
var cols = 2 * size - 1;
var center = size;
for (var i = size; i >= 1; i--) {
for (var c = 1; c <= cols; c++) {
var dist = Math.abs(center - c);
var val = Math.max(i, dist + 1);
document.write(val + " ");
}
document.write("<br>");
}
</script>
</body>
</html>💡 Tips for Enhancement
Try These
- Change
sizeto generate a larger pattern (e.g., 7 prints 13 columns) - Print the full square (not just the top-to-center half) by mirroring rows
- Pad numbers (like
String(val).padStart(2)) to keep alignment for 2-digit sizes - Replace numbers with letters to create concentric alphabet patterns
Avoid
- Forgetting that width is
2*size - 1(symmetry breaks) - Mixing 0-based and 1-based indices without adjusting the center formula
- Leaving trailing spaces in console output if you later compare strings exactly
Key Takeaways
Use 2*size - 1 columns for perfect symmetry.
Distance from center controls the outer values.
Math.max(i, dist + 1) gives the correct number for each cell.
This idea generalizes to many square and concentric patterns.
❓ Frequently Asked Questions
i is 5, so max(i, dist+1) is always 5.row.join("") in the console version, and print val without a trailing space in the browser version.String(val).padStart(2)) and join with a space so multi-digit values don’t shift columns.Explore More JavaScript Number Patterns!
Try turning this into a full concentric square, then experiment with different border rules and padding for alignment.
Concentric patterns are essentially a distance problem. Once you can compute a distance to a center (or to edges), you can generate many squares, diamonds, and rings with tiny formulas.
About the author
12 people found this page helpful