Skip to main content
SimilarExport ZIP
100%

Fork of HTML Starter

✓ Published0🌍 Public
Bbrian13th
Last edited Nov 24, 2021
Created on Nov 24, 2021
Forked from HTML Starter

This example shows a simple geometric composition rendered as SVG, featuring a large circle flanked by two smaller circles and a curved arc shape. The drawing is built with React components and the D3 `arc` function, which generates the path for the crescent-like form. All shapes are positioned within an SVG canvas using fixed coordinates and transformations, with the arc defined by inner and outer radii and specific start and end angles. The code demonstrates how React and D3 can be combined to create static vector graphics.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of HTML Startewr

This example shows a simple, hand-drawn composition of two circles and two rectangles inside an SVG canvas, using basic shapes with explicit coordinates and styling. The visualization serves as a minimal demonstration of SVG rendering, where a yellow-filled circle with a blue stroke and a red circle sit alongside a filled rectangle with a thick navy border. The code uses raw SVG elements directly in the HTML, while a second React-based implementation draws a stylized face with two eyes, showcasing how React can generate SVG markup programmatically. No external data is involved; it highlights fundamental shape primitives.

SShane Gibney
89% match
Loading thumbnail…

Fork of HTML Starter

This example shows a single circle rendered at the center of an SVG canvas using React. The code defines a React component that returns an SVG element with a fixed width and height, positioning the circle at coordinates calculated from those dimensions. It imports React and ReactDom, but does not yet mount the component to the DOM. The visualization uses SVG for rendering and demonstrates a minimal React setup for drawing shapes, with the circle’s radius and position hard-coded in JavaScript constants.

Rrahul887393@gmail.com
89% match
Loading thumbnail…

Fork of HTML Starter

This example demonstrates basic SVG shapes—a red circle and a rectangle—arranged both directly and inside a transformed group, rendering a simple geometric composition on a 500-by-500 canvas. The code uses plain SVG elements (`circle`, `rect`, `g`) within an HTML page, styled by a minimal CSS rule that removes body margins. JavaScript and React are not present in the actual markup, despite the metadata listing React as the framework. The example serves as a bare-bones starter for understanding SVG layout and coordinate transformations.

SSachin Araballi
88% match
Loading thumbnail…

Fork of HTML Starter

This example shows a simple static SVG composition: a large yellow circle with a black outline, accompanied by two smaller unfilled circles positioned symmetrically inside it. The visualization demonstrates basic SVG shape rendering within an HTML page. The code uses an SVG element with explicit width and height attributes, styling circle elements with fill, stroke, and stroke-width properties. It imports React and ReactDom from the provided JavaScript file, though the rendering itself relies purely on raw SVG markup in the index.html file, not on React's component system.

MMd Alif
88% match
Loading thumbnail…

Fork of HTML Starter

This is a minimal SVG example demonstrating fundamental shapes—a circle, rectangle, and path—drawn with raw SVG markup in an HTML page. The code uses no external libraries or frameworks; instead, it relies directly on SVG elements like `<circle>`, `<rect>`, and `<path>` to produce a static composition centered on a 960 by 500 canvas. With a maroon circle, a white rectangle, and a black horizontal line, the visualization highlights basic geometric construction and inline styling, offering a straightforward starting point for SVG coding.

Mmarvin.linardy@hotmail.com
88% match
Loading thumbnail…

Fork of HTML Starter

This example demonstrates a simple static composition of three circles rendered inside a 600×600 SVG canvas. A large red circle with a thick black stroke is centered on the page, accompanied by two smaller unfilled circles positioned to the upper-left and upper-right. The markup uses plain HTML with inline CSS and JavaScript, and the SVG elements are drawn directly in the document body. The illustration relies solely on fundamental SVG shapes without any interactive behavior or external data.

MMudassar Riaz
88% match
Loading thumbnail…

Fork of HTML Starter

This example displays a simple static composition of two concentric circles rendered in blue and green on an SVG canvas. It demonstrates the foundational structure of an HTML page using inline SVG elements, with the circle positions and radii hard-coded in the markup. The visualization relies on native SVG circle tags and CSS styling, with no JavaScript libraries or data binding involved. It serves as a minimal starting point for building more complex React-based visualizations, as noted in the accompanying README.

Pphoenixash065@gmail.com
88% match
Loading thumbnail…

Fork of HTML Starter

This example shows a small set of basic SVG geometric shapes—a red circle, a blue rectangle with a red stroke, a thin navy line, and a large outlined rectangle—arranged on a 960 by 500 canvas. It renders directly using declarative SVG elements defined in static HTML, with no JavaScript logic or data binding. The visualization relies solely on SVG’s built-in shape elements like `circle`, `rect`, and `line`, styled via inline attributes for fill, stroke, and positioning.

DDev Dragon
88% match