Skip to main content
SimilarExport ZIP
100%

J Exercise 1

✓ Published0🌍 Public
Zzaioris
Last edited Nov 7, 2022
Created on Nov 6, 2022
Forked from SVG Fundamentals

This visualization demonstrates a static composition of overlapping geometric shapes that form an abstract flag-like design, built entirely with Scalable Vector Graphics. The piece combines a large rectangle filled with a white-to-black linear gradient, overlaid with semi-transparent yellow, red, and blue bands, alongside a green circle and a rotated square. The only dynamic element is a thick red line that animates its horizontal endpoints back and forth, while also subtly shifting vertically through an SVG `<animateMotion>` path. The code relies on core SVG elements like `<rect>`, `<line>`, `<circle>`, and `<animate>`, with no external JavaScript libraries.

AI-generated description

A demonstration of SVG shapes.

MIT Licensed

Similar vizzes

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
81% match
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
80% match
Loading thumbnail…

SVG Exercise

This example demonstrates basic SVG shape drawing and styling within a static, hard-coded visualization. It shows three concentric circles centered at the same coordinate, with each circle filled in yellow, red, and green respectively to create a layered target-like effect. A large rectangular shape with a navy stroke is positioned beside the circles, while a diagonal line and a path with a squared segment extend across the canvas. The code uses raw SVG elements—`circle`, `rect`, `line`, and `path`—with attributes for positioning, fill, stroke, and width, all defined directly in the markup without any JavaScript library or data binding.

AAbdishakur Hassan
79% 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
79% 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
78% match
Loading thumbnail…

pseudo visualization

This example presents a static geometric composition built with React and rendered as SVG. The visualization displays a collection of overlapping gray shapes that form a complex, layered pattern around a central point. The code constructs these forms using multiple SVG `<path>` elements with defined fill colors and masking techniques. The rendering relies on inline SVG markup directly embedded in the HTML, demonstrating a pure SVG approach without additional data processing or interaction handling. The result is a non-interactive, decorative abstract visual exploration.

Jjustinhersom@gmail.com
77% 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
77% match
Loading thumbnail…

Flags

This example assembles a small collection of abstract flag-like shapes from basic geometric primitives. It shows a sequence of colored rectangles, a red circle, a semi-transparent bordered rectangle, another set of horizontal bands, and a black triangle, all arranged loosely across a wide canvas. The visualization uses the D3.js v4 library to append SVG elements—rectangles, circles, and polygons—directly to the document body. Each shape is positioned and styled with explicit attributes for fill color, size, and opacity, with no underlying data or interactive behavior present.

LLaurynKW
77% match