Shapes with SVG and CSS

100%

Shapes with SVG and CSS

✓ Published1🌍 Public

Last edited Jan 17, 2019

Created on Jan 17, 2019

This example demonstrates how SVG shapes—circles, rectangles, lines, and paths—can be styled and transformed using CSS and inline SVG attributes. It shows basic geometric primitives with varied fills, strokes, and group-level transformations, including scaling, translation, and nested styling via classes. The code uses native SVG elements within an HTML document, with CSS rules in `styles.css` applying stroke colors and line join styles to the `.lines` class. No external libraries are used; rendering relies entirely on the browser’s SVG support.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled and transformed using CSS and inline SVG attributes. It shows how fill colors, stroke widths, line joins, and group-level transformations like scaling and translation affect the rendering. The code uses native SVG elements (`<circle>`, `<rect>`, `<line>`, `<path>`) within an HTML document, with CSS rules from `styles.css` targeting the `.lines` class for stroke styling. The visualization is purely declarative, with no JavaScript or external libraries beyond the SVG markup itself.

Jjunge870214

94% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled with CSS. The structure uses a static SVG document with nested groups to apply transforms like scaling and translation. Fill colors, stroke widths, and line joins come from CSS classes, while inline attributes set initial properties. The code imports no external libraries, relying purely on SVG markup and CSS. Lines and paths are grouped with named classes to control their stroke appearance, showing how CSS interacts with SVG elements without JavaScript or D3.

Mmaximus2581

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

93% match

Loading thumbnail…

Shapes with svg and CSS

This example demonstrates how to draw basic SVG shapes—circles, rectangles, lines, and a polyline path—and style them using both inline attributes and external CSS classes. The code uses the SVG API directly within an HTML file, applying transforms like `scale` and `translate` to position and group elements. A CSS rule with `.lines path` sets stroke color and rounded line joins, while inline attributes control fills and stroke widths for individual shapes. The visualization serves as a simple catalog of geometric primitives and styling techniques.

Aaudreyfr

93% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to create and style basic SVG shapes—circles, rectangles, lines, and paths—using both inline attributes and CSS classes. The code applies transformations like scaling and translation to reposition groups of shapes, while CSS controls stroke color, width, and line joins. Shapes are rendered directly in SVG without any external libraries, relying on native browser support for SVG elements and stylesheet rules. The result highlights the interplay between SVG presentation attributes and CSS for structuring a static composition.

Mmatt-hooper

93% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to create basic geometric shapes using SVG and style them with CSS. Circles and rectangles are drawn with varying fill colors and stroke properties, while a group of lines and a path illustrate coordinate-based drawing. The code uses raw SVG elements like `circle`, `rect`, `line`, and `path`, with CSS rules in `styles.css` controlling stroke width, color, and line joins. The rendering relies on the browser’s native SVG support, with transformations applied via the `transform` attribute.

Hhugomell

93% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to draw basic geometric shapes—circles, rectangles, lines, and a path—using SVG elements styled with CSS. It shows shape customization through fill colors, stroke properties, and grouped transformations like scaling and translation. The code directly uses SVG’s `<circle>`, `<rect>`, `<line>`, and `<path>` tags, with CSS classes like `.lines` applying stroke styling. Rendering relies on inline SVG within an HTML page, with no additional JavaScript libraries.

RRC

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