American Express

100%

American Express

✓ Published0🌍 Public

Last edited May 3, 2023

Created on May 3, 2023

This example displays the American Express logo as a single smooth vector path, drawn with a thick black stroke on a transparent background. The graphic is rendered inside an SVG element using the `viewBox` attribute, with the path coordinates defined explicitly in the markup. It relies solely on basic SVG structure and CSS, without JavaScript or external libraries, to present the stylized geometric shape in a static format.

AI-generated description

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

Similar vizzes

Loading thumbnail…

mastercard

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.

AAlexei Kozhushkov

63% match

Loading thumbnail…

SVG

This example demonstrates layering SVG elements—circles, rectangles, lines, and paths—on a 960x500 canvas, with a large background rect, a horizontal rule, and a complex text path rendered as a filled path. It shows how React integrates with SVG for declarative shape composition, using inline attributes for positioning and styling. The code includes path data for a stylized character and additional white rects, illustrating basic geometric placement without external libraries.

KKj

62% match

Loading thumbnail…

SVG

This example demonstrates basic SVG shapes—circles, a rectangle, and a path—rendered in black with red strokes or red with black strokes on a 960 by 500 canvas. The HTML page embeds an inline SVG element directly, using the `circle`, `rect`, and `path` elements with attributes like `cx`, `cy`, `r`, `x`, `y`, `width`, `height`, and `d` to define geometry and styling. No JavaScript libraries are involved; the visualization relies purely on SVG markup and CSS presentation.

LLachlanJohnstone

62% match

Loading thumbnail…

SVG shapes

This example demonstrates basic SVG shape rendering in a React visualization, showing circles, rectangles, lines, and a path. The shapes appear in three groups, with the first two displaying default and explicit fill colors, while the third uses a combined fill and stroke style. The line and path elements use a CSS class to apply black strokes with rounded joins. The SVG is scaled by 1.5 and uses inline transformation attributes like `translate` to position groups, with rendering handled directly through SVG markup rather than a charting library.

CChinzorigt Ganbat

62% match

Loading thumbnail…

SVG with CSS

This example shows how CSS can style SVG shapes, with a mix of default black fills and custom colors applied directly or via classes. It renders circles, rectangles, a line, and a path inside a scaled and translated group. The code uses raw SVG elements in an HTML page, with linked CSS rules that set stroke width, color, and line joins for the `.lines` class. Specific shapes are colored individually using `fill` attributes, while group-level styles inherit to child elements.

Uusamakhanswati

62% match

Loading thumbnail…

SVG

This example showcases fundamental SVG shapes in a minimal React and CSS context. The visualization presents a green circle scaled up, a yellow rectangle with a black stroke translated downward on the canvas, and a set of black lines and a path with a rounded blue stroke. The code uses SVG elements like `circle`, `rect`, `line`, and `path` within an `svg` container, applying CSS classes and inline transformations for positioning and styling.

Eeman1718

61% match

Loading thumbnail…

SVG with CSS

This example shows how CSS classes and inline attributes style SVG shapes—a yellow circle, a red rectangle, and a polyline path—within a scaled group and a separate lines group. The HTML page links an external stylesheet to define stroke color, width, and line joins for the path, while the SVG element uses transform scaling. It uses no JavaScript libraries, relying purely on static SVG markup and CSS styling to demonstrate basic vector graphics rendering in a browser.

MMaaz Khaled

61% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes on a blank 960-by-500 canvas, including circles, rectangles, lines, and a path. The code uses plain SVG elements with React, setting attributes such as `cx`, `cy`, `r`, `fill`, `stroke`, and `stroke-width` directly in JSX. It shows how to style shapes with colors and outlines, including a dashed path connecting coordinates. No external libraries beyond React are used, and the rendering relies entirely on SVG's native vector graphics.

VVineet

61% match