Skip to main content
SimilarExport ZIP
100%

Dog's Image

✓ Published0🌍 Public
BBelede Rahul
Last edited Feb 27, 2024
Created on Feb 27, 2024

A cartoon dog is drawn on a light green background with grass, created entirely through D3.js DOM manipulation. The example builds SVG elements—including circles for the head, body, and eyes, ellipses for ears, rectangles for legs, and paths for the tail and mouth—using plain JavaScript `document.createElementNS` and `setAttribute` calls, without any data binding or transitions. The dog is static, showing a smiling face with a small nose and curved mouth. This demonstrates how to construct a vector illustration from scratch by directly manipulating the DOM.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

Loading thumbnail…

Image

This example uses D3.js v7 to draw a simple cartoon dog from geometric shapes defined in an external JSON file. The visualization shows a brown dog with a circular body and head, floppy elliptical ears, white eyes, a black nose, and a curved mouth line, all positioned within a 400x400 SVG canvas. The code loads the shape coordinates and colors from the JSON data using `d3.json`, then appends SVG elements—including `circle`, `ellipse`, and `path`—to render each part of the dog. The mouth is drawn as a path with a stroke, while the remaining features use filled shapes, demonstrating a straightforward declarative approach to building vector graphics with data-driven attributes.

BBelede Rahul
85% match
Loading thumbnail…

Dog Image

This example renders a stylized dog face in a web page using React and D3.js, drawing the entire illustration with SVG elements. The visualization shows a silver elliptical head with brown ears, eyes, a black nose, whiskers, and a curved mouth, all composed of geometric primitives and arc paths. The code constructs the mouth, eyes, and ears using D3’s `arc()` generator, while React manages the component structure and rendering. The page loads React 17 and D3 v7 from CDNs, and the final image is produced entirely via SVG, with no external data—the design is hand-coded rather than data-driven.

BBelede Rahul
81% match
Loading thumbnail…

Fork of Fork of Circles with D3

This example shows a simple cartoon dog built entirely from basic geometric shapes, with a brown body, head, ears, legs, and a face featuring eyes and a nose. It demonstrates how to draw scalable vector graphics using D3.js selections and SVG elements. The code in index.js uses the `select` function and `append` methods to create circles, ellipses, and rectangles, positioning them relative to the container’s width and height. The visualization is rendered in a Svelte component, with a static gray background and no interactive behavior, serving as a foundational template for creative shape-based drawing.

BBelede Rahul
78% 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
77% match
Loading thumbnail…

11650230

A smiling animal face built from D3.js SVG shapes demonstrates basic DOM manipulation. The example constructs the figure using circles and lines for features like eyes, pupils, ears, whiskers, and a nose, all positioned with the `attr` method. It uses `d3.select` to append elements to an SVG canvas. No data or interactivity is present; the sketch is static, showing only how D3 can create and style primitive vector shapes.

Ppethavenu
75% match
Loading thumbnail…

Fork of Fork of Fork of Dog graphics using Figma design. Used bezier curve.

This visualization displays a cartoon dog named "Rock" constructed entirely from SVG shapes, primarily using a single bezier curve path for the body and circles for the eyes and nose. The graphic is rendered through raw SVG elements defined in an HTML file, with a sky-blue background and decorative accessories like stars, a collar, and pink shapes. The figure shows the dog's head and torso with ears and facial features, all built using basic geometric primitives and path data. The code uses no external JavaScript libraries, relying solely on native SVG markup and CSS styling for presentation.

Ggaddamthanmayeereddy759@gmail.com
73% match
Loading thumbnail…

Fork of Fork of Dog graphics using Figma design. Used bezier curve.

This graphic shows a simple, stylized dog face built from basic geometric shapes. It depicts the dog’s head, eyes, nose, mouth, ears, and eyebrows using circles, ellipses, rectangles, and quadratic bezier curves. The visualization is created with D3.js version 7, which selects the SVG canvas and appends each shape using methods like `append` and `attr`. The dog’s mouth and ears are drawn using SVG path data with quadratic bezier commands, while the face and features use hardcoded coordinates. The design originates from a Figma mockup, and the code directly reproduces that static layout in the browser.

Ppavankrishna441@gmail.com
73% match
Loading thumbnail…

Fork of a Dog!!

A fork of the classic example, this visualization uses raw SVG (Scalable Vector Graphics) shapes defined directly in an HTML file to draw a simple, static dog face. The code constructs geometric primitives—circles for the head, eyes, pupils, and nose, and path elements for the ears and mouth—all hard-coded with specific coordinates and styling attributes like `fill` and `stroke`. No external data or libraries are involved; the minimal markup relies on default browser rendering of SVG elements within a fixed-width canvas.

NNanditha Reddy
73% match