Skip to main content
SimilarExport ZIP
100%

Shapes with SVG and CSS

✓ Published0🌍 Public
RRaghavKakkar
Last edited May 18, 2020
Created on May 18, 2020
Forked from HTML Starter

This example demonstrates two fundamental SVG shapes—a circle and a rectangle—styled purely with CSS. The SVG canvas is fixed at 1000 by 600 pixels, with the circle positioned at (60,60) and the rectangle at (150,10). The stylesheet applies a maroon fill to the circle and gray to the rectangle, while the body margin is reset to zero and overflow hidden. The implementation uses raw SVG elements directly in HTML, with CSS selectors targeting the `<circle>` and `<rect>` tags for styling.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes with SVG and CSS

This example displays two basic SVG shapes—a circle and a rectangle—on a fixed 960 by 500 canvas. The circle uses default styling, while the rectangle is explicitly filled with red. The code directly embeds SVG elements in HTML and applies a small external stylesheet to remove page margins and hide scrollbars. Rendering relies solely on native SVG markup within the browser, without any JavaScript libraries, and the stylesheet also defines a `.highlighted` class that is not used by the shapes.

Aargonaeut
94% match
Loading thumbnail…

Shapes with SVG and CSS

This example displays two basic SVG shapes—a circle and a rectangle—positioned on a 960 by 500 canvas. The page uses plain SVG markup within an HTML file, styled by an external CSS stylesheet that resets the body margins and defines a `.highlighted` class (though not applied to the shapes). The rendering relies on native SVG elements like `<circle>` and `<rect>`, with no JavaScript or React interaction visible in the code.

PPrerna Mishra
94% 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
93% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how basic SVG shapes—circles, rectangles, lines, and paths—are styled using CSS, with explicit fills, strokes, and group transformations. The SVG markup defines a 960×500 canvas, scaled by 1.5, containing shapes with hardcoded coordinates. CSS rules in `styles.css` apply stroke styling to line elements via a `.lines` class and set a round stroke-linejoin on paths, while the body’s margin and overflow are reset. No JavaScript or data is involved; the rendering relies solely on SVG’s native presentation attributes and external stylesheets.

Mmp7090
93% 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
93% match
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
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
92% 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
92% match