Skip to main content
SimilarExport ZIP
100%

Shapes with SVG

✓ Published0🌍 Public
Hhuankoh
Last edited Sep 23, 2020
Created on Sep 23, 2020
Forked from HTML Starter

This example demonstrates basic HTML and JavaScript integration using a simple web page titled “Shapes with SVG.” The page displays the text “Hello HTML” and logs “Hello JavaScript!” to the browser’s developer console. The code uses plain HTML elements and a script tag for JavaScript execution, with minimal CSS styling for text alignment. No SVG shapes or data visualization libraries are actually implemented in the visible files.

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 demonstrates how to render basic geometric shapes using SVG elements styled with CSS, all within a React application. It shows a minimal HTML page that displays the text “Hello HTML” as a placeholder, with the core focus on illustrating the integration of SVG markup and CSS styling in a React component structure. The code uses React to manage the component hierarchy and relies on standard SVG shape elements and CSS properties for visual presentation.

Gguangyi1012
90% match
Loading thumbnail…

Shapes with SVG and CSS

This example shows a minimal HTML page that renders basic SVG shapes—two circles and a rectangle—styled and positioned through inline SVG attributes. The page loads a single SVG element with a fixed width and height, using raw SVG markup without any external libraries. It also includes a small inline script that logs a message to the browser’s developer console, demonstrating a simple integration of CSS and JavaScript within an HTML document. The rendering relies entirely on native SVG support in the browser, with the `console.log` call as the only JavaScript interaction.

Sshawnsrk
90% match
Loading thumbnail…

Shapes with svg and CSS

This example demonstrates how to draw basic SVG shapes using a minimal HTML page with CSS styling. The code renders a simple circle element inside an SVG container, paired with a styled heading. It uses native SVG markup, CSS for typography and layout, and JavaScript for structure, showing a bare-bones approach to embedding vector graphics in a web page. The data source is static, with no external libraries or frameworks beyond the core web standards.

HHenrik Forsberg
88% match
Loading thumbnail…

Shapes with SVG and CSS

This example shows how SVG shapes and CSS styling can be combined in a React visualization, with a simple page that logs to the console on load. The code uses plain HTML, CSS, and JavaScript—no external libraries—to render an empty body, while the stylesheet defines a monospace font and a `.highlighted` class for red text. The rendering approach relies on static markup and CSS rules rather than dynamic data or SVG elements. The example serves as a minimal starter for building interactive graphics.

Ssrhodes
87% match
Loading thumbnail…

Shapes with SVG and CSS

This example shows how SVG shapes and CSS styling can be combined in a React visualization, with a simple page that logs to the console on load. The code uses plain HTML, CSS, and JavaScript—no external libraries—to render an empty body, while the stylesheet defines a monospace font and a `.highlighted` class for red text. The rendering approach relies on static markup and CSS rules rather than dynamic data or SVG elements. The example serves as a minimal starter for building interactive graphics.

Ssrhodes
87% match
Loading thumbnail…

Shapes with SVG

This example shows how to draw basic SVG shapes—circles, rectangles, and a line—on an HTML page. It demonstrates grouping with `<g>` elements to apply shared fill and stroke styles, and shows how individual shapes within a group can override those properties. The code uses raw SVG markup embedded directly in the HTML, with attributes like `transform`, `fill`, and `stroke-width` controlling appearance and position. No JavaScript libraries are used; rendering relies entirely on the browser’s native SVG support.

Jjlspangl
87% match
Loading thumbnail…

Shapes with SVG and HTML

This example uses raw SVG elements to display basic shapes, including two circles and two rectangles, on an HTML page. The shapes are styled with inline SVG attributes, with two shapes receiving custom fill colors—a purple circle and a pink rectangle—while the others use default black fills. The code directly employs SVG’s `<circle>` and `<rect>` elements within an `<svg>` container, rendered via standard HTML markup, with a linked stylesheet that resets the body margin and defines a `.highlighted` class. No JavaScript libraries are used; rendering relies purely on built-in SVG support in the browser.

SSUPERMAN79355
87% match
Loading thumbnail…

Shapes with SVG and CSS

This example showcases basic SVG shapes—circles, rectangles, lines, and paths—styled with CSS. It demonstrates how SVG elements inherit presentation attributes like fill, stroke, and stroke-width from parent groups, using both inline attributes and CSS class selectors (`.lines`). The code uses raw SVG within an HTML page, with JavaScript and CSS linked externally, to illustrate styling and transformation effects like scaling and translation. The shapes are rendered directly in the browser without any external data.

Aadbirch
86% match