ankan123basu · Ankit-Basu · Dec 11, 2025
diff --git a/Cyberneticmilitaryemblemdesign/README.md b/Cyberneticmilitaryemblemdesign/README.md
@@ -0,0 +1,11 @@
+
+  # Cybernetic Military Emblem Design
+
+  This is a code bundle for Cybernetic Military Emblem Design. The original project is available at https://www.figma.com/design/gJMrFxNPWaI21UT4uOQJ02/Cybernetic-Military-Emblem-Design.
+
+  ## Running the code
+
+  Run `npm i` to install the dependencies.
+
+  Run `npm run dev` to start the development server.
+
diff --git a/Cyberneticmilitaryemblemdesign/index.html b/Cyberneticmilitaryemblemdesign/index.html
@@ -0,0 +1,15 @@
+
+  <!DOCTYPE html>
+  <html lang="en">
+    <head>
+      <meta charset="UTF-8" />
+      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+      <title>Cybernetic Military Emblem Design</title>
+    </head>
+
+    <body>
+      <div id="root"></div>
+      <script type="module" src="/src/main.tsx"></script>
+    </body>
+  </html>
+
diff --git a/Cyberneticmilitaryemblemdesign/package.json b/Cyberneticmilitaryemblemdesign/package.json
@@ -0,0 +1,59 @@
+
+  {
+      "name": "Cybernetic Military Emblem Design",
+      "version": "0.1.0",
+      "private": true,
+      "dependencies": {
+          "@radix-ui/react-accordion": "^1.2.3",
+          "@radix-ui/react-alert-dialog": "^1.1.6",
+          "@radix-ui/react-aspect-ratio": "^1.1.2",
+          "@radix-ui/react-avatar": "^1.1.3",
+          "@radix-ui/react-checkbox": "^1.1.4",
+          "@radix-ui/react-collapsible": "^1.1.3",
+          "@radix-ui/react-context-menu": "^2.2.6",
+          "@radix-ui/react-dialog": "^1.1.6",
+          "@radix-ui/react-dropdown-menu": "^2.1.6",
+          "@radix-ui/react-hover-card": "^1.1.6",
+          "@radix-ui/react-label": "^2.1.2",
+          "@radix-ui/react-menubar": "^1.1.6",
+          "@radix-ui/react-navigation-menu": "^1.2.5",
+          "@radix-ui/react-popover": "^1.1.6",
+          "@radix-ui/react-progress": "^1.1.2",
+          "@radix-ui/react-radio-group": "^1.2.3",
+          "@radix-ui/react-scroll-area": "^1.2.3",
+          "@radix-ui/react-select": "^2.1.6",
+          "@radix-ui/react-separator": "^1.1.2",
+          "@radix-ui/react-slider": "^1.2.3",
+          "@radix-ui/react-slot": "^1.1.2",
+          "@radix-ui/react-switch": "^1.1.3",
+          "@radix-ui/react-tabs": "^1.1.3",
+          "@radix-ui/react-toggle": "^1.1.2",
+          "@radix-ui/react-toggle-group": "^1.1.2",
+          "@radix-ui/react-tooltip": "^1.1.8",
+          "class-variance-authority": "^0.7.1",
+          "clsx": "*",
+          "cmdk": "^1.1.1",
+          "embla-carousel-react": "^8.6.0",
+          "input-otp": "^1.4.2",
+          "lucide-react": "^0.487.0",
+          "next-themes": "^0.4.6",
+          "react": "^18.3.1",
+          "react-day-picker": "^8.10.1",
+          "react-dom": "^18.3.1",
+          "react-hook-form": "^7.55.0",
+          "react-resizable-panels": "^2.1.7",
+          "recharts": "^2.15.2",
+          "sonner": "^2.0.3",
+          "tailwind-merge": "*",
+          "vaul": "^1.1.2"
+      },
+      "devDependencies": {
+          "@types/node": "^20.10.0",
+          "@vitejs/plugin-react-swc": "^3.10.2",
+          "vite": "6.3.5"
+      },
+      "scripts": {
+          "dev": "vite",
+          "build": "vite build"
+      }
+  }
diff --git a/Cyberneticmilitaryemblemdesign/src/App.tsx b/Cyberneticmilitaryemblemdesign/src/App.tsx
@@ -0,0 +1,9 @@
+import { SudarshanEmblem } from './components/SudarshanEmblem';
+
+export default function App() {
+  return (
+    <div className="min-h-screen bg-black flex items-center justify-center p-8">
+      <SudarshanEmblem />
+    </div>
+  );
+}
diff --git a/Cyberneticmilitaryemblemdesign/src/Attributions.md b/Cyberneticmilitaryemblemdesign/src/Attributions.md
@@ -0,0 +1,3 @@
+This Figma Make file includes components from [shadcn/ui](https://ui.shadcn.com/) used under [MIT license](https://github.com/shadcn-ui/ui/blob/main/LICENSE.md).
+
+This Figma Make file includes photos from [Unsplash](https://unsplash.com) used under [license](https://unsplash.com/license).
diff --git a/Cyberneticmilitaryemblemdesign/src/components/SudarshanEmblem.tsx b/Cyberneticmilitaryemblemdesign/src/components/SudarshanEmblem.tsx
@@ -0,0 +1,258 @@
+import { useEffect, useState } from 'react';
+
+export function SudarshanEmblem() {
+  return (
+    <div className="relative flex flex-col items-center gap-8">
+      <svg
+        width="500"
+        height="500"
+        viewBox="0 0 500 500"
+        className="drop-shadow-xl"
+      >
+        <defs>
+          {/* Simple gradients for depth */}
+          <linearGradient id="navy-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
+            <stop offset="0%" stopColor="#1e3a5f" />
+            <stop offset="100%" stopColor="#0f1f3d" />
+          </linearGradient>
+
+          <linearGradient id="gold-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
+            <stop offset="0%" stopColor="#c9a961" />
+            <stop offset="100%" stopColor="#a68b4a" />
+          </linearGradient>
+
+          <linearGradient id="shield-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
+            <stop offset="0%" stopColor="#1e3a5f" stopOpacity="0.3" />
+            <stop offset="100%" stopColor="#0f1f3d" stopOpacity="0.6" />
+          </linearGradient>
+        </defs>
+
+        {/* Outer border circle */}
+        <circle 
+          cx="250" 
+          cy="250" 
+          r="240" 
+          fill="none" 
+          stroke="#4a5f7f" 
+          strokeWidth="2"
+          opacity="0.5"
+        />
+
+        {/* Radar grid base */}
+        <g opacity="0.7">
+          {/* Concentric circles for radar */}
+          {[100, 140, 180].map((r, i) => (
+            <circle 
+              key={i}
+              cx="250" 
+              cy="250" 
+              r={r} 
+              fill="none" 
+              stroke="#4a5f7f" 
+              strokeWidth="1"
+              opacity="0.4"
+            />
+          ))}
+
+          {/* Radar grid lines */}
+          {[...Array(8)].map((_, i) => {
+            const angle = (i * 45 * Math.PI) / 180;
+            const x2 = 250 + Math.cos(angle) * 180;
+            const y2 = 250 + Math.sin(angle) * 180;
+            return (
+              <line 
+                key={i}
+                x1="250" 
+                y1="250" 
+                x2={x2} 
+                y2={y2} 
+                stroke="#4a5f7f" 
+                strokeWidth="0.5"
+                opacity="0.3"
+              />
+            );
+          })}
+        </g>
+
+        {/* Shield dome structure */}
+        <g>
+          {/* Main shield dome path */}
+          <path
+            d="M 100 250 Q 100 120 250 80 Q 400 120 400 250 L 400 280 Q 400 350 250 400 Q 100 350 100 280 Z"
+            fill="url(#shield-gradient)"
+            stroke="#4a5f7f"
+            strokeWidth="2.5"
+            opacity="0.4"
+          />
+
+          {/* Shield outline - stronger */}
+          <path
+            d="M 110 250 Q 110 130 250 95 Q 390 130 390 250"
+            fill="none"
+            stroke="#c9a961"
+            strokeWidth="2"
+            opacity="0.8"
+          />
+
+          {/* Shield grid lines - vertical */}
+          {[-60, -30, 0, 30, 60].map((offset, i) => (
+            <path
+              key={i}
+              d={`M ${250 + offset} 95 Q ${250 + offset} ${250 + Math.abs(offset) * 0.8} ${250 + offset} ${320 - Math.abs(offset) * 0.3}`}
+              fill="none"
+              stroke="#4a5f7f"
+              strokeWidth="1"
+              opacity="0.3"
+            />
+          ))}
+
+          {/* Shield grid lines - horizontal arcs */}
+          {[120, 160, 200, 240].map((y, i) => {
+            const width = 140 - (i * 20);
+            return (
+              <ellipse
+                key={i}
+                cx="250"
+                cy={y}
+                rx={width}
+                ry="15"
+                fill="none"
+                stroke="#4a5f7f"
+                strokeWidth="1"
+                opacity="0.3"
+              />
+            );
+          })}
+        </g>
+
+        {/* Sudarshana Chakra - 8 blades */}
+        <g>
+          {/* Central hub */}
+          <circle 
+            cx="250" 
+            cy="250" 
+            r="45" 
+            fill="url(#navy-gradient)"
+            stroke="#c9a961"
+            strokeWidth="2.5"
+          />
+
+          {/* Inner detail ring */}
+          <circle 
+            cx="250" 
+            cy="250" 
+            r="38" 
+            fill="none" 
+            stroke="#4a5f7f" 
+            strokeWidth="1"
+          />
+
+          {/* 8 Chakra blades */}
+          {[...Array(8)].map((_, i) => {
+            const angle = i * 45;
+            return (
+              <g key={i} transform={`rotate(${angle} 250 250)`}>
+                {/* Main blade shape */}
+                <path
+                  d="M 250 205 L 258 220 L 254 250 L 250 250 L 246 250 L 242 220 Z"
+                  fill="#1e3a5f"
+                  stroke="#4a5f7f"
+                  strokeWidth="1.5"
+                />
+
+                {/* Blade edge highlight */}
+                <path
+                  d="M 250 205 L 255 220"
+                  stroke="#c9a961"
+                  strokeWidth="1"
+                  opacity="0.6"
+                />
+
+                {/* Outer blade extension */}
+                <path
+                  d="M 250 160 L 254 190 L 250 205 L 246 190 Z"
+                  fill="#4a5f7f"
+                  stroke="#c9a961"
+                  strokeWidth="1.5"
+                />
+              </g>
+            );
+          })}
+
+          {/* Center circle detail */}
+          <circle 
+            cx="250" 
+            cy="250" 
+            r="20" 
+            fill="#0f1f3d"
+            stroke="#c9a961"
+            strokeWidth="2"
+          />
+
+          {/* Center dot */}
+          <circle 
+            cx="250" 
+            cy="250" 
+            r="8" 
+            fill="#c9a961"
+          />
+        </g>
+
+        {/* Corner brackets for military insignia look */}
+        {[
+          { x: 40, y: 40, rotate: 0 },
+          { x: 460, y: 40, rotate: 90 },
+          { x: 460, y: 460, rotate: 180 },
+          { x: 40, y: 460, rotate: 270 }
+        ].map((corner, i) => (
+          <g key={i} transform={`translate(${corner.x}, ${corner.y}) rotate(${corner.rotate})`}>
+            <path d="M 0 0 L 20 0 M 0 0 L 0 20" stroke="#c9a961" strokeWidth="2.5"/>
+          </g>
+        ))}
+
+        {/* Top banner */}
+        <g>
+          <path
+            d="M 150 60 L 350 60 L 340 80 L 160 80 Z"
+            fill="#1e3a5f"
+            stroke="#c9a961"
+            strokeWidth="1.5"
+          />
+        </g>
+
+        {/* Bottom banner */}
+        <g>
+          <path
+            d="M 140 440 L 360 440 L 350 420 L 150 420 Z"
+            fill="#1e3a5f"
+            stroke="#c9a961"
+            strokeWidth="1.5"
+          />
+        </g>
+
+        {/* Side emblems */}
+        <circle cx="60" cy="250" r="8" fill="#c9a961"/>
+        <circle cx="440" cy="250" r="8" fill="#c9a961"/>
+
+        {/* Stars accent */}
+        <g opacity="0.8">
+          <circle cx="60" cy="250" r="2" fill="#1e3a5f"/>
+          <circle cx="440" cy="250" r="2" fill="#1e3a5f"/>
+        </g>
+      </svg>
+
+      {/* Project text */}
+      <div className="flex flex-col items-center gap-4">
+        <h1 className="text-5xl tracking-wider text-[#c9a961]" style={{ fontFamily: 'system-ui, -apple-system, sans-serif' }}>
+          PROJECT SUDARSHAN
+        </h1>
+
+        <div className="h-0.5 w-64 bg-gradient-to-r from-transparent via-[#4a5f7f] to-transparent"></div>
+
+        <p className="text-sm tracking-widest text-[#4a5f7f]" style={{ fontFamily: 'system-ui, -apple-system, sans-serif' }}>
+          DEFENSE • SURVEILLANCE • PROTECTION
+        </p>
+      </div>
+    </div>
+  );
+}
diff --git a/Cyberneticmilitaryemblemdesign/src/components/figma/ImageWithFallback.tsx b/Cyberneticmilitaryemblemdesign/src/components/figma/ImageWithFallback.tsx
@@ -0,0 +1,27 @@
+import React, { useState } from 'react'
+
+const ERROR_IMG_SRC =
+  'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODgiIGhlaWdodD0iODgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc3Ryb2tlPSIjMDAwIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBvcGFjaXR5PSIuMyIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIzLjciPjxyZWN0IHg9IjE2IiB5PSIxNiIgd2lkdGg9IjU2IiBoZWlnaHQ9IjU2IiByeD0iNiIvPjxwYXRoIGQ9Im0xNiA1OCAxNi0xOCAzMiAzMiIvPjxjaXJjbGUgY3g9IjUzIiBjeT0iMzUiIHI9IjciLz48L3N2Zz4KCg=='
+
+export function ImageWithFallback(props: React.ImgHTMLAttributes<HTMLImageElement>) {
+  const [didError, setDidError] = useState(false)
+
+  const handleError = () => {
+    setDidError(true)
+  }
+
+  const { src, alt, style, className, ...rest } = props
+
+  return didError ? (
+    <div
+      className={`inline-block bg-gray-100 text-center align-middle ${className ?? ''}`}
+      style={style}
+    >
+      <div className="flex items-center justify-center w-full h-full">
+        <img src={ERROR_IMG_SRC} alt="Error loading image" {...rest} data-original-url={src} />
+      </div>
+    </div>
+  ) : (
+    <img src={src} alt={alt} className={className} style={style} {...rest} onError={handleError} />
+  )
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		This Figma Make file includes components from [shadcn/ui](https://ui.shadcn.com/) used under [MIT license](https://github.com/shadcn-ui/ui/blob/main/LICENSE.md).

		This Figma Make file includes photos from [Unsplash](https://unsplash.com) used under [license](https://unsplash.com/license).