---
title: CPU Architecture
date: 2025-12-04
description: Animated CPU architecture SVG with dynamic glowing paths, gradients, masks, and configurable text and animations.
author: mazyar
published: true
---

import { CSSCodeBlock } from "@/components/css-code-block"

<ComponentPreview name="cpu-architecture-demo" />

## Installation

<Tabs defaultValue="cli">

<TabsList>
  <TabsTrigger value="cli">CLI</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>

<TabsContent value="cli">

```bash
npx shadcn@latest add @gammaui/cpu-architecture
```

<CSSCodeBlock
  fileName="global.css"
  
  code={`
.cpu-architecture {
  offset-anchor: 10px 0px;
  animation: animation-path;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.75, -0.01, 0, 0.99);
}

.cpu-line-1 {
offset-path: path("M 10 20 h 79.5 q 5 0 5 5 v 30");
animation-duration: 5s;
animation-delay: 1s;
}

.cpu-line-2 {
offset-path: path("M 180 10 h -69.7 q -5 0 -5 5 v 40");
animation-delay: 6s;
animation-duration: 2s;
}

.cpu-line-3 {
offset-path: path("M 130 20 v 21.8 q 0 5 -5 5 h -25");
animation-delay: 4s;
animation-duration: 6s;
}

.cpu-line-4 {
offset-path: path("M 170 80 v -21.8 q 0 -5 -5 -5 h -65");
animation-delay: 3s;
animation-duration: 3s;
}

.cpu-line-5 {
offset-path: path(
"M 135 65 h 15 q 5 0 5 5 v 10 q 0 5 -5 5 h -39.8 q -5 0 -5 -5 v -35"
);
animation-delay: 9s;
animation-duration: 4s;
}

.cpu-line-6 {
offset-path: path("M 94.8 95 v -46");
animation-delay: 3s;
animation-duration: 7s;
}

.cpu-line-7 {
offset-path: path(
"M 88 88 v -15 q 0 -5 -5 -5 h -10 q -5 0 -5 -5 v -5 q 0 -5 5 -5 h 28"
);
animation-delay: 4s;
animation-duration: 4s;
}

.cpu-line-8 {
offset-path: path("M 30 30 h 25 q 5 0 5 5 v 6.5 q 0 5 5 5 h 35");
animation-delay: 3s;
animation-duration: 3s;
}

@keyframes animation-path {
0% {
offset-distance: 0%;
}
100% {
offset-distance: 100%;
}
}

`}
copyCode={true}
/>

</TabsContent>

<TabsContent value="manual">

<Steps>
<Step>Copy and paste the following code into your project.</Step>

<ComponentSource
  name="cpu-architecture"
  title="components/gammaui/cpu-architecture.tsx"
/>

<Step>Add the following CSS to your global CSS file.</Step>

<CSSCodeBlock
  fileName="global.css"
  
  code={`
.cpu-architecture {
  offset-anchor: 10px 0px;
  animation: animation-path;
  animation-iteration-count: infinite;
  animation-timing-function: cubic-bezier(0.75, -0.01, 0, 0.99);
}

.cpu-line-1 {
offset-path: path("M 10 20 h 79.5 q 5 0 5 5 v 30");
animation-duration: 5s;
animation-delay: 1s;
}

.cpu-line-2 {
offset-path: path("M 180 10 h -69.7 q -5 0 -5 5 v 40");
animation-delay: 6s;
animation-duration: 2s;
}

.cpu-line-3 {
offset-path: path("M 130 20 v 21.8 q 0 5 -5 5 h -25");
animation-delay: 4s;
animation-duration: 6s;
}

.cpu-line-4 {
offset-path: path("M 170 80 v -21.8 q 0 -5 -5 -5 h -65");
animation-delay: 3s;
animation-duration: 3s;
}

.cpu-line-5 {
offset-path: path(
"M 135 65 h 15 q 5 0 5 5 v 10 q 0 5 -5 5 h -39.8 q -5 0 -5 -5 v -35"
);
animation-delay: 9s;
animation-duration: 4s;
}

.cpu-line-6 {
offset-path: path("M 94.8 95 v -46");
animation-delay: 3s;
animation-duration: 7s;
}

.cpu-line-7 {
offset-path: path(
"M 88 88 v -15 q 0 -5 -5 -5 h -10 q -5 0 -5 -5 v -5 q 0 -5 5 -5 h 28"
);
animation-delay: 4s;
animation-duration: 4s;
}

.cpu-line-8 {
offset-path: path("M 30 30 h 25 q 5 0 5 5 v 6.5 q 0 5 5 5 h 35");
animation-delay: 3s;
animation-duration: 3s;
}

@keyframes animation-path {
0% {
offset-distance: 0%;
}
100% {
offset-distance: 100%;
}
}

`}
copyCode={true}
/>

<Step>Update import paths to match your project structure.</Step>

</Steps>

</TabsContent>

</Tabs>

---

## Usage

```tsx title="app/page.tsx" showLineNumbers
import { CpuArchitecture } from "@/components/gammaui/cpu-architecture"

export default function Home() {
  return (
    <div className="flex min-h-screen items-center justify-center">
      <CpuArchitecture />
    </div>
  )
}
```

---

## Examples

### Default CPU

```tsx title="example.tsx" showLineNumbers
<CpuArchitecture />
```

---

### Custom Text & Size

```tsx title="example.tsx" showLineNumbers {3-4}
<CpuArchitecture text="GPU" width="300" height="150" />
```

---

### Disable Animations

```tsx title="example.tsx" showLineNumbers {2-4}
<CpuArchitecture
  animateLines={false}
  animateMarkers={false}
  animateText={false}
/>
```

---

### Hide CPU Connections

```tsx title="example.tsx" showLineNumbers {2}
<CpuArchitecture showCpuConnections={false} />
```

---

### Change Marker Size

```tsx title="example.tsx" showLineNumbers {2}
<CpuArchitecture lineMarkerSize={30} />
```

---

### Custom ClassName Support

```tsx title="example.tsx" showLineNumbers {2}
<CpuArchitecture className="text-blue-500" />
```

---

## Props

| Name                 | Type    | Default  | Description                                      |
| -------------------- | ------- | -------- | ------------------------------------------------ |
| `text`               | string  | `"CPU"`  | Label inside CPU box                             |
| `width`              | string  | `"100%"` | SVG width                                        |
| `height`             | string  | `"100%"` | SVG height                                       |
| `showCpuConnections` | boolean | `true`   | Whether to show the small surrounding connectors |
| `animateText`        | boolean | `true`   | Enables text gradient animation                  |
| `animateLines`       | boolean | `true`   | Enables line drawing animation                   |
| `animateMarkers`     | boolean | `true`   | Enables pulsing markers                          |
| `lineMarkerSize`     | number  | `18`     | Size of the moving markers                       |
| `className`          | string  | —        | Custom CSS class                                 |