Fork of Smiely Cat Fork

100%

Fork of Smiely Cat Fork

✓ Published0🌍 Public

Last edited Feb 27, 2024

Created on Feb 27, 2024

This example uses D3 v7 to draw a simple dog shape in an SVG canvas. It renders a brown head and body as two overlapping circles, adds black eyes, and a curved mouth path. The code builds the graphic by appending SVG elements—circles for the face, eyes, and body, and a path for the smile—directly to the page. The data is hardcoded within the script, with no external dataset or interactive behavior. The rendering relies solely on SVG attributes like cx, cy, r, and d, demonstrating basic shape composition with D3’s selection and append methods.

AI-generated description

A whole smiley face

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Cat smiley

The visualization displays a cat-faced smiley drawn with SVG shapes, including a circular face, triangular ears, eyes, a nose, a mouth, and whiskers. It uses D3 v7 to append and style each geometric element, such as circles for the face and eyes, and paths for the ears, mouth, and whiskers, with black strokes and white fills. The rendering relies on static SVG attributes set via D3's selection methods, producing a simple, flat cartoon illustration without animation or data-driven updates.

Ppavankrishna441@gmail.com

85% match

Loading thumbnail…

Fork of Create a face with d3.js!

This example uses D3 v7 to draw a cartoon cat entirely from SVG primitives, combining circles, ellipses, lines, and paths to form the body, head, ears, eyes, nose, mouth, whiskers, and tail. Each element is created manually via `document.createElementNS` and appended to an SVG container, avoiding D3 data joins or scales. The static illustration uses fixed pixel coordinates and a gray, black, and pink palette, demonstrating direct SVG manipulation within a minimal HTML and CSS setup.

Hharichandanamone21@gmail.com

84% match

Loading thumbnail…

Fork of Circles with D3

This example shows a simple dog face built from basic SVG shapes, rendered in a 200x200 viewport using D3.js v5. The code draws a brown face circle, two black eye circles, a pink nose, and a curved mouth path generated with the `d3.arc()` API. Each element is appended directly to the SVG container with explicit `cx`, `cy`, and `r` attributes. The visualization demonstrates foundational D3 selection and attribute-setting methods for static, data-free graphics. The mouth uses an arc path transformed into position, while the overall composition relies on hardcoded coordinates rather than scales or data joins.

Ppeddubalaji@gmail.com

84% match

Loading thumbnail…

Fork of Cat smiley

This fork of the Cat smiley example renders a stylized feline face as a static SVG using React and D3 v7. The code defines geometric primitives—circles for the eyes, an ellipses, lines for whiskers, and arc generators for the mouth, eye highlights, and ears—composed within an SVG group centered on the canvas. D3’s `arc()` API constructs the curved mouth and ear paths, while React handles the declarative JSX structure. The visualization demonstrates a purely illustrative use of D3 shape generators rather than data mapping, with colors and stroke widths fixed in the code.

Ppavan0828

84% match

Loading thumbnail…

Fork of Cat smiley

This example uses React and D3 v7 to render a cat-themed smiley face as an SVG. The code constructs the face from basic shapes: a pink circle for the head with a purple border, red eyes with white highlights, an orange ellipse nose, and a black mouth drawn using D3’s `arc` generator. Additional D3 `arc` paths create white eye crescents and purple ears, while colored lines suggest whiskers. All elements are positioned with explicit coordinates and transforms, with no external data source, purely illustrating geometric composition and D3 arc-based path generation.

SShishiraRudrabhatla

84% match

Loading thumbnail…

Fork of Cat smiley

A fork of the classic "Cat smiley" example renders a cartoon cat face with multiple SVG shapes. The visualization uses React to structure the component and d3.arc to generate paths for the cat's mouth, eyes, and ears. The face is drawn with circles, ellipses, and lines, all positioned using inline SVG attributes within a single `<svg>` element. The example demonstrates combining React's declarative rendering with D3's geometry helpers to create a static, stylized graphic on a fixed 850×455 canvas.

Mmadipadiga.raviteja@gmail.com

84% match

Loading thumbnail…

Fork of Cat smiley

This example renders a stylized cat smiley face using React and SVG, with all shapes drawn through D3’s `arc()` generator for the mouth, eyes, and ears. The face consists of layered circles, ellipses, and colored lines that form whiskers, eyebrows, and pupils, all composed with hard-coded coordinates and transforms. The code imports React, ReactDOM, and D3’s `arc` API, and uses SVG elements like `<path>`, `<circle>`, and `<ellipse>` to construct the static illustration. No interactive behavior or data binding is included; the visualization is purely a declarative graphic built from fixed geometry.

CCHANDU BHARGAVI

83% match

Loading thumbnail…

Fork of Circles with D3

This example uses D3 to draw a stylized dog entirely from SVG primitives, with each body part—body, head, ears, eyes, nose, and legs—created as a distinct circle, ellipse, or rectangle. The code computes all positions relative to the container’s width and height, so the dog scales with the viewport. It relies on D3’s `select` and `join` methods to append the SVG canvas and shapes, while hardcoded fill colors define the brown body, white eyes, and black nose. The result is a simple, non-interactive illustration that demonstrates manual coordinate placement and shape composition without data binding or animation.

BBelede Rahul

83% match