Skip to main content
SimilarExport ZIP
100%

Basic svg Image

✓ Published0🌍 Public
AAshwani Sajwan
Last edited Apr 21, 2024
Created on Apr 21, 2024
Forked from HTML Starter

This example displays a simple geometric figure composed of outlined circles and rectangles on a plain SVG canvas. The drawing includes a large blue circle intersected by smaller red and green circles, alongside green rectangular structures resembling a face or robot. The code uses raw SVG elements—`circle` and `rect`—within an HTML page, with styling attributes like `stroke` and `fill` defined inline. No JavaScript or external libraries are involved; rendering is handled entirely by the browser’s native SVG support.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

SVG Fundamentals

This example demonstrates the foundational graphical primitives of SVG (Scalable Vector Graphics) within a minimal HTML page. It shows four basic shapes: two circles filled in red and blue, a large rectangular border in green, and a thick navy diagonal line. The scene is rendered directly by the browser’s SVG engine using static markup, with no JavaScript or external libraries. The code declares an SVG canvas of 960 by 500 pixels and positions each shape via explicit coordinates and stroke or fill attributes, illustrating how raw SVG elements compose a simple geometric composition.

AAlex Yang
85% match
Loading thumbnail…

SVG Fundamentals

This example showcases the fundamental building blocks of SVG graphics, demonstrating how to create basic shapes like circles and rectangles. The SVG canvas displays several circles with varying radii and fill colors—red, green, and blue—alongside two rectangles with distinct stroke colors and widths (magenta and navy). The code uses raw SVG markup within an HTML document, styled with minimal CSS that sets a large font size for the message text. The rendering approach relies on declarative SVG elements such as `<circle>` and `<rect>`, directly embedded in the markup with attributes like `cx`, `cy`, `r`, `fill`, and `stroke`.

KKim Bum Jun
85% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes and attributes within a single 900x500 canvas. It shows circles with varying radii and fill colors, a blue-outlined rectangle, a diagonal navy line, and a black, open path forming a geometric shape. The code uses raw SVG element syntax including `<circle>`, `<rect>`, `<line>`, and `<path>` inside an `index.html` file, with styling applied directly through presentation attributes like `fill` and `stroke`.

CCrystal Lee
85% match
Loading thumbnail…

SVG fundamentals

This example demonstrates the fundamental building blocks of SVG rendering, showing how basic geometric shapes like circles are defined and placed within an SVG canvas. Using plain SVG markup inside an HTML document, it sets up a 1000x1000 coordinate space with a single circle positioned at coordinates (10,10) with a radius of 10. The code relies directly on the SVG API without any JavaScript libraries or frameworks, illustrating the minimal structure required for vector graphics on the web.

VValvravedeus
84% match
Loading thumbnail…

SVG fundamentals

This example demonstrates fundamental SVG shapes and attributes, including rectangles, circles, lines, and paths, arranged on a 2000-by-2000 canvas. It shows how to control fill, stroke color, stroke width, and positioning through inline SVG elements. The code uses raw SVG syntax within an HTML page, with no external libraries or frameworks. The shapes are rendered directly by the browser's SVG engine, illustrating basic vector graphics construction without any data binding or interactivity.

Ccapcharmander
84% match
Loading thumbnail…

SVG

This example demonstrates the fundamental structure of an SVG graphic, starting with a single circle element inside an SVG container. The code uses the native SVG API through an HTML page, with a React-ready setup implied by the framework metadata. The visualization is minimal, showing only the empty SVG canvas and the beginning of a circle tag, which suggests the initial building block for more complex data-driven shapes. The approach highlights how SVG elements form the basis for scalable, web-native vector graphics.

SSaswata Dutta
84% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shape elements in a web page, using static circles and a rectangle to illustrate basic attributes. The code uses plain HTML and JavaScript within a minimal setup, with an SVG canvas of 900 by 500 pixels. It shows a default black circle, a red-filled circle at adjusted coordinates, and a green-stroked rectangle with a thick stroke width of 20. The example highlights how CSS and JavaScript interact with inline SVG markup.

Rrobdavidson01
84% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes—circles, lines, rectangles, and paths—arranged on a 960×500 canvas. It shows how basic styling attributes like fill, stroke, and stroke-width control appearance. The code uses raw SVG markup directly in an HTML page, with no external libraries. It serves as an introductory exercise, illustrating coordinate placement and layering of primitive geometric forms.

Ddevdkumar22@gmail.com
84% match