Teste html

100%

✓ Published1🌍 Public

Last edited Oct 15, 2022

Created on Oct 15, 2022

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.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Tests

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.

XXavier Bost

87% 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…

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

86% match

Loading thumbnail…

Test of HTML Starter

This example demonstrates basic SVG rendering in an HTML page, showing a red circle, a blue curved path, and a straight blue line on a 300x300 canvas. It uses static SVG elements defined directly in markup, with paths specified using the `d` attribute syntax for quadratic Bézier curves and straight line segments. The page relies on plain HTML structure with no external JavaScript libraries or data sources, serving as a minimal test of how SVG shapes behave within a browser without additional visualization frameworks.

Nnatecoursey@gmail.com

85% 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

85% match

Loading thumbnail…

SVG Fundamentals

This example shows hand-coded SVG shapes rendered directly on an HTML page, displaying a green circle, a red outlined rectangle with a thick stroke, and a partially formed line element. It demonstrates fundamental SVG markup for basic geometric primitives. The code uses standard SVG elements like `circle` and `rect` within an inline SVG container, styled with attributes for position, size, color, and stroke properties. No external libraries or data sources are involved; it is a minimal static demonstration of vector graphics structure.

Rrehoy

85% match

Loading thumbnail…

HTML Starter

This example demonstrates a collection of basic SVG shapes—circles, rectangles, lines, and a path—arranged within groups and styled with inline attributes and CSS classes. It shows how HTML structures SVG geometry with coordinates, transforms like scaling and translation, and shape-specific properties such as fill, stroke, and stroke-width. The code uses plain SVG elements directly in an HTML file, with CSS selectors like `.lines` to apply stroke styling. The rendering approach relies on the browser’s SVG engine without JavaScript libraries.

RRafael

84% match

Loading thumbnail…

HTML CSS SVG

This example demonstrates how to draw basic SVG shapes—circle, rectangle, line, and path—within an HTML page, using CSS for styling. The SVG element is scaled and includes nested groups, with the inner group translated and filled with steel blue. JavaScript is not used; only the markup and stylesheet are presented. The CSS applies default margins, hides page overflow, and styles the path with a green stroke while the highlighted class is defined but unused.

PPioustu

84% match