Загрузка...
Glassmorphic UI-компонент: адаптивный дашборд с боковой панелью и виджетами. Идеален для админ-панелей SaaS и демонстраций дизайн-систем.
<div class="sm:mt-20 mt-20 mb-20 relative" data-animate="" data-animate-delay="400"
data-element-locator="html > body:nth-of-type(1) > section:nth-of-type(1) > div:nth-of-type(2)">
<div
class="sm:rounded-2xl sm:pt-3 sm:pr-3 sm:pb-3 sm:pl-3 hover:border-white/20 transition-all duration-500 max-w-6xl border-white/10 border rounded-xl mr-auto ml-auto pt-2 pr-2 pb-2 pl-2 relative shadow-[0_10px_50px_-10px_rgba(0,0,0,0.6)] backdrop-blur">
<div
class="ring-inset sm:rounded-xl sm:pt-4 sm:pr-4 sm:pb-4 sm:pl-4 bg-gradient-to-b from-white/5 to-transparent ring-white/10 ring-1 rounded-lg pt-3 pr-3 pb-3 pl-3">
<div class="mb-3 sm:mb-4 flex items-center justify-between">
<div class="flex items-center gap-1.5 sm:gap-2">
<span class="h-2 w-2 sm:h-2.5 sm:w-2.5 rounded-full bg-red-500/70 hover:bg-red-500 transition-colors duration-200 cursor-pointer"></span>
<span class="h-2 w-2 sm:h-2.5 sm:w-2.5 rounded-full bg-yellow-500/70 hover:bg-yellow-500 transition-colors duration-200 cursor-pointer"></span>
<span class="h-2 w-2 sm:h-2.5 sm:w-2.5 rounded-full bg-emerald-500/70 hover:bg-emerald-500 transition-colors duration-200 cursor-pointer"></span>
<span class="ml-2 sm:ml-3 text-xs sm:text-sm font-medium text-white/70">Dashboard</span>
</div>
<div class="flex items-center gap-1.5 sm:gap-2">
<div
class="hidden sm:flex items-center gap-2 rounded-md bg-white/5 px-2 py-1 ring-1 ring-white/10 hover:ring-white/20 transition-all duration-200">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="h-4 w-4 text-white/60">
<path d="m21 21-4.34-4.34" class=""></path>
<circle cx="11" cy="11" r="8" class=""></circle>
</svg>
<input class="w-32 bg-transparent text-xs text-white/70 placeholder:text-white/40 focus:outline-none sm:w-40 lg:w-56" placeholder="Search workspace">
</div>
<button class="rounded-md bg-white/5 p-1.5 sm:p-2 ring-1 ring-white/10 transition-all duration-200 hover:bg-white/10 hover:ring-white/20">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-3.5 w-3.5 sm:h-4 sm:w-4 text-white/70"><path d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401" class=""></path></svg>
</button>
<img alt="avatar" class="ring-white/20 ring-1 w-6 h-6 sm:w-7 sm:h-7 object-cover rounded-full hover:ring-white/40 hover:scale-110 transition-all duration-300 cursor-pointer" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/986db8ed-1c5d-42fb-8c1d-4b3716d2e317_320w.jpg">
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-3 sm:gap-4">
<aside
class="rounded-lg border border-white/10 bg-white/5 p-2.5 sm:p-3 backdrop-blur hover:bg-white/[0.07] hover:border-white/20 transition-all duration-300">
<div class="mb-2 text-xs font-medium text-white/60">Workspace</div>
<div class="grid gap-1.5 sm:gap-2 text-xs sm:text-sm">
<button class="group flex items-center justify-between rounded-md px-2 py-1.5 sm:py-2 text-white/80 transition-all duration-200 hover:bg-white/5 hover:text-white">
<span class="inline-flex items-center gap-1.5 sm:gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-3.5 w-3.5 sm:h-4 sm:w-4 opacity-70 group-hover:opacity-100 transition-opacity duration-200"><rect width="18" height="18" x="3" y="3" rx="2" class=""></rect></svg> Overview
</span>
<span class="rounded-full bg-white/5 px-1.5 py-0.5 text-[10px] text-white/60 ring-1 ring-white/10 group-hover:bg-white/10 group-hover:text-white/80 transition-all duration-200">12</span>
</button>
<button class="group flex items-center justify-between rounded-md px-2 py-1.5 sm:py-2 text-white/80 transition-all duration-200 hover:bg-white/5 hover:text-white">
<span class="inline-flex items-center gap-1.5 sm:gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-3.5 w-3.5 sm:h-4 sm:w-4 opacity-70 group-hover:opacity-100 transition-opacity duration-200"><rect width="7" height="7" x="3" y="3" rx="1" class=""></rect><rect width="7" height="7" x="14" y="3" rx="1" class=""></rect><rect width="7" height="7" x="14" y="14" rx="1" class=""></rect><rect width="7" height="7" x="3" y="14" rx="1" class=""></rect></svg> Designs
</span>
<span class="rounded-full bg-white/5 px-1.5 py-0.5 text-[10px] text-white/60 ring-1 ring-white/10 group-hover:bg-white/10 group-hover:text-white/80 transition-all duration-200">48</span>
</button>
<button class="group flex items-center justify-between rounded-md px-2 py-1.5 sm:py-2 text-white/80 transition-all duration-200 hover:bg-white/5 hover:text-white">
<span class="inline-flex items-center gap-1.5 sm:gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-3.5 w-3.5 sm:h-4 sm:w-4 opacity-70 group-hover:opacity-100 transition-opacity duration-200"><path d="M3 3v16a2 2 0 0 0 2 2h16" class=""></path><path d="m19 9-5 5-4-4-3 3" class=""></path></svg> Analytics
</span>
<span class="rounded-full bg-white/5 px-1.5 py-0.5 text-[10px] text-white/60 ring-1 ring-white/10 group-hover:bg-white/10 group-hover:text-white/80 transition-all duration-200">8</span>
</button>
<button class="group flex transition-all duration-200 hover:bg-white/5 hover:text-white text-white/80 rounded-md pt-1.5 pr-2 pb-1.5 pl-2 sm:pt-2 sm:pr-2 sm:pb-2 sm:pl-2 items-center justify-between">
<span class="inline-flex items-center gap-1.5 sm:gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-3.5 w-3.5 sm:h-4 sm:w-4 opacity-70 group-hover:opacity-100 transition-opacity duration-200"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" class=""></path><path d="M14 2v4a2 2 0 0 0 2 2h4" class=""></path><path d="M10 9H8" class=""></path><path d="M16 13H8" class=""></path><path d="M16 17H8" class=""></path></svg> Documents
</span>
<span class="rounded-full bg-white/5 px-1.5 py-0.5 text-[10px] text-white/60 ring-1 ring-white/10 group-hover:bg-white/10 group-hover:text-white/80 transition-all duration-200">24</span>
</button>
<button class="group flex transition-all duration-200 hover:bg-white/5 hover:text-white text-white/80 rounded-md pt-1.5 pr-2 pb-1.5 pl-2 sm:pt-2 sm:pr-2 sm:pb-2 sm:pl-2 items-center justify-between">
<span class="inline-flex items-center gap-1.5 sm:gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-3.5 w-3.5 sm:h-4 sm:w-4 opacity-70 group-hover:opacity-100 transition-opacity duration-200"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" class=""></path><path d="M14 2v4a2 2 0 0 0 2 2h4" class=""></path><path d="M10 9H8" class=""></path><path d="M16 13H8" class=""></path><path d="M16 17H8" class=""></path></svg> Preferences
</span>
<span class="rounded-full bg-white/5 px-1.5 py-0.5 text-[10px] text-white/60 ring-1 ring-white/10 group-hover:bg-white/10 group-hover:text-white/80 transition-all duration-200">3</span>
</button>
</div>
</aside>
<div class="col-span-1 md:col-span-2 grid grid-cols-1 sm:grid-cols-2 sm:gap-4 gap-x-3 gap-y-3">
<div
class="rounded-lg border border-white/10 bg-white/5 p-3 sm:p-4 backdrop-blur hover:bg-white/[0.07] hover:border-white/20 transition-all duration-300">
<div class="mb-2 sm:mb-3 flex items-center justify-between">
<span class="text-xs font-medium text-white/60">Recent Activity</span>
<button class="rounded-md bg-white/5 px-2 py-1 text-[10px] sm:text-xs text-white/70 ring-1 ring-white/10 hover:bg-white/10 hover:ring-white/20 transition-all duration-200">View All</button>
</div>
<div class="grid gap-1.5 sm:gap-2">
<div
class="flex items-center justify-between rounded-md bg-black/20 px-2 py-1.5 sm:px-3 sm:py-2 ring-1 ring-white/10 hover:bg-black/30 hover:ring-white/20 transition-all duration-200 cursor-pointer">
<div class="text-xs sm:text-sm text-white/80">UI-3420</div>
<div class="text-[10px] sm:text-xs text-white/60">Design → Build</div>
<div class="text-[10px] sm:text-xs text-emerald-400">Done</div>
</div>
<div
class="flex bg-black/20 ring-white/10 ring-1 rounded-md px-2 py-1.5 sm:px-3 sm:py-2 items-center justify-between hover:bg-black/30 hover:ring-white/20 transition-all duration-200 cursor-pointer">
<div class="text-xs sm:text-sm text-white/80">FE-1892</div>
<div class="text-[10px] sm:text-xs text-white/60">Code → Review</div>
<div class="text-[10px] sm:text-xs text-yellow-300">Active</div>
</div>
<div
class="flex bg-black/20 ring-white/10 ring-1 rounded-md pt-1.5 pr-2 pb-1.5 pl-2 sm:pt-2 sm:pr-3 sm:pb-2 sm:pl-3 items-center justify-between hover:bg-black/30 hover:ring-white/20 transition-all duration-200 cursor-pointer">
<div class="text-xs sm:text-sm text-white/80">DS-5671</div>
<div class="text-[10px] sm:text-xs text-white/60">Test → Ship</div>
<div class="text-[10px] sm:text-xs text-yellow-300 xl:text-[#e663f8]">Review</div>
</div>
<div
class="flex bg-black/20 ring-white/10 ring-1 rounded-md pt-1.5 pr-2 pb-1.5 pl-2 sm:pt-2 sm:pr-3 sm:pb-2 sm:pl-3 items-center justify-between hover:bg-black/30 hover:ring-white/20 transition-all duration-200 cursor-pointer">
<div class="text-xs sm:text-sm text-white/80">PM-2845</div>
<div class="text-[10px] sm:text-xs text-white/60">Plan → Execute</div>
<div class="text-[10px] sm:text-xs text-yellow-300 xl:text-[#66a8ff]">Queue</div>
</div>
<div
class="flex bg-black/20 ring-white/10 ring-1 rounded-md pt-1.5 pr-2 pb-1.5 pl-2 sm:pt-2 sm:pr-3 sm:pb-2 sm:pl-3 items-center justify-between hover:bg-black/30 hover:ring-white/20 transition-all duration-200 cursor-pointer">
<div class="text-xs sm:text-sm text-white/80">BR-7123</div>
<div class="text-[10px] sm:text-xs text-white/60">Monitor → Fix</div>
<div class="text-[10px] sm:text-xs text-yellow-300 xl:text-[#6b40e2]">Open</div>
</div>
</div>
</div>
<div
class="group overflow-hidden sm:p-4 ring-1 ring-white/10 hover:border-white/20 hover:from-white/[0.07] transition-all duration-300 bg-gradient-to-br from-white/5 to-transparent border-white/10 border rounded-lg pt-3 pr-3 pb-3 pl-3 relative">
<div class="mb-2 sm:mb-3 flex items-center justify-between">
<span class="text-xs font-medium text-white/60">Featured Work</span>
<i data-lucide="cube" class="h-3.5 w-3.5 sm:h-4 sm:w-4 text-white/60 group-hover:text-white/80 transition-colors duration-200"></i>
</div>
<div
class="aspect-[4/3] overflow-hidden rounded-md ring-1 ring-inset ring-white/10 group-hover:ring-white/20 transition-all duration-300">
<img class="transition duration-700 hover:scale-[1.03] w-full h-full object-cover saturate-100 group-hover:saturate-[1.1]" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/ab0b3891-bc36-4e1f-8314-71ee4161dd3d_3840w.jpg?w=800&q=80" alt="3D render">
</div>
</div>
<div
class="rounded-lg border border-white/10 bg-white/5 p-3 sm:p-4 backdrop-blur sm:col-span-2 hover:bg-white/[0.07] hover:border-white/20 transition-all duration-300">
<div class="mb-2 sm:mb-3 flex items-center justify-between">
<span class="text-xs font-medium text-white/60">Team Notes</span>
<button class="inline-flex items-center gap-1 rounded-md bg-white/5 px-2 py-1 text-[10px] sm:text-xs text-white/70 ring-1 ring-white/10 hover:bg-white/10 hover:ring-white/20 transition-all duration-200">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-3 w-3 sm:h-3.5 sm:w-3.5"><path d="M5 12h14" class=""></path><path d="M12 5v14" class=""></path></svg>
Add Note
</button>
</div>
<div class="grid gap-2 grid-cols-1 xs:grid-cols-2 sm:grid-cols-3">
<div
class="rounded-md bg-black/20 p-2.5 sm:p-3 ring-1 ring-white/10 hover:bg-black/30 hover:ring-white/20 transition-all duration-200 cursor-pointer">
<div class="text-xs sm:text-sm font-medium text-white/80">Color Refinements</div>
<p class="mt-1 text-[10px] sm:text-xs text-white/60">Review primary palette and update accent colors for
better contrast ratios.</p>
</div>
<div
class="rounded-md bg-black/20 p-2.5 sm:p-3 ring-1 ring-white/10 hover:bg-black/30 hover:ring-white/20 transition-all duration-200 cursor-pointer">
<div class="text-xs sm:text-sm font-medium text-white/80">Motion Guidelines</div>
<p class="mt-1 text-[10px] sm:text-xs text-white/60">Document animation curves and duration standards
for consistent feel.</p>
</div>
<div
class="rounded-md bg-black/20 p-2.5 sm:p-3 ring-1 ring-white/10 hover:bg-black/30 hover:ring-white/20 transition-all duration-200 cursor-pointer">
<div class="text-xs sm:text-sm font-medium text-white/80">Component Audit</div>
<p class="mt-1 text-[10px] sm:text-xs text-white/60">Validate all button variants meet accessibility and
usage requirements.</p>
</div>
</div>
</div>
</div>
</div>
<div class="relative">
<div
class="pointer-events-auto -bottom-4 sm:-bottom-6 w-[calc(100%-2rem)] sm:w-[min(100%,340px)] sm:rounded-2xl sm:p-5 hover:border-white/20 hover:from-white/[0.12] transition-all duration-300 cursor-pointer text-white/90 bg-white/10 border-white/10 border ring-white/10 ring-1 rounded-lg my-[-50px] pt-4 pr-4 pb-4 pl-4"
data-animate="" data-animate-delay="300" "="">
<div class=" flex items-start justify-between">
<div class="">
<div class="sm:text-sm text-xs font-medium tracking-tight">Interface Design Mastery</div>
<p class="mt-1 text-[10px] sm:text-xs text-white/70">
Learn the core principles of building scalable design systems that empower product teams and delight
users.
</p>
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="h-4 w-4 sm:h-5 sm:w-5 text-white/70 flex-shrink-0 ml-2">
<path
d="M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z"
class=""></path>
<path d="M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12" class=""></path>
<path d="M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17" class=""></path>
</svg>
</div>
<div class="flex mt-2 sm:mt-3 items-center justify-between flex-wrap gap-2">
<div
class="inline-flex items-center gap-1.5 sm:gap-2 rounded-md bg-black/30 px-2 py-1 text-[10px] sm:text-[11px] text-white/70 ring-1 ring-white/10">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="h-3 w-3 sm:h-3.5 sm:w-3.5">
<path d="M8 2v4" class=""></path>
<path d="M16 2v4" class=""></path>
<rect width="18" height="18" x="3" y="4" rx="2" class=""></rect>
<path d="M3 10h18" class=""></path>
</svg>
8 lessons
</div>
<button class="inline-flex shadow-indigo-500/30 transition-all duration-200 hover:scale-[1.02] hover:shadow-indigo-500/50 text-[10px] sm:text-xs font-semibold text-white tracking-tight border-[#ffffff]/5 border rounded-md pt-1.5 pr-2.5 pb-1.5 pl-2.5 sm:pt-1.5 sm:pr-3 sm:pb-1.5 sm:pl-3 backdrop-blur-lg gap-x-1.5 gap-y-1.5 items-center">
Start course
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-3 w-3 sm:h-3.5 sm:w-3.5"><path d="M5 12h14" class=""></path><path d="m12 5 7 7-7 7" class=""></path></svg>
</button>
</div>
</div>
</div>
</div>
<!-- Reusable ORBIT component -->
<div class="pointer-events-none absolute -right-20 top-16 hidden sm:block">
<div
class="relative flex items-center justify-center rounded-full bg-white/5 p-3 ring-1 ring-white/10 backdrop-blur">
<!-- BIG ORBIT (e.g., 98) -->
<div class="size-28">
<div class="relative size-full">
<!-- SVG Orbit -->
<svg viewBox="0 0 200 200" class="block size-full overflow-visible" data-orbit="" value="98"
data-label="PERFORMANCE">
<!-- defs: gradients & filters -->
<defs class="">
<!-- soft outer glow -->
<filter id="outerGlow" x="-50%" y="-50%" width="200%" height="200%" class="">
<feGaussianBlur stdDeviation="6" result="blur" class=""></feGaussianBlur>
<feMerge class="">
<feMergeNode in="blur" class=""></feMergeNode>
<feMergeNode in="SourceGraphic" class=""></feMergeNode>
</feMerge>
</filter>
<!-- inner shadow -->
<filter id="innerShadow" x="-50%" y="-50%" width="200%" height="200%" class="">
<feOffset dx="0" dy="2" class=""></feOffset>
<feGaussianBlur stdDeviation="3" result="blur" class=""></feGaussianBlur>
<feComposite in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="inner" class="">
</feComposite>
<feColorMatrix in="inner" type="matrix" values="
0 0 0 0 0
0 0 0 0 0
0 0 0 0 0
0 0 0 0.55 0" class=""></feColorMatrix>
<feComposite in="SourceGraphic" class=""></feComposite>
</filter>
<!-- progress gradient (steel -> blue) -->
<linearGradient id="arcGrad" x1="0" y1="0" x2="1" y2="1" class="">
<stop offset="0%" stop-color="#C8D5FF" class=""></stop>
<stop offset="40%" stop-color="#7FB2FF" class=""></stop>
<stop offset="100%" stop-color="#3A83FF" class=""></stop>
</linearGradient>
<!-- bevel highlight -->
<linearGradient id="bevel" x1="0" y1="0" x2="0" y2="1" class="">
<stop offset="0%" stop-color="rgba(255,255,255,.45)" class=""></stop>
<stop offset="100%" stop-color="rgba(255,255,255,.06)" class=""></stop>
</linearGradient>
<!-- text path circle -->
<path id="textCircleLarge" d="M100,100 m-94,0 a94,94 0 1,1 188,0 a94,94 0 1,1 -188,0" class=""></path>
</defs>
<!-- background glass disc -->
<g filter="url(#innerShadow)" class="">
<circle cx="100" cy="100" r="84" fill="rgba(10,14,20,0.9)" class=""></circle>
<!-- faint rim -->
<circle cx="100" cy="100" r="84" fill="none" stroke="url(#bevel)" stroke-width="2" class=""></circle>
<!-- outer rim -->
<circle cx="100" cy="100" r="94" fill="none" stroke="rgba(255,255,255,.08)" stroke-width="2" class="">
</circle>
</g>
<!-- tiny tick marks ring -->
<circle cx="100" cy="100" r="92" fill="none" stroke="rgba(190,200,220,.18)" stroke-width="2"
stroke-dasharray="2 10" transform="rotate(-90 100 100)" class=""></circle>
<!-- progress arc base -->
<circle cx="100" cy="100" r="78" fill="none" stroke="rgba(255,255,255,.10)" stroke-width="10"
stroke-linecap="round" transform="rotate(-90 100 100)" class=""></circle>
<!-- progress arc -->
<circle cx="100" cy="100" r="78" fill="none" stroke="url(#arcGrad)" stroke-width="10" stroke-linecap="round"
transform="rotate(-90 100 100)" style="filter:url(#outerGlow)" data-arc="" stroke-dasharray="490.09"
stroke-dashoffset="490.09" class=""></circle>
<!-- glossy cap highlight (little white nub at arc end) -->
<circle r="5" fill="#EAF1FF" opacity=".95" data-cap="" cx="90.22" cy="22.62" class=""></circle>
<!-- spinning radial label (only this rotates) -->
<g style="transform-origin:100px 100px; animation: orbitSpin 18s linear infinite;" class="">
<text font-size="12" fill="rgba(220,230,255,.32)" letter-spacing="2" class="">
<textPath href="#textCircleLarge" startOffset="0%" class="">
<tspan class="">• </tspan>
<tspan class="">PERFORMANCE</tspan>
<tspan class=""> • </tspan>
<tspan class="">PERFORMANCE</tspan>
<tspan class=""> • </tspan>
<tspan class="">PERFORMANCE</tspan>
<tspan class=""> • </tspan>
<tspan class="">PERFORMANCE</tspan>
</textPath>
</text>
</g>
</svg>
<!-- center value -->
<span class="absolute inset-0 grid place-items-center text-white text-4xl font-semibold" data-value="">98</span>
</div>
</div>
</div>
</div>
<!-- SMALL ORBIT (e.g., 50%) -->
<div class="pointer-events-none absolute -left-20 bottom-0 hidden sm:block">
<div
class="relative flex items-center justify-center rounded-full bg-white/5 p-3 ring-1 ring-white/10 backdrop-blur">
<div class="size-24">
<div class="relative size-full">
<svg viewBox="0 0 200 200" class="block size-full" data-orbit="" value="50" data-suffix="%"
data-label="PERFORMANCE">
<use href="#textCircle" style="display: none;" class=""></use> <!-- reuses defs logic -->
<!-- (same defs block as above—duplicate the first <defs> inside this SVG or keep once globally in your page head) -->
<defs class="">
<filter id="outerGlow2" x="-50%" y="-50%" width="200%" height="200%" class="">
<feGaussianBlur stdDeviation="5" result="blur" class=""></feGaussianBlur>
<feMerge class="">
<feMergeNode in="blur" class=""></feMergeNode>
<feMergeNode in="SourceGraphic" class=""></feMergeNode>
</feMerge>
</filter>
<filter id="innerShadow2" x="-50%" y="-50%" width="200%" height="200%" class="">
<feOffset dx="0" dy="2" class=""></feOffset>
<feGaussianBlur stdDeviation="2" result="blur" class=""></feGaussianBlur>
<feComposite in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="inner" class="">
</feComposite>
<feColorMatrix in="inner" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.55 0" class="">
</feColorMatrix>
<feComposite in="SourceGraphic" class=""></feComposite>
</filter>
<linearGradient id="arcGrad2" x1="0" y1="0" x2="1" y2="1" class="">
<stop offset="0%" stop-color="#D8E3FF" class=""></stop>
<stop offset="40%" stop-color="#93BDFF" class=""></stop>
<stop offset="100%" stop-color="#4E8FFF" class=""></stop>
</linearGradient>
<linearGradient id="bevel2" x1="0" y1="0" x2="0" y2="1" class="">
<stop offset="0%" stop-color="rgba(255,255,255,.5)" class=""></stop>
<stop offset="100%" stop-color="rgba(255,255,255,.06)" class=""></stop>
</linearGradient>
</defs>
<g filter="url(#innerShadow2)" class="">
<circle cx="100" cy="100" r="84" fill="rgba(10,14,20,0.9)" class=""></circle>
<circle cx="100" cy="100" r="84" fill="none" stroke="url(#bevel2)" stroke-width="2" class=""></circle>
<circle cx="100" cy="100" r="94" fill="none" stroke="rgba(255,255,255,.08)" stroke-width="2" class="">
</circle>
</g>
<circle cx="100" cy="100" r="92" fill="none" stroke="rgba(190,200,220,.25)" stroke-width="2"
stroke-dasharray="2 10" transform="rotate(-90 100 100)" class=""></circle>
<circle cx="100" cy="100" r="78" fill="none" stroke="rgba(255,255,255,.10)" stroke-width="10"
stroke-linecap="round" transform="rotate(-90 100 100)" class=""></circle>
<circle cx="100" cy="100" r="78" fill="none" stroke="url(#arcGrad2)" stroke-width="10"
stroke-linecap="round" transform="rotate(-90 100 100)" style="filter:url(#outerGlow2)" data-arc=""
stroke-dasharray="490.09" stroke-dashoffset="490.09" class=""></circle>
<circle r="5" fill="#EAF1FF" opacity=".95" data-cap="" cx="100.00" cy="178.00" class=""></circle>
</svg>
<span class="absolute inset-0 grid place-items-center text-white text-xl font-semibold" data-value="">50%</span>
</div>
</div>
</div>
</div>
<!-- Tiny script to set value & animate arcs -->
<script>
document.querySelectorAll('svg[data-orbit]').forEach(svg => {
const val = Number(svg.getAttribute('value') || 0); // 0..100
const suffix = svg.getAttribute('data-suffix') || ''; // e.g. "%"
const label = svg.getAttribute('data-label') || 'PERFORMANCE';
const r = 78; // must match arc r
const C = 2 * Math.PI * r;
const arc = svg.querySelector('[data-arc]');
arc.setAttribute('stroke-dasharray', C.toFixed(2));
arc.setAttribute('stroke-dashoffset', C.toFixed(2));
// animate
requestAnimationFrame(() => {
arc.style.transition = 'stroke-dashoffset 900ms cubic-bezier(.22,.9,.2,1)';
arc.setAttribute('stroke-dashoffset', ((100 - val) / 100 * C).toFixed(2));
});
// cap position at arc end
const cap = svg.querySelector('[data-cap]');
const endAngle = -Math.PI / 2 + (val / 100) * 2 * Math.PI; // starts at top
const cx = 100 + r * Math.cos(endAngle);
const cy = 100 + r * Math.sin(endAngle);
cap.setAttribute('cx', cx.toFixed(2));
cap.setAttribute('cy', cy.toFixed(2));
// center number
const valueSpan = svg.parentElement.querySelector('[data-value]');
if (valueSpan) valueSpan.textContent = val + suffix;
// radial label text (optional)
svg.querySelectorAll('tspan[data-label]').forEach(n => n.textContent = label);
});
</script>
<style>
@keyframes orbitSpin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
</div>
</div>