Skip to main content
SimilarExport ZIP
100%

Shapes with SVG and CSS

✓ Published1🌍 Public
RRoger Yu-Hsiang Lo
Last edited Jan 14, 2020
Created on Jan 14, 2020
Forked from Hello VizHub

This example shows a collection of basic SVG shapes—circles, rectangles, lines, and a path—arranged on a 960x500 canvas. It demonstrates how SVG graphics are used directly in HTML. The code uses SVG elements like `<circle>`, `<rect>`, and `<line>`, with a CSS stylesheet defining stroke attributes for grouped `.lines` elements. Some shapes have explicit fill colors, while a transformed group applies a teal fill and black stroke. Rendering is done entirely with inline SVG.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—arranged within a 960×500 canvas and scaled by a factor of 1.5. Individual shapes receive explicit fill colors, while a grouped set uses CSS-defined styling with a blue fill and black stroke. The code uses plain SVG elements (circle, rect, line, path) with a transform attribute for translation and scaling. No JavaScript libraries are involved; styling and layout are handled entirely through inline attributes and an external stylesheet.

YYifei Liu
95% match
Loading thumbnail…

Shapes with SVG and CSS

This example showcases basic SVG shapes—circles, rectangles, lines, and a path—within an SVG canvas, using CSS classes to style stroke, fill, and line join properties. It demonstrates how SVG elements can be grouped and transformed with scale and translate operations, while CSS controls visual attributes like colors and stroke widths. The rendering relies on raw SVG markup and CSS rules, with no JavaScript libraries involved.

Jjhpp114
95% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shape rendering and styling using CSS. It displays circles, rectangles, lines, and paths on a 960x500 canvas, with shapes scaled and translated using SVG transform attributes. The code uses raw SVG elements like `<circle>`, `<rect>`, `<line>`, and `<path>`, while CSS classes such as `.lines` control stroke properties. Colors and fills are applied both inline and through stylesheets, showcasing how SVG and CSS combine to create static vector graphics.

Ppcbt1125
95% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shape rendering and styling using CSS. It displays circles, rectangles, lines, and paths on a 960x500 canvas, with shapes scaled and translated using SVG transform attributes. The code uses raw SVG elements like `<circle>`, `<rect>`, `<line>`, and `<path>`, while CSS classes such as `.lines` control stroke properties. Colors and fills are applied both inline and through stylesheets, showcasing how SVG and CSS combine to create static vector graphics.

Ppcbt1125
95% match
Loading thumbnail…

Shapes with SVG and CSS

This example displays a collection of basic geometric shapes—circles, rectangles, a line, and a path—all rendered inside a single SVG canvas. It demonstrates how CSS classes control vector styling, such as setting the stroke color, width, and line-join for the line and path elements, while inline attributes like `fill` and `transform` handle shape-specific properties and scaling. The code uses raw SVG elements and a linked stylesheet, with no external JavaScript libraries.

Ffbudwill
95% 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
95% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, and lines—stylized through both inline attributes and external CSS rules. The shapes are rendered with SVG elements within a 960×500 canvas, using explicit fill colors, stroke widths, and a transform scale applied to the entire group. A secondary group applies CSS classes to define stroke and path styling, while inline attributes handle direct color assignments. The code loads via standard HTML and links to a separate stylesheet, showcasing how SVG and CSS interact for visual customization.

JJordan Arnold
95% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates fundamental SVG shapes—circles, rectangles, lines, and paths—rendered with inline attributes and CSS styling. The SVG canvas uses a scale transform, while grouped elements apply translations and shared fill, stroke, and stroke-width properties. CSS classes control line appearance and path corners, highlighting the interplay between presentation and structure. The code relies directly on SVG markup and CSS rules, with no external libraries, and serves as a baseline for understanding shape composition.

TTim
94% match