Skip to main content
SimilarExport ZIP
100%

W1 SVG essentials

✓ Published0🌍 Public
MMadhu
Last edited May 18, 2022
Created on May 18, 2022
Forked from HTML Starter

This example demonstrates basic SVG shape layering and symmetry. A series of overlapping red and white circles creates three target-like forms across the canvas, with white vertical rectangles and diagonal line segments adding structure on either side. The piece also includes a black path using relative lineto commands. Pure SVG, rendered directly in HTML.

AI-generated description

SVG LESSON 1

MIT Licensed

Similar vizzes

Loading thumbnail…

W1 SVG essentials

This example demonstrates layered SVG shapes to create symmetric, abstract compositions across a 960×500 canvas. It uses red and white circles of varying radii positioned at the center and edges, combined with rectangular strokes and diagonal lines to form balanced, mirrored patterns. The code employs basic SVG elements—`circle`, `rect`, `line`, and a black `path` with `M` and `l` commands—all rendered directly in the HTML markup without additional libraries. The illustration focuses on fundamental shape layering and symmetry, as noted in the accompanying README.

AAlenka Guček
90% match
Loading thumbnail…

Fork of W1 SVG essentials

This example demonstrates geometric symmetry and layering using basic SVG shapes. It arranges circular forms in red and white to create an abstract, mirrored composition with a central focal point, flanked by two vertical rectangles and four diagonal line segments. The work uses the SVG `<circle>`, `<rect>`, and `<line>` elements directly within an HTML document. The rendering relies on SVG’s coordinate system and shape attributes like `cx`, `cy`, `r`, and `stroke-width`, with no external JavaScript libraries, to explore visual balance and repetition.

NNishant Sinha
84% match
Loading thumbnail…

Fork of W1 SVG essentials

A visual study of symmetry and layering, this SVG example arranges red and white circles around three central points to create an abstract, mirrored composition. The code explicitly layers overlapping circle elements, using fill colors and radii to build a pattern of concentric shapes. Rectangles and thick diagonal lines add structural contrast and further emphasize the balanced, symmetrical layout. The piece is a hands-on demonstration of basic SVG elements—circle, rect, and line—focusing on how order and positioning affect the final visual result.

PPrashul Jain
81% match
Loading thumbnail…

svg3

This example demonstrates fundamental SVG shape construction using raw SVG elements within an HTML document. The page displays overlapping red and green circles, a navy diagonal line, a custom path forming a horizontal capsule shape, and a black polyline path with a right-angle turn. The SVG canvas is set to 960 by 500 pixels with hidden page overflow. The code uses literal SVG tags such as `<circle>`, `<line>`, and `<path>`, with explicit coordinate and styling attributes, including fill colors, stroke colors, and stroke widths. A commented-out rectangle shows an alternative shape configuration without rendering it.

Yyesyesnono01@yahoo.com
81% match
Loading thumbnail…

SVG Fundamental

This example demonstrates fundamental SVG shape rendering, combining basic geometric elements to form a simple composition. It shows overlapping red and white circles with black centers, reminiscent of stylized eyes, alongside small brown and black circular details, a yellow rectangle with a navy border, and a black diagonal line. The code uses raw SVG elements in an HTML file, including `circle`, `rect`, and `line`, with attributes for positioning, sizing, fill colors, and stroke properties. The rendering relies entirely on the browser's native SVG support without any JavaScript libraries.

Sshirinmehrpouran
80% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes and attributes within a single 900x500 canvas. It shows circles with varying radii and fill colors, a blue-outlined rectangle, a diagonal navy line, and a black, open path forming a geometric shape. The code uses raw SVG element syntax including `<circle>`, `<rect>`, `<line>`, and `<path>` inside an `index.html` file, with styling applied directly through presentation attributes like `fill` and `stroke`.

CCrystal Lee
79% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates the core building blocks of SVG graphics, showing how basic shapes combine to form a static vector illustration. It features a red circle, a blue rectangle, a thick navy diagonal line, and an open path that creates a two-segment angular stroke on a 960x500 canvas. The code uses raw SVG elements—`circle`, `rect`, `line`, and `path`—defined directly in an `index.html` file without any JavaScript library. Each shape is styled via presentation attributes like `fill`, `stroke`, and `stroke-width`, while a comment in Spanish notes the markup. This is a pure, hand-authored SVG example, with no external data source.

JJhonatan Perera
79% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates basic SVG shapes directly in HTML, showing how circles, rectangles, and lines render with stroke, fill, and thickness properties. A red-outlined circle appears next to a filled red circle with a black border, while a blue-bordered white rectangle and a thin diagonal line complete the composition. The visualization uses raw SVG elements within a 500x500 canvas, relying on the browser’s built-in SVG rendering API rather than a JavaScript library like D3. The shapes are static, with no data binding or interaction, serving purely as a primer for SVG’s coordinate system and attribute syntax.

HHenry Tochukwu Uzor
79% match