Skip to main content
SimilarExport ZIP
100%

Shapes with SVG and CSS

✓ Published1🌍 Public
Rrmaldonadosnz
Last edited Feb 14, 2021
Created on Feb 14, 2021
Forked from Hello World

This example demonstrates how to create basic geometric shapes in an SVG canvas, displaying circles and a rectangle with default black fills except for one red circle. The scene is rendered entirely through SVG markup, with external styling handled by a CSS stylesheet. The code uses the D3.js `select` function to update a message element’s text content, while also showcasing an ES6 module import from a local file. The page layout is set with CSS to remove margins and hide overflow.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

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

Shapes with SVG and CSS

This example demonstrates basic geometric shapes rendered with SVG, including two circles and a red rectangle. The circles are grouped using an SVG `<g>` transform to shift them horizontally, while the rectangle is positioned independently. Styling is handled through an external CSS file, which sets the page margin to zero and hides overflow. The visualization uses raw SVG elements within an HTML document, with a green color class defined for potential highlighting, though no dynamic behavior is shown.

Uuskh580e
91% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to draw and style basic geometric shapes using SVG and CSS. It shows circles, rectangles, lines, and a path, with some shapes using explicit fill and stroke attributes while others inherit styling from CSS classes. The code uses D3.js's `select` function to set text content, though the visual output relies entirely on raw SVG markup within an HTML file. The SVG is scaled and translated to arrange the shapes in distinct groups, with the CSS applying stroke properties to the line elements.

RResl411
91% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to draw and style basic geometric shapes using SVG and CSS. It shows circles, rectangles, lines, and a path, with some shapes using explicit fill and stroke attributes while others inherit styling from CSS classes. The code uses D3.js's `select` function to set text content, though the visual output relies entirely on raw SVG markup within an HTML file. The SVG is scaled and translated to arrange the shapes in distinct groups, with the CSS applying stroke properties to the line elements.

RResl411
91% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to create and style basic geometric shapes—circles, rectangles, lines, and paths—using SVG elements combined with CSS classes. It highlights the flexibility of SVG for drawing shapes and the ability to control their appearance, such as fill colors, strokes, and line joins, through stylesheets. The visualization uses a D3 v5 selection to update a text message in the DOM, while the layout is achieved with SVG transformations. The code imports the `select` function from D3 and relies on an ES6 module for the displayed message.

VVito
91% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to create basic geometric shapes—circles, rectangles, lines, and paths—using SVG and CSS styling. It shows various fill colors, stroke properties, and grouped transformations like scaling and translation to position shapes across the canvas. The visualization uses raw SVG elements within an HTML file, with a linked stylesheet providing additional styling rules for line elements. The code includes D3.js imports but primarily relies on native SVG markup to render the shapes, with CSS classes and attributes controlling appearance.

Bbobi0017
91% 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
91% match
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes rendered directly in HTML, featuring two circles and two rectangles with varying positions and colors, including a red circle and a green square. The visualization uses plain SVG markup within index.html, styled minimally through CSS in styles.css, which sets the page margin to zero and hides overflow while applying a red highlight class. No external JavaScript libraries are used; the code relies solely on native SVG elements and CSS properties to construct the simple geometric composition.

Mmkdeeps01
91% match