Skip to main content
SimilarExport ZIP
100%

Shapes with svg and css

✓ Published0🌍 Public
Mmuhammedfahis
Last edited Jul 19, 2021
Created on Jul 19, 2021
Forked from HTML Starter

This example demonstrates how to render basic geometric shapes within an SVG container on a web page, using a combination of SVG elements and CSS for styling. It shows a group of gray rectangles, circles, lines, and a polygonal path, all positioned with explicit coordinates and transform attributes. The rendering relies on the native SVG API for shapes, while external CSS handles global reset and overflow properties. A minimal JavaScript snippet logs a message to the browser console, though the visualization itself is purely declarative markup.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes rendered with SVG and styled using CSS. It shows circles, rectangles, lines, and a path within a container that applies scaling and translation transformations. Specific elements use inline `fill` attributes for color coding, while a group with class `lines` uses CSS rules to define stroke color, width, and line join rounding. The SVG markup is embedded directly in the HTML, with `transform` attributes controlling layout and positioning. No additional libraries are used beyond the native SVG and CSS APIs.

Iishmam11
93% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes drawn with SVG, including circles, rectangles, lines, and a path, styled through CSS classes. The shapes are organized using SVG’s transform attribute for scaling and translation, while the CSS defines stroke properties and line joins for the line and path elements. The code uses raw SVG markup within an HTML page, with styles applied via a linked stylesheet. Shapes are positioned across a 960×500 canvas, with some elements inheriting fill colors from parent groups and others specifying fill attributes directly.

Ii202081
93% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes drawn with SVG, including circles, rectangles, lines, and a path, styled through CSS classes. The shapes are organized using SVG’s transform attribute for scaling and translation, while the CSS defines stroke properties and line joins for the line and path elements. The code uses raw SVG markup within an HTML page, with styles applied via a linked stylesheet. Shapes are positioned across a 960×500 canvas, with some elements inheriting fill colors from parent groups and others specifying fill attributes directly.

Ii202081
93% match
Loading thumbnail…

Shapes with SVG and CSS

This example shows how to create basic geometric shapes using SVG elements, including circles and rectangles with different fill colors and positions. The code defines an SVG canvas with a width of 900 and height of 500, then adds four shapes directly in the HTML markup. It uses plain SVG syntax for rendering, with a linked CSS stylesheet that resets the body margins and hides overflow. A small JavaScript snippet logs a message to the browser console, demonstrating where to inspect output using developer tools. The shapes include two circles and two rectangles, with fill attributes specified inline for some elements.

Ssrhodes
93% match
Loading thumbnail…

Shapes with SVG and CSS

This example shows basic geometric shapes—circles and rectangles—rendered in a web page through SVG elements, with CSS controlling their styling. A group of shapes uses default black fills, another uses explicit `fill` attributes, and a third demonstrates CSS classes to apply strokes and colors. The visualization also includes lines and a path drawn with stroke styling. The code uses plain SVG markup, CSS selectors, and hypertext markup, with all shapes placed inside an SVG canvas scaled by a factor of 1.5.

VVinceVerspeek
93% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to create basic geometric shapes—circles, rectangles, lines, and paths—using SVG within an HTML page. The shapes are styled through inline presentation attributes and a linked external CSS stylesheet, with the `<g>` element grouping related shapes for coordinated transformations and styling. The code applies scaling and translation transforms to reposition groups, and uses CSS classes such as `.lines` to set stroke properties on line and path elements. The visualization relies on standard SVG elements and CSS rules, without any JavaScript libraries or data sources.

MMauradion
93% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates primitive SVG shapes—circles, rectangles, lines, and paths—styled via inline attributes and CSS classes. The code renders shapes with explicit fills and strokes, then applies grouped transformations and stroke properties through class selectors. It uses SVG elements inside an HTML page, with CSS controlling appearance through classes like `.lines`. The visualization shows basic geometric composition, scaling, and translation without external libraries, relying purely on SVG markup and linked stylesheet rules.

AAreum Jo
93% match
Loading thumbnail…

Shapes with SVG and CSS

This example shows a basic SVG scene composed of geometric shapes—circles, rectangles, lines, and a path—styled with CSS classes. It demonstrates how SVG elements inherit properties like stroke and fill from CSS, with specific overrides for path elements. The code uses raw SVG tags (circle, rect, line, path) inside a scalable group, with transform attributes for positioning. CSS in style.css applies global layout and stroke styles, while inline HTML contains the SVG structure. Rendering occurs entirely in the browser via standard SVG and CSS, with no additional JavaScript libraries involved.

Nnick-yadav
93% match