Skip to main content
SimilarExport ZIP
100%

Shapes with SVG and CSS

✓ Published0🌍 Public
HHaniAlHawasli
Last edited Dec 8, 2020
Created on Dec 8, 2020

A simple SVG scene displays basic geometric shapes—circles, rectangles, a line, and a polyline path—positioned in an HTML document. The code uses raw SVG elements with CSS styling, including a class selector to apply stroke color and width to the line and path. The shapes demonstrate different fill and stroke properties, such as a red circle, a green rectangle, and a group with a blue fill and black stroke. The SVG canvas is scaled with a transform, and CSS hides page margins and overflow.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes with SVG and CSS

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.

RRoger Yu-Hsiang Lo
93% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes drawn directly with SVG elements, including circles, rectangles, lines, and paths, with styling applied through presentation attributes and a separate CSS stylesheet. The scene shows how fill colors, stroke widths, and group transformations (via the `g` element's `translate` attribute) alter the appearance of primitive shapes. The SVG markup defines shapes like a red circle, a green rectangle, and a blue group with black outlines, while the un-styled `path` and `line` elements create simple angular forms. The code relies on native SVG syntax and CSS, with no JavaScript libraries, and uses a fixed `960x900` canvas.

Iikimes
93% 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
93% match
Loading thumbnail…

Shapes with SVG and CSS

A simple SVG scene demonstrates basic shapes and styling with pure web standards. Circles and rectangles appear in groups, with some shapes filled using CSS or inline attributes, while a third group applies a shared fill and black stroke. A polyline and path use a CSS class to set stroke properties, including a rounded line join. The example uses raw SVG elements and external CSS, with no JavaScript libraries, over a fixed 960 by 500 viewport.

33ology
93% match
Loading thumbnail…

Shapes with SVG and CSS

This example displays basic geometric shapes—circles, rectangles, a line, and a path—drawn with SVG and styled through CSS. It shows how shape properties like fill color, stroke width, and stroke color can be set either as inline attributes or via classes in an external stylesheet. The code uses native SVG elements within an HTML file, with a CSS stylesheet defining the `.lines` class for styling. The rendering is purely static, with no JavaScript libraries, data sources, or interaction.

Jjmarcrum3
93% match
Loading thumbnail…

Shapes with SVG and CSS

A simple SVG scene demonstrates basic geometric shapes and CSS styling. The graphic pairs circles and rectangles with distinct fill colors, including a group with a cyan fill and black stroke where a rectangle is rotated 45 degrees. Additional lines and a polyline path appear in yellow and blue with a rounded line join. The example uses raw SVG elements directly in HTML, with CSS selectors like `.lines` and `.lines path` to apply stroke properties, illustrating how SVG and CSS combine for static visualization.

YYasser Mohseni
93% 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
93% 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
93% match