Fork of HTML Starter

Fork of HTML Starter

This example demonstrates a static SVG composition of two overlapping circles and a rectangle, rendered directly in the browser. The HTML page embeds an SVG canvas that draws a green outer circle, a white inner circle, and a black rectangle positioned to the right. The code uses raw SVG elements (`circle` and `rect`) within the `index.html` file, with no JavaScript or external libraries. It serves as a minimal starter template showing how to manually define shapes with fixed pixel coordinates, providing a simple reference for CSS and SVG basics.

Aayushaman1208@gmail.com

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

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

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

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

Fork of HTML Starter

This example displays a static SVG scene with a brown circle centered at coordinates (50, 50), a green line drawn from the origin to (100, 100), and an incomplete path beginning at (500, 500). The page overlays the large text “Hello HTML!” in a 13-em font. It uses plain HTML, inline CSS for styling, and native SVG elements (`circle`, `line`, `path`) without any JavaScript libraries or external data sources. The SVG markup is embedded directly in the document body.

Ssantoshmitra-05

Fork of HTML Starter

This example shows three nested circles centered at the same point, each with a distinct solid color: green, yellow, and blue. The circles are drawn directly in an SVG element with a fixed width and height of 4000 pixels, using static `circle` elements with explicit `cx`, `cy`, and `r` attributes. The page relies on plain HTML and CSS for layout, with the `message` class defining font styling that is not used in the visible output. No JavaScript libraries or dynamic data are involved.

Ssantoshmitra-05

Fork of HTML Starter

This example shows a minimal SVG scene with two circles and a line, demonstrating basic vector graphics rendering in a static HTML page. It uses plain SVG elements—including a default black circle, a red circle, and a blue line—positioned within a 960-by-500 coordinate space. The rendering relies on the browser’s built-in SVG support, with no JavaScript or external libraries involved. It serves as a simple baseline for understanding SVG markup structure and style attributes before adding interactivity or data-driven visuals.

MMichelleLin5