# Nested Circles explainer

The aim of this puzzle: Use a for loop to create many different circles at the same time.

Walkthrough of the solution: In this puzzle, a classic for loop declares the variable `size` and sets its value to `300`. After every loop, `size` will decrease by `10`, and the for loop will stop running when `size` is no longer greater than `0`.

Inside the code block of the classic for loop, `svg.append('circle')` creates a new circle. Every time the for loop iterates, a new circle is created.

To complete the puzzle, set the circle’s radius attribute to use the value of the `size` variable.

Sample code solution:

(Tap below to reveal)

``````
for (let size = 300; size &gt; 0; size -= 10) {

svg.append('circle').attr('fill', pickRandom(color)).attr('r', size);

}

``````

JavaScript Concepts: Classic For Loops, Subtraction Assignment Operator

**D3 Concepts: SVG, `.attr()`
Additional Code (hidden code that runs before the puzzle’s code):

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