Skip to main content
SimilarExport ZIP
100%

JH1

✓ Published1🌍 Public
JJosh-Hawley
Last edited May 17, 2022
Created on May 17, 2022

This example uses hand-coded SVG elements to draw a simple, static face. It shows a large yellow circle for the head, with two smaller black circles positioned as eyes. The SVG is defined directly in the HTML with explicit `cx`, `cy`, and `r` attributes, and CSS sets the page margins to zero with hidden overflow. The rendering relies solely on native SVG markup, with no JavaScript libraries or data sources involved.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

Create_A_Face_1

A simple hand-coded SVG face drawn with circular elements forms the core of this example. The primary circle, rendered in yellow with a thick black stroke, represents the head, while additional circle elements are intended for facial features. The code uses raw SVG markup within an HTML page, defining shapes with attributes like `cx`, `cy`, and `r` for positioning and radius. The rendering is static, with no JavaScript libraries or data binding involved, relying solely on SVG's native drawing capabilities to construct the visual.

Hhamburger21
86% match
Loading thumbnail…

Hello HTML

This example displays a simple, static SVG face composed of a yellow circle for the head and two smaller black circles for eyes. The page uses raw HTML and inline styling, with no external JavaScript libraries. Rendering is achieved through SVG elements defined directly in the markup, including circle attributes for radius, position, fill, and stroke. The visualization demonstrates how basic geometric shapes can be combined to form a recognizable figure within an HTML document.

AAngelo Martínez
85% match
Loading thumbnail…

JH2

This example displays a simple, static SVG graphic of a yellow circle with a black outline, accompanied by two smaller unfilled circles positioned symmetrically above it. The visualization demonstrates basic SVG shape rendering, using `<circle>` elements with attributes for center coordinates, radius, fill, and stroke. The code imports React and ReactDOM from CDN via `unpkg`, though the rendering is handled directly through handwritten SVG in the HTML body rather than through React's component system. The page layout uses CSS to remove margins and hide overflow, creating a clean canvas for the shapes.

JJosh-Hawley
85% match
Loading thumbnail…

Hello HTML 1

This example shows a simple yellow face created with basic SVG shapes, including a large circle for the head and two smaller circles for eyes, all outlined in black. The page uses handwritten HTML and inline SVG elements, with a minimal CSS rule that removes margins and hides overflow. The code relies on standard SVG `<circle>` elements with explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes, rendered directly in the browser without any JavaScript libraries or data sources.

Aanaluciarivas
84% match
Loading thumbnail…

Josh Hello HTML

A single yellow circle with a thick black outline sits centered on an otherwise blank SVG canvas, flanked by two smaller unfilled circles that suggest eyes. The composition reads as a simple, static face built entirely from basic SVG shapes. The code defines an inline SVG element with explicit pixel dimensions and positions each circle using fixed `cx` and `cy` attributes, with no JavaScript or external libraries involved. The rendering relies purely on declarative SVG markup within an HTML page.

SSireniac
83% match
Loading thumbnail…

Hello HTML face

A simple SVG face drawn with three circles on a yellow background, illustrating fundamental HTML and SVG markup. The example uses raw SVG elements—a large yellow circle for the head and two smaller black circles for eyes—positioned via explicit `cx` and `cy` coordinates within an inline `<svg>` tag. No JavaScript or external libraries are employed; the rendering relies entirely on static SVG shapes embedded directly in the HTML document.

CCamiloGuevara19
83% match
Loading thumbnail…

Lets make a face

This example shows a simple, hand-coded SVG face with a large yellow circular head and two smaller black eyes positioned symmetrically. It renders entirely through static SVG elements—a head circle with a black stroke and two eye circles—without any interactivity or animation. The code uses raw SVG markup inside an HTML file, setting geometric attributes like `r`, `cx`, and `cy` directly, with no JavaScript libraries or data sources involved. The face is halfway to a smiley, lacking a mouth or other features.

Kkeitheade
83% match
Loading thumbnail…

Hello HTML

This example demonstrates a minimal HTML page that renders a static SVG face created from two circles, with a yellow outline and simple facial features. The page uses raw SVG elements inside an HTML document, with CSS styling to hide margins and overflow. The code relies on native browser APIs for SVG rendering and HTML parsing, with no external JavaScript libraries or data sources. The visualization focuses on basic geometric composition rather than interactive or data-driven behavior.

Aaggarwalc
83% match