Skip to main content
SimilarExport ZIP
100%

Shapes with SVG amd CSS

✓ Published0🌍 Public
Ttgma99
Last edited Jun 5, 2022
Created on Jun 2, 2022
Forked from HTML Starter

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—arranged in a fixed 960×500 canvas. The code uses raw SVG elements within an HTML page, with CSS in a separate stylesheet controlling presentation, such as red strokes for line groups and blue strokes for path elements. Grouping via the `<g>` tag applies shared transformations like scaling and translation, while CSS classes like `.lines` style these grouped elements. The rendering relies entirely on inline SVG markup and CSS rules, without any JavaScript interaction or data binding.

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 a collection of basic SVG shapes, including circles, rectangles, paths, and lines, composed within a single SVG canvas. The shapes are styled using both inline presentation attributes and an external CSS stylesheet, which defines a class for the line group to apply stroke properties. The SVG elements are nested within a `<g>` group that applies a scaling and translation transform. The rendering approach uses raw SVG markup within an HTML page, with no JavaScript libraries or data sources involved.

MMatthew Rubino
96% match
Loading thumbnail…

shapeswith SVG and css

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—rendered on a 900×500 canvas with CSS styling applied via an external stylesheet. It shows how SVG elements can be grouped using `<g>` transformations like scaling and translation, with individual shapes colored through fill and stroke attributes alongside CSS-defined font and margin rules. The code uses plain SVG markup within an HTML page, linked to a `style.css` file, and relies on React as the framework for the surrounding project structure. Shapes appear in varied positions and colors, including a red circle, green rectangle, and stroked paths, illustrating fundamental SVG composition.

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

Shapes with SVG and CSS

This example demonstrates the basic drawing of primitive SVG shapes—circles, rectangles, lines, and paths—arranged in a fixed layout on a 960×500 canvas. It shows how SVG styling is applied in several ways: directly with inline `fill` and `stroke` attributes, through inherited properties on a `<g>` group, and via CSS rules defined in an external `styles.css` file. The React-based code uses raw SVG elements within an HTML page, leveraging group transforms for scaling and translation.

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

Shapes with SVG and CSS

This example demonstrates basic geometric shapes—circles, rectangles, and a line—arranged within an SVG canvas. It shows how SVG elements can be styled directly via attributes like `fill`, `stroke`, and `stroke-width`, and how a grouping element `<g>` applies these styles collectively to its children. The rendering relies on raw SVG markup embedded in an HTML page, with a linked CSS stylesheet controlling page layout and overflow. The code uses core SVG APIs for drawing, without additional JavaScript libraries or data sources.

VVivian Peng
95% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how basic SVG shapes can be styled and grouped using CSS and SVG attributes. It shows circles, rectangles, a line, and a path rendered on an SVG canvas, with fills and strokes applied directly or inherited from a `<g>` group. The code uses React to render the SVG elements, with styles defined in an external CSS file, and showcases SVG transforms for positioning shapes without repeated coordinates.

Bbcwein
95% match