Fork of Let's Make a Face Part I

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

Fork of Let's Make a Face Part I

RRoshan Kumar

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

Fork of Let's Make a Face Part I

Three static SVG shapes form a simple smiley face: a yellow circle with a thick black stroke for the head and two smaller black circles for eyes. The head is centered at 480, 250 with a radius of 245, while the eyes are placed symmetrically at 350 and 600 on the x-axis. The example uses raw SVG elements—`circle` and attributes like `cx`, `cy`, `r`, `fill`, and `stroke-width`—without any JavaScript libraries or data binding. The face remains incomplete, showing only the head and eyes, with no mouth or other features rendered.

Aaashrithd4

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

Fork of Let's Make a Face Part I

This example shows a static smiley face constructed with three SVG circles: a large yellow head with a black outline, and two smaller unfilled eyes. The code uses plain SVG elements inside an HTML page, with coordinates and stroke widths positioned explicitly via the `cx`, `cy`, `r`, and `stroke-width` attributes. No JavaScript libraries or D3 APIs are required; the rendering depends entirely on the browser’s native SVG support. The data is hard-coded in the markup, and the visual output is a simple, geometric face that stops halfway toward a smile.

MMaria

Fork of Fork of Let's Make a Face Part I

This example shows a static smiley face built from three basic SVG shapes: two eyes and a head drawn with circles. The code uses raw SVG elements via D3 v3 syntax, though it relies on plain HTML markup rather than D3 data joins. The face is centered within an SVG canvas sized 960 by 500 pixels, with the head filled yellow and outlined in black, while the eyes remain unfilled. The rendering approach is simple declarative SVG, with positions explicitly set as pixel coordinates for each circle.

990561lkk

Fork of Let's Make a Face Part I

This example shows a simple, static smiley face constructed from three SVG circles on a yellow face, with two black eye circles positioned on either side of the center. The face is drawn using raw SVG elements—a yellow `<circle>` with a black stroke, and two unfilled `<circle>` elements for the eyes—all laid out on a 960-by-500 canvas. No JavaScript libraries or animation logic are present; the effect relies entirely on the SVG markup and CSS resets to remove page margins. The rendering is purely vector-based, with coordinates hard-coded into the HTML file.

SSebastian Ruggero