Shapes with SVG and CSS

100%

Shapes with SVG and CSS

✓ Published1🌍 Public

Last edited Feb 17, 2020

Created on Feb 16, 2020

This example demonstrates how SVG shapes—circles, rectangles, lines, and paths—can be styled directly with CSS properties such as `fill`, `stroke`, and `stroke-width`. It shows the contrast between shapes with default black fills, individually assigned colors, and a group inheriting a blue fill with a black stroke. The code uses raw SVG elements and CSS rules, including a `.lines` class for stroke styling and a nested `<g>` transform to reposition shapes. No external libraries are used, relying solely on native SVG and CSS.

AI-generated description

MIT Licensed

Similar vizzes

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

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how SVG shape elements are styled using both presentation attributes and CSS. It shows circles, rectangles, lines, and a path, with solid colors, strokes, and transforms applied. The code uses vanilla SVG markup with CSS rules from an external stylesheet, including a `.lines` class to set stroke properties. A `<g>` element applies `fill`, `stroke`, and `stroke-width` as inherited attributes, while another group uses a `translate` transform. The example highlights how CSS and SVG attributes interact to control visual appearance.

PPourmahmood

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 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 and colors can be styled with CSS, using circles, rectangles, lines, and a path. It shows inline presentation attributes like `fill` and `stroke` alongside a `<g>` element that applies shared styles, and CSS classes that define stroke properties for line elements. The SVG is scaled with a transform, and the page hides overflow. The code uses raw SVG markup with no JavaScript libraries, relying on CSS for line styling.

Eegrebing

94% match

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes—circles, rectangles, lines, and paths—can be styled with inline attributes, presentation attributes, and CSS classes. It shows shapes with explicit fills, a group using inherited fill with black strokes, and a separate group for lines with round stroke caps and joins. The code uses raw SVG elements, the `g` transform for scaling and translation, and a linked CSS stylesheet to define stroke properties for the `.lines` class, with no JavaScript or external libraries.

Sshahbaj1999

94% match