Fill It Up explainer

The aim of this puzzle: Change the color of the grasshopper’s body to lime green.

Walkthrough of the solution: The grasshopper is made out of 2 shapes: a head and a body. Every shape is an object that contains several properites or attributes. To set the value of these attributes, you use the .attr() method. The 1st argument is the name of the attribute you want to change, and the 2nd argument is the new value for that attribute. The color of a shape is called its 'fill' attribute.

To make the body the same color as the head, you set its 'fill' attribute to 'lime'.

Sample code solution:
(Tap below to reveal)


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

//Create Group
var grasshopper = svg.append('g');
var head = grasshopper.append('path').attr('d','M761.15,157.3H730.21c0-34.59,8.18-68.32,22.31-99.37,6.51-14.31-4.16-30.55-19.88-30.55a21.86,21.86,0,0,0-19,11.09A239.76,239.76,0,0,0,681.89,157.3h0A216.16,216.16,0,0,0,818.08,358.12l10.4,4.14V224.63A67.33,67.33,0,0,0,761.15,157.3Z');
var body = grasshopper.append('path').attr('d','M501.2,92.5,339,27.38c0,52.43,24.29,110.07,45.28,129.92H171.11c20.5,112.51,165,205,308.15,205h0L410.6,431c-15.37,15.37-4.49,41.65,17.25,41.65h0a24.4,24.4,0,0,0,17.25-7.15L548,362.62l1.29.53v84.25c0,13.44,10.51,25,23.94,25.21A24.4,24.4,0,0,0,598,448.22v-86h48.8v85.14c0,13.43,10.51,25,23.94,25.21a24.4,24.4,0,0,0,24.86-24.4v-86h0C695.65,239.87,622,142,501.2,92.5Z');