Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Smiley face custom

Public visualization

Viewing a saved revision (read-only)

526ec1c17ec94d6fb60923422d6cf11e

Smiley face custom

1 star0🌍 Public
HHollyClarke19
Last edited Dec 10, 2020
Created on Dec 9, 2020

This example renders a classic yellow smiley face with custom details, including pink blurred blush ellipses and white eye highlights. Using React components and SVG, it centers a yellow circle with a black stroke, two black eyes, and a mouth drawn as an arc. The code leverages D3’s `arc` generator to create the mouth path, while SVG filters like `feGaussianBlur` apply the blush effect. All shapes are positioned via static coordinates within a responsive SVG canvas, with no interactive or data-driven behavior.

AI-generated description

Smiley face using HTML, CSS, SVG, React and D3 (with cute added blush)