Skip to main content
SimilarExport ZIP
100%

SVG

✓ Published0🌍 Public
JJM-Koo
Last edited Jul 8, 2022
Created on Jul 8, 2022

This example demonstrates the difference between HTML and SVG rendering by displaying a large message using two distinct technologies. The page shows the text "Hello HTML!" styled with CSS inside a standard div element, while a script uses D3.js to construct an SVG container and render the same message as scalable vector graphics. The code relies on the D3 selection and append APIs to create SVG text elements, illustrating how browser-native HTML and declarative SVG both handle text display. The CSS class "message" controls font size and alignment, while the JavaScript portion works with the SVG namespace.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

SVG fundamental

This example demonstrates the distinction between HTML and SVG rendering by displaying a simple text message. The code uses standard HTML elements, CSS styling via a `.message` class, and JavaScript to render a large, centered text label. It serves as a minimal foundation for understanding how CSS and JavaScript integrate with HTML structure, without incorporating external libraries or dynamic data. The page relies solely on native browser APIs to produce a static visual output.

Ddivyapatel9502
89% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates the difference between HTML and SVG fundamentals by displaying a large "Hello HTML!" message styled with CSS. The page uses a simple HTML structure with a CSS class to control font size and text alignment, while the JavaScript remains unused. The visualization highlights basic web rendering principles, showing how static text can be presented through standard HTML elements without additional libraries or data transformations.

Wwebdevbro
88% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates the distinction between HTML and SVG rendering on a single page. It shows a large, styled “Hello HTML!” message using CSS, while the title references SVG fundamentals without yet displaying any SVG elements. The code uses plain HTML, CSS, and JavaScript, with the message styled via a `.message` class and a `13em` font size. No external libraries or data sources are used, serving as a minimal static starter page.

Mmanohar322028
87% match
Loading thumbnail…

SVG Basics

This example demonstrates the distinction between HTML and SVG rendering. It displays a large, centered text message using CSS styling, specifically a 13em font size, to showcase basic HTML page structure. The code uses plain HTML elements and CSS rules within a `<style>` tag, with no external libraries or JavaScript functionality. The page presents a static “Hello HTML!” message, highlighting how HTML handles text layout and styling without involving SVG graphics or interactive data visualization.

SSiddarth1729
87% match
Loading thumbnail…

SVG fundamental

This example demonstrates a static HTML page displaying a large, centered text message, “Hello HTML!”. The visualization uses a CSS class to style the message with a massive 13em font size and center alignment. The page’s structure is defined in the HTML, with styling handled entirely by the CSS within the `<style>` tag, and no JavaScript or data manipulation occurs. It serves as a minimal demonstration of basic web technologies used for rendering content on the web.

LLuluh8080
86% match
Loading thumbnail…

SVG FUNDAMENTALS

This example demonstrates the foundational contrast between HTML and SVG rendering by displaying a large, centered text message styled with CSS. The page uses a simple HTML structure with a `div` element carrying the class `message`, which applies a font-size of 13em and text alignment. It does not utilize any JavaScript or data visualization libraries, remaining a bare-bones starting point for exploring SVG fundamentals within a React context. The code highlights basic CSS styling applied directly to an HTML element.

Jjon65
86% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates the contrast between standard HTML/CSS text rendering and SVG-based visualization. It shows a large, centered “Hello HTML!” message styled with CSS font-size and text-align properties. The code uses basic HTML structure with inline CSS styling, serving as a minimal starting point for understanding web-based visual layouts. It does not employ any JavaScript libraries or SVG elements, focusing purely on static text presentation.

HHazem-Galal
86% match
Loading thumbnail…

SVG 01

This example displays a large, centered "Hello HTML!" message using a simple HTML page styled with CSS. The project demonstrates the foundational relationship between HTML structure, CSS styling, and JavaScript, serving as a minimal starting point for web-based visualization work. The code defines a `.message` class with a font size of 13em and uses basic `div` elements to structure content. This static page focuses on core web technologies rather than data-driven rendering, with no external libraries or data sources present. The example is part of a series using the React framework, though this bare implementation relies solely on native HTML and CSS.

MMehdi Belacel
86% match