Skip to main content
SimilarExport ZIP
100%

shapes with SVG and CSS

✓ Published1🌍 Public
RRemy-dev
Last edited Jan 13, 2022
Created on Jan 13, 2022
Forked from HTML Starter

This example visually demonstrates how CSS classes and inline presentation attributes combine to style SVG shapes such as circles, rectangles, lines, and paths. The markup uses plain SVG elements within a single `svg` container, with styling applied through both inline attributes like `fill` and `stroke-width` and a CSS class (`.lines`) that sets stroke properties. The code relies on native SVG APIs and CSS, with a minimal JavaScript file that writes "Hello world" into the page. The rendering approach is direct SVG, showing how grouped elements (`<g>`) can inherit and override visual properties.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to create and style basic SVG shapes—circles, rectangles, lines, and paths—using inline attributes and CSS classes. It shows how CSS rules, such as setting stroke width and color on a group with class `lines`, can apply consistent styling to multiple elements. The code uses raw SVG markup within an HTML page, with a linked `styles.css` for presentation. A transform on the outer group scales and translates the entire composition, while nested groups inherit fill and stroke properties, illustrating SVG’s grouping and inheritance model.

Aavssvd
93% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled using CSS. It shows how SVG elements can inherit styling from parent `<g>` groups and how CSS classes like `.lines` apply stroke properties. The code uses raw SVG markup with React as the rendering framework, featuring inline `fill` and `stroke` attributes alongside CSS rules. A transform group scales and translates the shapes, while a path with `stroke-linejoin: round` illustrates geometric line styling. The visualization highlights the interplay between SVG presentation attributes and external stylesheet rules.

Rratschke
92% match
Loading thumbnail…

Shapes with SVG and CSS

This example showcases basic SVG shapes—circles, rectangles, lines, and paths—styled with CSS. It demonstrates how SVG elements inherit presentation attributes like fill, stroke, and stroke-width from parent groups, using both inline attributes and CSS class selectors (`.lines`). The code uses raw SVG within an HTML page, with JavaScript and CSS linked externally, to illustrate styling and transformation effects like scaling and translation. The shapes are rendered directly in the browser without any external data.

Aadbirch
92% 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 SVG attributes and an external CSS stylesheet. It shows how presentational properties like fill, stroke, and stroke-width can be set directly on elements or inherited from parent `<g>` groups and CSS classes. The visualization uses React to render the SVG elements within an HTML page, with the `.lines` class applying green strokes and rounded line joins to paths, while a group transform scales and translates the shapes.

Jjcksnm
92% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to draw and style basic SVG shapes—circles, rectangles, lines, and paths—using a combination of inline SVG attributes and external CSS rules. It shows how CSS classes can control stroke color, width, and line join styling, while SVG group elements apply global transforms and presentation attributes like `fill` and `stroke` to multiple children. The rendering uses raw SVG markup within an HTML page, with styles defined in a separate stylesheet.

SSchmittYannic
92% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates primitive SVG shapes—circles, rectangles, lines, and paths—styled via inline attributes and CSS classes. The code renders shapes with explicit fills and strokes, then applies grouped transformations and stroke properties through class selectors. It uses SVG elements inside an HTML page, with CSS controlling appearance through classes like `.lines`. The visualization shows basic geometric composition, scaling, and translation without external libraries, relying purely on SVG markup and linked stylesheet rules.

AAreum Jo
92% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to create basic geometric shapes—circles, rectangles, lines, and paths—using SVG within an HTML page. The shapes are styled through inline presentation attributes and a linked external CSS stylesheet, with the `<g>` element grouping related shapes for coordinated transformations and styling. The code applies scaling and translation transforms to reposition groups, and uses CSS classes such as `.lines` to set stroke properties on line and path elements. The visualization relies on standard SVG elements and CSS rules, without any JavaScript libraries or data sources.

MMauradion
92% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes—circles, rectangles, lines, and a path—rendered within a single SVG element. It shows how inline presentation attributes coexist with external CSS rules, where the `.lines` class applies stroke styling to grouped elements while individual shapes use inline `fill` and `stroke` values. The SVG uses transform groups to scale, translate, and reposition shapes, with colors and stroke widths controlling visual hierarchy. The page is a plain HTML file with a linked stylesheet, using no JavaScript libraries, relying purely on SVG’s declarative markup and CSS for styling.

Jjugsomilk
92% match