Skip to main content
SimilarExport ZIP
100%

Hamburger combo

✓ Published0🌍 Public
RRuofan Chen
Last edited Sep 28, 2021
Created on Sep 3, 2021
Forked from HTML Starter

A static SVG illustration of a hamburger and a soft drink, composed of a small set of geometric primitives. The drawing uses colored rectangles, Bézier curves, and arcs to build the burger’s layered ingredients—bun, meat, tomato, sausage, cheese, and lettuce—plus a red bottle with a straw and cap. All shapes are hardcoded via SVG path and rect elements, with colors and strokes defined directly in the markup.

AI-generated description

SVG practice: a hamburger and a coke

One of my favoraite food!

MIT Licensed

Similar vizzes

Loading thumbnail…

Something creative with SVG

This example demonstrates basic SVG shape construction by composing a stylized watermelon from circles, rectangles, and a polygonal path. The visualization uses raw SVG elements—including `<circle>`, `<rect>`, and `<path>`—to layer green rind, red flesh, white highlights, and dark seeds. Rendered directly in the browser via inline SVG within an HTML page, the code sets explicit coordinates and fill colors for each shape, while commented-out elements show unused alternatives like lines and strokes. No external libraries are employed.

Jjwu534@gmail.com
68% match
Loading thumbnail…

SVG Shapes Dude

A simple, static SVG composition displays overlapping geometric shapes: a large red-stroked blue circle, two yellow rectangles, a red diagonal line, and a white triangular path with rounded joins. The visualization relies entirely on raw SVG elements—circle, rect, line, and path—with stroke and fill attributes set directly in the markup. The embedded CSS file only styles a text class and is unused for the shapes. No JavaScript or data is involved; the rendering approach is purely declarative SVG within an HTML page.

Aarontha
68% match
Loading thumbnail…

Example

This example demonstrates a static composition of basic geometric shapes rendered as SVG, including green, blue, and red circles, a black-bordered rectangle, a thick navy line, and a single path. The visualization uses raw SVG elements defined directly in the HTML, without any JavaScript libraries or data-binding frameworks. CSS applies a 3000-millisecond transition to the rectangles’ stroke properties, though no animated changes are triggered dynamically. The layout is fixed within a 960-by-500 viewport, with a large margin around the canvas, emphasizing the simple arrangement of shapes over data-driven content.

Ssz2036
66% match
Loading thumbnail…

Hola

This example displays a static SVG composition featuring a blue-outlined rectangle, a black circle, and a red diagonal line on a 1200 by 900 canvas. The single HTML file uses inline CSS and JavaScript-free markup to position each shape. The SVG is drawn directly in the document, with the rectangle’s stroke-width set to 20 and the line defined from the origin to the point (100,100). It demonstrates basic vector graphics rendering in a bare-bones web page.

DDavid Alarcón
65% match
Loading thumbnail…

Hello VizHub

A hand-coded SVG composition demonstrates basic geometric shapes, paths, and styling without external libraries. The code arranges circles and rectangles in nested groups, applies a blue stroke via a CSS class to lines and paths, and uses a semi-transparent red fill for the path. All rendering is done directly through SVG elements and attributes, with CSS controlling presentation.

Vvladvaculin
64% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes—circles, rectangles, and lines—rendered directly in a 960×500 viewport. The code uses plain SVG elements (circle, rect, line) with various stroke and fill attributes, including a series of tall black rectangles that form a vertical bar-like composition. The rendering approach is static SVG markup embedded in HTML, with no JavaScript libraries or data-binding logic involved. It serves as a basic illustration of how SVG geometry and styling work without additional abstraction layers.

EEd Smale
64% match
Loading thumbnail…

Art

This example demonstrates a static composition of SVG shapes, including overlapping red and green circles, a diagonal line, and two path elements. The rendering uses raw SVG syntax directly in an HTML document, with inline CSS setting the page margin to zero and hiding overflow. The artwork is generated through explicit coordinate attributes such as `cx`, `cy`, and `d` for paths, and includes a commented-out rectangle to show alternative shapes. The piece explores layering and stroke styling without any interactive or animated behavior.

Aaidarshafeev1@gmail.com
64% match
Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes and CSS style rules combine to create a static, colorful composition. It shows circles, rectangles, lines, and a path, with fill colors applied directly via attributes or inherited from group elements. The rendering uses plain SVG elements inside an HTML file, with CSS classes in an external stylesheet controlling stroke appearance, such as width, color, and line join for the path. The code also relies on SVG transform attributes to scale and translate the entire graphic.

SSamuel Elbaz
64% match