Skip to main content
SimilarExport ZIP
100%

Fork of A smiley moon with star and cloud

✓ Published0🌍 Public
Mmounishnaidu96@gmail.com
Last edited Feb 28, 2024
Created on Feb 28, 2024

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.

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

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.

66264kusuma@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
86% 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
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
79% match
Loading thumbnail…

Fork of Hello HTML

This example draws a simple smiley face using hand-coded SVG elements. It shows three circles: a large blue circle for the head, and two smaller black circles for the eyes, all positioned within a 960×500 viewport. The code uses static SVG `<circle>` tags with explicit `cx`, `cy`, and `r` attributes, plus styling for fill and stroke. No interaction or animation is present, and the rendering relies entirely on inline SVG within a plain HTML document.

NNidhi Mittal
78% match
Loading thumbnail…

Fork of Hello HTML

This example shows a simple smiley face drawn entirely in SVG, using only two black circles for eyes and a large gold circle with a black stroke for the head. The code creates the static graphic with raw SVG elements inside an HTML page, relying on the browser’s native SVG rendering rather than any JavaScript library or framework. The face is centered on a 960×500 canvas, demonstrating how basic geometric shapes and styling attributes like `fill` and `stroke` can produce a recognizable illustration without interaction or data.

MMzabiCoder
78% match
Loading thumbnail…

Fork of Fork of Smiling face

A smiling face composed of SVG shapes, including a yellow circle for the head, black circles for eyes, red rectangles over the eyes, a brown polygon nose, and pink elliptical ears, rendered on a 960-by-500 canvas. The code uses raw SVG elements within an HTML file, styled with minimal CSS to remove margins and hide overflow. The face is drawn with static coordinates, featuring a black quadratic path for the smile and a stroke outline around the head and ears.

Ggaddamthanmayeereddy759@gmail.com
78% 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
77% match