Skip to main content
SimilarExport ZIP
100%

Shapes with SVG and CSS

✓ Published2🌍 Public
Wwoo
Last edited Oct 2, 2020
Created on Oct 2, 2020

This example demonstrates how SVG shapes can be styled and transformed using both inline attributes and CSS. It shows circles, rectangles, lines, and a path, with some shapes grouped to share fill and stroke properties, while the `lines` class applies black strokes and a rounded line join. The SVG viewport scales up by 1.5, and a translated group shifts lines and paths into place. The code uses raw SVG elements and CSS rules, with no external JavaScript libraries.

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
96% 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 demonstrates how SVG shapes can be styled and transformed using raw SVG attributes and CSS rules. It shows circles, rectangles, lines, and a path, with some shapes inheriting fill and stroke properties from parent groups, while others are explicitly overridden. The code uses inline SVG elements such as `circle`, `rect`, `line`, and `path`, along with CSS classes like `.lines` to define stroke styles. SVG transform attributes (`scale`, `translate`) group and position the shapes, and no external JavaScript libraries are used.

EEdoardoRegini
94% match
Loading thumbnail…

Shapes with SVG and CSS

A set of SVG shapes demonstrates styling with both inline attributes and CSS rules. Circles, rectangles, a line, and a polyline-like path are arranged within a transformed group. Inline fill and stroke properties define basic colors, while a CSS class applies stroke width and line join styles to the path elements. The example uses only standard SVG elements and external CSS, with no JavaScript libraries involved.

Vveagy
94% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how fundamental SVG shapes—circle, rect, line, and path—can be styled and composed using CSS and SVG attributes. It shows grouped elements with transformed positions, inherited fill and stroke properties, and class-based styling for lines and paths. The code uses raw SVG markup with inline presentation attributes like `fill`, `stroke`, and `stroke-width`, combined with CSS rules targeting classes such as `.lines`. The rendering is purely SVG, with no external libraries, and the page layout is simplified through CSS margin resets.

TTebid Quinsy
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 transformed using both inline attributes and CSS classes. It shows circles and rectangles with default and explicit fills, a group with blue shapes and black strokes, and a polyline with rounded joins. The code uses raw SVG elements within an `<svg>` container, applying `scale` and `translate` transforms, while a CSS class controls stroke properties on the line and path.

DDanteStack
94% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—styled with CSS, with some shapes grouped and scaled or translated. It shows how SVG attributes like `fill`, `stroke`, and `stroke-width` control appearance, while CSS classes such as `.lines` apply shared styling. The static composition uses raw SVG elements directly in HTML, without any JavaScript libraries, and relies on inline attributes and an external stylesheet for rendering.

Ccheeson
94% 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
94% match