Skip to main content
SimilarExport ZIP
100%

Fork of Shapes and Colors with SVG and CSS

✓ Published0🌍 Public
AAbdullah Andrabi
Last edited Apr 2, 2024
Created on Apr 2, 2024

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled with CSS using inline attributes and classes. It shows how the same geometry changes appearance through fills, strokes, stroke-widths, and the `transform` attribute for scaling and translation. The code uses raw SVG in an HTML document with an external stylesheet, applying presentation attributes like `fill` and `stroke` directly on elements and grouping them with `<g>` tags. The `.lines` class in CSS defines stroke properties for the line and path elements.

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 demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled with CSS using inline attributes and classes. It shows how the same geometry changes appearance through fills, strokes, stroke-widths, and the `transform` attribute for scaling and translation. The code uses raw SVG in an HTML document with an external stylesheet, applying presentation attributes like `fill` and `stroke` directly on elements and grouping them with `<g>` tags. The `.lines` class in CSS defines stroke properties for the line and path elements.

AAbdullah Andrabi
100% match
Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes and styling using raw SVG elements and CSS. It shows circles, rectangles, lines, and a path, with fill colors, stroke properties, and transform groups. The code uses SVG’s native `<circle>`, `<rect>`, `<line>`, and `<path>` elements, with a `<g>` tag applying translations and scaling. CSS classes such as `.lines` control stroke width and color, including `stroke-linejoin` and `stroke-linecap` for path rendering. The visualization is entirely markup and stylesheet based, requiring no external JavaScript libraries.

Aabbasoveli@gmail.com
95% match
Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a polyline—styled with CSS classes and inline attributes. It uses SVG elements directly in the HTML, with a `<g>` group applying a scale transform and another group applying a translation and shared fill and stroke properties. The CSS defines stroke colors, widths, and line join/cap styles for the `.lines` class and its path. No external libraries are used; rendering relies entirely on native SVG and CSS.

YYU
94% match
Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled with CSS classes and inline attributes. It shows how fills, strokes, stroke widths, and transforms like scaling and translation can be applied directly in the markup or inherited from parent `<g>` groups. The code uses raw SVG elements and external stylesheet rules, with no JavaScript libraries, to illustrate fundamental vector graphics rendering and styling techniques.

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

Fork of Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—styled with CSS and grouped using transform attributes. The code uses plain SVG elements within an HTML document, applying fills, strokes, and a scale transformation to the entire drawing. It also shows how CSS classes, such as `.lines`, can control stroke properties like width, color, and line joins. The rendering approach is static SVG, with no interactive behavior or data binding.

Aadewole-top
94% match
Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example demonstrates a collection of basic SVG shapes, including circles, rectangles, lines, and a path, arranged in a grid and styled with both inline attributes and CSS. It shows how the same geometric elements can take on different appearances through fill colors, strokes, and transformations. The SVG is rendered directly in an HTML page, with a `<g>` element applying a global scale and a CSS class `lines` defining stroke properties for the line and path elements. The code uses the direct SVG API for shape markup and CSS for presentation.

Ffaria.29.farheen@gmail.com
94% match
Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example shows basic SVG shapes styled with CSS, including circles, rectangles, lines, and a path. The shapes demonstrate inline fill attributes, a grouped set with a shared fill and stroke, and a separate class-based styling for lines. The code uses raw SVG elements within an HTML file, with a linked stylesheet applying stroke properties to the `.lines` class. Rendering relies on the browser’s native SVG support, with a scale transform applied to the entire group. No external JavaScript libraries are used, and the data is static geometry defined directly in markup.

PPrathik Kulkarni
94% match