Skip to main content
SimilarExport ZIP
100%

SVG Fundamentals

✓ Published1🌍 Public
RRonanFonseca
Last edited Aug 19, 2022
Created on Aug 19, 2022
Forked from HTML Starter

This example demonstrates the fundamentals of SVG drawing using four nested circles to create a concentric target pattern in red, white, and red. The circles are centered at the same coordinates, with radii decreasing from 110 to 20 pixels, achieving a layered bullseye effect. The code uses raw SVG elements within an HTML page, styled with CSS to remove the scrollbar. JavaScript is not active in this visualization; instead, the circles are declared directly in the `index.html` file. The `body` margin is set to zero and `overflow` is hidden to maximize the viewing area.

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 basics of SVG rendering, showing three concentric circles that create a target-like visual using different colors and radii. The scene is constructed directly in an HTML page using the SVG element with a fixed canvas size of 960 by 480 pixels, while specific circle elements define their positions and fill colors. The visualization relies purely on static SVG markup without external libraries or JavaScript, illustrating fundamental vector graphics capabilities.

TTom Ellis
89% match
Loading thumbnail…

SVG Fundamentals

This example illustrates fundamental SVG shapes composing a static vector graphic. It depicts a layered bullseye target using circles, a large rectangle with a colored border, and a diagonal line, all positioned within a fixed 960 by 500 coordinate space. The code in `index.html` directly constructs these shapes using raw SVG elements like `circle`, `rect`, and `line`, with styling applied through SVG attributes such as `fill`, `stroke`, and `stroke-width`. No JavaScript or external libraries are used; the rendering is purely declarative SVG markup.

Jjv
89% match
Loading thumbnail…

SVG Fundamental

This example demonstrates the fundamental structure of SVG shapes within an HTML page. It displays four circles of equal radius, positioned at different coordinates, with only one explicitly colored red via the `fill` attribute. The code uses raw SVG elements—`<svg>`, `<circle>`—and defines the drawing area with `width` and `height` attributes. No external libraries or JavaScript are employed; rendering relies entirely on native browser SVG support, making it a minimal introduction to static vector graphics.

AAlexHraven
87% match
Loading thumbnail…

SVG fundamentals

This example demonstrates fundamental SVG rendering with a series of four circles displayed in a row, each with a radius of 50 units. The first circle is unfilled, while the subsequent circles use red, green, and blue fills. The page is built with a minimal HTML structure that embeds the SVG directly in markup, with basic CSS styling for a large text greeting message. It utilizes raw SVG circle elements without any JavaScript libraries or data processing.

EEJennings25
87% match
Loading thumbnail…

SVG Fundamentals Ex 1

This example shows a circular target pattern built from alternating red and white rings, with a black crosshair overlaid at the center. The code creates the rings using SVG `circle` elements with varying radii, and draws the crosshair using four `line` elements. The `svg` canvas is 500 by 500 units, with all shapes centered at coordinates (250, 250). The visualization relies on basic SVG attributes like `cx`, `cy`, `r`, and `stroke` to define position, size, and appearance, demonstrating foundational SVG shape construction without additional libraries.

AAndresrvaz
87% 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
86% match
Loading thumbnail…

SVG fundamentals

This example demonstrates the fundamental building blocks of SVG rendering on a web page. It presents three circles arranged in a row, with the middle circle colored red while the others remain black, showing how SVG shapes can be customized. The code uses raw SVG elements directly within an HTML document, with each circle defined by its center coordinates (cx, cy) and radius (r). The fill attribute applies the red color to the second circle, while the other circles use the default black fill. No JavaScript or external libraries are involved, just plain SVG markup in a minimal HTML structure.

Ssufyan424
86% match
Loading thumbnail…

SVG Funda

This example demonstrates the basics of SVG rendering without any external libraries, using only the native `<svg>` element embedded directly in HTML. The code draws three circles at varying positions and sizes, showcasing how the `CX`, `cy`, `r`, and `fill` attributes control shape placement, dimensions, and color. The first circle has a radius of 700, while the subsequent green and red circles are smaller and offset. The page relies on static SVG markup within the body, providing a minimal introduction to declarative vector graphics in the browser, with no interactivity or dynamic data.

AAWLGAWLG
86% match