Skip to main content
SimilarExport ZIP
100%

Svg

✓ Published0🌍 Public
PParna Saeidpour
Last edited Jul 3, 2022
Created on Jul 3, 2022
Forked from HTML Starter

This example shows two overlapping triangles rendered inside a 500×500 pixel SVG canvas with a light pink background. The first red triangle spans from the top-left to the center, while the second green triangle points downward, creating a stylized bow-tie or hourglass shape when combined. The graphic is built using raw SVG markup in an HTML file, with the `path` element defining each polygon’s vertices via the `d` attribute. CSS styles the canvas background, while SVG attributes `fill` and `stroke` set the triangles’ colors and outlines. No JavaScript is used; the rendering relies entirely on 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 showcases a generative composition of triangular polygons arranged on a 960x500 SVG canvas. The visualization demonstrates fundamental SVG shapes and CSS styling, where each polygon is explicitly defined with coordinate points and filled with a gradient of teal colors. The code utilizes native HTML, CSS, and JavaScript, with CSS transitions and hover effects that adjust polygon opacity. The design creates a geometric abstract mosaic, emphasizing how SVG elements can be structured and styled directly within a browser environment without external libraries.

Rrlietz
80% match
Loading thumbnail…

SVG

This example demonstrates basic SVG rendering primitives within an HTML page, composing geometric shapes inside a 960 by 500 canvas. The visualization shows how circles, rectangles, lines, and paths are positioned and styled, with one group translated and separately stroked. It relies on the raw SVG API (no external libraries), using attributes like `transform`, `stroke`, `fill`, and path data (`d`) to control appearance and layout, with CSS setting the overall page margins and overflow.

YYash G
79% match
Loading thumbnail…

SVG

This example demonstrates basic geometric shapes rendered as SVG elements, including two circles, two rectangles, a line, and a polyline path. The shapes are grouped with a light blue fill and black stroke, translated 200 pixels down the y-axis, while the line and path use a thicker stroke without fill. The code uses raw SVG markup within an HTML page, styled by an external CSS file that removes margins and hides overflow. The rendering approach relies on SVG's native coordinate system and transform attribute.

Ssagarknt97
79% match
Loading thumbnail…

SVG

This example demonstrates basic SVG graphics primitives within an HTML page, including circles, a line, and two paths with different shapes and styling. The circles showcase overlapping filled shapes with red and green fills, while the paths illustrate both a curved form and a multi-segment stroke. Rendered directly through the SVG element with a viewBox of 960 by 500 pixels, the code uses no external libraries, relying solely on built-in SVG elements like `<circle>`, `<line>`, and `<path>`. The markup defines attributes for coordinates, dimensions, colors, and stroke properties to construct each shape.

CCokrat001
79% match
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
78% match
Loading thumbnail…

svg Fundamentals

This example demonstrates fundamental SVG shapes and styling within a lightweight HTML page. It renders a horizontal navy line, two overlapping green and blue circles, an irregular path built from arcs and quadratic Bézier curves, a polygon, and an embedded image. The page uses raw SVG markup with CSS for text styling and JavaScript is not employed, though the code includes a global SVG namespace declaration. The composition serves as a bare-bones introduction to SVG rendering in a browser.

RRandomUser
78% match
Loading thumbnail…

Svg exercise

This example demonstrates hand-drawn SVG shapes: a red circle with three lines radiating from its center, representing a simple graph or compass, overlaid with the italicized word "Titan" in large red text with a black outline. The composition is enclosed by a navy rectangular border. The code uses raw SVG elements—`circle`, `line`, `rect`, and `text`—styled via a CSS class to achieve the visual effect. All rendering is declarative, with coordinates and styling set directly in the markup and stylesheet.

RRakshith0405
78% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates the foundational building blocks of SVG graphics by rendering a pair of overlapping circles and a rectangular outline on a 960×500 canvas. The visualization shows how geometric primitives—a large unfilled circle, a smaller red-filled circle, and a blue stroked rectangle—can be composed to create simple shapes. It uses raw SVG elements (circle, rect) defined directly in an HTML document, with attributes like cx, cy, r, fill, stroke, and stroke-width controlling position, size, and styling. No external libraries or JavaScript are employed, relying purely on static markup to illustrate SVG's core syntax and rendering within a React-free context.

LLuu Nguyen
78% match