Composition in Red, Blue, and Yellow

100%

Composition in Red, Blue, and Yellow

✓ Published1🌍 Public

Last edited Jul 17, 2025

Created on Jul 17, 2025

A static SVG composition reinterprets Piet Mondrian’s geometric abstraction using primitive shapes. The viewport contains red, blue, and yellow rectangles separated by thick black horizontal and vertical lines, with a bold black bar spanning the upper-left region. The layout relies on explicit SVG elements—`rect` for color blocks and `line` for the intersecting strokes—positioned via absolute coordinates on a 960×500 canvas. No JavaScript or data-driven logic is involved; the rendering is purely declarative markup embedded directly in the HTML.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Example

This example demonstrates a static composition of basic geometric shapes rendered as SVG, including green, blue, and red circles, a black-bordered rectangle, a thick navy line, and a single path. The visualization uses raw SVG elements defined directly in the HTML, without any JavaScript libraries or data-binding frameworks. CSS applies a 3000-millisecond transition to the rectangles’ stroke properties, though no animated changes are triggered dynamically. The layout is fixed within a 960-by-500 viewport, with a large margin around the canvas, emphasizing the simple arrangement of shapes over data-driven content.

Ssz2036

77% match

Loading thumbnail…

SVG Exercise

A yellow rectangle with thick navy borders forms the frame of this fixed-size SVG composition. Overlapping red and blue circles are centered inside, while four additional navy lines of varying thickness outline the rectangle’s edges using basic SVG primitives. The demonstration uses inline SVG shapes—`rect`, `circle`, and `line`—with explicit pixel coordinates, stroke widths, and fill colors, showing how layered vector elements can create a simple geometric pattern without any JavaScript or data-binding library.

CChristopher Campbell

76% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG rendering primitives within a static 960 by 500 viewport, using raw SVG elements without any JavaScript libraries. The code draws a series of circles and rectangles with explicit fill colors, including red, green, blue, and yellow shapes, plus a navy-stroked rectangle and a diagonal line. A separate composition in the lower right uses overlapping blue, black, and unfilled circles to form a simple figure. All shapes are defined declaratively with SVG attributes such as `cx`, `cy`, `r`, `x`, `y`, `width`, `height`, `fill`, and `stroke`, showing basic vector graphic construction directly in HTML.

Rrobertogonzalez.ar@gmail.com

75% match

Loading thumbnail…

SVG Shapes Dude

A simple, static SVG composition displays overlapping geometric shapes: a large red-stroked blue circle, two yellow rectangles, a red diagonal line, and a white triangular path with rounded joins. The visualization relies entirely on raw SVG elements—circle, rect, line, and path—with stroke and fill attributes set directly in the markup. The embedded CSS file only styles a text class and is unused for the shapes. No JavaScript or data is involved; the rendering approach is purely declarative SVG within an HTML page.

Aarontha

75% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates the fundamental building blocks of SVG through a static composition of primitive shapes. It shows overlapping circles and a rectangle arranged on a 600 by 1000 canvas, illustrating basic attributes such as `cx`, `cy`, `r`, `fill`, and `stroke`. The rendering uses plain SVG markup embedded directly in an HTML page, with no external libraries or JavaScript logic. A yellow circle with a red inner circle sits atop a blue rectangle with a brown outline, while a separate circle floats above, highlighting how SVG paint order and coordinate systems work in a minimal, code-only context.

Nnatsgeorge.ng@gmail.com

75% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG rendering by composing a series of colored rectangles into a simple geometric composition. The code uses raw SVG elements—`<svg>`, `<rect>`, and `fill` attributes—within an HTML page, with no JavaScript or external libraries. It shows how overlapping rectangles with varying positions, sizes, and colors (including red, green, black, and white) build a static visual layout. The rendering approach relies solely on the browser's native SVG support, making it a minimal illustration of vector graphics basics.

Ssamayayendiaye01@gmail.com

75% match

Loading thumbnail…

Art

This example demonstrates a static composition of SVG shapes, including overlapping red and green circles, a diagonal line, and two path elements. The rendering uses raw SVG syntax directly in an HTML document, with inline CSS setting the page margin to zero and hiding overflow. The artwork is generated through explicit coordinate attributes such as `cx`, `cy`, and `d` for paths, and includes a commented-out rectangle to show alternative shapes. The piece explores layering and stroke styling without any interactive or animated behavior.

Aaidarshafeev1@gmail.com

74% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG composition techniques through a static graphic, using layered shapes and CSS-defined gradients without any JavaScript or data. An orange-to-yellow vertical linear gradient fills a large rectangle, while a circular shape overlaps it with a white-to-pink gradient, both drawn directly in SVG markup. The code relies on native SVG elements and attributes, including `rect`, `circle`, and `defs` with `linearGradient` stops. Because no dataset or dynamic behavior is present, the visualization focuses purely on visual styling and geometry.

Hhamzavdr

74% match