Broken Hearted explainer

The aim of this puzzle: Assemble the shapes into a red heart.
Walkthrough of the solution: To start, the square needs to rotate 45 degrees around the top-left corner. The top-left corner is given by its `'x'` and `'y'` attributes which are 101 and 33. To rotate, you are changing the `'transform'` attribute and setting it to a value of `'rotate(45 101 33)'` – remember the three numbers in the `'rotate'` string are degrees clockwise, x and y coordinates of the pivot point. Next, the `movedCircle` needs to move to the point (68, 68). That means you want to set its `'cx'` and `'cy'` coordinates to 68. Remember, circles use `'cx'` and `'cy'` for “center x coordinate” and “center y coordinate”, and rectangles use `'x'` and `'y'` for the coordinates of the top-left corner. Then, for the `littleCircle` you need to change the radius to 48 using its `'r'` attribute. Finally, all three shapes need to be colored `'red'` by modifying the `'fill'` attribute.
Sample code solution:
(Tap below to reveal)

``````square.attr('x', 101)
.attr('y', 33)
.attr('transform', 'rotate(45 101 33)')
.attr('fill', 'red');
movedCircle.attr('cx', 68)
.attr('cy', 68)
.attr('fill', 'red');
littleCircle.attr('r', 48)
.attr('fill', 'red');
``````

JavaScript Concepts: Identifiers, Member Expression
D3 Concepts: .attr(‘x’,), .attr(‘y’,), .attr(‘transform’,), .attr(‘fill’,), .attr(‘cx’,), .attr(‘cy’,), .attr(‘r’,)
Additional Code (hidden code that runs before the puzzle’s code):

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

var square = svg.append('rect').attr('width',95).attr('height',96);
var movedCircle = svg.append('circle').attr('r',48);
var littleCircle = svg.append('circle').attr('cx',133).attr('cy',68);

let scale = window.innerHeight/(190);
svg.attr('transform',`scale(\${scale})`);
``````