Untitled
"use client" import React from 'react'; // Add these trees to your existing themes with: // premium: { // name: "Premium Forest", // trees: [WillowTree, MapleSapling, BlossomTree, GoldenElm, EnchantedTree] // } // Graceful Willow Tree - Starts simple, develops into a flowing willow const WillowTree = ({ scale }: { scale: number }) => { if (scale === 0) return null; return ( <svg viewBox="0 0 100 100" className="w-full h-full transform transition-all duration-1000" style={{ transform: `scale(${0.5 + (scale * 0.5) / 100})` }}> <defs> <linearGradient id="trunkGradient" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style={{ stopColor: '#8B4513', stopOpacity: 0.9 }} /> <stop offset="50%" style={{ stopColor: '#A0522D', stopOpacity: 1 }} /> <stop offset="100%" style={{ stopColor: '#8B4513', stopOpacity: 0.9 }} /> </linearGradient> <linearGradient id="leafGradient" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" style={{ stopColor: '#74B72E', stopOpacity: 1 }} /> <stop offset="100%" style={{ stopColor: '#4A7A1E', stopOpacity: 1 }} /> </linearGradient> </defs> {/* Curved trunk */} <path d="M48 90 C48 70 45 60 47 40 L53 40 C55 60 52 70 52 90" fill="url(#trunkGradient)" className="transition-all duration-500" /> {/* Drooping branches with leaves */} {scale >= 20 && ( <g className="transition-all duration-500"> <path d="M50 40 Q30 50 20 70" fill="none" stroke="#8B4513" strokeWidth="1" /> <path d="M50 40 Q70 50 80 70" fill="none" stroke="#8B4513" strokeWidth="1" /> <path d="M20 70 Q35 60 50 65 Q65 60 80 70" fill="url(#leafGradient)" opacity={scale >= 50 ? "0.9" : "0.5"} /> </g> )} {/* Additional foliage layers */} {scale >= 50 && ( <g> <path d="M25 55 Q50 35 75 55" fill="url(#leafGradient)" opacity="0.8" /> <path d="M30 45 Q50 30 70 45" fill="url(#leafGradient)" opacity="0.7" /> </g> )} {/* Fine details and highlights */} {scale >= 80 && ( <g className="transition-all duration-300"> {[...Array(6)].map((_, i) => ( <path key={i} d={`M${40 + i * 4} ${35 + i * 3} Q${50} ${30 + i * 2} ${60 - i * 4} ${35 + i * 3}`} fill="none" stroke="#9CD161" strokeWidth="0.5" opacity="0.6" /> ))} </g> )} {/* Sparkle effects for completed growth */} {scale >= 95 && ( <g> {[...Array(5)].map((_, i) => ( <circle key={i} cx={35 + Math.random() * 30} cy={35 + Math.random() * 20} r="0.5" fill="#FFFFFF" opacity="0.8" /> ))} </g> )} </svg> ); }; // Vibrant Maple Sapling const MapleSapling = ({ scale }: { scale: number }) => { if (scale === 0) return null; return ( <svg viewBox="0 0 100 100" className="w-full h-full transform transition-all duration-1000" style={{ transform: `scale(${0.5 + (scale * 0.5) / 100})` }}> <defs> <radialGradient id="mapleGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style={{ stopColor: '#E65D4F', stopOpacity: 1 }} /> <stop offset="100%" style={{ stopColor: '#C41E3A', stopOpacity: 1 }} /> </radialGradient> <radialGradient id="mapleshadow" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style={{ stopColor: '#AA1E3A', stopOpacity: 1 }} /> <stop offset="100%" style={{ stopColor: '#851E3A', stopOpacity: 1 }} /> </radialGradient> </defs> {/* Elegant trunk */} <path d="M45 90 C45 70 48 50 47 40 L53 40 C52 50 55 70 55 90" fill="#8B4513" /> {/* Maple leaf layers */} {scale >= 20 && ( <g className="transition-all duration-500"> <path d="M50 35 L45 45 L40 42 L45 50 L35 48 L45 55 L30 60 L50 65 L70 60 L55 55 L65 48 L55 50 L60 42 L55 45 Z" fill="url(#mapleGradient)" opacity={scale >= 50 ? "1" : "0.7"} /> </g> )} {/* Additional foliage */} {scale >= 50 && ( <g> <path d="M45 30 L40 40 L35 37 L40 45 L30 43 L40 50 L25 55 L45 60 L65 55 L50 50 L60 43 L50 45 L55 37 L50 40 Z" fill="url(#mapleshadow)" opacity="0.8" transform="scale(0.8) translate(12, 0)" /> </g> )} {/* Fine veins */} {scale >= 80 && ( <g> {[...Array(5)].map((_, i) => ( <path key={i} d={`M50 35 L${45 + i * 2} ${45 + i * 2}`} stroke="#D4544C" strokeWidth="0.3" opacity="0.6" /> ))} </g> )} </svg> ); }; // Ethereal Blossom Tree const BlossomTree = ({ scale }: { scale: number }) => { if (scale === 0) return null; return ( <svg viewBox="0 0 100 100" className="w-full h-full transform transition-all duration-1000" style={{ transform: `scale(${0.5 + (scale * 0.5) / 100})` }}> <defs> <radialGradient id="blossomGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style={{ stopColor: '#FFE5F0', stopOpacity: 1 }} /> <stop offset="100%" style={{ stopColor: '#FFB7D5', stopOpacity: 1 }} /> </radialGradient> </defs> {/* Graceful trunk */} <path d="M45 90 Q50 70 47 40 L53 40 Q50 70 55 90" fill="#966F33" /> {/* Base foliage */} {scale >= 20 && ( <g className="transition-all duration-500"> {[...Array(3)].map((_, i) => ( <circle key={i} cx={50} cy={45 - i * 5} r={15 - i * 2} fill="url(#blossomGradient)" opacity={(scale >= 50 ? 0.9 : 0.6) - i * 0.1} /> ))} </g> )} {/* Flower clusters */} {scale >= 50 && ( <g> {[...Array(12)].map((_, i) => ( <g key={i}> <circle cx={40 + Math.random() * 20} cy={35 + Math.random() * 20} r="2" fill="#FFE5F0" /> <circle cx={40 + Math.random() * 20} cy={35 + Math.random() * 20} r="1" fill="#FF69B4" /> </g> ))} </g> )} {/* Detailed branches */} {scale >= 80 && ( <g> {[...Array(4)].map((_, i) => ( <path key={i} d={`M50 ${40 + i * 5} Q${60 - i * 5} ${45 + i * 3} ${65 - i * 5} ${40 + i * 4}`} stroke="#8B4513" strokeWidth="0.5" fill="none" /> ))} </g> )} {/* Falling petals */} {scale >= 95 && ( <g> {[...Array(8)].map((_, i) => ( <path key={i} d={`M${35 + Math.random() * 30} ${30 + Math.random() * 40} q2 0 2 2`} fill="#FFE5F0" opacity="0.6" /> ))} </g> )} </svg> ); }; // Golden Elm const GoldenElm = ({ scale }: { scale: number }) => { if (scale === 0) return null; return ( <svg viewBox="0 0 100 100" className="w-full h-full transform transition-all duration-1000" style={{ transform: `scale(${0.5 + (scale * 0.5) / 100})` }}> <defs> <radialGradient id="sunlightGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style={{ stopColor: '#FFD700', stopOpacity: 0.6 }} /> <stop offset="100%" style={{ stopColor: '#FFA500', stopOpacity: 0.8 }} /> </radialGradient> <linearGradient id="leafGradientGold" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" style={{ stopColor: '#9ACD32', stopOpacity: 1 }} /> <stop offset="100%" style={{ stopColor: '#6B8E23', stopOpacity: 1 }} /> </linearGradient> </defs> {/* Majestic trunk */} <path d="M43 90 Q48 70 47 35 L53 35 Q52 70 57 90" fill="#8B4513" /> {/* Layered foliage */} {scale >= 20 && ( <g className="transition-all duration-500"> <path d="M25 45 Q50 15 75 45" fill="url(#leafGradientGold)" opacity={scale >= 50 ? "0.9" : "0.6"} /> <circle cx="50" cy="40" r="20" fill="url(#sunlightGradient)" opacity="0.4" /> </g> )} {/* Branch structure */} {scale >= 50 && ( <g> {[...Array(5)].map((_, i) => ( <path key={i} d={`M50 35 Q${30 + i * 10} ${40 + i * 5} ${20 + i * 15} ${50 + i * 5}`} stroke="#8B4513" strokeWidth="0.7" fill="none" /> ))} </g> )} {/* Detailed leaves */} {scale >= 80 && ( <g> {[...Array(15)].map((_, i) => ( <path key={i} d={`M${35 + Math.random() * 30} ${30 + Math.random() * 20} q-2 -3 0 -6 q2 -3 4 0 q2 3 0 6 q-2 3 -4 0`} fill="#90EE90" opacity="0.8" /> ))} </g> )} {/* Light rays */} {scale >= 95 && ( <g> {[...Array(8)].map((_, i) => { const angle = (i * Math.PI) / 4; return ( <line key={i} x1={50 + Math.cos(angle) * 15} y1={40 + Math.sin(angle) * 15} x2={50 + Math.cos(angle) * 25} y2={40 + Math.sin(angle) * 25} stroke="#FFD700" strokeWidth="0.5" opacity="0.4" /> ); })} </g> )} </svg> ); }; // Enchanted Tree const EnchantedTree = ({ scale }: { scale: number }) => { if (scale === 0) return null; return ( <svg viewBox="0 0 100 100" className="w-full h-full transform transition-all duration-1000" style={{ transform: `scale(${0.5 + (scale * 0.5) / 100})` }}> <defs> <radialGradient id="magicGlow" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style={{ stopColor: '#88D8FF', stopOpacity: 0.6 }} /> <stop offset="100%" style={{ stopColor: '#4FC3F7', stopOpacity: 0 }} /> </radialGradient> <linearGradient id="trunkMagic" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style={{ stopColor: '#5D4037', stopOpacity: 1 }} /> <stop offset="50%" style={{ stopColor: '#795548', stopOpacity: 1 }} /> <stop offset="100%" style={{ stopColor: '#5D4037', stopOpacity: 1 }} /> </linearGradient> <radialGradient id="foliageMagic" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" style={{ stopColor: '#81C784', stopOpacity: 1 }} /> <stop offset="100%" style={{ stopColor: '#2E7D32', stopOpacity: 1 }} /> </radialGradient> </defs> {/* Magical glow base */} {scale >= 20 && ( <circle cx="50" cy="50" r="30" fill="url(#magicGlow)" className="transition-all duration-500" opacity={scale / 100} /> )} {/* Twisted trunk */} <path d="M45 90 C48 80 45 70 47 60 C49 50 46 45 47 35 L53 35 C54 45 51 50 53 60 C55 70 52 80 55 90" fill="url(#trunkMagic)" className="transition-all duration-500" /> {/* Base foliage layers */} {scale >= 20 && ( <g className="transition-all duration-500"> <path d="M30 60 Q50 20 70 60" fill="url(#foliageMagic)" opacity="0.9" /> {scale >= 40 && [...Array(3)].map((_, i) => ( <path key={i} d={`M${35 + i * 5} ${55 - i * 5} Q50 ${25 + i * 5} ${65 - i * 5} ${55 - i * 5}`} fill="url(#foliageMagic)" opacity={0.7 - i * 0.1} /> ))} </g> )} {/* Spiraling branches */} {scale >= 50 && ( <g> {[...Array(6)].map((_, i) => { const angle = (i * Math.PI) / 3; return ( <path key={i} d={`M50 40 Q${50 + Math.cos(angle) * 20} ${40 + Math.sin(angle) * 20} ${50 + Math.cos(angle) * 25} ${40 + Math.sin(angle) * 25}`} stroke="#5D4037" strokeWidth="0.5" fill="none" opacity="0.7" /> ); })} </g> )} {/* Magical details */} {scale >= 80 && ( <g> {/* Swirling patterns */} {[...Array(3)].map((_, i) => ( <path key={i} d={`M${40 + i * 7} 35 Q50 ${30 + i * 5} ${60 - i * 7} 35`} stroke="#81C784" strokeWidth="0.5" fill="none" opacity="0.6" /> ))} {/* Glowing orbs */} {[...Array(5)].map((_, i) => ( <g key={i}> <circle cx={40 + Math.random() * 20} cy={30 + Math.random() * 20} r="1" fill="#B9F6CA" opacity="0.8" /> <circle cx={40 + Math.random() * 20} cy={30 + Math.random() * 20} r="0.5" fill="#FFFFFF" opacity="0.9" /> </g> ))} </g> )} {/* Magical sparkles and flowing energy */} {scale >= 95 && ( <g> {/* Sparkles */} {[...Array(8)].map((_, i) => { const angle = (i * Math.PI) / 4; return ( <g key={i}> <circle cx={50 + Math.cos(angle) * 15} cy={40 + Math.sin(angle) * 15} r="0.5" fill="#FFFFFF" opacity="0.9" > <animate attributeName="opacity" values="0.9;0.1;0.9" dur="2s" repeatCount="indefinite" begin={`${i * 0.25}s`} /> </circle> <path d={`M${50 + Math.cos(angle) * 12} ${40 + Math.sin(angle) * 12} q${Math.cos(angle) * 3} ${Math.sin(angle) * 3} ${Math.cos(angle) * 6} ${Math.sin(angle) * 6}`} stroke="#B9F6CA" strokeWidth="0.3" fill="none" opacity="0.6" /> </g> ); })} </g> )} </svg> ); };
Leave a Comment