Color Blender Explainer

#1

Aim of the puzzle: Set the position of a circle by modifying its 'cx' and 'cy' attributes.

Walk through of solution:
The screen position of an SVG circle is defined by its 'cx' and 'cy' attributes.
The 'cx' attribute defines the distance from the left side of the screen to the middle of the circle, and the 'cy' defines the distance from the top of the screen to the middle of the circle.

In this puzzle, set the 'cx' and 'cy' attributes of the three circles to make them overlap.
Sample code solution:

redCircle.attr('cx', 130);
greenCircle.attr('cy', 110);
blueCircle.attr('cx', 170);

Additional Code
There is hidden code that runs before the solution code. This uses some additional D3 methods to change how the circles change color when they overlap, while ignoring the background color of the code console.

svg.style('isolation', 'isolate');
const redCircle = svg.append('circle').attr('r', 45).attr('cx', 50).attr('cy', 150).attr('fill', '#FF0000').style('mix-blend-mode', 'screen');
const greenCircle = svg.append('circle').attr('r', 45).attr('cx', 150).attr('cy', 50).attr('fill', '#00FF00').style('mix-blend-mode', 'screen');
const blueCircle = svg.append('circle').attr('r', 45).attr('cx', 250).attr('cy', 150).attr('fill', '#0000FF').style('mix-blend-mode', 'screen');

D3 Concepts: .attr()

1 Like

listed #2
0 Likes

#3

Can you add some concepts on Grasshopper? Like in ADVANCED one.

0 Likes