Space Utopia

#wecoded #devchallenge #frontend #css

This is a submission for the 2026 WeCoded Challenge: Frontend Art
Frontend Art — Octagonal Drift
Show us your Art
https://assets.codepen.io/your-placeholder/cover-octagonal-drift.png

Live demo: https://codepen.io/editor/Dancodepen-io/pen/019cc3f4-d07d-709c-bd12-cba2c0bfdf19.

Inspiration
I explored the intersection of crystalline geometry and slow, organic motion to evoke a sense of quiet, mechanical life. The piece uses layered octagonal facets and subtle 3D rotation to suggest an object that’s both engineered and breathing — a small, meditative spaceship drifting through negative space.

How I built it
Stack — HTML, modern CSS (custom properties, @keyframes, transform-style: preserve-3d), and minimal vanilla JavaScript for interaction.

Key techniques — layered gradients, clip-path for octagonal silhouettes, CSS 3D transforms for depth, and mix-blend-mode for luminous overlays.

Accessibility & performance — semantic markup, prefers-reduced-motion support, and hardware-accelerated transforms.

My Code
Repo (profile / source): https://github.com/WestonG40.

Demo (CodePen): https://codepen.io/editor/Dancodepen-io/pen/019cc3f4-d07d-709c-bd12-cba2c0bfdf19.

Snippet (core CSS):

css
:root{--bg:#071026;--accent:#7be7ff}
.scene{perspective:1000px;transform-style:preserve-3d}
.octagon{width:260px;height:260px;clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);background:linear-gradient(135deg,var(--accent) 0%,rgba(123,231,255,0.06) 60%);animation:drift 8s ease-in-out infinite}
@keyframes drift{0%{transform:rotateX(12deg) rotateY(-8deg) translateZ(0)}50%{transform:rotateX(6deg) rotateY(8deg) translateZ(24px)}100%{transform:rotateX(12deg) rotateY(-8deg) translateZ(0)}}
Team and credits
Author: @WestonG40.

License
License: MIT — see LICENSE in the repo.

Cover image and social blurb
Cover image suggestion: 1200×600 PNG showing the octagonal shape centered on a dark gradient with a soft glow.

Social blurb: “Octagonal Drift — a small frontend art piece blending CSS 3D transforms and layered gradients. Live demo + source.”