RGB color theory

100%

RGB color theory

✓ Published1🌍 Public

Last edited Feb 15, 2020

Created on Feb 15, 2020

Three overlapping semi-transparent red, green, and blue squares form the classic RGB color-mixing diagram, revealing secondary colors where they intersect. The React components `MyRect` and `MyCircle` render SVG rectangles with configurable fill, opacity, and positioning, while D3 v5 supplies the scaling and layout logic in the background. Static SVG shapes are composed in a React component tree, with each square’s blend determined by a fixed opacity value of 0.9.

AI-generated description

Smiley Face Part I (with React)

MIT Licensed

Similar vizzes

Loading thumbnail…

RGB color theory

Five overlapping semi-transparent squares demonstrate RGB color theory by mixing red, green, and blue primaries in various pairings to produce yellow, cyan, and a central white region. The React components `MyRect` and `MyCircle` render SVG rectangles with fixed opacity, positioned via translation transforms. Built with React 16.12 and D3 v5, the example uses static JSX coordinates rather than data-driven layout.

NNita

94% match

Loading thumbnail…

RGB color theory

Three overlapping translucent squares in red, green, and blue demonstrate RGB color theory through additive color mixing. Rendered as React components with SVG circles and rectangles, the visualization uses `MyRect` and `MyCircle` exports from `exports.js` to position three 250-pixel squares at offsets from the center of a 960×500 viewport with 0.9 opacity. D3 v5 sets the SVG dimensions while React 16.12 manages component rendering into the `#root` element.

NNita

93% match

Loading thumbnail…

RGB color theory

This example visualizes RGB color theory by stacking four semi-transparent rectangles—red, green, blue, and yellow—in a centered cluster to show how primary colors blend into secondary hues through overlap. Built with React and D3 v5, it uses reusable `MyRect` SVG components defined in a separate exports file. Each rectangle is positioned with explicit x/y coordinates and an opacity of 0.7, allowing the overlapping intersections to reveal mixed colors like cyan and magenta. The static SVG scene demonstrates subtractive color mixing without interaction, focusing purely on the visual result of layered transparency.

NNita

90% match

Loading thumbnail…

Rectangles coordinates when translated

Five semi-transparent squares arranged around a common center demonstrate how SVG translation affects a rectangle’s coordinate system. A red, green, blue, and yellow square sit at the cardinal offsets from the origin, while a magenta square is centered at half the rectangle’s width and height. Using React with D3 v5, the `<g>` element’s `transform` attribute shifts all children via `translate(480,250)`. The code defines reusable `MyRect` components, passing explicit `xPos` and `yPos` props, and renders them into an SVG with a light gray background.

NNita

77% match

Loading thumbnail…

A square module

The visualization displays two identical square modules positioned side-by-side on a gray background, each composed of five semi-transparent colored rectangles arranged in a grid pattern. The code uses React components to render SVG elements, with `MyRect` and `MyCircle` defined as reusable React functions. D3.js v5 is included in the HTML but not actively used in the rendering logic. The modules are translated using SVG transform attributes, with each rectangle given specific x and y positions, dimensions of 200 by 200 pixels, and an opacity of 0.8.

NNita

77% match

Loading thumbnail…

xy co-ordinates

This example shows a static arrangement of SVG shapes, including red rectangles and circles, positioned at fixed coordinates on a gray background. It demonstrates how React components render SVG elements using the `MyRect` custom component, which returns a `<rect>` element with position, size, fill, and opacity props. The visualization uses React 16 and D3 v5, with circles drawn directly inside an SVG container at varying x-coordinates based on an array mapping. The code defines the canvas dimensions and centers, but the displayed geometry remains fixed rather than interactive or data-driven.

NNita

76% match

Loading thumbnail…

Shapes with SVG and CSS

This example shows how SVG shapes can be styled and composed using React, with circles and rectangles rendered in three variations. The code uses React 16.10 to create SVG elements directly in JSX, including circles with default black fills and rectangles, followed by colored versions using red and green fill attributes. A third group applies a transform translation to reposition a red circle and green rectangle together. The rendering approach relies on ReactDOM to mount the SVG component inside a 960x500 canvas, demonstrating basic vector shape placement and CSS-independent styling through SVG presentation attributes.

SScott

76% match

Loading thumbnail…

SVG fundamental

This example showcases fundamental SVG shapes—a red circle, a blue-bordered rectangle, a thick navy line, and a black path—all placed on a 960 by 500 coordinate system. The code uses raw SVG elements (circle, rect, line, path) within an HTML file, augmented by the React framework for structure. It demonstrates basic vector rendering and styling through attributes like fill, stroke, and stroke-width, providing a clear starting point for building more complex data visualizations.

Yyankesswang

75% match