# Nested Squares explainer

The aim of this puzzle: Create a collection of squares that decrease in size by a fixed amount.

Walkthrough of the solution: When the code 1st runs, it creates a bunch of rectangles with random color, width, and height. Instead of using a random number for the width, we can use the value of the `size` variable. The `size` variable starts at 200 and decreases by 10 each time through the loop as long as it’s a positive number.

Change the `.attr('width',pickRandom(200))` to `.attr('width',size)`. Since a square has the same height and width, you can also set the height to `size`.

Sample code solution:
(Tap below to reveal)

``````for (let size = 200; size > 0; size -= 10) {
svg.append('rect')
.attr('fill', pickRandom(color))
.attr('width', size)
.attr('height', size);
}
``````

JavaScript Concepts: Assignment Operators (`-=`), Binry Expression (`>`), Code Block (for loop)

Grasshopper Concepts: `pickRandom()`

D3 Concepts: `.append()`, `.attr('fill)`, `.attr('height',)`, `.attr('width',)`
Additional Code (hidden code that runs before the puzzle’s code):

``````let color = [...Array(36)].map((_,i)=>`hsl(\${10*i},100%,50%)`);
``````
1 Like