Skip to main content
SimilarExport ZIP
100%

Shapes with SVG

✓ Published0🌍 Public
Nnecat1
Last edited Jul 25, 2021
Created on Jul 25, 2021
Forked from Cars Report

This example demonstrates how to build and render basic SVG shapes, showing a large red circle centered on a 960x500 canvas. It serves as a tutorial on using JavaScript objects, arrays, and modules, with the HTML embedding a static SVG element while a linked `bundle.js` (generated by Rollup) manages the dynamic behavior. The page includes a large `<pre>` element for displaying messages and uses minimal styling via `styles.css`, which hides overflow. The code relies on standard SVG circle attributes (`cx`, `cy`, `r`, `fill`) and a plain JavaScript setup without external libraries.

AI-generated description

An example tutorial of how to use JavaScript objects, arrays, and modules.

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to draw basic SVG shapes, beginning with a single large circle positioned on a 960×500 canvas. The visualization uses plain SVG markup within an HTML file, styled through an external CSS stylesheet that sets the page margin to zero and hides overflow. The accompanying README provides a tutorial on using JavaScript objects, arrays, and modules, while a linked YouTube video offers further context. The rendering relies entirely on core SVG elements and CSS, with no additional JavaScript libraries or data sources.

Ssyedkabir268
89% match
Loading thumbnail…

Shapes with SVG and CSS

This example shows a pair of basic SVG shapes—a red circle and a red-filled rectangle—positioned on a 960x500 canvas. The page renders these geometric primitives through the inline SVG markup within the HTML body, while a linked stylesheet (`styles.css`) applies global resets like zero margins and hidden overflow. The code uses the native SVG elements `circle` and `rect` with their `r`, `cx`, `cy`, `x`, `y`, `width`, `height`, and `fill` attributes, and includes a CSS class named `.highlighted` that colors text red. No JavaScript or external charting libraries are involved; the visualization relies solely on static SVG and CSS presentation.

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

Shapes with SVG and CSS

This example demonstrates the use of SVG and CSS to render a single large circle on a 960 by 500 canvas. The visualization shows how basic SVG shapes can be styled and positioned using HTML and CSS, with the circle defined via its `r` attribute and the page styled through an external stylesheet. The `index.html` file embeds the SVG directly, while `styles.css` uses a monospace font and a `.highlighted` class to add red text styling. The rendering relies purely on native SVG elements and CSS, without any JavaScript libraries or data processing.

Mmkdeeps01
87% match
Loading thumbnail…

Shapes with SVG

This example demonstrates two basic SVG shapes—a circle and a rectangle—positioned on a 900-by-500 canvas. The rendering relies directly on the SVG API within an HTML file, with a separate stylesheet setting the body margin to zero and hiding overflow. The shapes are drawn using the `<circle>` and `<rect>` elements, with coordinates and dimensions specified through `cx`, `cy`, `r`, `x`, `y`, `width`, and `height` attributes. A JavaScript console log statement is also present, though the visualization itself requires no dynamic interaction.

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

Shapes with SVG and CSS

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.

Rrmaldonadosnz
87% match
Loading thumbnail…

Shapes with SVG and CSS

This example displays a single red circle positioned within an SVG canvas. The visualization demonstrates the basic integration of SVG shapes with external CSS styling. The code uses the native SVG `<circle>` element within an HTML document, with dimensions set to 960 by 500 pixels. Styling is applied through a separate stylesheet that resets the body margin and overflow. No JavaScript libraries are employed; the example relies solely on static SVG markup and CSS for its rendering.

Vvoiletymr
87% match