Constellation Sky Viewer - Online Star Map & Mythology
Click on a constellation to see its star pattern and read the Greek mythology behind it. Beautiful CSS illustration.
UD5 Toolkit
This interactive sky map uses precise astronomical calculations based on your local time, latitude, and longitude. Star positions are computed using sidereal time and coordinate transformations from equatorial to horizontal (altitude/azimuth) coordinates. Brightness and colors reflect actual stellar magnitudes and spectral types. The Moon's position uses a simplified ephemeris accurate to within ~1°.
Absolutely! The map shows what's currently above your horizon. Hold your device facing the direction indicated on the map (North is at the top by default). The brightest stars are drawn larger, and constellation lines connect the major star patterns. Tap or hover over any bright star to see its name.
Stars appear to rotate around the celestial poles due to Earth's rotation. This map updates in real-time, so you'll notice stars near the horizon slowly shifting position. Stars near the celestial pole (like Polaris in the Northern Hemisphere) barely move, making them excellent navigation references.
Star colors on this map approximate their real spectral types: bluish-white stars (like Sirius and Vega) are very hot (>10,000K), yellow-white stars (like the Sun) are medium temperature (~5,500K), and orange-red stars (like Betelgeuse and Antares) are cooler (<4,000K). These colors are visible to the naked eye under dark skies.
You can select a preset city from the dropdown menu, or manually enter latitude and longitude coordinates and click the check button. The tool will also attempt to detect your location automatically using browser geolocation (you'll be prompted for permission). Coordinates range from -90° to 90° for latitude and -180° to 180° for longitude.
The ecliptic (shown as a golden dashed line when enabled) marks the Sun's apparent path across the sky throughout the year. The Moon and planets always appear near this line. If you see a bright "star" along the ecliptic that isn't on the map, it's likely a planet like Venus, Jupiter, or Mars.
Click on a constellation to see its star pattern and read the Greek mythology behind it. Beautiful CSS illustration.
Based on home and destination time zones, suggests a light exposure/avoidance schedule to reduce jet lag. Educational tool, local only.
Enter text and see each character's 8‑bit binary laid out in a black‑and‑white grid. Beautiful data art. Local.
Drag and drop light sources, camera, and subject to plan a photo shoot. Export diagram as image. Simple and visual.
Build a vertical timeline by entering events with dates and descriptions. Export as image or HTML. Perfect for project milestones.
Open a test video in Picture‑in‑Picture mode. Control entering and leaving PiP. Copy the code snippet for your own app.
Enter a number and see an animated factor tree breaking it down to primes. Perfect for teaching factorization.
Draw walls on a grid and watch A*, Dijkstra, or BFS find the shortest path. Interactive animation. Learn graph traversal.
Build a simple decision tree by adding yes/no nodes. Flowchart style. Export as text outline.
Create a 5‑star rating widget using only HTML and CSS. Customize colors and size. Copy the clean code.
Turn any photo into a beautiful kaleidoscope pattern by reflecting and rotating segments. Adjust parameters.
Stack multiple background images and blend them with colors. Create unique textures. Copy the CSS code instantly.
Open the same page in two tabs and send messages between them. See real‑time cross‑tab communication. Learn the API.
Upload a main image and a folder of tile images, and the tool creates a photomosaic. Rendered in canvas. All local.
Enter a human name and translate it into a weird alien-sounding version using letter replacement rules.
Generate a palette of N colors that are maximally distinguishable for common color vision deficiencies. Copy the hex codes.
Simulate forced‑colors mode and see how your site looks. Adjust CSS system colors. Make your design accessible.
Take an SVG element with multiple transform attributes and merge them into a single matrix. Simplify your SVG code locally.
See current time in multiple pre-selected cities simultaneously with day/night indicators. No tracking, just a simple multi-clock.
Turn your webcam feed into real‑time ASCII art. Adjust density and character set. Fun for streams and demos. No upload.
Create an animation that advances with scroll using animation‑timeline: scroll(). See the visual timeline editor. Modern CSS.
Patch the PerformanceObserver and show your page’s Core Web Vitals as you browse. See real‑time scores and suggestions.
Add a warm, orange light leak to your photo for a vintage film look. Adjust intensity and angle. Instant download.
Upload an audio clip and generate an animated GIF of its waveform dancing. Shareable sound snippet. Canvas magic.
Create a completely randomly generated alien script with fonts and syllable patterns. Translate your name into alien. Fun.
Animate elements as they enter and exit the viewport using view() timeline. Parallax and reveal effects without JS.
Watch classic sorting algorithms step through a randomized bar chart. Adjust speed and array size. Great for learning algorithm efficiency.
Simulate adaptive bitrate logic by switching between different quality video segments. See how ABR algorithms work.
Enter a number and see its Collatz sequence graphed. Watch the steps until it reaches 1. Mesmerizing math.
Create a temporary chat room between two browser tabs or devices on the same network using WebRTC data channels. Copy the code.