Jake - The Dog

Fork of Jake - The Dog

This visualization uses SVG to render a simplified, yellow dog face inspired by Jake from Adventure Time. It draws black and white circular shapes for the eyes, a larger mouth path, and an ellipse for the nose, all positioned within a 960 by 500 viewport. The page relies on basic SVG elements like `circle`, `path`, and `ellipse`, with a solid background color and no JavaScript libraries or data sources.

Hharika-1929

84% match

SSai Hemanth Babu Sunkari

Fork of Fork of Jake - The Dog

This example shows a static, React-rendered smiley face constructed from basic SVG shapes: a yellow circle for the head, red and blue eyes, a green rectangular nose, and a purple elliptical mouth, with an orange line bridging the eyes. The code uses React 16.9 and D3 v5, though D3 is loaded but not actively employed. The entire visualization is defined directly in the HTML via JSX-like SVG elements, with no data binding or interactive behavior. The rendering approach is purely declarative, hard-coded coordinates and dimensions, producing a simple geometric face rather than a data-driven chart.

70% match

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.

69% match

Dog's Image

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.

68% match

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.

Ggaddamthanmayeereddy759@gmail.com

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.

Ssuzzymeetstranger@gmail.com

SVG CAT FACE

This example presents a stylized cat’s face built entirely with SVG shapes. The image shows a circular face, two triangular ears, eyes, a nose, a mouth, and whiskers, all composed from basic geometric primitives. The code draws each element using inline SVG within an `index.html` file, specifying coordinates, fill colors, and stroke properties directly. It renders the vector graphic without any external libraries, relying on the browser’s native SVG support. The accompanying text notes how the ear coordinates were initially incorrect and had to be adjusted collaboratively.

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.