Rectangles coordinates when translated

100%

Rectangles coordinates when translated

✓ Published0🌍 Public

Last edited Feb 20, 2020

Created on Feb 18, 2020

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.

AI-generated description

Smiley Face Part I (with React)

MIT Licensed

Similar vizzes

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

81% match

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

80% 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

78% match

Loading thumbnail…

xy co-ordinates

This example maps a four-by-four grid of Cartesian coordinates to an SVG rectangle, using React components and D3.js v5. It renders a single red rectangle at a position derived from the looping variables `i` and `j`. The code defines reusable React components like `MyRect` and `MyCircle`, and uses `ReactDOM.render` to display the SVG. The approach demonstrates basic x/y positioning within a fixed 960×500 viewport.

NNita

78% match

Loading thumbnail…

Rectangles

This example centers a single green rectangle on a gray SVG canvas, sized to half the viewport’s width and height. A pink page background and red SVG border frame the composition. The code uses vanilla JavaScript to query the SVG element via `document.querySelector`, reads its `clientWidth` and `clientHeight`, then sets the rectangle’s `x`, `y`, `width`, and `height` attributes dynamically. CSS styles the body and a `.center` class, while the rectangle receives its fill, yellow stroke, and stroke width through `setAttribute` calls.

AAlim Bolar

77% match

Loading thumbnail…

RGB color theory

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.

NNita

77% 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

76% match

Loading thumbnail…

transform = translate HTML Starter

This example demonstrates the use of the SVG `transform="translate(x, y)"` attribute to reposition a purple, semi-transparent rectangle within an SVG canvas. The code defines a single rectangle inside a `<g>` group with the `id="square"`, then uses an SVG `<use>` element referencing that group and applies the translation transform. With no external libraries or JavaScript, it is a bare-bones HTML page (as noted in the README) that relies solely on inline SVG and CSS-like styling for presentation. The title, comments, and some CSS rules are commented out, leaving the SVG rendering as the core visual output.

DDasbach.EJ

75% match