Shapes with SVG and CSS

100%

Shapes with SVG and CSS

✓ Published1🌍 Public

Last edited Jul 11, 2020

Created on Jul 11, 2020

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes—circles, rectangles, lines, and paths—can be styled and grouped using both inline attributes and an external CSS stylesheet. The first two shapes use default black fills, while later shapes apply explicit fills like red and a green hex code, and a group-level fill with a black stroke. CSS class `.lines` sets stroke color and width, with a nested rule for path line joins. The rendering uses raw SVG in an HTML file, with a scale transform and translated groups.

Aarg04

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

95% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how basic geometric shapes—circles, rectangles, lines, and paths—can be drawn and styled using SVG elements and CSS. It shows shapes with default black fills, explicit color fills, grouped shapes with shared stroke and fill attributes, and a separate class for lines and paths that applies stroke styling via CSS rules. The code uses plain SVG markup within an HTML page, with a linked stylesheet for class-based styling, and includes an ES6 module exporting a message.

YYF

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

95% match

Loading thumbnail…

Shapes with SVG and CSS

This example shows basic SVG shapes—circles, rectangles, lines, and a path—styled with CSS and grouped with SVG transforms. The first row uses default black fills, the second introduces explicit fill colors, and the third demonstrates a group-level fill with a black stroke. A fourth group applies a CSS class to style the lines and path with custom stroke width and colors. The rendering uses plain SVG elements in an HTML page, with CSS rules in `styles.css` controlling presentation attributes like stroke, fill, and line joins.

Mmallikgarjuna

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 and Colors with SVG and CSS

This example demonstrates how SVG shapes, including circles, rectangles, lines, and paths, can be styled with inline attributes and CSS classes. It shows the same shapes rendered in default black, with explicit fill colors, and with a group-level fill and stroke applied via a transform. The code uses SVG elements directly within an HTML document, relying on CSS selectors like `.lines` and `.lines path` to set stroke properties. A scale transform enlarges the entire scene for display.

MMichael Todd

94% match

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled with CSS, using inline SVG elements in an HTML page. It shows how default black fills contrast with explicit red and green fills, while a group with `fill="#adf6ff"` and `stroke="black"` applies shared styling to multiple shapes. The `.lines` class in styles.css sets stroke color and width, with path-specific overrides for rounded joins and caps. The SVG uses `<g>` elements with `transform` attributes for scaling and translation, and CSS rules handle body margins and overflow without external libraries.

Ffasynator

94% match