Shapes with SVG and CSS

100%

Shapes with SVG and CSS

✓ Published1🌍 Public

Last edited Jul 8, 2022

Created on Jul 8, 2022

This example demonstrates the fundamental SVG shapes—circles and rectangles—styling through both inline attributes and CSS classes. It shows how presentation properties like fill, stroke, and stroke-width can be defined either directly or via a stylesheet. The code applies a scale transform to the entire group, then a translate with a grouped color and stroke style, and finally a path with a round stroke-linejoin. The `.lines` class in `styles.css` sets stroke appearance, while `index.html` uses standard SVG markup within an HTML document.

AI-generated description

MIT Licensed

Similar vizzes

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

95% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how basic SVG shapes—circles, rectangles, lines, and paths—can be styled and grouped using CSS. It shows a static composition where the first circle and rectangle inherit default fills, a translated group applies shared fill and blue stroke attributes, and the `.lines` class sets black stroke width for lines while paths override the stroke to red with round line joins. The code uses the SVG API directly within an HTML document, with CSS rules in a separate stylesheet controlling presentation. No external libraries are involved.

TTiffani Gamboa

94% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—positioned and styled directly in HTML. It shows how CSS classes and inline attributes control fill colors, strokes, and grouping via SVG `<g>` elements. The code uses no external libraries, relying on native SVG elements and a linked `styles.css` file for styling. A global transform translates a grouped set of shapes, while the `.lines` class applies black strokes with a green, round-joined path, illustrating CSS’s role in SVG presentation.

AAloha1403

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 the effect of explicit fill and stroke properties, group-level transformations like `translate` and `scale`, and cascading CSS rules that apply stroke width and color to line elements. The rendering uses raw SVG within an HTML page, with a linked stylesheet, and requires no external JavaScript libraries.

JJoora Song

94% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled and transformed using CSS and inline SVG attributes. It shows how fill colors, stroke widths, line joins, and group-level transformations like scaling and translation affect the rendering. The code uses native SVG elements (`<circle>`, `<rect>`, `<line>`, `<path>`) within an HTML document, with CSS rules from `styles.css` targeting the `.lines` class for stroke styling. The visualization is purely declarative, with no JavaScript or external libraries beyond the SVG markup itself.

Jjunge870214

94% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled with CSS. The structure uses a static SVG document with nested groups to apply transforms like scaling and translation. Fill colors, stroke widths, and line joins come from CSS classes, while inline attributes set initial properties. The code imports no external libraries, relying purely on SVG markup and CSS. Lines and paths are grouped with named classes to control their stroke appearance, showing how CSS interacts with SVG elements without JavaScript or D3.

Mmaximus2581

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