A smiley moon with star and cloud

100%

A smiley moon with star and cloud

✓ Published2🌍 Public

Last edited Sep 29, 2021

Created on Aug 31, 2021

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.

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

89% match

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

86% match

Loading thumbnail…

A smiley face

This example shows a simple smiley face constructed from basic geometric shapes. The yellow circle forms the face, two smaller black circles create the eyes, and a short black line acts as the mouth. The chart is rendered using Scalable Vector Graphics (SVG) within an HTML page, with each shape defined as a separate SVG element. The code directly specifies positions, radii, and stroke properties for all elements.

Aaditya-ux27

74% match

Loading thumbnail…

Smiley Face

This example displays a simple smiley face rendered as an SVG graphic. It shows a large yellow circle with a black outline as the face, and two smaller black circles positioned to represent the eyes. The illustration is created using raw SVG elements within an HTML page. The code defines the shapes using `<circle>` elements, setting the main face’s center, radius, fill, and stroke, while the eyes are positioned relatively based on the face’s center. The page uses CSS for basic layout, ensuring the SVG fits without margins or scrollbars. The rendering relies on the browser’s SVG support, with no additional JavaScript libraries.

Oooihuien

74% match

Loading thumbnail…

A smiley face

A smiley face rendered as a static SVG graphic shows two black circular eyes and a straight-line mouth inside a yellow circular head. The drawing uses basic SVG shapes—`circle` elements for the face and eyes, and a `line` element for the mouth—all grouped within a `<g>` element with a thick black stroke. The markup is plain inline SVG embedded directly in an HTML file, with no external libraries or JavaScript, relying solely on SVG’s native geometry attributes to position the features on a 960 by 500 canvas.

Rrudrachauhan11

74% match

Loading thumbnail…

smiley face part 1

This example shows a simple smiley face constructed from three SVG circles: a large yellow circle for the head and two smaller black circles for the eyes, all centered on a 960 by 500 canvas. The drawing uses the Scalable Vector Graphics (SVG) API directly within an HTML page, with the `circle` element specifying `cx`, `cy`, `r`, `fill`, and `stroke` attributes. The code does not include a mouth, leaving the smiley face incomplete, and the page’s body margin is set to zero to ensure the SVG fills the viewport.

RRob-Colon

74% match

Loading thumbnail…

smiley face

A simple SVG drawing renders a yellow smiley face on a black-stroked circle. Two black circles form the eyes, while the mouth is absent, leaving an incomplete expression. The code uses raw SVG elements—`circle` for the face and eyes—with explicit coordinates and stroke properties. No JavaScript libraries or data sources are involved; the visualization is purely static markup within an HTML page.

Ppankajiiitm

74% match

Loading thumbnail…

Creating a smiley face

This example shows a simple smiley face constructed from three SVG circles: a large yellow circle for the head and two smaller black circles for the eyes. The head is drawn with a black stroke and a fill of yellow, while the eyes use only a black fill. The code uses plain SVG elements rendered directly in HTML, with CSS styling applied to remove page margins and hide overflow. The face is centered using explicit x and y coordinates (cx and cy) and sized with radius attributes, with no interactive or animated behavior.

NNarottam Medhora

74% match