[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_23":24,"_25":26,"_27":21,"_28":21,"_29":21,"_30":21,"_31":21,"_32":26,"_33":34},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":-7,"_12":13,"_14":15,"_16":17,"_18":19,"_20":21,"_22":21},"sharedTextdocId","68ab67329b3c8191b2c1b104f8c4dc1b","versionInt","title","Kubernetes Architecture — Animated Diagram (react)","type","code/react","content","import React, { useMemo, useState } from \"react\";\nimport { motion } from \"framer-motion\";\n\n/**\n * Kubernetes Architecture — Animated, single-file React component\n * - Visualizes Control Plane (API Server, etcd, Scheduler, Controller Manager)\n * - Worker Nodes (kubelet, kube-proxy, Pods) and key objects (Deployment, Service)\n * - Two animated flows you can toggle:\n * 1) Deploy & Schedule (kubectl → API Server → etcd → Scheduler → Kubelet → Pods)\n * 2) Service Traffic (Client → Service → kube-proxy → Pod)\n *\n * Styling: Tailwind (no imports needed). Animations: Framer Motion.\n * You can drop this component into any React app or preview it here.\n */\n\n// Helper: absolute positioned card\nconst Card = ({ x, y, w = 260, h = 120, title, subtitle, items, tone = \"blue\" }) => {\n const toneMap = {\n blue: \"border-blue-400/70 shadow-blue-200/40\",\n emerald: \"border-emerald-400/70 shadow-emerald-200/40\",\n amber: \"border-amber-400/70 shadow-amber-200/40\",\n rose: \"border-rose-400/70 shadow-rose-200/40\",\n zinc: \"border-zinc-300/70 shadow-zinc-200/40\",\n violet: \"border-violet-400/70 shadow-violet-200/40\",\n };\n return (\n \n

{subtitle}

{title}

\n {items && (\n

{it}

\n )}\n \n );\n};\n\n// Small badge-like box (Pods)\nconst Pod = ({ x, y, label }) => (\n \n {label}\n \n);\n\n// Worker Node frame\nconst WorkerNode = ({ x, y, title }) => (\n \n

Worker Node

{title}

kubelet

Pod lifecycle, node agent

kube-proxy

Service VIP → Pod iptables/ipvs

\n \n);\n\n// Reusable SVG arrow with animated dash flow\nconst FlowArrow = ({ id, points, color = \"#2563eb\", width = 2, animate = true }) => {\n const d = useMemo(() => {\n if (!points || points.length < 2) return \"\";\n return points.map((p, i) => (i === 0 ? `M ${p[0]},${p[1]}` : `L ${p[0]},${p[1]}`)).join(\" \");\n }, [points]);\n const pathLen = 1200; // visual length for dash animation\n return (\n <>\n \n \n \n );\n};\n\nexport default function KubernetesArchitectureAnimated() {\n const [mode, setMode] = useState(\"deploy\"); // deploy | service\n\n // Coordinates for key anchors (tuned to the 1100x740 canvas)\n const A = {\n client: [520, 20],\n service: [520, 120],\n deployment: [260, 120],\n apiserver: [40, 140],\n scheduler: [40, 250],\n controller: [40, 360],\n etcd: [40, 470],\n worker1: [680, 160], // frame origin\n worker2: [680, 400],\n w1_kubelet: [710, 200],\n w1_proxy: [860, 200],\n w2_kubelet: [710, 440],\n w2_proxy: [860, 440],\n pod1: [720, 260],\n pod2: [800, 260],\n pod3: [880, 260],\n pod4: [720, 500],\n pod5: [800, 500],\n };\n\n // Paths for animations\n const deployFlow = [\n // kubectl → API Server → etcd (store desired state)\n [A.client, A.apiserver],\n [A.apiserver, A.etcd],\n // API Server ↔ Scheduler (binds pods)\n [A.apiserver, A.scheduler],\n [A.scheduler, A.apiserver],\n // API Server → Kubelet (create pods)\n [A.apiserver, A.w1_kubelet],\n [A.w1_kubelet, A.pod1],\n [A.w1_kubelet, A.pod2],\n // Controller Manager keeps desired vs actual in sync\n [A.controller, A.apiserver],\n [A.apiserver, A.controller],\n ];\n\n const serviceFlow = [\n // Client → ClusterIP Service → kube-proxy → Pod (on any node)\n [A.client, A.service],\n [A.service, A.w1_proxy],\n [A.w1_proxy, A.pod2],\n // Another request to a different backend (load-balancing)\n [A.service, A.w2_proxy],\n [A.w2_proxy, A.pod5],\n ];\n\n const active = mode === \"deploy\" ? deployFlow : serviceFlow;\n\n return (\n

\n {/* Title & legend */}\n

Kubernetes Architecture

Control Plane, Workers, Deployments & Services — with animated flows

\n\n {/* Controls */}\n

\n {[\n { key: \"deploy\", label: \"Deploy & Schedule\" },\n { key: \"service\", label: \"Service Traffic\" },\n ].map(({ key, label }) => (\n setMode(key)}\n className={`px-3 py-1.5 rounded-full text-sm border ${\n mode === key\n ? \"bg-blue-600 text-white border-blue-600 shadow\"\n : \"bg-white text-zinc-700 border-zinc-300 hover:bg-zinc-50\"\n }`}\n >\n {label}\n \n ))}\n

\n\n {/* Cards & frames */}\n \n \n \n \n\n \n\n \n\n {/* Client (kubectl / user) */}\n

Client / kubectl

\n\n {/* Worker Nodes */}\n \n \n\n {/* Pods */}\n \n \n \n \n \n\n {/* kubelet / kube-proxy tiny labels (anchors) */}\n

kubelet (w1)

kube-proxy (w1)

kubelet (w2)

kube-proxy (w2)

\n\n {/* SVG layer for arrows */}\n \n\n {/* Legend */}\n

Deploy & Schedule

Service Traffic

State persistence (etcd)

\n\n {/* Explanatory callouts */}\n

How it works: You apply a Deployment → API Server stores desired state in etcd → Scheduler binds Pods to nodes → kubelet creates Pods → Service gives a stable VIP → kube-proxy load-balances to Pods.

Toggle flows at the top-right to see the control-plane vs. data-plane traffic.\n

\n );\n}\n","access","public","isModerationBlocked",false,"isAnonifyApiKeyDetected","dd",{"_35":36,"_37":38},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",34],"traceId","5657420246134298383","traceTime",1776531991081]