FVG Assignment 1

100%

FVG Assignment 1

✓ Published0🌍 Public

Last edited Sep 1, 2021

Created on Aug 30, 2021

This visualization uses SVG shapes to draw a fall-themed arrangement of pumpkins. Rendered to a 900x500 canvas, it shows three pumpkins in different colors—a large central orange one flanked by two green ones, with smaller wheat-colored pumpkins below. The code works by layering overlapping circles and rectangles, using fills like `chocolate`, `orange`, and `darkolivegreen`, with strokes such as `brown` and `olive` to outline the forms. Path elements create the stems, and opacity controls the background transparency.

AI-generated description

Made some pumpkins because I'm really excited for fall! I started by using the two circles already provided and just started copying them and moving them around. I thought I should maybe try some rectangles as well and tried really hard with the stems - couldn't quite get them. Got the outlining of the circles here:https://www.w3schools.com/graphics/svg_circle.asp I got the colors from this nifty page showing all the possible colors in svg:https://www.december.com/html/spec/colorsvghex.html

MIT Licensed

Similar vizzes

Loading thumbnail…

Pumpkin Part I

A carved pumpkin rendered as an SVG scene uses a darkorange circle for the pumpkin body, layered with black triangular eyes and a curved mouth path. The SVG API draws the shape directly with `<circle>`, `<polygon>`, and `<path>` elements, while `<rect>` shapes mask mouth gaps. The viewer sees a static, front-facing jack-o'-lantern with a black stroke outline, built entirely through inline SVG markup without external libraries.

BBrittany Harden

74% match

Loading thumbnail…

Happy Halloween!

A jack-o'-lantern face appears on a dark background, constructed from SVG shapes including ellipses, polygons, and a path-drawn stem. Geometric features—eyes, nose, and a curved mouth—initially glow yellow, then repeatedly transition to black and back, simulating a flickering candle. The piece uses D3.js v5 for SVG rendering and chained `transition().duration(1000)` calls to animate the color shifts. The pumpkin body, teeth, and stem are statically colored with fills, while the `arc()` function generates the mouth's curved path.

Rryankinsey1

71% match

Loading thumbnail…

DataViz_Creative_Coding

This example generates a Halloween-themed night scene with D3, rendering a starfield of polygons, a pumpkin with a carved face, and a skeleton figure. The visualization uses D3 selections like `selectAll`, `append`, and `join` to draw SVG shapes, including polygons, circles, ellipses, rects, and lines. Star positions come from a hardcoded array, and the pumpkin and skeleton coordinates are computed relative to the container’s width and height. The code applies D3’s data-binding approach to create and update elements on a black background.

Vvigneshs1006@gmail.com

71% match

Loading thumbnail…

Something creative with SVG

This example demonstrates basic SVG shape construction by composing a stylized watermelon from circles, rectangles, and a polygonal path. The visualization uses raw SVG elements—including `<circle>`, `<rect>`, and `<path>`—to layer green rind, red flesh, white highlights, and dark seeds. Rendered directly in the browser via inline SVG within an HTML page, the code sets explicit coordinates and fill colors for each shape, while commented-out elements show unused alternatives like lines and strokes. No external libraries are employed.

Jjwu534@gmail.com

70% match

Loading thumbnail…

Fork of Tweak the Face: Clown Pumpkin

This interactive visualization renders a stylized clown pumpkin using React and D3.js, with SVG output. The pumpkin face is centered on a canvas, featuring a radial gradient fill for the body, a D3 arc path for the mouth, triangular polygons for eyes, and a circular nose. The D3 `arc()` API calculates the mouth’s curved shape, which is then drawn as a path element. The design uses predefined gradient stops for the orange body and red nose, with all geometry positioned relative to the canvas center.

Aantoniojl-kemaro

70% match

Loading thumbnail…

Fork of Tweak the Face: Clown Pumpkin

A clown pumpkin face rendered as an SVG uses radial gradients to color the orange pumpkin body and red nose, with black triangular eyes and an arc-shaped mouth. The visualization is built with React and D3 v7, using the `d3.arc()` constructor to generate the mouth path and declarative JSX for circles and polygons. The centered group translates all shapes to the middle of a 960x500 canvas, while gradient definitions in `<defs>` layer shading for depth.

Tt0miwa22

70% match

Loading thumbnail…

Tweak the Face: Clown Pumpkin

A clown pumpkin face drawn with SVG features a radially gradient-filled orange circle, a red nose, and triangular eyes, all positioned around a central mouth arc. Built with React and D3.js, the visualization uses `d3.arc()` to generate the mouth path, while `<radialGradient>` definitions in SVG provide the shading for the pumpkin body and nose. The code constructs the scene in a React component, rendering shapes directly into an SVG canvas with static coordinates.

BBrittany Harden

70% match

Loading thumbnail…

Dimas_Tweak a Face Assignment

This example combines D3.js and React to construct a stylized pumpkin face, built from layered SVG shapes. It arranges five orange circles to form the pumpkin body, adds a green stem, and uses black polygons for the eyes and nose. The mouth is created with D3's `arc` function, which generates a semicircular path with a specified radius and width. Additional orange rectangles serve as teeth, completing the carved jack-o'-lantern effect. The visualization demonstrates declarative SVG composition within a React component, utilizing `d3.arc` for geometric path generation.

GGeri D.

70% match