Fork of Shapes and Colors with SVG and CSS

100%

Fork of Shapes and Colors with SVG and CSS

✓ Published0🌍 Public

Last edited May 16, 2021

Created on May 16, 2021

Forked from Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes and CSS styling through a simple composition of circles, rectangles, lines, and a path. It uses a group element with a scale transformation to resize the entire drawing, while a nested group applies a fill and stroke to both a circle and rectangle. The example also uses CSS class selectors to style the stroke and linecap properties of the line and path elements. The SVG is rendered with a 960x500 viewport and a 1.7 scale factor.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

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

93% match

Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes, including circles, rectangles, lines, and paths, can be styled and grouped using CSS classes and inline attributes. The rendering relies on raw SVG elements within an HTML document, with a separate stylesheet defining stroke properties for path elements. A scaling transformation enlarges the entire drawing, while translation groups reposition shape clusters. The code uses no JavaScript libraries, relying purely on SVG markup and CSS for styling, showing basic geometric primitives with varying fill colors and stroke configurations.

FFereidoun Mianji

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

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

92% match

Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled through both inline attributes and CSS classes. The SVG is scaled and translated via transform groups, with explicit fills, strokes, and stroke-widths applied. It uses raw SVG elements within an HTML page, with CSS controlling the path stroke color, line join, and cap styles. No external libraries are involved; the rendering relies solely on native SVG presentation and a linked stylesheet.

Ppangaotata

92% match

Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example demonstrates a static composition of basic SVG shapes—circles, rectangles, lines, and a polyline path—stylized with CSS classes and inline attributes. The scene uses a transformed group to scale the entire drawing, while a nested translation positions a second group of shapes. Colors vary between explicit fills like red and green, and a shared fill applied via a group attribute, with stroke properties defined in styles.css for black lines and a custom line join. The page relies solely on native SVG markup and CSS, with no JavaScript libraries involved.

Ccharliemok

92% match

Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example showcases basic SVG shapes—circles, rectangles, lines, and a path—styled with CSS and inline attributes. It demonstrates how grouping, transforms, and CSS classes apply fill, stroke, and positioning across elements. The code uses plain SVG markup and CSS rules, with no external libraries, to illustrate fundamental vector graphic rendering in a static scene.

LLuoTianqi

92% match

Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes and styling through CSS, using circles, rectangles, lines, and paths within a single scalable vector graphic. The SVG is rendered directly in an HTML document, with the `<g>` elements grouping shapes to apply transformations and shared styling. CSS classes like `.lines` define stroke properties for the line and path elements, while inline attributes set fill colors and stroke widths. The visualization shows how SVG’s coordinate system and CSS work together to control shape appearance and positioning, with a scale transform applied to the entire group.

AApril Fangzhu Guo

92% match