Color Blender es-419 Explainer

Explicador de Mezclador de colores

Objetivo de este acertijo: Definir la posición de un círculo por modificar a sus atributos 'cx' y 'cy'.

Tutorial de la solución:

La posición en la pantalla de un círculo SVG se define mediante sus atributos 'cx' y 'cy'.

El atributo 'cx' define la distancia desde el lado izquierdo de la pantalla hasta el centro del círculo, y 'cy' define la distancia desde la parte superior de la pantalla hasta el centro del círculo.

En este acertijo, define los atributos 'cx' y 'cy' de los tres círculos para que se superpongan.

Solución del código de ejemplo:


redCircle.attr('cx', 130);

greenCircle.attr('cy', 110);

blueCircle.attr('cx', 170);

Código adicional (código oculto que se ejecuta antes del código del acertijo):


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