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 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 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

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

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

Fork of Let's Make a Face Part I

A static SVG smiley face drawn with three circles: a yellow outer head with a black stroke, and two smaller black eyes positioned symmetrically around the center. The page uses raw SVG elements inside an HTML document, with explicit pixel coordinates for the circles’ centers and radii. The head is centered at (480, 250) on a 960×500 canvas, while the eyes sit at (350, 180) and (600, 180), leaving room for a future mouth. No JavaScript or D3 APIs are used; this is a plain markup example.

Ppalak124

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 builds a static smiley face from primitive SVG shapes, showing a yellow circle head with two smaller dark circles for eyes. The code uses inline SVG elements—`<circle>` tags—within an HTML document and relies on basic SVG styling attributes like `fill` and `stroke`. The face is centered on a 960 by 500 canvas, with fixed pixel coordinates placing the eyes symmetrically around the center. No JavaScript libraries or interaction are used; the visual is purely declarative markup.

GGerhard

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