Skip to content

Instantly share code, notes, and snippets.

@anon987654321

anon987654321/index.html

Created May 17, 2025 22:51
Show Gist options
  • Save anon987654321/5b138abdb051cc0ec94a9458cbd90bb5 to your computer and use it in GitHub Desktop.
Save anon987654321/5b138abdb051cc0ec94a9458cbd90bb5 to your computer and use it in GitHub Desktop.
Download ZIP
Untitled
Raw
index.html
<html lang='en'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Amber Logo</title>
<style>
/* Base (Mobile-First) Styling */
body {
margin: 0;
overflow-x: hidden;
background: #fff;
font-family: 'Caprasimo', sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
#container {
width: 100vw; /* Full width on mobile */
height: 33.33vw; /* Proportional height based on width */
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.amber-instance {
width: 100%;
height: 100%; /* Matches container */
overflow: hidden;
}
svg {
width: 100%;
height: 100%;
}
/* Base text size for mobile */
svg text {
font-size: 60px; /* Smaller base for mobile */
}
svg tspan {
font-size: 12px; /* Smaller base for mobile */
}
/* Custom properties for gradient animation */
@property --gradient-x {
syntax: '<percentage>';
inherits: false;
initial-value: 50%;
}
@property --gradient-y {
syntax: '<percentage>';
inherits: false;
initial-value: 50%;
}
.animated-gradient {
background: radial-gradient(circle at var(--gradient-x) var(--gradient-y), #FFB999 0%, #E6CCE6 33%, #CCE6CC 66%, #99E6E6 100%);
width: 100%;
height: 100%;
animation: moveGradient 20s infinite linear;
}
@keyframes moveGradient {
0% { --gradient-x: 0%; --gradient-y: 0%; }
25% { --gradient-x: 100%; --gradient-y: 0%; }
50% { --gradient-x: 100%; --gradient-y: 100%; }
75% { --gradient-x: 0%; --gradient-y: 100%; }
100% { --gradient-x: 0%; --gradient-y: 0%; }
}
/* Adjustments for larger screens */
@media (min-width: 768px) {
#container {
width: min(100vw, 1000px); /* Caps at 1000px on large screens */
height: 500px; /* Fixed height for desktop */
}
svg text {
font-size: 120px; /* Original size for desktop */
}
svg tspan {
font-size: 24px; /* Original size for desktop */
}
}
</style>
<link href='https://fonts.googleapis.com/css2?family=Caprasimo&display=swap' rel='stylesheet'>
</head>
<body>
<div id='container'>
<div class='amber-instance'>
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 500' role='img' aria-label='Amber Logo with Retro Lines'>
<title>Amber Logo - Nice Version</title>
<defs>
<path id='swoosh-path' d='M50,220 C250,180 750,180 950,220'/>
<clipPath id='text-mask-1'>
<text font-family="'Caprasimo', Arial, sans-serif" letter-spacing='-3' stroke='none'>
<textPath href='#swoosh-path' startOffset='2%'>amber<tspan dx='10' dy='-40' stroke='none'>®</tspan></textPath>
</text>
</clipPath>
</defs>
<g clip-path='url(#text-mask-1)'>
<foreignObject x='0' y='100' width='1000' height='300'>
<div class='animated-gradient'></div>
</foreignObject>
</g>
<path stroke='#FFFFFF' stroke-width='0.5' stroke-opacity='1.0' fill='none' d='M50,180 C200,100 400,200 600,100 S850,160 950,130'/>
<path stroke='#FFFFFF' stroke-width='1' stroke-opacity='1.0' fill='none' d='M50,195 C200,115 400,215 600,115 S850,175 950,145'/>
<path stroke='#FFFFFF' stroke-width='1.5' stroke-opacity='1.0' fill='none' d='M50,205 C200,125 400,225 600,125 S850,185 950,155'/>
<path stroke='#FFFFFF' stroke-width='2' stroke-opacity='1.0' fill='none' d='M50,213 C200,133 400,233 600,133 S850,193 950,163'/>
<path stroke='#FFFFFF' stroke-width='2.5' stroke-opacity='1.0' fill='none' d='M50,220 C200,140 400,240 600,140 S850,200 950,170'/>
<path stroke='#FFFFFF' stroke-width='3' stroke-opacity='1.0' fill='none' d='M50,226 C200,146 400,246 600,146 S850,206 950,176'/>
<path stroke='#FFFFFF' stroke-width='3' stroke-opacity='1.0' fill='none' d='M50,231 C200,151 400,251 600,151 S850,211 950,181'/>
<path stroke='#FFFFFF' stroke-width='3.5' stroke-opacity='1.0' fill='none' d='M50,235 C200,155 400,255 600,155 S850,215 950,185'/>
<path stroke='#FFFFFF' stroke-width='4' stroke-opacity='1.0' fill='none' d='M50,238 C200,158 400,258 600,158 S850,218 950,188'/>
</svg>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment