Skip to main content
SimilarExport ZIP
100%

Fork of learn svg through 24 examples

✓ Published0🌍 Public
Mme-as-a-web-designer
Last edited Dec 14, 2021
Created on Dec 14, 2021

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.

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…

learn svg through 24 examples

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.

Ddmr
86% match
Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example showcases basic SVG shapes and their styling with CSS, including circles, rectangles, lines, and paths. It demonstrates how individual shapes can have inline fill and stroke attributes, while groups can apply shared styles and transformations. The visualization uses SVG elements like `circle`, `rect`, and `path`, with cascading style rules from an external stylesheet. It also employs SVG transformations such as `scale` and `translate` to reposition grouped elements, and CSS classes to control stroke properties like line joins and caps.

CCrystal Hsu
81% match
Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—arranged in a forked pattern, with colors applied via inline attributes and CSS classes. It shows how SVG elements can be grouped and transformed using `translate` and `scale`, and how styling rules like stroke width, line join, and fill colors are defined in a separate stylesheet. The code uses raw SVG within an HTML document, with CSS controlling the line and path appearance.

Ccheryl-learns
81% match
Loading thumbnail…

Fork of SVG Fundamentals

This example demonstrates a collection of basic SVG shapes arranged in an overlapping composition, including circles, rectangles, lines, and paths. The visualization uses raw SVG elements within an HTML document, with shapes styled through fill and stroke attributes. The code creates visual layering effects by placing semitransparent or fully opaque circles of different colors at various positions, alongside thickly stroked rectangles and geometric paths. The rendering relies entirely on the browser's native SVG support through the `<svg>` element, with no external JavaScript libraries or data sources involved.

Aadventuresenglish.info@gmail.com
81% match
Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example demonstrates a collection of basic SVG shapes—circles, rectangles, lines, and a path—arranged in a grid and styled with both inline attributes and CSS classes. The visualization uses raw SVG markup within an HTML file, applying transforms for scaling and translation, while the stylesheet controls stroke properties, line joins, and caps. It showcases how SVG elements can be combined with CSS to create a static, decorative composition.

Bbakar294
80% match
Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example showcases basic SVG shapes, including circles, rectangles, lines, and paths, styled with CSS and inline attributes. It demonstrates grouping and transformation using the `transform` attribute, such as `scale` and `translate`, while applying fills, strokes, and stroke widths. The SVG is embedded directly in an HTML file, with external CSS controlling stroke properties for line elements. The rendering approach uses static SVG code, and the visual output is presented without any external data sources or JavaScript libraries.

Ppei9223
80% match
Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example demonstrates a collection of basic SVG shapes—circles, rectangles, lines, and a polyline path—styled through both inline attributes and an external CSS stylesheet. It shows how fill colors, stroke widths, transparency, and geometric transforms like scaling and translation apply to grouped elements. The visualization uses raw SVG markup within an HTML document, with CSS classes controlling line styles and joint/endpoint rounding. No JavaScript libraries are involved; the rendering relies entirely on the browser's native SVG support and CSS styling rules.

Ii211775
80% match
Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes and CSS styling within an HTML page. The visualization displays circles, rectangles, lines, and a path, with groups using inline attributes for fill and stroke colors, while CSS classes apply stroke properties to line elements. The SVG is scaled using a transform, and the code references D3.js through an import but primarily relies on standard SVG and CSS for rendering. The accompanying JavaScript, though incomplete, attempts to create SVG elements dynamically using the Document API.

Ccsantiagopaz
79% match