Skip to main content
SimilarExport ZIP
100%

Fork of HTML Starter

✓ Published1🌍 Public
KKareena
Last edited Jul 17, 2025
Created on Jul 17, 2025
Forked from HTML Starter

This example displays a gallery of basic geometric shapes drawn on a responsive HTML5 Canvas, including filled and outlined rectangles, circles, triangles, lines, ellipses, rounded rectangles, and a star. The canvas uses the Canvas 2D API with methods like `fillRect()`, `arc()`, and `quadraticCurveTo()` to render each shape. The drawing routine redraws all shapes whenever the window is resized, adapting the layout to the available screen space.

AI-generated description

HTML Canvas Basic Shapes

A full display HTML canvas demonstrating various basic shapes including:

  • Rectangle (filled and outlined)
  • Circle (filled and outlined)
  • Triangle
  • Line
  • Ellipse
  • Rounded rectangle
  • Star shape

The canvas is responsive and redraws shapes when the window is resized.

Features

  • Full display canvas that adapts to screen size
  • Colorful basic geometric shapes
  • Responsive design that redraws on window resize
  • Clean, modern styling with shadows and borders
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a basic SVG canvas containing several geometric shapes: circles, a rounded rectangle, a line, a star-like polygon, and an open path. It serves as a minimal HTML starter template that uses inline CSS for text styling and raw SVG elements to illustrate fundamental rendering. The shapes are drawn directly within an `<svg>` tag, with attributes for positioning, fills, and strokes. The page includes a simple style rule for a centered message, showcasing how HTML, CSS, and JavaScript can be combined in a single file.

Kkanugu rajesh
82% match
Loading thumbnail…

Fork of HTML Starter

This example demonstrates a collection of basic SVG shapes, including a circle, a rectangle with a blue outline, a diagonal line, and a path, all rendered on an HTML5 `<svg>` canvas. The shapes are styled with inline attributes and CSS classes, showing how fundamental vector graphics can be composed. The code combines HTML, CSS, and JavaScript, with the SVG markup embedded directly in the page. It uses the static shape elements `circle`, `rect`, `line`, and `path`, without any dynamic data or interaction.

HHussein Basil
81% match
Loading thumbnail…

Fork of HTML Starter

This example demonstrates fundamental SVG shapes by rendering a circle and a rectangle on an empty canvas. It shows how basic geometric elements can be positioned and styled using SVG attributes. The code uses raw SVG markup within an HTML document, setting the circle's center coordinates and radius, and the rectangle's size, fill color, purple, stroke color, orange, and stroke width. All shapes render directly in the browser without any additional JavaScript libraries or data sources.

SShikhar Pachori
81% match
Loading thumbnail…

Fork of HTML Starter

This example demonstrates fundamental SVG shapes and path commands on a 500 by 500 canvas. The code draws circles, rectangles, and lines with fixed pixel coordinates, along with several paths that use the `M` (move to) and `L` (line to) commands. A simple rectangle outlines the drawing area with vertical and horizontal crosshairs extending beyond its bounds. The visualization is static, using pure SVG markup without any JavaScript libraries or data sources.

BBen M
80% match
Loading thumbnail…

Fork_of_Fork_of_HTML_Starter

This example displays a set of basic SVG shapes—a circle, a red circle, a green rectangle, a navy line, and a blue path—arranged on a 1000×1000 canvas. The code uses raw HTML and inline SVG elements, including `circle`, `rect`, `line`, and `path`, without any JavaScript libraries. It demonstrates the foundational syntax for static vector graphics, with shapes positioned via absolute coordinates and styled using attributes like `fill` and `stroke`. The rendering is entirely declarative, showing how primitive shapes compose a simple composition directly in the browser.

Aag17@tutanota.de
80% match
Loading thumbnail…

Fork of HTML Starter

This example demonstrates fundamental SVG shapes, including a circle and a rectangle, composed within a single canvas. The rectangle illustrates both a red stroke and a blue fill, while a second circle is rendered in red, showing how visual properties can vary per element. The code directly uses standard HTML and SVG APIs—specifically the `<svg>`, `<circle>`, and `<rect>` elements—within a simple, self-contained HTML page, with no external libraries involved. The rendering approach is purely declarative SVG markup.

Eedmundo.guerra.ipad@gmail.com
80% 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
80% match
Loading thumbnail…

Fork of HTML Starter

This example demonstrates basic vector shapes rendered in SVG, including circles with various fill and stroke combinations, a rectangle with a yellow fill and blue outline, a diagonal line, and a curved path with a black stroke. The page uses a minimal HTML structure with inline CSS and JavaScript, with the `index.html` file defining a 960 by 800 pixel SVG canvas. The code directly specifies shape attributes such as coordinates, dimensions, and colors rather than relying on external libraries or data sources, serving as a foundational starter for building more complex visualizations with React or other frameworks.

Hhillierben@gmail.com
80% match