Shapes with SVG and CSS

100%

Shapes with SVG and CSS

✓ Published0🌍 Public

Last edited Jul 4, 2019

Created on Jul 4, 2019

This example demonstrates how to create basic geometric shapes and style them using pure SVG and CSS. It shows circles, rectangles, lines, and a polyline path, with solid fills and black strokes. The SVG elements are grouped and transformed using `scale` and `translate` operations. CSS classes, such as `.lines`, add stroke styling and round line joins to paths. The rendering relies on inline SVG attributes and a linked stylesheet, producing a simple gallery of colored shapes on a fixed 960x500 canvas.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

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 how to create basic geometric shapes using SVG elements and style them with CSS. It renders circles, rectangles, lines, and a path within an SVG canvas, showing how attributes like fill, stroke, and transform control appearance. The code uses inline SVG properties for shape definitions and CSS rules to apply stroke styles and color to specific groups, such as the `.lines` class. The rendering approach uses standard SVG markup with scale and translate transformations, illustrating a simple approach to vector graphics without external libraries.

ZZachery2008

94% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes—circles, rectangles, lines, and a path—rendered as SVG elements inside an HTML page. The shapes are grouped and scaled using SVG transforms, with styles applied via CSS classes and attributes, including custom fill colors, strokes, and a rounded line join on the path. It shows how raw SVG markup combined with CSS can create a static composition without any JavaScript libraries. The rendering approach relies on the browser’s native SVG support, with the `.lines` class controlling stroke properties.

Hhanulik.ondrej@gmail.com

94% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to create geometric shapes using SVG elements and style them with CSS. It shows circles, rectangles, lines, and a path, with some shapes filled with a cyan color and others inheriting default styling. The code uses a CSS class to apply stroke attributes to line and path elements, while inline attributes define fill colors and transforms for grouping. The example renders entirely with SVG markup in an HTML document, with a linked stylesheet that resets the body margin and hides overflow. The design illustrates basic SVG composition, grouping, and styling techniques without JavaScript.

Tthespiraltree

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

94% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to create basic geometric shapes using SVG and style them with CSS. Circles and rectangles are drawn with varying fill colors and stroke properties, while a group of lines and a path illustrate coordinate-based drawing. The code uses raw SVG elements like `circle`, `rect`, `line`, and `path`, with CSS rules in `styles.css` controlling stroke width, color, and line joins. The rendering relies on the browser’s native SVG support, with transformations applied via the `transform` attribute.

Hhugomell

94% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to draw basic geometric shapes—circles, rectangles, lines, and a path—using SVG elements styled with CSS. It shows shape customization through fill colors, stroke properties, and grouped transformations like scaling and translation. The code directly uses SVG’s `<circle>`, `<rect>`, `<line>`, and `<path>` tags, with CSS classes like `.lines` applying stroke styling. Rendering relies on inline SVG within an HTML page, with no additional JavaScript libraries.

RRC

94% match