Skip to main content
SimilarExport ZIP
100%

Tests

✓ Published0🌍 Public
XXavier Bost
Last edited Mar 13, 2021
Created on Mar 13, 2021
Forked from HTML Starter

This example demonstrates basic SVG shapes rendered on an HTML page using CSS and JavaScript. It shows a circle, a rectangle with a red fill and black stroke, and a group containing a line and a path, all displayed within an SVG element of 960 by 500 pixels. The code uses plain SVG APIs for drawing and CSS for styling, with the `.lines` class applying stroke properties to the line and path. The page loads from `index.html` with linked `styles.css`, providing a minimal setup for testing SVG rendering without any external libraries.

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 TEST

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.

Bbtkg
89% match
Loading thumbnail…

SVG TEST

This example displays a static collection of SVG primitives, including circles, rectangles, lines, and paths, arranged in groups with transforms. The composition showcases basic shapes with hard-coded fills, strokes, and coordinate positions within a 960 by 500 pixel canvas. The rendering relies on raw SVG elements defined directly in the HTML, with CSS classes like `.lines` applying stroke properties and line joins. The code uses plain SVG APIs (`<circle>`, `<rect>`, `<line>`, `<path>`, and `<g>`) alongside CSS styling, without any JavaScript libraries for layout or interaction.

JJames Song
88% match
Loading thumbnail…

SVG and CSS Page

This example demonstrates basic SVG shape rendering and CSS styling within a single web page. It shows circles, rectangles, lines, and paths arranged in a simple composition, with some shapes using inline fill and stroke attributes while others inherit styles from grouped elements. The code uses native HTML5 SVG elements like `<circle>`, `<rect>`, `<line>`, and `<path>`, along with the `transform` attribute to reposition grouped content. Styling is handled through a separate `main.css` file, though the visible page relies primarily on SVG presentation attributes for its visual output.

JJeffrey Miiller
88% match
Loading thumbnail…

Test1 with SVG

This example demonstrates a static collection of basic SVG shapes, including circles, rectangles, ellipses, a line, a polygon, and a path, all rendered in a fixed 800×350 viewport. The code uses raw SVG markup directly in an HTML document to show varying fill colors, stroke properties, opacity, and coordinate-based positioning. It also includes a comment explaining SVG path command syntax, such as moveto, lineto, and Bézier curves. The page requires no external libraries or JavaScript, relying solely on native SVG rendering within the browser.

PPierreNiberon
87% match
Loading thumbnail…

Teste html

This example shows a hand-coded collection of basic SVG shapes: a green circle, red and blue axes, and a yellow rectangle. The code uses plain SVG elements (`circle`, `line`, `rect`) within an `<svg>` tag, with styling applied via presentation attributes like `fill`, `stroke-width`, and `stroke`. No JavaScript or external libraries are used; the visualization is a static test page rendered directly in HTML.

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

SVG Tests HTML/CSS/SVG

A set of static SVG shapes demonstrates the effects of CSS and SVG transforms. Circles, rectangles, and a line are drawn directly in the markup, some with explicit fills and strokes, while a surrounding group applies a non-uniform scale. A nested group uses translation and rotation, with inherited stroke properties and a lightgreen fill. The page loads a linked stylesheet that resets the body margin and hides overflow, affecting the canvas presentation. No JavaScript or interactions are present.

LLuiz Domingues
87% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates the fundamental SVG shapes—circle, rectangle, line, and path—drawn directly within an HTML page. It shows how CSS and JavaScript can be used to define and render vector graphics. The code uses raw SVG elements with inline attributes like `cx`, `cy`, `r`, `x`, `y`, `width`, `height`, and `stroke`, alongside the `fill` and `stroke-width` properties. The SVG canvas is set to 960 by 500 pixels, displaying basic shapes in red, green, blue, and black. A path element connects points with a straight line, while the line and rectangle include distinct stroke styling.

Hhfator
87% match