Jessica Burns (@Astayonix), VizHub

Smile 😃:Exploring the SVG Canvas (Now with React.js AND D3.js!)

A smiling face with yellow background, black outlined eyes, a dark mouth, and white eye shines is rendered five times using React components that produce SVG elements. The example demonstrates combining React.js for component-based UI structure with D3.js for drawing the mouth arc via `d3.arc`. Each face is built from reusable elements like `BackgroundCircle`, `Eyes`, and `Mouth`, positioned through a `FaceContainer` that translates the SVG group. SVG filters add a Gaussian blur and offset for a soft shadow effect.

Jun 2, 2020

Loading thumbnail…

Smile 😃:Exploring the SVG Canvas (Now with React.js AND D3.js!)

This example shows a smiling face composed of SVG shapes—a yellow circle, black eyes, white eye shines, and an arc-based mouth—rendered across a responsive canvas. The face is built from React components, including `BackgroundCircle`, `Eyes`, `EyeShine`, and `Mouth`, which pass numeric props like radii and offsets. D3’s `arc()` function generates the mouth path, while an SVG `<filter>` applies blur and offset effects to the background. React mounts the composition to the DOM, and D3 v5 handles the geometric arc calculation.

May 29, 2020

Loading thumbnail…

Smile 😃:Exploring the SVG Canvas (Now with React.js AND D3.js!)

This example shows a smiling face composed of SVG shapes—a yellow circle, black eyes, white eye shines, and an arc-based mouth—rendered across a responsive canvas. The face is built from React components, including `BackgroundCircle`, `Eyes`, `EyeShine`, and `Mouth`, which pass numeric props like radii and offsets. D3’s `arc()` function generates the mouth path, while an SVG `<filter>` applies blur and offset effects to the background. React mounts the composition to the DOM, and D3 v5 handles the geometric arc calculation.

May 29, 2020

Loading thumbnail…

Smile 😃:Exploring the SVG Canvas (Now with React.js AND D3.js!)

A smiling face rendered as an SVG canvas uses React.js to structure the graphic and D3.js to generate the mouth arc. The composition employs D3's `arc` API to define the mouth's radius and angles, while various SVG shapes—including circles, ellipses, and paths—construct the face with a yellow head, black eyes, and white shine highlights. A Gaussian blur filter adds a soft shadow effect, and the entire graphic is generated declaratively within a React component.

May 27, 2020

Loading thumbnail…

Smile 😀:Exploring the SVG Canvas (Now with React.js!)

This example shows a stylized smiley face composed of SVG primitives—a pink circle, two colored ellipses for eyes, and a red quadratic curve for the mouth—rendered on a 960×500 canvas. The code uses React.js to define the SVG elements as JSX, with ReactDOM rendering the component into the root div. Hardcoded coordinates and stroke widths create the face, demonstrating how React updates SVG attributes declaratively while leveraging the vector-based, lossless scaling properties of SVG.

May 25, 2020

Loading thumbnail…

Smile 😀: Exploring the SVG Canvas!

This example demonstrates a simple SVG smiley face constructed with basic geometric shapes. It shows how SVG elements—a pink circle for the head, green and blue ellipses for the eyes, and a brown path with an M and Q command for the mouth—can combine to form a recognizable illustration. The code uses plain SVG markup within an HTML document, referencing no external JavaScript libraries. Styling is applied via attributes like `fill`, `stroke`, and `stroke-width`, with the canvas defined by a 960x500 coordinate system. The project highlights SVG’s vector rendering approach, ensuring scalable, non-pixelated output.

May 25, 2020