Fork of HTML Starter

100%

Fork of HTML Starter

✓ Published0🌍 Public

Last edited Jun 29, 2024

Created on Jun 29, 2024

This example shows a horizontal color legend with nine rectangular swatches, each labeled with a tick mark, rendered as static SVG elements. The visualization demonstrates a React-based starter template that uses raw SVG markup within JSX to display a sequential color scale. The file includes a complete HTML page with CSS and JavaScript, where the SVG is defined directly in the index file. The code uses no external libraries, relying solely on React's rendering of SVG elements like `<rect>` and `<line>` to create the legend, though the underlying data structure is not shown beyond the hardcoded color positions.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Fork of HTML Starter

This example is a fork of the HTML starter, presenting a static SVG composition of overlapping rectangles, circles, lines, and text. It demonstrates the raw use of SVG elements alongside inline CSS and JavaScript within a single HTML file. The visualization is rendered entirely through SVG, with shapes defined by fixed coordinates and attributes, and the text element displays a message about the author's affinity for the format. It serves as a minimal, hand-coded illustration of SVG’s vector graphics capabilities without any external libraries or data.

Aamp1enator@gmail.com

81% match

Loading thumbnail…

Fork of HTML Starter

This example displays a collection of basic SVG shapes—three colored circles, a purple rectangle with a navy outline, intersecting white lines, and a black polyline—arranged on a 960 by 500 canvas. It demonstrates raw SVG markup written directly in HTML, using no external libraries or frameworks despite being forked from a React starter. The rendering relies solely on the browser's native SVG support, with styling applied via a CSS class.

YYagiz Avsar

80% match

Loading thumbnail…

Fork of Fork of Fork of HTML Starter 1

This example shows a static SVG composition of a yellow rectangle containing two black squares, rendered inside an HTML page. The visualization relies on hardcoded SVG shapes defined directly in the markup, with React and ReactDOM loaded via CDN but only used to log the ReactDOM object to the console. The page imports React 16.14.0 and ReactDOM from unpkg, while the SVG elements use basic geometric attributes like x, y, width, and fill to create the simple layout.

NNita

80% match

Loading thumbnail…

Fork of HTML Starter

This example displays a static SVG scene composed of an orange rectangle with a thick red border and a green outlined triangle. The page uses plain HTML, CSS, and JavaScript, with the SVG elements drawn directly in the markup. CSS styles control the text size and alignment, while SVG attributes handle the shapes, strokes, and fills. No data or interactive behavior is present, serving as a minimal reference for embedding SVG visuals in a React project.

Ddsims2157

80% match

Loading thumbnail…

Fork of HTML Starter

This example is a minimal React-based SVG visualization showing two labeled rectangles positioned on an 800x500 canvas. The top-left rectangle spans from x=43 to x=233 and y=34 to y=458, while the second rectangle sits to the right at x=270 to x=460, y=161 to y=458. Static text elements label the chart area with “Hello mom” and the page heading “Hello word.” The code uses inline CSS to set the SVG text font size to 10px. No interaction, animation, or external data sources are present; it is purely a static HTML/SVG layout.

MMOUSSA TOURE

80% match

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a basic React application rendering a static SVG graphic. It shows a large pink circle with purple outlines and two smaller purple circles, accompanied by an “Hello JSX” heading. The code uses React and ReactDOM from CDN, along with JSX syntax in `index.js`. The SVG element is hardcoded in `index.html`, while React renders the header into the `#root` div, and the CSS sets the page margin to zero with hidden overflow.

Hhannah.keatley@gmail.com

80% match

Loading thumbnail…

Fork of HTML Starter

This example shows a simple SVG legend with two colored circles labeled “variable A” and “variable B,” positioned at fixed coordinates. The visualization is built with D3 v7, where `d3.select` targets the SVG element with the `legend` id and appends circle and text elements. It uses static attributes like `cx`, `cy`, `r`, and `style` to define the legend’s appearance. The page also includes commented-out bar chart code using `d3.selectAll` and `.data`, but only the legend renders.

MMichaelBGonzalez

80% match

Loading thumbnail…

Fork of HTML Starter

This example demonstrates fundamental SVG shapes—rectangles, circles, ellipses, lines, polylines, polygons, and paths—rendered directly into an SVG element with inline CSS and JavaScript. It serves as a minimal HTML starter page, using native SVG markup with attributes like `rx`, `stroke`, and `fill` to style transparent-outlined figures. The shapes are positioned across a 400-by-250 viewport, followed by a centered text label. The code relies entirely on browser-native SVG support and standard HTML/CSS, with no external libraries, illustrating basic vector graphics construction in a static React-free environment.

Sstefano@nava.ch

80% match