Fork of #Utrecht2024 TASK: SVG

100%

Fork of #Utrecht2024 TASK: SVG

✓ Published0🌍 Public

Last edited Jul 1, 2024

Created on Jul 1, 2024

Forked from #Utrecht2024 TASK: SVG

This fork of the Utrecht 2024 task renders a simple smiley face inside a 500 by 500 SVG canvas. The face is constructed from primitive shapes—two eyes with pupils, eyelashes, a nose, and red lips—all drawn using SVG `circle`, `line`, `path`, and `g` elements. A `transform` attribute groups and scales the facial features, while a lightblue border and rounded corners frame the canvas. The Svelte component, named `App.svelte`, uses no external data or D3 library, relying purely on static SVG markup and CSS for layout.

AI-generated description

Task

Draw a smiley with SVG.

Or try to reproduce the following, probably familiar, image by Dick Bruna.

Or this one by Marlow Moss (exhibited in the Centraal Museum, Utrecht).

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of #Utrecht2024 TASK: SVG

A smiling face is rendered as a static SVG composition, depicting two eyes, a curved mouth, and two rotated, mirrored pink shapes that suggest hair or decorative elements on a blank canvas. The visualization is built using the Svelte framework and relies on the SVG specification for its vector graphics output. The code defines the shapes using SVG elements like `<circle>`, `<path>`, and `<g>` with specific `d` attributes for the paths, and it uses `transform` attributes to rotate and translate the decorative components around a central point.

Kk.hurskaya@gmail.com

90% match

Loading thumbnail…

Fork of #Utrecht2024 TASK: SVG

This example renders a blank SVG canvas with a light blue border, ready for drawing a smiley face or reproducing artworks inspired by Dick Bruna or Marlow Moss. The code uses Svelte's component structure with a minimal `<script>` tag and an empty `<svg>` element sized at 500x500 pixels. Styling centers the SVG on the page with flexbox and applies a rounded border. While the visualization currently displays no graphical content, it demonstrates a basic Svelte setup for SVG-based drawing tasks, with d3 available as a dependency.

SSebastian Graeff

89% match

Loading thumbnail…

SaraMaria - Fork of #Utrecht2024 TASK: SVG

A smiley face rendered in SVG features two brown circles with white highlights as eyes, while a red bezier curve beneath them animates between a curved smile and a single point, creating a winking effect. The Svelte component draws directly in the SVG markup, with the path’s animation driven by SMIL’s `<animate>` element, cycling through the `d` attribute values. The simple composition uses basic shapes and a looping transition.

Ssam.jumphouses@gmail.com

86% match

Loading thumbnail…

Fork of #Utrecht2024 TASK: SVG

This example presents a minimalist abstract composition inspired by the works of Dick Bruna and Marlow Moss, featuring black-outlined rectangles, a blue square, a black rectangle, and a central yellow square arranged on a white canvas. Rendered as a static SVG using Svelte, the code defines geometric shapes with `<rect>` elements, applying translations and explicit coordinate attributes to position each form precisely. The visualization demonstrates how basic vector primitives can construct a balanced, color-blocked image without interactivity or data binding.

Kkatha.hofbauer@t-online.de

80% match

Loading thumbnail…

Fork of homework smiley face

This SVG visualization shows a stylized smiley face centered on a 960-by-500 canvas. The face is constructed from a large circle for the head, two smaller circles for eyes with green and purple pupils, and an arc for the mouth. Additional line elements form eyebrows and short hair-like strokes at the top, all rendered with heavy black strokes. Built with React and D3 v7, the code uses the `arc()` API to generate the mouth path and relies on SVG primitives for all shapes, with the entire composition translated to the canvas center via a `transform` group.

SSaiSree0122

79% match

Loading thumbnail…

Fork of Fork of Let's Make a Face Part I

This visualization presents a simple smiley face built from three SVG circles: a large yellow face with a black stroke, and two smaller black eyes. The code uses raw SVG elements within an HTML page, setting coordinates and radii explicitly rather than through a data-binding library. The rendering approach is direct and static, with no animation or interaction. The title references the "Let's Make a Face" exercise, and the current composition stops at the eyes, leaving the mouth for a later part. All styling is inline, and the viewport is fixed at 960 by 500 pixels.

KKusumaKumariDama@my.unt.edu

79% match

Loading thumbnail…

Fork of Fork of Smiling face

This example draws a stylized smiley face with ears, a nose, and a red hat on an 800×500 SVG canvas. It uses plain HTML, inline CSS, and JavaScript-free SVG elements, including circles, ellipses, polygons, and paths to form the face, features, and decorative stars. The visualization is fully static, with absolutely positioned SVG star icons in yellow and blue. The code relies on basic SVG geometric shapes and CSS positioning, avoiding any JavaScript libraries or data sources, rendering entirely via the browser's SVG engine.

SSai Hemanth Babu Sunkari

78% match

Loading thumbnail…

Fork of Hello HTML

This example draws a simple smiley face using Scalable Vector Graphics (SVG). It shows a large blue circle outlined in green for the face, with two smaller green circles serving as eyes. The drawing is rendered directly within an HTML page using inline SVG elements. The code sets the SVG canvas to 960 by 500 pixels and positions the circles using explicit x and y coordinates. The page uses minimal CSS styling to remove margins and hide overflow, and the approach is purely declarative, relying on the SVG markup rather than any JavaScript libraries or external data sources.

Sseanmdalrymple@protonmail.com

78% match