faliblemanica@gmail.com

@calih85·8 public vizzes

Smiley Face Part 6

A grid of eighteen procedurally generated smiley faces, each a yellow SVG circle with varying stroke widths, eye placements, blush radii, and mouth arcs. The faces are rendered in React using SVG primitives, with each component accepting parameters to diversify the facial features. The smile is drawn using the `d3.arc` generator from the d3 library, which creates a curved path for the mouth.

Sep 3, 2025

Loading thumbnail…

Smiley Face Part 5

This example shows a smiley face composed of SVG shapes, centered on a responsive full-window canvas. A yellow background circle forms the head, with two black eyes, pink blush accents, and a curved smile arc. The face is built from React components, including `BackgroundCircle`, `Eyes`, and `Mouth`, with the smile generated using D3’s `arc` function. The layout is centered via a translated SVG group, and all dimensions are computed from the window size.

Sep 3, 2025

Loading thumbnail…

Smiley Face Part 4

This example shows a vector smiley face that scales to fill the entire browser window. The face, with its yellow circular head, black eyes, pink translucent blush, and a curved smile, is drawn using SVG shapes. The code uses React to structure the SVG elements and the D3.js `arc` generator to create the smile's path. The face is perfectly centered and resizes based on the window's dimensions. Rendering is handled directly through React's `ReactDOM.render` method, and all elements are created as SVG primitives.

Sep 3, 2025

Loading thumbnail…

Smiley Face Part III

A yellow smiley face is rendered dynamically to fill the browser window, with its size and position computed from the viewport dimensions. The face consists of SVG circles for the head and eyes, plus a mouth drawn as an arc path. Built with React and D3, the code uses D3's `arc()` generator to create the mouth, while React manages the SVG element hierarchy and prop-based styling, including stroke width and offsets.

Sep 3, 2025

Loading thumbnail…

Smiley Face Part III

This example shows a yellow smiley face rendered as a full-window SVG graphic. The face consists of a large yellow circle for the head with a black stroke, and two smaller black circles positioned as eyes; the mouth is absent despite the title. The React application calculates the viewport dimensions and centers the face using a transformed group. It uses the React and ReactDOM libraries to render SVG elements directly into the page, with positioning computed from window size.

Sep 3, 2025

Loading thumbnail…

Smiley Face Part II

This is a React application that renders a full-screen SVG smiley face, positioned at the center of the browser window. The face consists of a yellow circle with a black outline, two black eye circles, and an implied mouth area, all drawn using SVG `circle` elements. The code leverages the React and ReactDOM libraries, using a functional component and the `ReactDOM.render` method to mount the visualization. The circle positions and sizes are computed programmatically from `window.innerWidth` and `window.innerHeight`, with the face's radius and features scaling relative to the viewport's height.

Sep 3, 2025

Loading thumbnail…

Smiley Face Part I

A minimal SVG drawing depicts a yellow circle with a black outline, accompanied by two smaller unfilled circles positioned inside it, forming a simple smiley face. The code constructs these shapes using the SVG `<circle>` element with explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes. The larger circle is centered at (480, 250) with a radius of 245, while the smaller circles represent the eyes. The example demonstrates basic vector shape creation without external libraries or data processing.

Sep 3, 2025

Loading thumbnail…

Fork of HTML Starter

This example shows a simple, static smiley face rendered as yellow circles with black outlines on a white background. The face includes two smaller circles for eyes and an open mouth shape, all positioned within a 960 by 500 SVG canvas. The visualization uses plain SVG elements—`circle`—with fixed coordinates and styling defined directly in the HTML file. It does not rely on any JavaScript libraries or data sources, as the entire rendering is hard-coded in the markup.

Sep 3, 2025