# Donut Hole Puzzle explainer

Aim of the puzzle:
Use the attribute method `.attr()` to set the radius attribute, `'r'` , of an SVG circle.

Walk through of solution:
The attribute method `.attr()` is used to set or modify the attributes of SVG shapes. It takes two arguments: the name of the attribute to change, and the value for the attribute. To define the radius an SVG circle, set the first argument of `.attr()` to `'r'` and the second argument to a number. The radius is the distance from the center of a circle to its edge.

In the code that you start off with, `donutHole` already has a value for `'r'` but the value is small. We want a bigger donut hole! In this puzzle, you’ll change `'r'` to make `donutHole` bigger.

To complete the puzzle, change the value of `'r'` to `15`.

Sample code solution:
(Tap below to reveal)

``````donutHole.attr('r', 15);
``````

Javascript Concepts: Variable
D3 Concepts: Attribute
Additional Code (hidden code that runs before the puzzle’s code):

``````var svg = canvas.append('g');

svg.attr('transform',`translate(\${window.innerWidth/2},\${window.innerHeight/2})`);

var donut = svg.append('circle').attr('fill','saddlebrown').attr('cx', 0).attr('cy', 0).attr('r',70);
var frosting = svg.append('circle').attr('fill','pink').attr('cx', 0).attr('cy', 0).attr('r',62);
var donutHole = svg.append('circle').attr('fill','#13324A').attr('cx', 0).attr('cy', 0).attr('r', 15).attr('stroke', 'saddlebrown').attr('stroke-width', 6);

var sprinkle_1 = svg.append('rect').attr('fill','orange').attr('x',0).attr('y',0).attr('height', '18').attr('width', '5').attr('transform', 'rotate(45 -20 -40)')
var sprinkle_2 = svg.append('rect').attr('fill','yellow').attr('x',0).attr('y',0).attr('height', '5').attr('width', '17').attr('transform', 'rotate(5 160 -500)')
var sprinkle_3 = svg.append('rect').attr('fill','yellow').attr('x',0).attr('y',0).attr('height', '5').attr('width', '19').attr('transform', 'rotate(-35 55 0)')
var sprinkle_4= svg.append('rect').attr('fill','white').attr('x',0).attr('y',0).attr('height', '20').attr('width', '5').attr('transform', 'rotate(45 70 -30)')
var sprinkle_5= svg.append('rect').attr('fill','orange').attr('x',0).attr('y',0).attr('height', '13').attr('width', '5').attr('transform', 'rotate(-15 -150 -90)')
var sprinkle_6 = svg.append('rect').attr('fill','white').attr('x',0).attr('y',0).attr('height', '5').attr('width', '13').attr('transform', 'rotate(45 -50 0)')
var sprinkle_7= svg.append('rect').attr('fill','white').attr('x',0).attr('y',0).attr('height', '10').attr('width', '5').attr('transform', 'rotate(-45 20 -45)')

``````