Skip to content

Add cinematic futuristic Steam-inspired 4K SVG artwork #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ReedonMenu wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Add cinematic futuristic Steam-inspired 4K SVG artwork #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
96a5388
Add cinematic futuristic Steam-inspired artwork SVG
ReedonMenu Feb 20, 2026
9498573
Add HTML version of futuristic gaming hub artwork
ReedonMenu Feb 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
194 changes: 194 additions & 0 deletions steam_futuristic_hub.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,194 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Futuristic Steam-Inspired Gaming Hub</title>
<style>
:root {
--blue:#4cf3ff;
--deep:#090c1b;
--mid:#141b3f;
--magenta:#ff4fd8;
--ink:#060a19;
}
* { box-sizing: border-box; }
body {
margin: 0;
min-height: 100vh;
display: grid;
place-items: center;
background: #03050f;
font-family: Inter, Segoe UI, Roboto, sans-serif;
color: #cce9ff;
}
.frame {
position: relative;
width: min(100vw, 3840px);
aspect-ratio: 16 / 9;
overflow: hidden;
background: linear-gradient(140deg, var(--deep) 0%, var(--mid) 45%, #09132a 100%);
box-shadow: 0 0 100px rgba(76,243,255,.25), 0 0 160px rgba(255,79,216,.2) inset;
}
.glow {
position: absolute;
border-radius: 50%;
filter: blur(10px);
pointer-events: none;
}
.glow.blue { background: radial-gradient(circle, rgba(76,243,255,.9), rgba(76,243,255,.2) 60%, transparent 100%); }
.glow.magenta { background: radial-gradient(circle, rgba(255,79,216,.85), rgba(255,79,216,.2) 60%, transparent 100%); }

.floor {
position: absolute;
inset: 45% 0 0;
background: linear-gradient(to bottom, #192548 0%, var(--ink) 100%);
clip-path: polygon(0 100%, 100% 100%, 61% 5%, 39% 5%);
}
.grid {
position: absolute;
inset: 45% 0 0;
opacity: .33;
background-image:
linear-gradient(to right, transparent 49.8%, rgba(79,211,255,.75) 50%, transparent 50.2%),
linear-gradient(to bottom, transparent 49.6%, rgba(79,211,255,.75) 50%, transparent 50.4%);
background-size: 16% 100%, 100% 13%;
clip-path: polygon(0 100%, 100% 100%, 61% 5%, 39% 5%);
}

.store {
position: absolute;
backdrop-filter: blur(2px);
border: 2px solid rgba(89,233,255,.8);
box-shadow: 0 0 28px rgba(76,243,255,.35);
}
.store.central {
left: 40%; top: 20%; width: 20%; height: 33%;
transform: perspective(900px) rotateX(8deg);
background: linear-gradient(180deg, #0f1f46, #112a5e 52%, #101c3f);
}
.store.left {
left: 14%; top: 27%; width: 18%; height: 18%;
transform: perspective(900px) rotateY(10deg) rotateX(8deg);
background: linear-gradient(160deg,#0d2040,#0f2a56);
}
.store.right {
right: 14%; top: 27%; width: 18%; height: 18%;
border-color: rgba(255,102,212,.95);
box-shadow: 0 0 28px rgba(255,79,216,.38);
transform: perspective(900px) rotateY(-10deg) rotateX(8deg);
background: linear-gradient(160deg,#1a1a4a,#2b1b5f);
}
.panel {
position: absolute;
left: 8%; right: 8%;
height: 12%;
border-radius: 12px;
background: rgba(14,36,85,.7);
border: 1px solid rgba(140,244,255,.65);
box-shadow: inset 0 0 30px rgba(79,211,255,.12);
}
.panel:nth-child(1){ top: 14%; }
.panel:nth-child(2){ top: 40%; border-color: rgba(255,114,229,.75); }
.panel:nth-child(3){ top: 66%; }

.icon {
position: absolute;
width: 5.2%;
aspect-ratio: 1;
border-radius: 24%;
border: 3px solid rgba(85,239,255,.9);
box-shadow: 0 0 38px rgba(76,243,255,.48);
background: linear-gradient(140deg,#152e68,#0f3665);
display: grid;
place-items: center;
font-size: clamp(20px, 2vw, 42px);
}
.icon.magenta {
border-color: rgba(255,100,225,.9);
box-shadow: 0 0 38px rgba(255,79,216,.5);
background: linear-gradient(140deg,#3b1b68,#39165b);
color: #ff9eef;
}

.avatar {
position: absolute;
width: 1.3%;
height: 7%;
border-radius: 20px;
background: #d8efff;
box-shadow: 0 0 24px rgba(140,244,255,.75);
}
.avatar::before {
content: "";
position: absolute;
left: 50%; top: -26%;
width: 80%; aspect-ratio: 1;
transform: translateX(-50%);
border-radius: 50%;
background: inherit;
}
.avatar.pink { background: #ffd5ff; box-shadow: 0 0 24px rgba(255,138,236,.75); }

.reflection {
position: absolute;
border-radius: 50%;
opacity: .45;
filter: blur(10px);
}

.streak {
position: absolute;
height: 4px;
border-radius: 8px;
filter: blur(1px);
opacity: .75;
transform-origin: left center;
}

.caption {
position: absolute;
left: 2%; bottom: 2%;
font-size: clamp(10px, .8vw, 20px);
letter-spacing: .12em;
text-transform: uppercase;
opacity: .8;
}
</style>
</head>
<body>
<main class="frame" aria-label="Vibrant cinematic futuristic gaming hub artwork">
<div class="glow blue" style="left:5%; top:2%; width:30%; height:45%;"></div>
<div class="glow magenta" style="right:4%; top:2%; width:32%; height:45%;"></div>
<div class="glow blue" style="left:30%; top:10%; width:40%; height:52%; opacity:.55;"></div>

<div class="floor"></div>
<div class="grid"></div>

<section class="store central" aria-hidden="true">
<div class="panel"></div><div class="panel"></div><div class="panel"></div>
</section>
<section class="store left" aria-hidden="true"></section>
<section class="store right" aria-hidden="true"></section>

<div class="icon" style="left:25%; top:14%; color:#5effff;">◆</div>
<div class="icon magenta" style="left:69%; top:13%;">◎</div>
<div class="icon" style="left:20%; top:42%; color:#61f5ff;">▲</div>
<div class="icon magenta" style="left:74%; top:42%;">✚</div>

<div class="avatar" style="left:40%; top:57%;"></div>
<div class="avatar pink" style="left:59%; top:60%; transform: scale(1.08);"></div>

<div class="reflection" style="left:32%; top:75%; width:16%; height:5%; background:#4ce9ff;"></div>
<div class="reflection" style="left:51%; top:79%; width:18%; height:5.8%; background:#ff67dd;"></div>
<div class="reflection" style="left:40%; top:70%; width:24%; height:6.2%; background:#5f8bff;"></div>

<div class="streak" style="left:6%; top:15%; width:32%; background:#59f4ff; transform:rotate(28deg);"></div>
<div class="streak" style="right:6%; top:14%; width:32%; background:#ff6ee3; transform:rotate(-28deg);"></div>
<div class="streak" style="left:13%; top:10%; width:29%; background:#3fc0ff; transform:rotate(28deg); height:3px;"></div>
<div class="streak" style="right:12%; top:10%; width:28%; background:#da5eff; transform:rotate(-29deg); height:3px;"></div>

<p class="caption">Ultra-detailed · 4K layout · Neon cinematic gaming vibe</p>
</main>
</body>
</html>
139 changes: 139 additions & 0 deletions steam_futuristic_hub.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.