Explicação de Misturador de cores
Objetivo do desafio: Definir a posição de um círculo, modificando seus atributos 'cx' e 'cy'.
Passo a passo da solução: A posição da tela de um círculo SVG é definida por seus atributos 'cx' e 'cy'. O atributo 'cx' define a distância do lado esquerdo da tela até o meio do círculo e o 'cy' define a distância da parte superior da tela até o meio do círculo.
Neste desafio, defina os atributos 'cx' e 'cy' dos três círculos para fazê-los se sobrepor.
Solução do código de exemplo:
redCircle.attr('cx', 130);
greenCircle.attr('cy', 110);
blueCircle.attr('cx', 170);
Código Adicional (código oculto executado antes do código do desafio):
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');