Fork of A smiley moon with star and cloud

100%

Fork of A smiley moon with star and cloud

✓ Published0🌍 Public

Last edited Feb 28, 2024

Created on Feb 28, 2024

Forked from A smiley moon with star and cloud

This example renders a stylized night scene in SVG, featuring a glowing smiley moon, two star-shaped polygons, and a circular sun on a dark blue background. The moon is drawn with a blurred gold ellipse, while the stars and sun use simple vector shapes. The visualization relies on SVG’s `<filter>` with `feGaussianBlur` for the moon’s glow effect, and radial gradients could enhance eye shading, though the code currently uses solid black circles. A bird image is embedded via `<image>`, and the scene is built entirely with inline SVG markup in an HTML document, with no external data sources.

AI-generated description

A smiley moon with star and cloud

Use SVG to draw a smiley moon, star and cloud

References:

Blur effect of moon: https://www.w3schools.com/graphics/svg_fegaussianblur.asp

Eye with a radial gradient from white to grey: https://www.w3schools.com/graphics/svg_grad_radial.asp

Star shape: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Basic_Shapes

Cloud shape: https://stackoverflow.com/questions/30919053/creating-a-responsive-cloud-shape

*This is a part of week 1 assignment: Make Something with SVG

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of A smiley moon with star and cloud

A night scene in SVG shows a blurred white moon with a visible eye, eyebrow, and red smile, alongside a star, cloud, rain, a human figure, tree, bird, and vehicle. The code uses SVG filters like `feGaussianBlur` for the moon’s glow, radial gradients for the eye, and basic shapes like `circle`, `polygon`, and `path` for objects. All elements are drawn directly in HTML with inline SVG, rendered on a blue background.

Mmounishnaidu96@gmail.com

93% match

Loading thumbnail…

A smiley moon with star and cloud

This example depicts a starry night scene featuring a large golden smiley moon, a star, and a cloud. The moon is created using SVG circles with a Gaussian blur filter, while the eye uses a radial gradient. The star is a polygon, and the cloud is drawn with a path using relative arc commands. The SVG code directly defines all shapes and applies the blur effect via the `feGaussianBlur` filter.

MMing Liu

89% match

Loading thumbnail…

Fork of Smiling face

This example shows a smiling face rendered as an SVG graphic, featuring light blue circular head with ears, red elliptical eyes, a nose polygon, and a triangular hat. The face includes a curved mouth path and small black eyes. Two decorative star SVG elements are positioned absolutely over the scene, one yellow and one blue. The code uses plain SVG elements such as circle, ellipse, polygon, and path, with CSS for styling and positioning. No JavaScript libraries are employed; the visualization relies purely on static SVG markup and inline styles.

SSai Hemanth Babu Sunkari

80% 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

80% match

Loading thumbnail…

Fork of Hello HTML

A smiley face rendered as a static SVG drawing. The example uses raw SVG elements—three `<circle>` tags—to depict a yellow head with black outline and two black eyes, all centered on a 960-by-500 canvas. The code relies on inline SVG attributes for positioning and styling, with no external libraries or JavaScript. It demonstrates the simplest possible vector graphic: shapes defined directly in markup, with the body styled to hide margins and overflow. No interactions, animations, or data-driven content appear; it serves purely as a static visual exercise.

Rrita cachaldora

79% match

Loading thumbnail…

Fork of Smiling face

This example shows a stylized smiley face constructed from multiple SVG elements, including circles for the head, ellipses for eyes and ears, a polygon for the nose, and an orange triangle for the nose. A red hat sits atop the head, and a separate star icon is positioned at the top right using absolute CSS positioning. The code uses raw SVG markup within an HTML file, with shapes defined using attributes like `cx`, `cy`, `r`, and `points`. Styles control the page layout, hiding margins and overflow, while the SVG elements themselves rely on the browser's native rendering.

SSai Hemanth Babu Sunkari

79% match

Loading thumbnail…

Fork of Hello HTML

This example renders a simple smiley face using inline SVG, composed of three circles: a yellow head with a black stroke and two black eyes. The code uses raw SVG elements (`circle`) with explicit `cx`, `cy`, and `r` attributes, and relies on CSS to remove page margins and hide overflow. The drawing is static, with no JavaScript libraries or data binding, and the face is centered within a 960×500 viewport.

AallegedStink

79% match

Loading thumbnail…

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

This example shows a static smiley face built from basic SVG shapes: a yellow circle for the face, two smaller white circles for the eyes, and the text “SMILE PLEASE” centered in black. The code uses raw SVG elements (`<circle>`, `<text>`) inside an HTML document, with inline CSS to remove page margins. The face is drawn with explicit pixel coordinates (center at 480, 250) and fixed dimensions (960×500). The rendering approach is direct SVG markup without any JavaScript libraries, animation, or data binding.

KKusumaKumariDama@my.unt.edu

79% match