CPU Architecture
A simple CPU architecture animation
Basic
1
Install Dependencies
Install the dependencies for the CPU Architecture component.
bash
npm i clsx tailwind-merge2
Add Util File
Add a lib/utils.ts in your root directory.
utils.ts
import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
3
Add CSS Classes
Add css classes in globals.css file.
globals.css
.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%;
}
}
4
Finally, Add SVG Component
Add a components/svg-components/cpu-architecture.tsxcomponent in your components directory.
cpu-architecture.tsx
import { cn } from "@/lib/utils";
import React from "react";
export interface CpuArchitectureSvgProps {
className?: string;
width?: string;
height?: string;
text?: string;
showCpuConnections?: boolean;
lineMarkerSize?: number;
animateText?: boolean;
animateLines?: boolean;
animateMarkers?: boolean;
}
const CpuArchitecture = ({
className,
width = "100%",
height = "100%",
text = "CPU",
showCpuConnections = true,
animateText = true,
lineMarkerSize = 18,
animateLines = true,
animateMarkers = true,
}: CpuArchitectureSvgProps) => {
return (
<svg
className={cn("text-muted", className)}
width={width}
height={height}
viewBox="0 0 200 100"
>
{/* Paths */}
<g
stroke="currentColor"
fill="none"
strokeWidth="0.3"
strokeDasharray="100 100"
pathLength="100"
markerStart="url(#cpu-circle-marker)"
>
{/* 1st */}
<path
strokeDasharray="100 100"
pathLength="100"
d="M 10 20 h 79.5 q 5 0 5 5 v 30"
/>
{/* 2nd */}
<path
strokeDasharray="100 100"
pathLength="100"
d="M 180 10 h -69.7 q -5 0 -5 5 v 30"
/>
{/* 3rd */}
<path d="M 130 20 v 21.8 q 0 5 -5 5 h -10" />
{/* 4th */}
<path d="M 170 80 v -21.8 q 0 -5 -5 -5 h -50" />
{/* 5th */}
<path
strokeDasharray="100 100"
pathLength="100"
d="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 -20"
/>
{/* 6th */}
<path d="M 94.8 95 v -36" />
{/* 7th */}
<path d="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 14" />
{/* 8th */}
<path d="M 30 30 h 25 q 5 0 5 5 v 6.5 q 0 5 5 5 h 20" />
{/* Animation For Path Starting */}
{animateLines && (
<animate
attributeName="stroke-dashoffset"
from="100"
to="0"
dur="1s"
fill="freeze"
calcMode="spline"
keySplines="0.25,0.1,0.5,1"
keyTimes="0; 1"
/>
)}
</g>
{/* 1. Blue Light */}
<g mask="url(#cpu-mask-1)">
<circle
className="cpu-architecture cpu-line-1"
cx="0"
cy="0"
r="8"
fill="url(#cpu-blue-grad)"
/>
</g>
{/* 2. Yellow Light */}
<g mask="url(#cpu-mask-2)">
<circle
className="cpu-architecture cpu-line-2"
cx="0"
cy="0"
r="8"
fill="url(#cpu-yellow-grad)"
/>
</g>
{/* 3. Pinkish Light */}
<g mask="url(#cpu-mask-3)">
<circle
className="cpu-architecture cpu-line-3"
cx="0"
cy="0"
r="8"
fill="url(#cpu-pinkish-grad)"
/>
</g>
{/* 4. White Light */}
<g mask="url(#cpu-mask-4)">
<circle
className="cpu-architecture cpu-line-4"
cx="0"
cy="0"
r="8"
fill="url(#cpu-white-grad)"
/>
</g>
{/* 5. Green Light */}
<g mask="url(#cpu-mask-5)">
<circle
className="cpu-architecture cpu-line-5"
cx="0"
cy="0"
r="8"
fill="url(#cpu-green-grad)"
/>
</g>
{/* 6. Orange Light */}
<g mask="url(#cpu-mask-6)">
<circle
className="cpu-architecture cpu-line-6"
cx="0"
cy="0"
r="8"
fill="url(#cpu-orange-grad)"
/>
</g>
{/* 7. Cyan Light */}
<g mask="url(#cpu-mask-7)">
<circle
className="cpu-architecture cpu-line-7"
cx="0"
cy="0"
r="8"
fill="url(#cpu-cyan-grad)"
/>
</g>
{/* 8. Rose Light */}
<g mask="url(#cpu-mask-8)">
<circle
className="cpu-architecture cpu-line-8"
cx="0"
cy="0"
r="8"
fill="url(#cpu-rose-grad)"
/>
</g>
{/* CPU Box */}
<g>
{/* Cpu connections */}
{showCpuConnections && (
<g fill="url(#cpu-connection-gradient)">
<rect x="93" y="37" width="2.5" height="5" rx="0.7" />
<rect x="104" y="37" width="2.5" height="5" rx="0.7" />
<rect
x="116.3"
y="44"
width="2.5"
height="5"
rx="0.7"
transform="rotate(90 116.25 45.5)"
/>
<rect
x="122.8"
y="44"
width="2.5"
height="5"
rx="0.7"
transform="rotate(90 116.25 45.5)"
/>
<rect
x="104"
y="16"
width="2.5"
height="5"
rx="0.7"
transform="rotate(180 105.25 39.5)"
/>
<rect
x="114.5"
y="16"
width="2.5"
height="5"
rx="0.7"
transform="rotate(180 105.25 39.5)"
/>
<rect
x="80"
y="-13.6"
width="2.5"
height="5"
rx="0.7"
transform="rotate(270 115.25 19.5)"
/>
<rect
x="87"
y="-13.6"
width="2.5"
height="5"
rx="0.7"
transform="rotate(270 115.25 19.5)"
/>
</g>
)}
{/* Main CPU Rectangle */}
<rect
x="85"
y="40"
width="30"
height="20"
rx="2"
fill="#181818"
filter="url(#cpu-light-shadow)"
/>
{/* CPU Text */}
<text
x="92"
y="52.5"
fontSize="7"
fill={animateText ? "url(#cpu-text-gradient)" : "white"}
fontWeight="600"
letterSpacing="0.05em"
>
{text}
</text>
</g>
{/* Masks */}
<defs>
<mask id="cpu-mask-1">
<path
d="M 10 20 h 79.5 q 5 0 5 5 v 24"
strokeWidth="0.5"
stroke="white"
/>
</mask>
<mask id="cpu-mask-2">
<path
d="M 180 10 h -69.7 q -5 0 -5 5 v 24"
strokeWidth="0.5"
stroke="white"
/>
</mask>
<mask id="cpu-mask-3">
<path
d="M 130 20 v 21.8 q 0 5 -5 5 h -10"
strokeWidth="0.5"
stroke="white"
/>
</mask>
<mask id="cpu-mask-4">
<path
d="M 170 80 v -21.8 q 0 -5 -5 -5 h -50"
strokeWidth="0.5"
stroke="white"
/>
</mask>
<mask id="cpu-mask-5">
<path
d="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 -20"
strokeWidth="0.5"
stroke="white"
/>
</mask>
<mask id="cpu-mask-6">
<path d="M 94.8 95 v -36" strokeWidth="0.5" stroke="white" />
</mask>
<mask id="cpu-mask-7">
<path
d="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 14"
strokeWidth="0.5"
stroke="white"
/>
</mask>
<mask id="cpu-mask-8">
<path
d="M 30 30 h 25 q 5 0 5 5 v 6.5 q 0 5 5 5 h 20"
strokeWidth="0.5"
stroke="white"
/>
</mask>
{/* Gradients */}
<radialGradient id="cpu-blue-grad" fx="1">
<stop offset="0%" stopColor="#00E8ED" />
<stop offset="50%" stopColor="#08F" />
<stop offset="100%" stopColor="transparent" />
</radialGradient>
<radialGradient id="cpu-yellow-grad" fx="1">
<stop offset="0%" stopColor="#FFD800" />
<stop offset="50%" stopColor="#FFD800" />
<stop offset="100%" stopColor="transparent" />
</radialGradient>
<radialGradient id="cpu-pinkish-grad" fx="1">
<stop offset="0%" stopColor="#830CD1" />
<stop offset="50%" stopColor="#FF008B" />
<stop offset="100%" stopColor="transparent" />
</radialGradient>
<radialGradient id="cpu-white-grad" fx="1">
<stop offset="0%" stopColor="white" />
<stop offset="100%" stopColor="transparent" />
</radialGradient>
<radialGradient id="cpu-green-grad" fx="1">
<stop offset="0%" stopColor="#22c55e" />
<stop offset="100%" stopColor="transparent" />
</radialGradient>
<radialGradient id="cpu-orange-grad" fx="1">
<stop offset="0%" stopColor="#f97316" />
<stop offset="100%" stopColor="transparent" />
</radialGradient>
<radialGradient id="cpu-cyan-grad" fx="1">
<stop offset="0%" stopColor="#06b6d4" />
<stop offset="100%" stopColor="transparent" />
</radialGradient>
<radialGradient id="cpu-rose-grad" fx="1">
<stop offset="0%" stopColor="#f43f5e" />
<stop offset="100%" stopColor="transparent" />
</radialGradient>
<filter
id="cpu-light-shadow"
x="-50%"
y="-50%"
width="200%"
height="200%"
>
<feDropShadow
dx="1.5"
dy="1.5"
stdDeviation="1"
floodColor="black"
floodOpacity="0.1"
/>
</filter>
<marker
id="cpu-circle-marker"
viewBox="0 0 10 10"
refX="5"
refY="5"
markerWidth={lineMarkerSize}
markerHeight={lineMarkerSize}
>
<circle
id="innerMarkerCircle"
cx="5"
cy="5"
r="2"
fill="black"
stroke="#232323"
strokeWidth="0.5"
>
{animateMarkers && (
<animate attributeName="r" values="0; 3; 2" dur="0.5s" />
)}
</circle>
</marker>
{/* Cpu connection gradient */}
<linearGradient
id="cpu-connection-gradient"
x1="0"
y1="0"
x2="0"
y2="1"
>
<stop offset="0%" stopColor="#4F4F4F" />
<stop offset="60%" stopColor="#121214" />
</linearGradient>
{/* Add CPU Text Gradient */}
<linearGradient id="cpu-text-gradient" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stopColor="#666666">
<animate
attributeName="offset"
values="-2; -1; 0"
dur="5s"
repeatCount="indefinite"
calcMode="spline"
keyTimes="0; 0.5; 1"
keySplines="0.4 0 0.2 1; 0.4 0 0.2 1"
/>
</stop>
<stop offset="25%" stopColor="white">
<animate
attributeName="offset"
values="-1; 0; 1"
dur="5s"
repeatCount="indefinite"
calcMode="spline"
keyTimes="0; 0.5; 1"
keySplines="0.4 0 0.2 1; 0.4 0 0.2 1"
/>
</stop>
<stop offset="50%" stopColor="#666666">
<animate
attributeName="offset"
values="0; 1; 2;"
dur="5s"
repeatCount="indefinite"
calcMode="spline"
keyTimes="0; 0.5; 1"
keySplines="0.4 0 0.2 1; 0.4 0 0.2 1"
/>
</stop>
</linearGradient>
</defs>
</svg>
);
};
export { CpuArchitecture };
API Reference
The following table contains the API reference for the component.
| Prop | Type | Required | Default |
|---|---|---|---|
| className | string | false | - |
| width | string | false | 100% |
| height | string | false | 100% |
| text | string | false | CPU |
| showCpuConnections | boolean | false | true |
| lineMarkerSize | number | false | 18 |
| animateText | boolean | false | true |
| animateLines | boolean | false | true |
| animateMarkers | boolean | false | true |