Shapes with SVG and CSS

100%

Shapes with SVG and CSS

✓ Published5🌍 Public

Last edited Mar 25, 2020

Created on Mar 23, 2020

This example demonstrates how SVG shapes can be styled and transformed using raw SVG attributes and CSS rules. It shows circles, rectangles, lines, and a path, with some shapes inheriting fill and stroke properties from parent groups, while others are explicitly overridden. The code uses inline SVG elements such as `circle`, `rect`, `line`, and `path`, along with CSS classes like `.lines` to define stroke styles. SVG transform attributes (`scale`, `translate`) group and position the shapes, and no external JavaScript libraries are used.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how SVG shapes can be styled and transformed using both inline attributes and CSS. It shows circles, rectangles, lines, and a path, with some shapes grouped to share fill and stroke properties, while the `lines` class applies black strokes and a rounded line join. The SVG viewport scales up by 1.5, and a translated group shifts lines and paths into place. The code uses raw SVG elements and CSS rules, with no external JavaScript libraries.

Wwoo

94% match

Loading thumbnail…

Shapes with SVG and CSS

This example shows a collection of basic SVG shapes, including circles, rectangles, lines, and a path, arranged in a coordinate system and scaled up. The shapes have various fills, strokes, and stroke widths, with some styles inherited from a parent group or defined via CSS classes. It uses raw SVG elements such as `circle`, `rect`, `line`, and `path`, with transformations like `scale` and `translate`. The rendering approach uses an inline SVG, with styling applied through an external CSS stylesheet that defines classes like `.lines` for stroke properties.

DDifan Gu

94% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how fundamental SVG shapes—circle, rect, line, and path—can be styled and composed using CSS and SVG attributes. It shows grouped elements with transformed positions, inherited fill and stroke properties, and class-based styling for lines and paths. The code uses raw SVG markup with inline presentation attributes like `fill`, `stroke`, and `stroke-width`, combined with CSS rules targeting classes such as `.lines`. The rendering is purely SVG, with no external libraries, and the page layout is simplified through CSS margin resets.

TTebid Quinsy

94% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how basic SVG shapes—circles, rectangles, lines, and paths—can be styled and transformed using both inline attributes and CSS classes. It shows circles and rectangles with default and explicit fills, a group with blue shapes and black strokes, and a polyline with rounded joins. The code uses raw SVG elements within an `<svg>` container, applying `scale` and `translate` transforms, while a CSS class controls stroke properties on the line and path.

DDanteStack

94% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—styled through both inline attributes and external CSS classes. The SVG canvas is scaled and translated using transform groups, showing how shape fill, stroke, and stroke-width properties work. It uses raw SVG elements with CSS from `styles.css` to apply black strokes and rounded line joins to path elements. The rendering relies entirely on standard SVG markup and CSS, with no additional JavaScript libraries.

Jjediknight956

94% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shape rendering with inline presentation attributes and CSS styling. It shows circles, rectangles, a line, and a path, with inherited visual properties applied to grouped elements. The code uses raw SVG elements within an HTML document, applying a scale transform to the entire canvas and a translate transform to a subgroup. CSS classes control stroke and line-join for the path, while group-level presentation attributes set fill and stroke for child shapes. The example highlights how SVG presentation attributes can be overridden by CSS rules, enabling flexible styling control.

Ssilenusrich

94% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—styled with CSS and inline attributes. It shows how fill colors, stroke widths, and transforms like scaling and translation affect rendering, with groups applying shared properties such as stroke and fill. The code uses raw SVG elements (circle, rect, line, path) and CSS classes (like `.lines` for stroke styling) rather than a JavaScript visualization library. The HTML embeds the SVG directly, while the stylesheet controls global margins and stroke properties.

Aanuj1450

94% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—styled with CSS. It shows how shapes can be given explicit fill and stroke colors, or inherit styles from group elements and CSS classes. The code uses raw SVG elements (`<circle>`, `<rect>`, `<line>`, `<path>`, `<g>`) with attributes like `cx`, `r`, `x`, `width`, and `transform`, while external CSS defines stroke width, color, and line join styles. The rendering is purely static SVG without any JavaScript libraries.

MMelina

93% match