Skip to main content
SimilarExport ZIP
100%

Shapes with SVG and CSS

✓ Published2🌍 Public
BBaodi
Last edited Apr 16, 2019
Created on Apr 16, 2019

This example demonstrates the basic drawing capabilities of SVG shapes, including circles, rectangles, lines, and paths. It shows how styling and presentation attributes can be applied individually to elements or inherited by a group, with transformations like scaling and translation used to reposition the entire composition. The code uses raw SVG elements, the `transform` attribute, and CSS classes (`.lines`) to control stroke properties such as color, width, line join, and line cap. However, the example does not connect to any external data source; it is purely a static visual demonstration of SVG’s built-in vector graphics features.

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 shows how basic geometric shapes like circles, rectangles, lines, and paths are drawn and arranged using SVG elements. It demonstrates SVG transforms, including scaling and translation, to position and resize shapes, as well as CSS classes to control stroke color, width, and line joins. The visualization uses raw SVG markup with inline attributes for fill and stroke, alongside a stylesheet (`styles.css`) for styling. The layout is static, strictly demonstrating fundamental SVG and CSS techniques without any data binding or interaction.

BBryan Liu
95% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes rendered as SVG elements, showing how circles, rectangles, lines, and paths can be styled directly and through CSS classes. The SVG markup defines shapes with attributes like `cx`, `cy`, `r`, and `x`, while a separate stylesheet applies visual properties such as `fill`, `stroke`, and `stroke-width` to both individual elements and grouped selections. The code uses raw SVG APIs and CSS selectors like `.lines path` to control stroke color and line joins, with transforms for scaling and translation. It illustrates static shape composition without interactivity or data binding.

Sshis1011
94% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—styled through CSS and inline attributes. The SVG markup uses standard elements like `circle`, `rect`, `line`, and `path`, with `transform` groups to scale and translate the drawing. CSS classes in `style.css` apply stroke colors, widths, and line joins to the line and path elements. The result shows how geometric primitives combine with presentational styling to create a static vector illustration, rendered directly in the browser via SVG.

KKaleb LaBarrie
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 basic geometric shapes rendered as SVG elements, with styling applied through both inline attributes and external CSS. It shows how circles, rectangles, lines, and a path can be combined and transformed using SVG’s `transform` attribute, including scaling and translation. The code uses plain SVG markup and CSS selectors, such as the `.lines` class, to control stroke properties like color and width. The HTML file includes the SVG directly, with no JavaScript libraries or data sources involved.

GGray1011
94% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled with CSS. The structure uses a static SVG document with nested groups to apply transforms like scaling and translation. Fill colors, stroke widths, and line joins come from CSS classes, while inline attributes set initial properties. The code imports no external libraries, relying purely on SVG markup and CSS. Lines and paths are grouped with named classes to control their stroke appearance, showing how CSS interacts with SVG elements without JavaScript or D3.

Mmaximus2581
94% match
Loading thumbnail…

Shapes with SVG and CSS

A collection of basic SVG shapes—circles, rectangles, lines, and a path—demonstrates how CSS can style SVG elements. It shows how SVG’s transform attribute scales and translates groups of shapes, while CSS classes like `.lines` apply stroke, stroke-width, and linejoin properties. The example uses raw SVG markup embedded in HTML, with no JavaScript libraries, and the rendering is handled directly by the browser’s SVG engine.

Ccwanca
94% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how SVG and CSS can be used to draw and style basic geometric shapes, including circles, rectangles, lines, and a path. The SVG markup positions each shape within a 960x500 canvas, with a group transformation scaling the entire drawing. CSS classes, such as `.lines`, apply stroke properties and a line-join style to the path, while individual elements use inline attributes like `fill` and `stroke-width`. The code relies solely on standard SVG elements and CSS styling, with no external JavaScript libraries or data sources involved.

YYUXUE LIU
94% match