SVG Practice Art

100%

SVG Practice Art

✓ Published0🌍 Public

Last edited Sep 28, 2021

Created on Aug 30, 2021

This example displays a playful SVG sketch inspired by the Olympics, featuring a large rectangular border, five interlocking circles in blue, black, red, yellow, and green, and a radial pattern of curved line segments around a central pink circle. The word “TOKYO 2020” appears in bold black text below. The visualization uses raw SVG elements—`rect`, `circle`, `path`, and `text`—with `transform` rotations to create the repeating spokes. The illustration is static, with no JavaScript libraries, and serves as practice for learning SVG fundamentals.

AI-generated description

A fun Olympics themed sketch to learn the SVG tools.

This illustration was created based on instruction included in Curran Kelleher's tutorial on SVG fundamentals

MIT Licensed

Similar vizzes

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

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 Practice

A practice page for hand-coded SVG primitives. It draws a single red circle and an orange rectangle with a blue outline using inline SVG elements, placing them alongside an HTML text message. The example demonstrates basic shape creation and styling directly in the markup, without any JavaScript libraries. The code includes a minor syntax error in the rectangle’s y attribute and uses a large 13em font for the accompanying text.

Wwomb-bat

76% match

Loading thumbnail…

SVG Playground

This example shows a collection of primitive SVG shapes—circles, a line, and two paths—arranged in a 960 by 500 viewport to create a small, static composition. Overlapping circles in maroon and green sit beside a navy line, while a curved path and a rectilinear path add contrast. The code uses plain SVG markup within an `index.html` file, defining shapes with attributes like `cx`, `r`, and `d`. A commented-out rectangle and inline CSS for full-bleed display are also present, but no external libraries or data sources are involved.

CCurran Kelleher

75% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shape primitives within a static 960-by-500 canvas. It displays a default black circle, a red circle, a yellow rectangle with a navy border, a diagonal navy line, and a stroked path with a missing stroke attribute typo. The code uses the raw SVG API directly inside an HTML document, without any JavaScript libraries or external data sources, relying solely on inline SVG elements and their presentation attributes.

JJMeils

75% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates basic SVG shape primitives as a standalone visualization. It displays two circles, one rectangle, and an additional smaller circle arranged on a 930-by-480 canvas, with a purple border outlining the full drawing area. The code uses raw SVG elements (`circle`, `rect`) directly in HTML, specifying attributes like `cx`, `cy`, `r`, `fill`, and `stroke` without any JavaScript libraries. Each shape’s position, size, and color are hardcoded, showing how SVG handles simple geometric rendering and stroke styling in a static, non-interactive format.

SS1lus

75% match

Loading thumbnail…

practice1

A minimalist SVG canvas displays four distinct geometric primitives: a filled blue circle, an unfilled red rectangle with a thick stroke, a black diagonal line, and a brown polyline path. The drawing demonstrates fundamental vector graphics rendering via the HTML5 `<svg>` element, using direct attribute declarations for coordinates, dimensions, and styling. The static composition, sourced from the file `v3`, highlights basic shape construction without interaction or animation.

TTian1398

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

75% match