Skip to main content
SimilarExport ZIP
100%

SVG TEST

✓ Published0🌍 Public
Bbtkg
Last edited May 17, 2022
Created on May 17, 2022
Forked from HTML Starter

This example demonstrates the basic building blocks of SVG graphics on a plain HTML page. It shows how to create and style two circles and a rectangle using inline SVG elements, with one circle left unfilled and the other filled red. The rectangle uses a blue stroke with a width of 10 and no fill. The code exercises fundamental SVG attributes such as `cx`, `cy`, `r`, `fill`, `stroke`, and `stroke-width` within a fixed 200 by 200 coordinate system. No external libraries or data are involved; the visualization relies entirely on hand-written markup.

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 fundamental SVG shapes rendered directly in a bare HTML page, including two circles, a rectangle with a blue stroke, and a red fill. The code uses inline SVG markup within the HTML document, with CSS and JavaScript referenced for additional interactivity. It shows basic shape properties such as `cx`, `cy`, `r`, `x`, `y`, `width`, `height`, `fill`, and `stroke-width`. The visualization serves as a minimal starter for understanding SVG fundamentals without external libraries.

Bbrunotrindademachado
91% match
Loading thumbnail…

SVG test

This example demonstrates the placement and styling of basic shapes within a two-dimensional SVG canvas. It uses raw SVG elements, including circles, paths, and stroke properties, to create simple geometric compositions. The code utilizes inline SVG attributes such as `cx`, `cy`, `r`, `fill`, `stroke`, and `stroke-width`, along with path data `d` for drawing lines. Without external libraries, it relies on the native SVG API for rendering within an HTML page.

EElerium115
90% match
Loading thumbnail…

SVG Fundamentals

This example showcases basic SVG fundamentals by rendering two primitive shapes: a red circle and a blue rectangle. It demonstrates how to create and style SVG elements directly within an HTML page using inline SVG markup. The code uses native SVG elements—`circle` with `cx`, `cy`, `r`, and `fill` attributes, and `rect` with `x`, `y`, `width`, `height`, and `fill`—to illustrate position, size, and color properties. No external libraries or data sources are involved; the example relies purely on static, hand-coded SVG in a plain HTML file.

Mmihaela diaconu
90% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes—circles and rectangles—styled with attributes such as fill color, radius, position, and stroke width. The code uses plain SVG elements embedded in an HTML page, with no external libraries or frameworks. Blue and red circles of varying sizes appear in a row, while a yellow rectangle with a navy stroke is positioned below them. The rendering relies entirely on the browser's built-in SVG support, showcasing how to create basic vector graphics through static markup.

Llassouedghazi
90% match
Loading thumbnail…

SVG Fundamentals test

This example demonstrates fundamental SVG rendering through a static, self-contained HTML page. It creates two concentric circle shapes using raw SVG path elements with cubic Bézier curves, styled with red strokes and fills at varying opacity levels. The visualization also includes nested transformation groups and a clip path definition, showcasing how SVG handles coordinate transformations and shape clipping. The code relies entirely on native SVG APIs within the HTML markup—no JavaScript libraries or data sources are used—making it a minimal test of vector graphics capabilities in the browser.

GGMEirik
89% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates basic SVG shapes—circles and a rectangle—positioned within a 960-by-500 viewport using fixed coordinates. The circles use blue, red, black, and green fills, while the rectangle employs an orange fill with a navy stroke and a stroke-width of 1. Rendering is achieved directly through inline SVG markup in an HTML file, with no JavaScript libraries or external dependencies. It serves as a minimal introduction to SVG fundamentals, showing how shape attributes like cx, cy, r, x, y, width, height, and fill control appearance and placement.

EElla Kim
89% match
Loading thumbnail…

SVG

This example demonstrates basic SVG shapes—circles, a rectangle, and a path—rendered in black with red strokes or red with black strokes on a 960 by 500 canvas. The HTML page embeds an inline SVG element directly, using the `circle`, `rect`, and `path` elements with attributes like `cx`, `cy`, `r`, `x`, `y`, `width`, `height`, and `d` to define geometry and styling. No JavaScript libraries are involved; the visualization relies purely on SVG markup and CSS presentation.

LLachlanJohnstone
89% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes—two circles and a rectangle—rendered directly on an HTML page. The first circle appears with default black fill, while the second is explicitly colored red, and the rectangle uses a blue stroke with no fill. The code uses plain SVG elements (`circle`, `rect`) within an inline `<svg>` tag, with styling attributes like `fill` and `stroke-width`. No JavaScript or external libraries are involved; the visualization relies solely on static SVG markup and CSS-like presentation attributes.

NNAVEED HYDER
89% match