mastercard

100%

✓ Published1🌍 Public

Last edited Aug 15, 2023

Created on Aug 15, 2023

This example shows the Mastercard logo constructed from three overlapping circular arcs in red, orange, and yellow, with the wordmark “mastercard” set below in a custom Google Font. The SVG is hand-coded with path elements using arc commands, and each shape is filled with a distinct brand color via the `fill` attribute. The rendering relies on inline SVG within an HTML page, styled with Google Fonts’ Maven Pro, and the layout is positioned using SVG `<g>` transform translations. No external data or JavaScript libraries are used; the visualization is purely declarative markup.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

SVG Fundamentals - Me

This example demonstrates the fundamentals of drawing with SVG by composing a playing card suit from basic shapes. It shows a stylized club symbol built from three circles and a tapered stem, arranged within a rectangular boundary. The code uses raw SVG elements like `circle`, `path`, and `rect` directly in HTML, with CSS controlling the text styling and fill colors applied via SVG attributes. The rendering relies on the browser’s native SVG support, with no external libraries, making it a minimal illustration of coordinate systems and shape composition.

Llorlorthelion@gmail.com

68% match

Loading thumbnail…

SVG Fundamentals: Marvel Logo

This example recreates the Marvel Studios logo using only SVG fundamentals. It demonstrates text styling, gradient fills, and basic shape drawing, with bold serif typography for "MARVEL" and "STUDIOS" set against a gradient background. The code uses SVG `<rect>`, `<line>`, and `<text>` elements, along with `<linearGradient>` definitions, to construct the composition. It relies on CSS font settings and explicit `fill` properties to achieve the iconic look. No external libraries or data sources are involved; the visualization is purely a static SVG rendering.

LLeah Mitchell

66% match

Loading thumbnail…

SVG Fundamentals_MW

This example demonstrates fundamental SVG shapes rendered inside an HTML page. It shows a red circle, a green rectangle with a yellow outline, a thick black line, and a blue-outlined pink polygon defined by a path. The visualization uses the SVG rendering API directly within the page markup, with CSS styling applied to the page title. The code specifically employs SVG elements such as `circle`, `rect`, `line`, and `path`, along with the `stroke`, `stroke-width`, and `fill` attributes. It does not use any JavaScript library or external data source.

AAngrykatrine

66% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates the core building blocks of SVG graphics, showing how basic shapes combine to form a static vector illustration. It features a red circle, a blue rectangle, a thick navy diagonal line, and an open path that creates a two-segment angular stroke on a 960x500 canvas. The code uses raw SVG elements—`circle`, `rect`, `line`, and `path`—defined directly in an `index.html` file without any JavaScript library. Each shape is styled via presentation attributes like `fill`, `stroke`, and `stroke-width`, while a comment in Spanish notes the markup. This is a pure, hand-authored SVG example, with no external data source.

JJhonatan Perera

65% match

Loading thumbnail…

Fork of SVG Fundamentals

This example demonstrates fundamental SVG shapes, including overlapping red and green circles, a navy line, and two distinct paths—one with a rounded rectangular curve and another with a straight-edged open path. Rendered directly in HTML via inline SVG markup within an index.html file, the visualization highlights coordinate placement, fill colors, stroke properties, and path command syntax (`M`, `L`, `l`). The code uses no external JavaScript libraries, relying entirely on native SVG elements in the browser.

NNikhil

65% match

Loading thumbnail…

SVG creation setup https://www.w3schools.com/graphics/tryit.asp?filename=trysvg_path

This example demonstrates how to construct a custom two-color logo using SVG path commands within an HTML document. It shows a stylized letterform or geometric design composed of two distinct filled shapes: one rendered in deep blue and the other in red-orange. The setup relies on raw SVG elements and the `path` API with absolute and relative drawing commands, including arcs, lines, and horizontal/vertical segments. Gray guide lines overlay the 16×16 viewBox to illustrate the coordinate grid, making the construction process visible, and the rendering approach uses standard inline SVG without any external libraries.

NN0taN3rd

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

64% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes, showing layered circles and a styled rectangle within a 960-by-500 viewport. It uses plain SVG markup with inline attributes to control fill colors, strokes, and dimensions, including overlapping red and green circles and a yellow rectangle with a thick navy border. The visualization highlights basic vector graphics rendering in the browser without relying on any JavaScript libraries, serving as a static illustration of SVG’s core drawing capabilities.

DDhruva654

64% match