Shapes with SVG & CSS

100%

Shapes with SVG & CSS

✓ Published2🌍 Public

Last edited Sep 2, 2018

Created on Sep 2, 2018

This example demonstrates how to create SVG shapes using CSS styling within a VizHub project. It shows a single large circle rendered on an SVG canvas with a 960-pixel width, generated from an HTML template. The code uses ES6 modules to export a message string from `myMessage.js`, which is imported into the main `index.js` file. The visualization relies on basic SVG elements and JavaScript module syntax to structure the example, with the circle positioned at a 400-pixel radius.

AI-generated description

Davids code along Curan Kehellers example tutorial of how to use JavaScript objects, arrays and modules.

MIT Licensed

Similar vizzes

Loading thumbnail…

Shapes with SVG and CSS

An SVG circle, centered at the origin, is styled using CSS and rendered via VizHub’s SVG-based display. The example demonstrates how SVG shapes combine with CSS for visual customization, using the `circle` element within an inline `<svg>` tag. It includes an ES6 module (`myMessage.js`) that exports a “Hello VizHub!” message, though this text is not currently displayed in the rendered output. The code relies on standard HTML, SVG, and CSS, with no external JavaScript libraries such as D3.

Mmarielacarvallo

93% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to create and style visual shapes using SVG and CSS within the VizHub environment. The page displays a large, centered greeting message, “Hello VizHub!” sourced from an ES6 module, with the text rendered in a bold, high-contrast style. A custom white Ubuntu font and a navy background are applied globally through a linked stylesheet. The code relies on standard HTML5, CSS3, and ES6 module syntax, with no additional visualization libraries, to show basic DOM styling and module export patterns.

Sshawchand

90% match

Loading thumbnail…

Shapes with SVG new

A minimal SVG shapes example renders a single circle element inside an SVG container sized 960 by 500 pixels. The page imports D3.js’s `select` function and a local ES6 module exporting a "Hello VizHub!" message, though the circle remains static without any data binding or interaction. The rendering relies entirely on raw SVG markup in the HTML, with no JavaScript-driven updates to the shape’s attributes. The example demonstrates basic SVG structure and ES6 module usage within a VizHub project.

Mmirna981

87% match

Loading thumbnail…

Shapes with SVG and CSS

A static SVG scene demonstrates how to compose basic shapes—circles, rectangles, lines, and paths—into a coherent graphic. The code uses raw SVG elements, CSS classes for styling strokes and line joins, and inline attributes for fills and transforms. A translated group applies a fill and stroke to its child shapes, while a scaled group positions the overall composition. This example highlights VizHub’s capacity for hand-coded vector graphics without additional JavaScript libraries.

Nnlp-user

86% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to position and style basic SVG shapes—circles and rectangles—using both inline SVG attributes and external CSS. The visualization shows a static composition of shapes on a 960 by 500 canvas, including one shape group translated via the SVG `transform` attribute. Rendered through React within the VizHub environment (source v3), the code uses raw SVG elements like `<circle>`, `<rect>`, and `<g>`, with styling applied via the `styles.css` file. The page itself is a minimal HTML document linking to the stylesheet, highlighting the interplay between SVG presentation attributes and CSS rules.

JJuan Ore

86% match

Loading thumbnail…

Shapes with SVG new

This example demonstrates how to draw basic geometric shapes and lines using raw SVG elements in VizHub. It shows circles, rectangles, and a line with a path that are positioned on a 960x500 canvas. The code uses native SVG tags including circle, rect, line, path, and g, with inline attributes for styling and transforms to group shapes. The CSS file applies stroke colors and widths to the line elements while hiding page overflow.

Mmirna981

85% match

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

84% match

Loading thumbnail…

Shapes with SVG and CSS

This example shows how SVG shapes and CSS styling combine in a VizHub page. It draws a circle and a rectangle directly in the HTML markup, with a gray border around the SVG canvas. The page also demonstrates ES6 module imports, as `getCars` returns a promise that resolves after a delay to feed car data into `generateReport`, which filters by price and formats a text report. The report appears in a separate message element, while the SVG rendering stays static. The code uses native SVG elements and standard JavaScript promises, with no external visualization libraries.

Ppuru001

84% match