Shapes with SVG and CSS

100%

Shapes with SVG and CSS

✓ Published0🌍 Public

Last edited Jun 12, 2020

Created on Jun 12, 2020

Forked from Untitled

This example demonstrates how CSS can be used to style SVG shapes, showing circles, rectangles, lines, and a path within a scaled and translated group. It renders shapes with default black fill, colored fills like red and green, and a grouped set with a light blue fill and black stroke. The `.lines` class applies a thick stroke to lines and paths, with the path receiving a separate dark blue color and rounded joins via CSS selectors. The implementation uses an inline SVG in `index.html` with a linked `styles.css`, employing the `<g>`, `<circle>`, `<rect>`, `<line>`, and `<path>` elements.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes with SVG AND CSS

This example demonstrates basic SVG shape rendering and styling using raw SVG elements alongside CSS rules. It displays circles, rectangles, lines, and a path, with some shapes using default black fills while others specify explicit fill colors like red and green. A grouped set of shapes applies a light blue fill and black stroke through an attribute, while a separate group with the class `lines` uses CSS to define stroke properties, with its path element overridden to use a red stroke and rounded line joins. The SVG is scaled using a transform, and the page layout removes margins and hides overflow.

OOvxOO

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

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

93% match

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

93% match

Loading thumbnail…

Shapes with SVG and CSS

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.

AAntonio Rungo

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

93% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—arranged in two translated groups against a plain background. The first group shows default black shapes, while the second uses group-level fill and stroke attributes to alter appearance. A third group, moved horizontally, displays a stroke-heavy line and a semi-transparent steelblue path with rounded corners. The code relies on raw SVG elements and CSS class selectors (`.lines`, `.lines path`) for styling, with a JavaScript console log present but no interactive behavior.

Kkkwyoung

93% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes—circles, rectangles, lines, and a path—rendered in SVG with CSS-based styling. The shapes are organized into groups: the top two rows show default black fills, the third row applies a teal fill and black stroke via a `g` element’s presentation attributes, and the bottom group uses the `.lines` class to style a polyline with a thick orange stroke. The code uses raw SVG elements (`circle`, `rect`, `line`, `path`) and CSS selectors to control colors, stroke widths, and line joins, with a `transform="scale(1.5)"` applied to the entire drawing.

Cclaudiatomateo

93% match