Fork of Fork of HTML Startewr

100%

Fork of Fork of HTML Startewr

✓ Published1🌍 Public

Last edited May 7, 2022

Created on May 7, 2022

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.

AI-generated description

MIT Licensed

Similar vizzes

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

90% match

Loading thumbnail…

Fork of HTML Starter

This example shows a minimal SVG composition of two circles, one yellow with a black outline and one unstyled, rendered on a 960 by 500 canvas. The page uses plain HTML with embedded CSS to remove body margins and overflow, and inline SVG elements for rendering. No external JavaScript libraries or data sources are involved; the visualization is a static demonstration of basic SVG shape styling and positioning.

AAriyo Joseph Olamide

90% match

Loading thumbnail…

Fork of HTML Starter

This example displays a simple static composition of SVG shapes, including two outlined circles and two filled rectangles, arranged on a 500 by 500 canvas. The geometric figures are defined directly in the HTML markup, with styling applied through a CSS rule for a message class, though no text is rendered. The visualization uses inline SVG elements within an HTML page, and the circles are styled with a black stroke and no fill, while the rectangles appear with default black fills. No JavaScript libraries or interactive features are present; the code relies purely on native SVG and CSS.

FFaridah Namutebi

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

89% match

Loading thumbnail…

Fork of HTML Starter

This example presents a simple SVG face rendered with React and ReactDOM. The code defines a yellow circle with a black stroke to form the head, and two smaller circles for eyes, using fixed dimensions and coordinates within an SVG canvas. React elements are created using JSX and mounted to the DOM via `ReactDOM.render`, while the page loads React from unpkg CDN links. The visualization demonstrates basic SVG circle primitives and React component structure without interactive behavior or external data.

RRonanCurbe10

89% match

Loading thumbnail…

Fork of HTML Starter

This example shows a simple face composed of three SVG circles: a large yellow circle for the head and two smaller black circles for eyes. It is built using React 17, with the SVG elements written directly in the HTML file. The visualization serves as a minimal starter template, demonstrating how to combine static SVG markup with React’s rendering capabilities. No interactive behavior or data binding is present, focusing solely on basic SVG shape composition within a React environment.

Ccasclark

89% 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

89% match

Loading thumbnail…

Fork of HTML Starter

This example demonstrates basic SVG shapes—circles, rectangles, and lines—arranged in a static composition on a 960×500 canvas. The code uses plain HTML with inline SVG elements, styled minimally via CSS with zero margins and hidden overflow. Shapes include default black figures, a red circle, a green rectangle, and black lines with varying positions, one of which is duplicated with a translate transform. No JavaScript or data binding is present; it purely showcases SVG rendering capabilities through static markup.

FFaris Sufyan

89% match