Shapes with svg and CSS

100%

Shapes with svg and CSS

✓ Published0🌍 Public

Last edited Nov 24, 2019

Created on Nov 23, 2019

This example demonstrates how to draw basic SVG shapes—circles, rectangles, lines, and a polyline path—and style them using both inline attributes and external CSS classes. The code uses the SVG API directly within an HTML file, applying transforms like `scale` and `translate` to position and group elements. A CSS rule with `.lines path` sets stroke color and rounded line joins, while inline attributes control fills and stroke widths for individual shapes. The visualization serves as a simple catalog of geometric primitives and styling techniques.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to draw basic geometric shapes—circles, rectangles, lines, and polylines—with SVG and style them using CSS. The code uses the SVG API directly in an HTML file, applying attributes like `fill`, `stroke`, and `stroke-width` both inline and through a linked stylesheet. A `transform` groups shapes for scaling and translation, while the `.lines` class controls the stroke appearance of the line and path elements. The rendering is entirely SVG-based, with no JavaScript libraries involved.

EEric Torres

95% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—styled with CSS and inline attributes. It shows how fill colors, stroke widths, and transforms like scaling and translation affect rendering, with groups applying shared properties such as stroke and fill. The code uses raw SVG elements (circle, rect, line, path) and CSS classes (like `.lines` for stroke styling) rather than a JavaScript visualization library. The HTML embeds the SVG directly, while the stylesheet controls global margins and stroke properties.

Aanuj1450

95% 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

95% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes—circles, rectangles, lines, and a path—rendered in an SVG scene with inline styling and cascading style sheets. The visualization shows how SVG primitives combine with CSS classes to control appearance, such as setting fill colors, stroke widths, and line joins. The code uses raw SVG elements like `<circle>`, `<rect>`, `<line>`, and `<path>` within a `<g>` container, with transformations applied via the SVG `transform` attribute. CSS rules in `styles.css` style the `.lines` group and its path, demonstrating separation of structure and presentation.

SShawn Kearney

95% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to draw basic SVG shapes—circles, rectangles, lines, and paths—and apply styling directly through attributes and CSS classes. The SVG is scaled with a transform, while a nested group uses inline styles for fills and strokes. CSS rules in `styles.css` define black strokes for the `.lines` group and an orange stroke for its path element. The visualization relies solely on raw SVG markup and CSS, with no JavaScript-based data logic or D3 imports involved in the rendering.

Cchrisvaillancourt

95% 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 geometric shapes—circles and rectangles—rendered with SVG elements, styled through CSS classes and inline fill attributes. It shows how colors, stroke widths, and transformations like scaling and translation apply to primitive shapes, including a polyline path composed of connected line segments. The visualization uses static SVG markup within an HTML file, with styling defined in an external stylesheet, such as the `.lines` class applying stroke properties to the path and line elements.

MMohtasim Tamjeed

94% match

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

94% match