Tailwind CSS Stroke

export default function TriangleSVG() {
  return (
    <svg
      className="w-screen h-screen stroke-blue-500"
      xmlns="http://www.w3.org/2000/svg"
      fill="none"
      viewBox="0 0 100 100"
      strokeWidth="4"
    >
      {/* Adding a stroke color */}
      <polygon points="50,15 90,85 10,85" />
    </svg>
  );
}

export default function InteractiveSVG() {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 100 100"
      className="w-screen h-screen stroke-gray-500 hover:stroke-green-500 focus:stroke-red-500"
      strokeWidth="6"
      tabIndex="0"
    >
      {/* States added on hover & focus */}
      <circle cx="50" cy="50" r="40" />
    </svg>
  );
}

export default function ResponsiveSVG() {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 100 100"
      className="w-screen h-screen stroke-purple-500 sm:stroke-green-500 lg:stroke-blue-500"
      strokeWidth="8"
    >
      {/* Breakpoints for stroke adjustments */}
      <rect x="10" y="10" width="80" height="80" />
    </svg>
  );
}

import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

export default function CustomStrokeSVG() {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 100 100"
      className="w-screen h-screen stroke-golden"
      strokeWidth="10"
    >
      {/* A triangle with custom golden stroke */}
      <polygon points="50,5 95,95 5,95" />
    </svg>
  );
}

export default function ArbitraryStrokeSVG() {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 100 100"
      className="w-screen h-screen stroke-[#36c4c5]"
      strokeWidth="5"
    >
      {/* Custom gradient stroke applied */}
      <defs>
        <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" stopColor="#FF5733" />
          <stop offset="100%" stopColor="#FFC300" />
        </linearGradient>
      </defs>
      <circle cx="50" cy="50" r="40" />
    </svg>
  );
}

const WeatherIconsGrid = () => {
  const data = [
    { id: 1, icon: 'sun', label: 'Sunny', temp: '28°C' },
    { id: 2, icon: 'cloud', label: 'Cloudy', temp: '22°C' },
    { id: 3, icon: 'rain', label: 'Rainy', temp: '18°C' },
    { id: 4, icon: 'snow', label: 'Snowy', temp: '0°C' },
    { id: 5, icon: 'wind', label: 'Windy', temp: '20°C' },
    { id: 6, icon: 'storm', label: 'Storm', temp: '16°C' }
  ];

  return (
    <div className="grid grid-cols-3 gap-4 p-6 bg-slate-100 h-screen rounded-xl">
      {data.map((item) => (
        <div key={item.id} className="flex flex-col items-center p-4 bg-white rounded-lg group">
          <svg
            className="w-12 h-12 stroke-blue-500 group-hover:stroke-blue-700 transition-colors"
            viewBox="0 0 24 24"
            fill="none"
            strokeWidth="2"
            strokeLinecap="round"
            strokeLinejoin="round"
          >
            <path d="M12 3v18M3 12h18" />
          </svg>
          <span className="mt-2 font-medium">{item.label}</span>
          <span className="text-sm text-gray-600">{item.temp}</span>
        </div>
      ))}
    </div>
  );
};

export default WeatherIconsGrid

const Timeline = () => {
  const data = [
    { id: 1, event: 'Project Kickoff', date: 'Jan 2024', status: 'completed' },
    { id: 2, event: 'Design Phase', date: 'Feb 2024', status: 'completed' },
    { id: 3, event: 'Development', date: 'Mar 2024', status: 'in-progress' },
    { id: 4, event: 'Testing', date: 'Apr 2024', status: 'pending' },
    { id: 5, event: 'Deployment', date: 'May 2024', status: 'pending' },
    { id: 6, event: 'Review', date: 'Jun 2024', status: 'pending' }
  ];

  return (
    <div className="space-y-6 p-8">
      {data.map((item) => (
        <div key={item.id} className="flex items-center space-x-4">
          <svg
            className={`w-8 h-8 ${
              item.status === 'completed' ? 'stroke-green-500' :
              item.status === 'in-progress' ? 'stroke-blue-500' : 'stroke-gray-300'
            }`}
            viewBox="0 0 24 24"
            fill="none"
            strokeWidth="2"
          >
            <circle cx="12" cy="12" r="10" />
            {item.status === 'completed' && <path d="M8 12l3 3 5-5" />}
          </svg>
          <div>
            <h3 className="font-medium">{item.event}</h3>
            <p className="text-sm text-gray-600">{item.date}</p>
          </div>
        </div>
      ))}
    </div>
  );
};

export default Timeline;

const SkillRadar = () => {
  const data = [
    { skill: "JavaScript", level: 90, category: "frontend" },
    { skill: "Python", level: 85, category: "backend" },
    { skill: "React", level: 88, category: "frontend" },
    { skill: "Node.js", level: 82, category: "backend" },
    { skill: "UI/UX", level: 75, category: "design" },
    { skill: "DevOps", level: 70, category: "operations" }
  ];

  const center = { x: 150, y: 150 };
  const radius = 100;

  const getCoordinates = (index, level) => {
    const angle = (Math.PI * 2 * index) / data.length;
    const adjustedRadius = (radius * level) / 100;
    return {
      x: center.x + adjustedRadius * Math.cos(angle),
      y: center.y + adjustedRadius * Math.sin(angle)
    };
  };

  return (
    <div className="p-8 bg-gray-50">
      <svg className="w-full h-96" viewBox="0 0 300 300">
        {/* Background grid */}
        {[20, 40, 60, 80, 100].map((level) => (
          <polygon
            key={level}
            points={data
              .map((_, i) => getCoordinates(i, level))
              .map(({ x, y }) => `${x},${y}`)
              .join(" ")}
            className="stroke-gray-200 fill-none"
          />
        ))}
        
        {/* Skill areas */}
        <polygon
          points={data
            .map((_, i) => getCoordinates(i, data[i].level))
            .map(({ x, y }) => `${x},${y}`)
            .join(" ")}
          className="stroke-purple-500 fill-purple-100 fill-opacity-50"
        />
        
        {/* Labels */}
        {data.map((skill, i) => {
          const { x, y } = getCoordinates(i, 100);
          return (
            <text
              key={skill.skill}
              x={x}
              y={y}
              className="text-xs"
              textAnchor="middle"
            >
              {skill.skill}
            </text>
          );
        })}
      </svg>
    </div>
  );
};

export default SkillRadar;

export default function SkillProgress() {
  const skills = [
    { name: "JavaScript", level: 90 },
    { name: "React", level: 85 },
    { name: "Node.js", level: 80 },
    { name: "Python", level: 75 },
    { name: "Docker", level: 70 },
    { name: "AWS", level: 65 }
  ];

  return (
    <div className="grid grid-cols-3 gap-8 p-8">
      {skills.map((skill) => (
        <div key={skill.name} className="text-center">
          <svg className="w-32 h-32 mx-auto" viewBox="0 0 100 100">
            <circle
              className="stroke-gray-200"
              strokeWidth="8"
              cx="50"
              cy="50"
              r="40"
              fill="none"
            />
            <circle
              className="stroke-blue-500 transition-all duration-1000"
              strokeWidth="8"
              strokeLinecap="round"
              cx="50"
              cy="50"
              r="40"
              fill="none"
              strokeDasharray={`${skill.level * 2.51} 251`}
              transform="rotate(-90 50 50)"
            />
          </svg>
          <h3 className="mt-4 font-bold">{skill.name}</h3>
          <p className="text-gray-600">{skill.level}%</p>
        </div>
      ))}
    </div>
  );
}

const SocialMediaGraph = () => {
  const data = [
    { platform: "Twitter", engagement: [45, 52, 38, 65, 42, 58], color: "stroke-blue-400" },
    { platform: "Instagram", engagement: [65, 72, 68, 75, 82, 88], color: "stroke-pink-500" },
    { platform: "LinkedIn", engagement: [35, 42, 48, 52, 58, 62], color: "stroke-blue-700" },
    { platform: "Facebook", engagement: [55, 48, 52, 45, 50, 54], color: "stroke-blue-600" },
    { platform: "YouTube", engagement: [25, 32, 38, 45, 52, 58], color: "stroke-red-500" },
    { platform: "TikTok", engagement: [15, 28, 42, 58, 72, 85], color: "stroke-purple-500" }
  ];

  const maxValue = Math.max(...data.flatMap(d => d.engagement));
  const width = 600;
  const height = 300;
  const padding = 40;

  return (
    <div className="p-8 bg-gray-50">
      <svg className="w-full h-96" viewBox={`0 0 ${width} ${height}`}>
        {data.map((platform, index) => {
          const points = platform.engagement.map((value, i) => {
            const x = padding + (i * (width - 2 * padding)) / (platform.engagement.length - 1);
            const y = height - padding - ((value / maxValue) * (height - 2 * padding));
            return `${x},${y}`;
          }).join(" ");

          return (
            <polyline
              key={platform.platform}
              points={points}
              className={`${platform.color} fill-none stroke-2`}
            />
          );
        })}
      </svg>
    </div>
  );
};

export default SocialMediaGraph;

import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

// App.js
export default function AnimatedProgressCircle() {
  return (
    <div className="flex items-center justify-center h-screen bg-gray-900">
      <svg className="w-48 h-48 transform rotate-[-90deg]">
        <circle
          cx="96"
          cy="96"
          r="88"
          className="stroke-gray-700 fill-none"
          strokeWidth="12"
        />
        <circle
          cx="96"
          cy="96"
          r="88"
          className="stroke-progress-high fill-none"
          strokeWidth="12"
          strokeDasharray="553"
          strokeDashoffset="166"
          strokeLinecap="round"
        />
      </svg>
    </div>
  )
}

import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

// App.js
export default function InteractivePath() {
  return (
    <div className="flex items-center justify-center h-screen bg-slate-100">
      <svg 
        viewBox="0 0 400 200" 
        className="w-96 h-48"
      >
        <path
          d="M10 80 Q 95 10 180 80 T 350 80"
          className="stroke-path-default hover:stroke-path-hover stroke-[3] fill-none transition-all duration-300 cursor-pointer"
          strokeLinecap="round"
          strokeLinejoin="round"
        />
        <path
          d="M10 120 Q 95 190 180 120 T 350 120"
          className="stroke-path-default hover:stroke-path-hover stroke-[3] fill-none transition-all duration-300 cursor-pointer"
          strokeLinecap="round"
          strokeLinejoin="round"
        />
      </svg>
    </div>
  )
}

import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

// App.js
export default function DecorativeBorder() {
  return (
    <div className="flex items-center justify-center h-screen bg-white p-8">
      <div className="relative w-full max-w-md aspect-square">
        <svg 
          className="w-full h-full absolute top-0 left-0"
          viewBox="0 0 400 400"
        >
          <rect
            x="10"
            y="10"
            width="380"
            height="380"
            className="stroke-border-primary fill-none"
            strokeDasharray="20,10,5,10"
          />
          <rect
            x="30"
            y="30"
            width="340"
            height="340"
            className="stroke-border-secondary fill-none"
            strokeDasharray="10,5"
          />
        </svg>
        <img
          src="https://images.unsplash.com/photo-1682687220742-aba13b6e50ba"
          alt="Decorative content"
          className="absolute inset-12 object-cover"
        />
      </div>
    </div>
  )
}