Skip to main content
SimilarExport ZIP
100%

Shapes with SVG and CSS

✓ Published0🌍 Public
Kkestefon
Last edited Nov 23, 2019
Created on Nov 23, 2019

This example demonstrates how SVG shapes—circles, rectangles, lines, and paths—can be styled and positioned using inline attributes and CSS classes. The code uses raw SVG elements within an HTML document, applying transformations via the `transform` attribute and custom styling through an external stylesheet. A `g` element with the class `lines` overrides default stroke settings, while the CSS file defines properties like stroke width and color for both `line` and `path` elements. The visualization showcases basic vector graphics rendering without any JavaScript or external libraries.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates a variety of basic SVG shapes—circles, rectangles, lines, and a path—styled through both inline attributes and external CSS. It shows how fill colors, stroke widths, and stroke-linejoin properties are applied directly to elements or via CSS classes like `.lines`. The visualization uses raw SVG markup within an HTML page, leveraging a `<g>` element with transforms for scaling and translation. The rendering relies solely on standard SVG APIs and CSS, with no JavaScript libraries involved.

HHasideluxe
95% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—rendered directly in HTML without external data. The code defines SVG elements inline within the index.html file, while a separate styles.css applies styling classes (e.g., `.lines`) to control stroke color, width, and line joins. Grouping with `<g>` and transforms like `translate` and `scale` organize the composition, and fill colors are set both via SVG attributes and CSS. The visualization relies solely on SVG and CSS features, not JavaScript libraries.

Jjunge870214
94% match
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 how SVG shape elements are styled using both presentation attributes and CSS. It shows circles, rectangles, lines, and a path, with solid colors, strokes, and transforms applied. The code uses vanilla SVG markup with CSS rules from an external stylesheet, including a `.lines` class to set stroke properties. A `<g>` element applies `fill`, `stroke`, and `stroke-width` as inherited attributes, while another group uses a `translate` transform. The example highlights how CSS and SVG attributes interact to control visual appearance.

PPourmahmood
94% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled with CSS to show how to create static vector graphics. It uses raw SVG elements within an HTML document, with the `g` element grouping shapes for combined transforms and the `lines` class applying stroke properties. A `transform="scale(1.5)"` enlarges the entire drawing, while individual fill colors and stroke widths are set directly on elements. The code relies solely on native SVG and CSS, with no external libraries, and renders shapes from hardcoded coordinate data in the markup.

Mmgermaine93
94% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes and CSS styling through simple circle, rectangle, line, and path elements. It shows how inline attributes like `fill` and `stroke` work alongside external stylesheet rules defined in `styles.css`. The SVG markup includes grouping with `<g>` and transforms such as `scale` and `translate`, while CSS classes like `.lines` control stroke properties. The visualization uses raw SVG elements without any JavaScript libraries, relying entirely on the browser’s native rendering of the SVG specification.

RRod Potter
94% match
Loading thumbnail…

Shapes with SVG ans CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled through both inline SVG attributes and external CSS. It shows how CSS classes, such as `.lines`, override default SVG presentation properties like `stroke` and `stroke-width`, while `fill` and `stroke` attributes set directly on elements take precedence. The visualization is rendered entirely with SVG in static HTML, using no JavaScript libraries, and includes a group with a translation transform to position shapes collectively. The code also highlights inheritance of styling from parent `<g>` elements to child shapes.

MMateus Farias
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 CSS and inline SVG attributes. It shows uncolored shapes in a top group, colored fills in a second group, a translated group with stroke and fill, and a separate group of lines with black strokes and rounded joins. The code uses raw SVG elements within an HTML document, with CSS classes like `.lines` to apply stroke properties. A single SVG `g` transform scales the entire visualization.

Jjoaquinsantini
94% match