Skip to main content
SimilarExport ZIP
100%

Fork of HTML Starter

✓ Published0🌍 Public
Mmatrice-one
Last edited Sep 26, 2022
Created on Sep 26, 2022
Forked from HTML Starter

This example shows a simple SVG composition of three concentric circles in red, orange, and green, accompanied by a black line and a blue quadratic Bézier path. The circles and line are drawn directly with SVG elements, while the path uses SVG’s `d` attribute with `Q` and `T` commands. The rendering is static, using plain HTML and inline SVG within an 800 by 500 viewport. No JavaScript libraries are used; the illustration relies solely on fundamental SVG shape and path syntax.

AI-generated description

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

See also React Starter.

<circle cx=425 cy=250 r=160 fill="red"></circle>
  <circle cx=425 cy=250 r=80 fill="orange"></circle>
  <circle cx=425 cy=250 r=40 fill="green"></circle>
MIT Licensed

Similar vizzes

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
91% match
Loading thumbnail…

Fork of HTML Starter

This example shows three overlapping circles and a diagonal red line inside an SVG canvas, demonstrating basic vector shapes with CSS styling. The circles use a pale gold fill (`#f0dfad`) with black outlines, while the line is drawn with an inline stroke style. The page relies on plain SVG elements—`circle` and `line`—with width/height attributes set directly on the `<svg>` tag, and uses no JavaScript libraries or data sources. It renders as a static, illustrative composition in the browser.

Qquan281999
91% match
Loading thumbnail…

Fork of HTML Starter

This example demonstrates a static SVG composition of overlapping circles and a line, arranged in a simple geometric pattern. The graphic shows concentric rings in green, yellow, blue, and red at the left, a black circle with grey and yellow inner circles on the right, and a horizontal red line across the top. The code uses raw SVG elements—`circle` and `line`—with inline attributes for positioning, sizing, and colors, all rendered directly within an HTML document without any JavaScript libraries.

Ssantoshmitra-05
90% match
Loading thumbnail…

Fork of HTML Starter

This example shows a simple SVG composition of colored circles, a line, and two paths, paired with a large “Hello HTML!” message. It demonstrates how to integrate static vector graphics directly into an HTML page using inline SVG elements like `circle`, `line`, and `path`, with CSS controlling the text styling. The graphic uses no JavaScript libraries; it relies purely on HTML markup and the `stroke`, `fill`, and `stroke-width` SVG attributes to define shapes and lines. The two paths illustrate different fill behaviors, with one explicitly setting `fill="none"` to keep its area transparent.

Hhassanaqeelkhan
90% match
Loading thumbnail…

Fork of HTML Starter

This example shows a simple SVG composition of two circles and one rectangle, each filled with a primary color and positioned statically within the viewport. The illustration uses raw SVG elements—`circle` and `rect`—placed directly inside the markup, with inline attributes for coordinates, dimensions, and styling. The code relies on basic SVG presentation attributes like `fill` and `stroke` to define the visual appearance, while the CSS block includes a large font-size rule for the `.message` class, though no text element is present in the markup. The example demonstrates how raw SVG primitives can be laid out without any JavaScript or higher-level library, serving as a minimal visual composition.

Mmrspatbile
89% match
Loading thumbnail…

Fork of HTML Starter

This example displays a static SVG scene composed of a red circle, a green rectangle, a thick black line, and a zigzag path, all rendered on a 960 by 500 pixel canvas. The shapes are created directly in HTML using SVG elements such as `circle`, `rect`, `line`, `path`, and `g`, with styling applied through CSS attributes like `fill`, `stroke`, and `stroke-width`. No external libraries or data sources are used; the visualization relies solely on native SVG markup and inline presentation attributes to demonstrate basic geometric drawing capabilities.

Ddepane12
89% match
Loading thumbnail…

Fork of HTML Starter

This example shows three solid circles arranged in a row on a 980-by-200 SVG canvas, each colored red, green, and blue. The circles are positioned sequentially, starting at the left edge, with a 50-pixel radius and no additional styling. The static visualization is built entirely with raw SVG elements inside the HTML markup, using no JavaScript or CSS rules. It demonstrates a minimal SVG image without interaction, animation, or data binding, serving as a basic starting point for further customization.

TTorgeirskovholt
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