Skip to main content
SimilarExport ZIP
100%

Shapes with SVG and CSS

✓ Published1🌍 Public
RRisabh Raj
Last edited Sep 7, 2021
Created on Sep 7, 2021
Forked from HTML Starter

This example demonstrates how to construct basic SVG shapes—circles, rectangles, lines, and paths—using a static HTML page and CSS. The visualization shows how SVG attributes like `fill`, `stroke`, `stroke-width`, and the `<g>` element group shapes to apply shared styling, with initial shapes appearing in default black and then colored red and green. A `<g>` group applies a light blue fill and black stroke to its contents, and another group applies a thick black stroke to a line and path. The code uses raw SVG in `index.html` with a linked `styles.css` for page-level body styling, with no JavaScript involved.

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 basic SVG shapes—circles, rectangles, lines, and a path—arranged in a grid and styled entirely through CSS. It shows how SVG elements inherit presentation attributes like `fill` and `stroke` from parent groups and stylesheets, with a nested `g` element applying blue fills and black strokes. The code uses raw SVG markup inside an HTML file, with a separate stylesheet defining stroke widths and colors for the path elements. The rendering approach is pure SVG, with no JavaScript or external libraries involved.

Llukastieber
94% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to create basic geometric shapes—circles, rectangles, and a line—using SVG elements within an HTML page. It shows how to apply CSS styling through an external stylesheet and how to use inline presentation attributes like `fill` and `stroke` to control color and borders. The code also groups shapes inside an SVG `<g>` element to apply consistent styling and a transformation. The page uses native SVG markup inside a React-rendered `index.html`, with the `style.css` file enforcing layout rules such as zero margins and hidden overflow.

CCristian Pintor
94% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled with CSS and inline attributes. It shows how presentational properties like `fill`, `stroke`, and `stroke-width` can be set directly on SVG elements or inherited from a parent `<g>` group. The code uses plain React-rendered SVG without additional libraries, featuring a static composition of colored and outlined shapes. CSS resets the page margin and hides overflow, while styles are applied via an external stylesheet. The visualization highlights fundamental SVG syntax, including coordinate attributes and the `<path>` `d` command.

Aant999
94% 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
94% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled through CSS classes and inline attributes. It shows how SVG elements can be grouped, transformed (scaled and translated), and filled with colors or strokes. The code uses raw SVG markup within an HTML page, with CSS rules in `styles.css` controlling properties like stroke width, color, and line joins. No JavaScript libraries are involved; rendering relies entirely on the browser's native SVG support.

Pp4pravin
94% 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
93% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to draw basic geometric shapes with SVG and style them using CSS. It uses raw SVG elements like `circle`, `rect`, `line`, and `path` within a `<g>` container, with CSS classes controlling stroke and fill properties. The code shows shape attributes set inline (e.g., `fill`, `stroke-width`) and via a stylesheet, including a group with translated coordinates and another with a rounded path. No JavaScript or external libraries are involved; the visualization relies entirely on static SVG markup and a linked `styles.css` file.

Aariashary
93% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—rendered on an HTML page with CSS styling. It shows how SVG presentation attributes like `fill`, `stroke`, and `stroke-width` combine with CSS classes (such as `.lines`) to control appearance, including a yellow path with rounded joins. The code uses raw SVG elements within a `<g>` group with transforms for scaling and translation, applying inline attributes for color and stroke styling. No external JavaScript libraries are used; the visualization relies solely on static SVG markup and linked `styles.css`.

JJaKokosz
93% match