Skip to main content
SimilarExport ZIP
100%

Heart and Christmas Tree

✓ Published0🌍 Public
JJunying Li
Last edited Aug 28, 2021
Created on Aug 28, 2021
Forked from SVG Fundamentals

A heart-shaped polygon cradles a stylized Christmas tree built from layered triangular polygons, with a striped trunk and a soft glow from blurred golden lights. The SVG scene demonstrates geometric shape composition using polygons, rectangles, and ellipses, with a Gaussian blur filter applied via `feGaussianBlur` to create the light effects. The tree’s dark green and teal tones contrast against the pale pink heart, while the lights are positioned along the tree’s tiers. All rendering is static SVG, with no interactive or animated behavior.

AI-generated description

A demonstration of SVG shapes. Rectangulars, ellipses, polygons are used in my work.

A Christmas tree was placed on a heart-shaped polygon. Also, there are several lights on the Christmas tree with blur effect.

Reference: The SVG Blur effect was copied from W3School tutorial(https://www.w3schools.com/graphics/svg_fegaussianblur.asp).

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Christmas tree

A stylized Christmas tree built from layered green polygon paths, a brown trunk rectangle, and a single red ornament circle. The SVG markup constructs the tree’s triangular tiers with decreasing base widths, while the trunk sits at the bottom center. The rendering uses plain SVG elements—`path`, `rect`, and `circle`—inside an HTML file, with an external CSS file resetting margins and hiding overflow. The scene is static, with no interaction or animation, conveying a simple vector illustration rather than a data-driven chart.

AAimanoshi
77% match
Loading thumbnail…

Fork of Christmas tree

A stylized Christmas tree built entirely from SVG primitives. Three overlapping green triangles form the tree's layered foliage, a brown rectangle serves as the trunk, and five red circles are distributed as ornaments. The scene is static, constructed through direct SVG markup without JavaScript libraries or dynamic data. The geometric composition relies on hard-coded coordinates to achieve a symmetrical, simplified holiday icon.

BBart Delrue
76% match
Loading thumbnail…

Fork of Christmas tree

A static Christmas tree rendered as a green polygon with a brown rectangular trunk sits on an SVG canvas. The tree shape is drawn explicitly with an SVG `path` element defining its layered, triangular silhouette, while a decorative line and circle add simple accents. The example uses raw SVG markup within an HTML page, styled by a minimal CSS file that resets margins and hides overflow, and requires no JavaScript libraries or data sources. The rendering approach relies entirely on declarative SVG coordinates rather than computed visualization logic.

MMaritSilke
76% match
Loading thumbnail…

Fork of Christmas tree

The visualization shows a stylized Christmas tree assembled from stacked green triangles, a brown trunk, and red ornaments with black outlines. A lime-green star with a purple border sits at the top of the tree. The SVG is built directly in HTML using basic shapes like `polygon`, `rect`, and `circle`, with styling handled by CSS. The tree’s symmetric layers and centered ornaments create a flat, geometric holiday icon, rendered entirely through inline SVG elements without additional JavaScript libraries.

Nnathanhuyghe
75% match
Loading thumbnail…

Fork of Fork of Christmas tree

This example renders a stylized Christmas tree as a static SVG composed of three triangular green paths. Red circular baubles, pink flower shapes built from multiple circles within a translated group, and three gold star polygons decorate the tree. Geometry is defined directly in the markup without a JavaScript library, relying on literal coordinate values and SVG presentation attributes.

Ssaiyogesh9911@gmail.com
74% match
Loading thumbnail…

Fork of The House

This visualization depicts a Christmas tree composed of layered green polygons, a brown trunk, and red circular ornaments, alongside gifts, a dog, and Santa Claus. A prominent lime-colored star with a purple outline sits above the tree. The scene is rendered as static SVG shapes, using elements like `rect`, `polygon`, `circle`, and `ellipse` directly in the HTML. The star is drawn with a `polygon` and styled with `fill-rule: nonzero`, while all other objects use simple geometric coordinates. No external libraries or data sources are used; the graphic relies solely on hard-coded SVG markup.

SSai Hemanth Babu Sunkari
74% match
Loading thumbnail…

Fork of Christmas tree

This example shows a simple, static Christmas tree illustration composed of three layered green triangular tree sections, a red circular ornament, and a brown trunk rectangle. The design is rendered directly as SVG elements within an HTML page, using a straightforward combination of `<path>`, `<circle>`, and `<rect>` tags. The file structure includes a separate `styles.css` to reset the page margin and hide overflow, while the `index.html` contains the inline SVG markup. The visualization is a basic, non-interactive graphic that relies entirely on manual coordinate definitions rather than any dynamic or data-driven plotting library.

Aansofie123
73% match
Loading thumbnail…

Fork of Christmas tree

This fork of a Christmas tree uses basic SVG shapes to compose a simple holiday scene. The visualization shows a green triangular tree with a brown trunk, red ornaments, and yellow lines suggesting lights or tinsel. Using D3.js v3, the code defines elements like `<rect>` for the trunk, `<path>` for the tree silhouette, and `<circle>` nodes, all styled via an external CSS file. The SVG canvas is 960 by 500 pixels, with positioning set through explicit coordinates.

CCheung-KaWai
71% match