Skip to main content
SimilarExport ZIP
100%

Shapes and Colors with SVG and CSS

✓ Published0🌍 Public
Ccharliemok
Last edited Jan 28, 2021
Created on Jan 28, 2021

Four SVG shapes—two circles and two rectangles—demonstrate presentational attributes and CSS styling. The first pair uses default black fill, while the second pair applies inline `fill` colors. A `<g>` group with `transform`, `fill`, `stroke`, and `stroke-width` attributes applies shared styling to both a circle and rectangle, showing inheritance and grouping in SVG. The example uses no JavaScript libraries, relying purely on SVG markup and external CSS from `styles.css`. The `styles.css` file defines global body margins but contains unused `.lines` rules, leaving shape styling entirely attribute-driven.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

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 and Colors with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—using both inline presentation attributes and CSS classes to control fill and stroke styles. It shows how group elements (`<g>`) apply shared transformations and styles, such as a `translate` offset and a unified fill color, while individual elements override these with explicit `fill`, `stroke`, and `stroke-width` values. The CSS rules target the `.lines` group to set black strokes for lines and a teal color with rounded joins and caps for the path. The code uses plain SVG markup within an HTML document, with the stylesheet defining properties like `overflow: hidden` on the body.

Ccatsugly66
92% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

A set of basic SVG shapes demonstrates how presentation attributes and CSS rules combine to control fill, stroke, and geometry. Circles and rectangles are first styled with inline fill attributes, then grouped to inherit shared styling from a parent `<g>` element. A separate group of lines and a path uses CSS classes to set stroke color, width, line joins, and caps, overriding the shapes’ default black appearance. The example renders entirely through native SVG elements in an HTML document, with external stylesheet rules from `styles.css` applying presentation properties.

Mmirna981
91% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

A set of basic SVG shapes demonstrates how presentation attributes and CSS rules combine to control fill, stroke, and geometry. Circles and rectangles are first styled with inline fill attributes, then grouped to inherit shared styling from a parent `<g>` element. A separate group of lines and a path uses CSS classes to set stroke color, width, line joins, and caps, overriding the shapes’ default black appearance. The example renders entirely through native SVG elements in an HTML document, with external stylesheet rules from `styles.css` applying presentation properties.

Mmirna981
91% 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
91% 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
91% match
Loading thumbnail…

Shapes and Colors 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. A root `<g>` element applies a global scale transform, while nested groups use translate to position shape clusters, with one group inheriting fill and stroke styles and another defining thick, rounded line styles via the `.lines` class. The SVG is rendered directly in HTML with a 960×500 viewport, and CSS controls body margins and line appearance.

DDy-Diana
91% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

This example shows how basic SVG shapes—circles and rectangles—are styled with inline fill colors and CSS. It displays four shapes on a 960×500 canvas: two circles and two rectangles, with the latter pair using red and green fills, while the former remain black. The code uses plain SVG elements like `circle` and `rect` within an HTML page, and a linked `styles.css` that sets the body margin to zero and hides overflow. The rendering approach relies on SVG’s native shape support and CSS for page-level layout.

RRuwen
91% match