Skip to main content
SimilarExport ZIP
100%

learn svg through 24 examples

✓ Published2🌍 Public
Ddmr
Last edited Nov 15, 2021
Created on Nov 15, 2021

This example demonstrates how to build a series of SVG scenes by hand, progressing from a simple bauble ornament to a branching snowflake design. It shows how to apply clip paths, reuse elements with the `<use>` tag, and apply transformations like rotation and scaling to compose complex shapes. The code uses raw SVG elements such as `<circle>`, `<polygon>`, and `<path>`, along with `viewBox` coordinates centered on (0,0) and a radial gradient for shading. The examples are purely illustrative, with no data source or external library.

AI-generated description

Bauble

Added a rectangle with fill none to show off the boundary Helpful to have (0, 0) as centre of image

Tree

Had to increase the viewBox height to include the supplied coordinates

Bauble with decoration

This looks easy. Define a circle as the clipPath in <defs> then use clip-path in the polyline

snowflake

define one arm of the snowflake in defs then use that definition with rotation every 60 degrees

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of learn svg through 24 examples

This visualization showcases a progression of SVG techniques through 24 examples, beginning with basic shapes and advancing to clipping paths and rotation transforms. It demonstrates how to define reusable elements in `<defs>` and apply them with `<use>` tags, creating complex compositions like a snowflake with six rotated branches. The examples use native SVG APIs including `clipPath`, `clip-path`, and `transform` attributes to build geometric patterns with polygons, polylines, and paths. Each mini-example highlights a specific SVG feature, from coordinate systems with zero-centered viewBoxes to decorative elements like baubles, trees, and geometric abstract shapes.

Mme-as-a-web-designer
86% match
Loading thumbnail…

SVG Learning

This example demonstrates fundamental SVG shapes and transformations in a static scene. It displays circles, rectangles, lines, and a path, with attributes like fill, stroke, and stroke-width controlling appearance. The SVG element uses nested `<g>` groups with `scale` and `translate` transformations to position elements, while the `lines` group shows a polyline and an open path. Styling comes from inline attributes and a simple external CSS file. The code directly uses the SVG API, with no external scripting libraries.

EEdwin
79% match
Loading thumbnail…

SVG starter

This example demonstrates a collection of primitive SVG shapes—circles, rectangles, lines, and a path—arranged in a coordinate grid and styled with CSS. The code uses raw SVG elements within an inline `<svg>` tag, applying transforms like `scale`, `translate`, and `rotate` to position and manipulate the shapes. A CSS file defines stroke widths, colors, and line joins for the graphical elements, while the HTML structure keeps the markup minimal. The visualization serves as a starter template for understanding how to combine SVG geometry with external stylesheet rules.

Qqliu50@fordham.edu
78% match
Loading thumbnail…

SVG

This example demonstrates a collection of basic SVG shapes, including circles, rectangles, lines, and a path, arranged in a scaled and translated coordinate system. The code uses raw SVG elements within an HTML document, applying CSS classes to style the line and path elements with black and green strokes. A white-filled group with black outlines is layered over earlier shapes to show overlap and composition. The visualization shows how SVG coordinates and grouping transforms can be combined to build simple geometric compositions without any external JavaScript libraries.

JJasonXu1244
78% match
Loading thumbnail…

SVG and CSS Shapes

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—arranged in a grouped composition. It shows how CSS classes style SVG elements, applying stroke and fill properties to specific groups. The visualization uses D3.js imports (`select` from D3) to set text content, though the primary rendering is static SVG markup. The code also illustrates nested `<g>` transforms, scaling the entire scene, and using CSS rules like `.lines path` to override stroke colors and line joins.

JJSR2000
77% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes and styling in a static scene. It shows a blue circle, two diagonal lines, and a black polyline path, all defined within an inline SVG element. The code uses raw SVG markup with elements like `<circle>`, `<line>`, and `<path>`, applying attributes such as `stroke`, `stroke-width`, and `fill`. A separate file, hover.html, explores CSS transitions on SVG circles, changing fill color and stroke width over three seconds when hovered.

Nnim@brejnholt.dk
77% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates a collection of basic SVG shapes, including overlapping circles, squares, and a stylized face with a hat, drawn directly in an HTML file using the SVG markup language. It shows how paths, circles, and rectangles can be combined with various stroke and fill colors to create illustrative figures. The rendering uses native SVG elements like `path` and `circle` within an inline `<svg>` container, without relying on external JavaScript libraries. The design is inspired by a Kati-dev-hu tutorial.

RRochelle
77% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates basic SVG shapes using native SVG elements within an HTML document. It renders three circles with different radii and colors (white, purple, and cyan) alongside a single path that combines circular arcs and quadratic curves to form a leaf-like shape with a magenta fill and hot pink stroke. The drawing relies on SVG’s XML-based markup, including the `viewBox` attribute for coordinate scaling and inline attributes for shape geometry. The code includes an `index.js` file that merely logs “hello world” and a `styles.css` referencing a `.message` class not applied to any elements.

Eellie.ackerson26@gmail.com
77% match