Skip to main content
SimilarExport ZIP
100%

Golden Compass

✓ Published1🌍 Public
CCora
Last edited Apr 1, 2025
Created on Mar 31, 2025
Forked from HTML Starter

This piece is a static, geometric SVG illustration of a stylized golden compass. Rendered entirely with a single HTML file, it showcases how layered `<polygon>` and `<circle>` elements, combined with `<radialGradient>` and `<linearGradient>` fills, create a faceted, jewel-like dial. The code uses SVG `<mask>` and `<filter>` definitions to generate an intricate internal cutout and a drop shadow for the compass needles, which are drawn with curved paths. The composition is purely decorative, with no interactive or data-driven elements.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Golden Compass with Mouse Following

This visualization displays an ornate golden compass dial composed of layered geometric facets, gradients, and a central rotating needle set. The compass needle continuously pivots to follow the cursor's position within the browser window, while the page hides the default cursor. The code renders the dial using raw SVG elements—including polygons, circles, and a radial gradient—and animates the needle by updating its transform attribute in response to mouse movement. It uses a drop-shadow filter for depth and a mask to create the dial's inner ring effect.

CCurran Kelleher
81% match
Loading thumbnail…

Curran's Golden Compass with Mouse Following

A golden compass with eight jewel-like facets and a central dial responds to the mouse, which it replaces with a custom pointer (the cursor is hidden). The compass’s north and south needles rotate toward the cursor’s position, tracking its movement in real time. Built as a static SVG scene with CSS for layout and cursor control, it uses SVG gradients, masks, drop shadows, and polygon geometry to model the compass’s metallic surfaces and shading. No external libraries are required; the implementation relies solely on native SVG elements and inline JavaScript for mouse-following animation, with all visual components defined directly in the markup.

CCora
78% match
Loading thumbnail…

Hello HTML

This example displays a simple static composition of three black-outlined circles on a yellow background, with a large central circle flanked by two smaller ones. The visualization is built using raw SVG elements embedded directly in an HTML page, with no external JavaScript libraries. It demonstrates basic SVG rendering by setting explicit coordinates, radii, fill colors, and stroke properties on circle elements within a fixed 960 by 500 viewport. The page uses minimal CSS to remove margins and hide overflow, focusing entirely on the vector shapes.

Ppurritola
69% match
Loading thumbnail…

Sadhana_SVG

This example presents a hand-coded SVG composition featuring a set of basic geometric shapes. It shows an empty circle, a stylized archery target with concentric black, lightblue, red, and yellow rings, a gold rectangle with a black stroke, a vertical navy line, and a purple path that combines arcs and quadratic Bézier curves. The page loads directly in HTML with no external libraries, using raw SVG elements like `circle`, `rect`, `line`, and `path` within a large 150,000-pixel viewport. It relies entirely on native SVG markup and CSS-like presentation attributes for its rendering.

SSadhana Arunkumar
67% match
Loading thumbnail…

Art

This example demonstrates a static composition of SVG shapes, including overlapping red and green circles, a diagonal line, and two path elements. The rendering uses raw SVG syntax directly in an HTML document, with inline CSS setting the page margin to zero and hiding overflow. The artwork is generated through explicit coordinate attributes such as `cx`, `cy`, and `d` for paths, and includes a commented-out rectangle to show alternative shapes. The piece explores layering and stroke styling without any interactive or animated behavior.

Aaidarshafeev1@gmail.com
67% match
Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Fork of Hello HTML

This example shows a minimalist SVG composition of two overlapping circles, a yellow ring with a black stroke laid over an identical unfilled circle, centered on a blank canvas. The code uses raw SVG elements, including `circle` and its `cx`, `cy`, `r`, `fill`, and `stroke` attributes, within an inline HTML page. The body styling removes margins and hides overflow, and the SVG canvas is fixed at 960 by 500 pixels. No external libraries or data sources are involved; the visualization relies solely on static markup.

Bbgarci23@nd.edu
67% match
Loading thumbnail…

Circles with SVG

This example displays twelve pastel-colored circles scattered across an SVG canvas, each positioned at fixed coordinates with varying radii. The visualization demonstrates static SVG rendering with a simple, decorative composition, using no external libraries or JavaScript for interaction. The circles are defined directly in markup with individual `fill` attributes, while CSS centers the SVG on a light gray background and applies a subtle shadow and rounded corners. The code relies on basic SVG elements and inline styling, with `index.js` containing only a placeholder console statement.

223100098@lums.edu.pk
66% match
Loading thumbnail…

SVG Me

This example displays two concentric circles rendered directly inside an HTML page using pure SVG. A large blue circle with an orange stroke and a smaller red circle with a teal stroke are positioned together to create a simple layered composition. The code relies on inline SVG markup with standard attributes such as `cx`, `cy`, `r`, and `stroke-width`, avoiding any JavaScript or external libraries. The shape definitions are written directly in the `index.html` file, demonstrating how vector graphics can be embedded without additional frameworks.

Wwgloss
66% match