Fork of Let's Make a Face Part I

100%

Fork of Let's Make a Face Part I

✓ Published0🌍 Public

Last edited Mar 23, 2021

Created on Mar 23, 2021

This example demonstrates a minimal, oversized circle drawn as the first step toward constructing a smiley face, with a static "hello" label placed below it. The SVG’s width is fixed at 500 units while its height is set to 50, causing the circle’s radius of 245 to overflow the viewport and render as a partial arc. The page uses an inline `<svg>` element with a `<circle>` tag, no JavaScript libraries or data sources, and CSS to hide body margins and scrollbars. The rendering approach is plain SVG without D3.

AI-generated description

Half way towards a smiley face.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a static smiley face drawn with two outer circles and two eye circles, built from raw SVG markup inside an HTML page. The face is centered on a 960 by 500 canvas, with a yellow head stroked in black and two smaller black circles for eyes. The code uses no JavaScript libraries or D3 APIs; instead, it relies entirely on inline `<circle>` elements and SVG attributes like `cx`, `cy`, `r`, `fill`, and `stroke`. The rendering approach is direct SVG, with the page styled to hide margins and overflow.

MmwellsSFMC

92% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple, static smiley face constructed from three SVG circles: a large yellow head with a black outline, and two smaller black eyes positioned symmetrically on either side of the center. The face is hardcoded in an HTML file using raw SVG elements with explicit coordinates and attributes, setting the head radius to 245 and the eye radii to 50. No JavaScript libraries or data sources are involved; the rendering relies entirely on the browser’s built-in SVG support provided by the `svg` element and its `circle` children. The page’s CSS hides margins and overflow to display the face cleanly.

IIRSPI

92% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a static partially completed smiley face drawn with SVG primitives. A large yellow circle with a black stroke forms the head, while two smaller unfilled circles represent the eyes. The code uses raw SVG elements—`<circle>` tags with explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes—inside an inline `<svg>` block. No JavaScript libraries are employed; the rendering is purely declarative SVG markup, positioned within a 960×500 viewport.

Jjam9501

92% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows the first step in constructing a smiley face, with a large yellow circle and two smaller circles for eyes. The SVG is drawn statically using raw SVG elements like `<circle>`, with attributes for position, radius, fill, and stroke. Its dimensions are set to 960 by 500 pixels. The code does not incorporate any JavaScript libraries or dynamic behaviors, relying entirely on declarative SVG markup to render the shapes.

Aaj507575

92% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example draws a simple smiley face using SVG primitives inside an HTML page. It shows a large yellow circle with a thick black stroke as the face, alongside two smaller black circles positioned for the eyes. The code directly constructs the `<circle>` elements within a 960-by-500 SVG canvas, using explicit `cx`, `cy`, and `r` attributes to place each shape. No JavaScript libraries are used; the rendering relies solely on static SVG markup.

MMatthewNunes

92% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a static smiley face built from three SVG circles: a large yellow head with a black outline and two smaller black eyes. The head is centered at (480, 250) with a radius of 245, while the eyes are positioned at (350, 180) and (600, 180) with a radius of 50. The code uses raw SVG elements—`circle` tags with attributes for position, fill, stroke, and stroke-width—rather than a library like D3. The page is styled with minimal CSS to remove margins and hide overflow, and the face represents “halfway” progress toward a more complex face.

RRoshan Kumar

92% match

Loading thumbnail…

Fork of Let's Make a Face Part I

RRoshan Kumar

92% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a simple smiley face constructed from three SVG circles: a large yellow head and two smaller eyes. The face is centered in an SVG canvas, drawn with a black stroke. The code uses basic SVG elements (`circle` tags) within a manually authored `svg` markup, with inline styling for body margins and overflow. No JavaScript libraries or data sources are involved; the visualization is purely declarative HTML/SVG, as seen in the static `index.html` file.

Oognyvrac

92% match