Shapes with SVG and CSS

100%

Shapes with SVG and CSS

✓ Published3🌍 Public

Last edited Sep 21, 2020

Created on Sep 19, 2020

This example demonstrates how SVG shapes—circles, rectangles, lines, and a path—can be styled using both inline attributes and CSS. It shows the interplay between explicit presentation attributes like `fill` and `stroke`, and stylesheet rules targeting classes such as `.lines` and `.lines path`. The rendering uses raw SVG elements within an HTML document, applying a `scale` transform and grouped translations to position the geometry. CSS handles stroke color, width, and line joins for the path, while inline attributes set fills on individual shapes.

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, with some shapes grouped and scaled or translated. It shows how SVG attributes like `fill`, `stroke`, and `stroke-width` control appearance, while CSS classes such as `.lines` apply shared styling. The static composition uses raw SVG elements directly in HTML, without any JavaScript libraries, and relies on inline attributes and an external stylesheet for rendering.

Ccheeson

94% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how SVG shapes—circles, rectangles, lines, and paths—can be styled and transformed using both inline attributes and CSS rules. It shows default black shapes, shapes with explicit `fill` colors, a group with a cyan fill and black stroke, and a separate group of lines and paths styled via CSS classes. The rendering uses SVG elements placed in an HTML page, with the `styles.css` file providing stroke width, color, and line-join properties for the `.lines` class and its path child.

AAlessan123

94% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how SVG shapes are styled and transformed using CSS and inline attributes. It pairs circles and rectangles with default black fills, red and gray custom fills, and a group inheriting blue fill with black strokes. The code uses SVG elements like `circle`, `rect`, `line`, and `path`, with transformations via `scale` and `translate`. CSS classes like `.lines` define stroke properties, while `.lines path` overrides the stroke color and applies a round line join. The rendering uses inline SVG markup within an HTML document.

Wwoo

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

93% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes rendered as SVG elements, showing how circles, rectangles, lines, and paths can be styled directly and through CSS classes. The SVG markup defines shapes with attributes like `cx`, `cy`, `r`, and `x`, while a separate stylesheet applies visual properties such as `fill`, `stroke`, and `stroke-width` to both individual elements and grouped selections. The code uses raw SVG APIs and CSS selectors like `.lines path` to control stroke color and line joins, with transforms for scaling and translation. It illustrates static shape composition without interactivity or data binding.

Sshis1011

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

93% match

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates SVG shapes and CSS styling, showing circles, rectangles, lines, and paths arranged with transforms and grouped elements. It illustrates how inline attributes like `fill`, `stroke`, and `stroke-width` combine with external stylesheet rules targeting classes such as `.lines` and `.lines path` for stroke color and line joins. The rendering uses raw SVG markup within an HTML page, with a CSS file controlling layout and visual properties.

Ffasynator

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

93% match