Hexagon Avatar
A copy-paste avatars component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
AvatarsHTMLCSSany framework
T
Copy into your project
HTML
<div class="nuda-av2-hex" style="background:linear-gradient(160deg,#ffd166,#ef476f)" aria-label="Rank 12 player Tomo">T</div>CSS
.nuda-av2-hex {
width: 60px;
height: 60px;
clip-path: polygon(50% 0%,95% 25%,95% 75%,50% 100%,5% 75%,5% 25%);
display: flex;
align-items: center;
justify-content: center;
color: #0a0a0a;
font-weight: 800;
font-size: 17px;
animation: _nuda-av2hexin .5s cubic-bezier(.34,1.56,.64,1) both;
transition: transform .3s ease;
will-change: transform;
}
.nuda-av2-hex:hover {
transform: scale(1.08) rotate(6deg);
}
@keyframes _nuda-av2hexin {
from {
opacity: 0;
transform: scale(.5) rotate(-30deg);
}
to {
opacity: 1;
transform: scale(1) rotate(0deg);
}
}
@media (prefers-reduced-motion:reduce) {
.nuda-av2-hex {
animation: none;
transition: none;
}
}
How to use Hexagon Avatar
Paste the HTML where you need it and the CSS into a global stylesheet (or a <style> tag). Every class is prefixed nuda- so it never collides with Tailwind or your own styles. Tweak the CSS custom properties to match your design system.
Works in React, Vue, Svelte, Astro, Next.js, Nuxt, Laravel Blade, Django, Rails — or a single .html file. No npm install, no build step.