Skip to main content
SimilarExport ZIP
100%

shapes with css and svg

✓ Published0🌍 Public
Aankxxit
Last edited Apr 27, 2023
Created on Apr 27, 2023
Forked from HTML Starter

This example shows a single green circle with a blue stroke rendered inside an SVG canvas. The circle is positioned at coordinates (250, 250) with a radius of 50 pixels, displayed on a 960 by 500 pixel viewport defined by the SVG element. The code uses inline CSS properties within the SVG markup, specifically the `fill`, `stroke`, and `stroke-width` attributes, to style the shape. No JavaScript libraries or data sources are involved; the visualization relies entirely on static SVG and CSS definitions.

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 css and svg

This example demonstrates two basic geometric shapes—a circle and a rectangle—rendered within an SVG canvas. The circle is centered at (250,250) with a red fill and black stroke, while the rectangle uses a green fill with a blue stroke and is positioned to the right. The shapes are defined directly inline in the HTML using SVG elements, with styling applied through SVG presentation attributes such as `fill`, `stroke`, and `stroke-width`. No external libraries or JavaScript are used; the visualization relies solely on native SVG markup within a static HTML page.

Aaditya-ux27
91% match
Loading thumbnail…

shapes with svg and css

A single SVG canvas displays several geometric shapes—a green circle, a blue circle with a black stroke, a red rectangle, a black line, and a yellow path with rounded joins—arranged with transforms and grouped elements. The shapes are styled using CSS classes from an external stylesheet, which set stroke properties and font sizing. The example demonstrates how SVG primitives and CSS together can create a static, styled composition without JavaScript interactions.

DDominika Modzelewska
90% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to draw basic geometric shapes using SVG elements styled with CSS and inline attributes. It shows a pink circle with a black stroke and a green rectangle with a blue stroke, each positioned within an SVG canvas. The code uses raw HTML markup with `<svg>`, `<circle>`, and `<rect>` elements, applying fill and stroke properties directly via presentation attributes. While the title references CSS, no external stylesheets or JavaScript libraries are present, relying solely on SVG’s native styling capabilities.

Rrayray196
89% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shape rendering and CSS styling, featuring a single green circle with a black stroke positioned within a 960x500 viewport. The visualization shows how SVG elements can be styled directly through inline `style` attributes, using the fill color `#69b3a2` and stroke properties. The code references an external stylesheet that defines classes for line styling, though the circle itself relies on inline presentation attributes. The implementation uses native SVG markup within an HTML document, with no JavaScript frameworks or data sources involved. A form submission script is included but is not triggered by the visualization itself, making this a straightforward static graphics example.

MMasoumeh Bakhtiariziabari
88% match
Loading thumbnail…

Shapes With SVG and CSS

This example demonstrates how SVG shapes can be styled using both inline attributes and CSS classes. Circles, lines, and a path are rendered inside an SVG element, with a green stroke applied to line elements and a blue stroke with rounded joins to the path. The code uses basic SVG elements (`circle`, `line`, `path`, `g`) and CSS selectors to control fill and stroke properties, including a group-level fill override with a red stroke. The HTML page loads a stylesheet and scales the entire drawing with an SVG transform.

Ccaliew
88% match
Loading thumbnail…

Shapes with SVG and CSS

This example shows two basic geometric shapes—a circle and a rectangle—drawn on an SVG canvas. The shapes are styled directly with SVG presentation attributes, including fill colors, pink outlines, and a stroke width of ten pixels. The visualization is implemented with a minimal HTML page that embeds SVG markup without any scripting or external libraries. All rendering is handled by the browser’s native SVG support, with no JavaScript or CSS rules applied beyond the inline attributes.

NNJANGHU
88% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates a single green rectangle with a blue stroke rendered directly in an HTML page using inline SVG markup. The shape is defined by explicit `x`, `y`, `width`, `height`, `fill`, `stroke`, and `stroke-width` attributes placed within the body of the document. No JavaScript libraries or styling frameworks are employed; the visualization relies solely on standard SVG presentation attributes supported by modern browsers. The simple approach highlights how basic geometric shapes can be created without external dependencies, serving as a minimal foundation for more complex data-driven graphics.

Rrayray196
88% match
Loading thumbnail…

Shapes with CSS & SVG

This example shows two geometric shapes drawn on an SVG canvas: a red circle with a black stroke and a green rectangle with a blue stroke. The HTML page uses inline SVG elements (`<circle>` and `<rect>`) to render the shapes, with CSS properties for fill and stroke applied directly as SVG presentation attributes. The code uses the native SVG API within a plain HTML document, requiring no external libraries, and demonstrates basic vector shape creation with explicit coordinate and dimension attributes.

Cclass-sikh
88% match