Skip to main content
SimilarExport ZIP
100%

Yasen - SVG basic

✓ Published0🌍 Public
YYasen
Last edited Aug 21, 2022
Created on Aug 21, 2022
Forked from HTML Starter

This example demonstrates basic SVG shape drawing, showing how circles, rectangles, lines, and paths are rendered directly in an HTML document. An SVG canvas displays a green circle with a red outline, a yellow rectangle with a thick blue border, a navy line, and two open paths with green and red strokes. The code uses raw SVG elements (`circle`, `rect`, `line`, `path`) without any external JavaScript libraries or data sources, relying entirely on the SVG specification for geometric rendering and the `fill`, `stroke`, and `stroke-width` attributes. The rendering approach is static SVG markup embedded in the `index.html` file.

AI-generated description

Learn SVG shapes

MIT Licensed

Similar vizzes

Loading thumbnail…

SVG

This example demonstrates basic SVG shape rendering within an HTML page, organizing circles, rectangles, lines, paths, and polygons in nested groups. The SVG canvas scales the entire composition with a `transform` attribute, while a second group applies a further scale to the polygon. Cascading style sheets define red stroke styling for the `.lines` class, including a darkened path with rounded joins and caps, plus a light-blue stroked, dark-blue filled polygon. The code uses raw SVG elements—`circle`, `rect`, `line`, `path`, `polygon`—with inline attributes for fills, strokes, and coordinate positions, showing static vector graphics without external libraries.

Iirasheed01
80% match
Loading thumbnail…

SVG

This example demonstrates basic SVG shape rendering within an HTML page, showing circles, rectangles, a line, and a custom path. The SVG element spans 960 by 500 pixels and uses inline attributes for styling, such as fill colors, stroke colors, and stroke widths. A circle with a red fill, a blue-stroked hollow rectangle, a gold-filled inner rectangle, a navy diagonal line, and a red triangular path all appear without interactive behavior. The code relies solely on native SVG elements—no external libraries—highlighting how static vector graphics can be defined directly in markup.

Mmanunair16
79% match
Loading thumbnail…

Start With SVG

This example demonstrates basic SVG shapes rendered directly in HTML, including circles, rectangles, lines, and a path. The visualization shows how primitive geometric elements can be composed to form a static graphic without any data binding or interaction. The code uses the native SVG API through inline markup, with shapes positioned via explicit `x`, `y`, `cx`, and `cy` attributes, and styled using `fill` and `stroke` properties. A prominent green border outlines the canvas bounds, while a pink rectangle with a thick green stroke and a black-outlined red path highlight contrasting visual treatments. The rendering approach is purely declarative, requiring no JavaScript libraries or external data sources.

Yyashsongirephinix@gmail.com
79% match
Loading thumbnail…

Osnove SVG

This example demonstrates basic SVG shapes by rendering circles, rectangles, lines, and paths directly in an HTML document. The code uses inline SVG elements—`<circle>`, `<rect>`, `<line>`, and `<path>`—with explicit attributes for position, size, and color. A red circle, a purple bordered rectangle, a thick green line, and a blue triangular path are drawn on a 500×500 canvas. Styling is applied via presentation attributes like `fill`, `stroke`, and `stroke-width`. The visualization introduces core SVG syntax without any JavaScript libraries or external data sources, relying purely on static markup.

MMiha Tomšič
79% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental shapes in SVG, including circles, rectangles, lines, and paths, each styled with colors, strokes, and fills. The SVG canvas is 960 by 500 pixels, and shapes are positioned with explicit coordinates. The code relies on native SVG elements such as `<circle>`, `<rect>`, `<line>`, and `<path>`, with attributes like `cx`, `r`, `x`, `width`, `stroke`, and `fill`. A complex path defines a curved outline using cubic Bézier commands. No external libraries are used; the example is rendered directly via the browser's SVG support, with a hardcoded shape set.

Yyssetec
78% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates basic SVG shape rendering in a static HTML document. The code draws a circle, rectangle, line, and path directly onto an SVG canvas using standard SVG elements. The shapes are styled with attributes such as fill, stroke, and stroke-width, showing fundamental geometric primitives. This approach relies solely on native SVG APIs, with no external JavaScript libraries or data sources, providing a minimal illustration of vector graphics construction.

PPhan Nguyen
78% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates basic SVG shape rendering in an isolated HTML document. It draws a red circle, a blue diagonal line, and a blue stepped path with a thick stroke. The visualization uses raw SVG elements—`<circle>`, `<line>`, and `<path>`—with explicit coordinate and style attributes, requiring no external libraries or data sources. The rendering approach relies on the browser’s native SVG implementation, as specified in the inline `svg` tag with a 1000×1000 viewport.

KKhanAzmat
78% match
Loading thumbnail…

SVG

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—positioned and styled directly within an HTML page. The code uses raw SVG markup embedded in the document, with transformations like `scale()` and `translate()` applied to groups, and CSS classes controlling stroke properties. Shapes inherit fill and stroke attributes from parent `<g>` elements, showing how SVG styling cascades. The rendering relies entirely on the browser’s native SVG engine, with no external JavaScript libraries, making it a minimal illustration of vector graphics fundamentals.

YY-oringe
78% match