Shapes with SVG and CSS

100%

Shapes with SVG and CSS

✓ Published0🌍 Public

Last edited Aug 3, 2019

Created on Aug 2, 2019

This example demonstrates how basic geometric shapes—circles, rectangles, lines, and paths—can be styled and combined within an SVG scene using both inline attributes and external CSS. The code relies on raw SVG elements and CSS rules to control fill colors, strokes, stroke-widths, and line joins, with transform groups repositioning and scaling the shapes. A light-blue group applies a shared fill and black stroke, while a second group uses the `.lines` class to render dark teal strokes with rounded corners. The rendering is entirely SVG-based, with the page automatically scaling the entire graphic by a factor of 1.6.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to create geometric shapes using SVG elements and style them with CSS. It shows circles, rectangles, lines, and a path, with some shapes filled with a cyan color and others inheriting default styling. The code uses a CSS class to apply stroke attributes to line and path elements, while inline attributes define fill colors and transforms for grouping. The example renders entirely with SVG markup in an HTML document, with a linked stylesheet that resets the body margin and hides overflow. The design illustrates basic SVG composition, grouping, and styling techniques without JavaScript.

Tthespiraltree

94% match

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

94% match

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes and colors can be defined and styled using CSS. It shows circles, rectangles, lines, and paths, with some shapes using inline `fill` and `stroke` attributes and others inheriting styles from CSS classes. A group element applies a `translate` transform and sets default `fill` and `stroke` properties, while the CSS rule for the `.lines` class specifies stroke width and color for the line and path elements. The rendering relies entirely on SVG markup, CSS, and transforms.

RRajneesh Kumar

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

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