Fork of W1 SVG essentials

100%

Fork of W1 SVG essentials

✓ Published0🌍 Public

Last edited Dec 26, 2022

Created on Dec 26, 2022

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.

AI-generated description

A demonstration of SVG shapes. practise basic elements, layering and symetry read about arcs. Too complex for now, it's easier to play with layering for next time: figure out ovals and curved shapes

MIT Licensed

Similar vizzes

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

93% match

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

87% match

Loading thumbnail…

Fork of W1 SVG essentials

A demonstration of SVG shape creation using only basic structural elements is depicted. The visualization, rendered as an SVG, shows a single thick white line crossing the canvas, with additional elements like circles and rectangles present but commented out. The code explores fundamental shape syntax, layering, and symmetry, with notes indicating a practice of basic SVG components. The example uses raw SVG markup and emphasizes learning through experimentation, as demonstrated by the inactive path commands and the developer's comments about future exploration of arcs and curved forms.

Ccuore.fakhri@gmail.com

85% match

Loading thumbnail…

W1 SVG essentials

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.

MMadhu

84% match

Loading thumbnail…

Fork of SVG Fundamentals

This example demonstrates fundamental SVG shapes through a simple static composition. It shows two overlapping circles in red and green, a navy diagonal line, a horizontal path forming a rounded rectangular shape, and a black polyline with a sharp corner. The visualization uses raw SVG elements embedded directly in HTML, including `<circle>`, `<line>`, and `<path>`, all rendered with explicit coordinates and styling attributes. The code relies solely on the native SVG API without additional JavaScript libraries, and the rendering is entirely vector-based.

HHamim Rahman

83% match

Loading thumbnail…

svg fundamentals practice fork

This example demonstrates layered SVG shapes to explore symmetry and basic element composition. Red and white circles of varying radii overlap to create a central emblem-like pattern, flanked by two larger circular forms at the edges. The composition also includes rectangles with red strokes, thick white diagonal lines near the corners, and a black stroke path with a horizontal line and angled segments. The code uses the SVG API directly, setting attributes like `cx`, `cy`, `r`, `fill`, `stroke`, and `stroke-width` on circles, rects, lines, and a path element.

RRifat Shadman

83% match

Loading thumbnail…

Fork of SVG Fundamentals

This example demonstrates basic SVG shape creation, including a red circle, a blue-bordered rectangle, and a pink line. The code uses inline SVG elements within an HTML file, setting exact coordinates and dimensions for each shape. The rectangle has no fill and a two-pixel stroke, while the circle and line use simple color attributes. The rendering approach is purely declarative, using the SVG DOM directly rather than any JavaScript library or data binding.

NNikki Masroor

82% match

Loading thumbnail…

Fork of SVG Fundamentals

This example demonstrates the foundational structure of an SVG graphic, combining basic shapes to form a static, abstract composition. It uses a large, semi-transparent green circle as a background element, overlaid with a red, thick-stroked path that creates an organic, irregular line. Below these, three black rectangles are positioned to suggest a simple interface or layout block. The rendering relies purely on SVG elements (`circle`, `path`, `rect`) and CSS classes, with all coordinates defined via the `viewBox` attribute, resulting in a lightweight, code-driven illustration without external libraries.

Jjajinkyaa

82% match