Color Blender explainer

Puzzle 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 (hidden code that runs before the puzzle’s code):

const svg = canvas.append('g');
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');
1 Like
#2
#3

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

#4

Please explain the additional code.

#5

Hey there,

The additional code creates the three circles, and uses Javascript to give them some cool CSS properties that determine what happens when 2 colors overlap.

These properties (setting the isolation property to isolate and mix-blend-mode to screen) are what creates that color blending effect when the circles overlap each other.

You can read more about mix-blend-mode here and isolation here.

– Ben

1 Like