chore: format
This commit is contained in:
@@ -1,338 +1,494 @@
|
||||
'use client'
|
||||
"use client";
|
||||
|
||||
import React, { useState } from 'react'
|
||||
import './PivoineDocsIcon.css'
|
||||
import React, { useState } from "react";
|
||||
import "./PivoineDocsIcon.css";
|
||||
|
||||
interface PivoineDocsIconProps {
|
||||
size?: string
|
||||
interactive?: boolean
|
||||
className?: string
|
||||
showLabel?: boolean
|
||||
size?: string;
|
||||
interactive?: boolean;
|
||||
className?: string;
|
||||
showLabel?: boolean;
|
||||
}
|
||||
|
||||
export default function PivoineDocsIcon({
|
||||
size = '256px',
|
||||
interactive = true,
|
||||
className = '',
|
||||
showLabel = false
|
||||
export default function PivoineDocsIcon({
|
||||
size = "256px",
|
||||
interactive = true,
|
||||
className = "",
|
||||
showLabel = false,
|
||||
}: PivoineDocsIconProps) {
|
||||
const [isHovered, setIsHovered] = useState(false)
|
||||
const [isClicked, setIsClicked] = useState(false)
|
||||
const [isHovered, setIsHovered] = useState(false);
|
||||
const [isClicked, setIsClicked] = useState(false);
|
||||
|
||||
const handleMouseEnter = () => {
|
||||
if (!interactive) return
|
||||
setIsHovered(true)
|
||||
}
|
||||
const handleMouseEnter = () => {
|
||||
if (!interactive) return;
|
||||
setIsHovered(true);
|
||||
};
|
||||
|
||||
const handleMouseLeave = () => {
|
||||
if (!interactive) return
|
||||
setIsHovered(false)
|
||||
}
|
||||
const handleMouseLeave = () => {
|
||||
if (!interactive) return;
|
||||
setIsHovered(false);
|
||||
};
|
||||
|
||||
const handleClick = () => {
|
||||
if (!interactive) return
|
||||
const handleClick = () => {
|
||||
if (!interactive) return;
|
||||
|
||||
setIsClicked(true)
|
||||
setTimeout(() => {
|
||||
setIsClicked(false)
|
||||
}, 1200)
|
||||
}
|
||||
setIsClicked(true);
|
||||
setTimeout(() => {
|
||||
setIsClicked(false);
|
||||
}, 1200);
|
||||
};
|
||||
|
||||
const handleTouch = (e: React.TouchEvent) => {
|
||||
if (!interactive) return
|
||||
e.preventDefault()
|
||||
setIsHovered(true)
|
||||
|
||||
setTimeout(() => {
|
||||
handleClick()
|
||||
}, 50)
|
||||
const handleTouch = (e: React.TouchEvent) => {
|
||||
if (!interactive) return;
|
||||
e.preventDefault();
|
||||
setIsHovered(true);
|
||||
|
||||
setTimeout(() => {
|
||||
setIsHovered(false)
|
||||
}, 1500)
|
||||
}
|
||||
setTimeout(() => {
|
||||
handleClick();
|
||||
}, 50);
|
||||
|
||||
const wrapperClasses = [
|
||||
'pivoine-docs-icon-wrapper',
|
||||
isHovered && 'is-hovered',
|
||||
isClicked && 'is-clicked',
|
||||
interactive && 'is-interactive',
|
||||
className
|
||||
].filter(Boolean).join(' ')
|
||||
setTimeout(() => {
|
||||
setIsHovered(false);
|
||||
}, 1500);
|
||||
};
|
||||
|
||||
// Generate bloom particles with varied properties
|
||||
const bloomParticles = Array.from({ length: 12 }, (_, i) => ({
|
||||
id: i,
|
||||
angle: (360 / 12) * i,
|
||||
distance: 80 + Math.random() * 20,
|
||||
size: 2 + Math.random() * 2,
|
||||
delay: i * 0.08,
|
||||
}))
|
||||
const wrapperClasses = [
|
||||
"pivoine-docs-icon-wrapper",
|
||||
isHovered && "is-hovered",
|
||||
isClicked && "is-clicked",
|
||||
interactive && "is-interactive",
|
||||
className,
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(" ");
|
||||
|
||||
return (
|
||||
<div
|
||||
className={wrapperClasses}
|
||||
onMouseEnter={handleMouseEnter}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
onClick={handleClick}
|
||||
onTouchStart={handleTouch}
|
||||
style={{ width: size, height: size, rotate: '5deg' }}
|
||||
>
|
||||
<svg
|
||||
className="pivoine-docs-icon"
|
||||
viewBox="0 0 256 256"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<defs>
|
||||
{/* Enhanced Gradients for natural peony colors */}
|
||||
<radialGradient id="petal-gradient-1" cx="30%" cy="30%">
|
||||
<stop offset="0%" style={{ stopColor: '#fdf4ff', stopOpacity: 1 }} />
|
||||
<stop offset="40%" style={{ stopColor: '#fae8ff', stopOpacity: 1 }} />
|
||||
<stop offset="70%" style={{ stopColor: '#f0abfc', stopOpacity: 1 }} />
|
||||
<stop offset="100%" style={{ stopColor: '#d946ef', stopOpacity: 0.95 }} />
|
||||
</radialGradient>
|
||||
// Generate bloom particles with varied properties
|
||||
const bloomParticles = Array.from({ length: 12 }, (_, i) => ({
|
||||
id: i,
|
||||
angle: (360 / 12) * i,
|
||||
distance: 80 + Math.random() * 20,
|
||||
size: 2 + Math.random() * 2,
|
||||
delay: i * 0.08,
|
||||
}));
|
||||
|
||||
<radialGradient id="petal-gradient-2" cx="30%" cy="30%">
|
||||
<stop offset="0%" style={{ stopColor: '#fae8ff', stopOpacity: 1 }} />
|
||||
<stop offset="40%" style={{ stopColor: '#f3e8ff', stopOpacity: 1 }} />
|
||||
<stop offset="70%" style={{ stopColor: '#e9d5ff', stopOpacity: 1 }} />
|
||||
<stop offset="100%" style={{ stopColor: '#c084fc', stopOpacity: 0.95 }} />
|
||||
</radialGradient>
|
||||
return (
|
||||
<div
|
||||
className={wrapperClasses}
|
||||
onMouseEnter={handleMouseEnter}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
onClick={handleClick}
|
||||
onTouchStart={handleTouch}
|
||||
style={{ width: size, height: size, rotate: "5deg" }}
|
||||
>
|
||||
<svg
|
||||
className="pivoine-docs-icon"
|
||||
viewBox="0 0 256 256"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<defs>
|
||||
{/* Enhanced Gradients for natural peony colors */}
|
||||
<radialGradient id="petal-gradient-1" cx="30%" cy="30%">
|
||||
<stop
|
||||
offset="0%"
|
||||
style={{ stopColor: "#fdf4ff", stopOpacity: 1 }}
|
||||
/>
|
||||
<stop
|
||||
offset="40%"
|
||||
style={{ stopColor: "#fae8ff", stopOpacity: 1 }}
|
||||
/>
|
||||
<stop
|
||||
offset="70%"
|
||||
style={{ stopColor: "#f0abfc", stopOpacity: 1 }}
|
||||
/>
|
||||
<stop
|
||||
offset="100%"
|
||||
style={{ stopColor: "#d946ef", stopOpacity: 0.95 }}
|
||||
/>
|
||||
</radialGradient>
|
||||
|
||||
<radialGradient id="petal-gradient-3" cx="30%" cy="30%">
|
||||
<stop offset="0%" style={{ stopColor: '#fdf4ff', stopOpacity: 1 }} />
|
||||
<stop offset="40%" style={{ stopColor: '#fae8ff', stopOpacity: 1 }} />
|
||||
<stop offset="70%" style={{ stopColor: '#f0abfc', stopOpacity: 1 }} />
|
||||
<stop offset="100%" style={{ stopColor: '#d946ef', stopOpacity: 0.95 }} />
|
||||
</radialGradient>
|
||||
<radialGradient id="petal-gradient-2" cx="30%" cy="30%">
|
||||
<stop
|
||||
offset="0%"
|
||||
style={{ stopColor: "#fae8ff", stopOpacity: 1 }}
|
||||
/>
|
||||
<stop
|
||||
offset="40%"
|
||||
style={{ stopColor: "#f3e8ff", stopOpacity: 1 }}
|
||||
/>
|
||||
<stop
|
||||
offset="70%"
|
||||
style={{ stopColor: "#e9d5ff", stopOpacity: 1 }}
|
||||
/>
|
||||
<stop
|
||||
offset="100%"
|
||||
style={{ stopColor: "#c084fc", stopOpacity: 0.95 }}
|
||||
/>
|
||||
</radialGradient>
|
||||
|
||||
<radialGradient id="petal-gradient-4" cx="30%" cy="30%">
|
||||
<stop offset="0%" style={{ stopColor: '#fae8ff', stopOpacity: 1 }} />
|
||||
<stop offset="40%" style={{ stopColor: '#f3e8ff', stopOpacity: 1 }} />
|
||||
<stop offset="70%" style={{ stopColor: '#e9d5ff', stopOpacity: 1 }} />
|
||||
<stop offset="100%" style={{ stopColor: '#c084fc', stopOpacity: 0.95 }} />
|
||||
</radialGradient>
|
||||
<radialGradient id="petal-gradient-3" cx="30%" cy="30%">
|
||||
<stop
|
||||
offset="0%"
|
||||
style={{ stopColor: "#fdf4ff", stopOpacity: 1 }}
|
||||
/>
|
||||
<stop
|
||||
offset="40%"
|
||||
style={{ stopColor: "#fae8ff", stopOpacity: 1 }}
|
||||
/>
|
||||
<stop
|
||||
offset="70%"
|
||||
style={{ stopColor: "#f0abfc", stopOpacity: 1 }}
|
||||
/>
|
||||
<stop
|
||||
offset="100%"
|
||||
style={{ stopColor: "#d946ef", stopOpacity: 0.95 }}
|
||||
/>
|
||||
</radialGradient>
|
||||
|
||||
<radialGradient id="center-gradient" cx="50%" cy="50%">
|
||||
<stop offset="0%" style={{ stopColor: '#fef3c7', stopOpacity: 1 }} />
|
||||
<stop offset="30%" style={{ stopColor: '#fde68a', stopOpacity: 1 }} />
|
||||
<stop offset="60%" style={{ stopColor: '#fbbf24', stopOpacity: 1 }} />
|
||||
<stop offset="100%" style={{ stopColor: '#f59e0b', stopOpacity: 1 }} />
|
||||
</radialGradient>
|
||||
<radialGradient id="petal-gradient-4" cx="30%" cy="30%">
|
||||
<stop
|
||||
offset="0%"
|
||||
style={{ stopColor: "#fae8ff", stopOpacity: 1 }}
|
||||
/>
|
||||
<stop
|
||||
offset="40%"
|
||||
style={{ stopColor: "#f3e8ff", stopOpacity: 1 }}
|
||||
/>
|
||||
<stop
|
||||
offset="70%"
|
||||
style={{ stopColor: "#e9d5ff", stopOpacity: 1 }}
|
||||
/>
|
||||
<stop
|
||||
offset="100%"
|
||||
style={{ stopColor: "#c084fc", stopOpacity: 0.95 }}
|
||||
/>
|
||||
</radialGradient>
|
||||
|
||||
<radialGradient id="center-inner-gradient" cx="50%" cy="50%">
|
||||
<stop offset="0%" style={{ stopColor: '#fffbeb', stopOpacity: 1 }} />
|
||||
<stop offset="50%" style={{ stopColor: '#fef3c7', stopOpacity: 1 }} />
|
||||
<stop offset="100%" style={{ stopColor: '#fde68a', stopOpacity: 1 }} />
|
||||
</radialGradient>
|
||||
<radialGradient id="center-gradient" cx="50%" cy="50%">
|
||||
<stop
|
||||
offset="0%"
|
||||
style={{ stopColor: "#fef3c7", stopOpacity: 1 }}
|
||||
/>
|
||||
<stop
|
||||
offset="30%"
|
||||
style={{ stopColor: "#fde68a", stopOpacity: 1 }}
|
||||
/>
|
||||
<stop
|
||||
offset="60%"
|
||||
style={{ stopColor: "#fbbf24", stopOpacity: 1 }}
|
||||
/>
|
||||
<stop
|
||||
offset="100%"
|
||||
style={{ stopColor: "#f59e0b", stopOpacity: 1 }}
|
||||
/>
|
||||
</radialGradient>
|
||||
|
||||
<linearGradient id="page-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style={{ stopColor: '#ffffff', stopOpacity: 0.98 }} />
|
||||
<stop offset="100%" style={{ stopColor: '#f3f4f6', stopOpacity: 0.98 }} />
|
||||
</linearGradient>
|
||||
<radialGradient id="center-inner-gradient" cx="50%" cy="50%">
|
||||
<stop
|
||||
offset="0%"
|
||||
style={{ stopColor: "#fffbeb", stopOpacity: 1 }}
|
||||
/>
|
||||
<stop
|
||||
offset="50%"
|
||||
style={{ stopColor: "#fef3c7", stopOpacity: 1 }}
|
||||
/>
|
||||
<stop
|
||||
offset="100%"
|
||||
style={{ stopColor: "#fde68a", stopOpacity: 1 }}
|
||||
/>
|
||||
</radialGradient>
|
||||
|
||||
{/* Enhanced Filters */}
|
||||
<filter id="petal-glow">
|
||||
<feGaussianBlur stdDeviation="2.5" result="coloredBlur" />
|
||||
<feMerge>
|
||||
<feMergeNode in="coloredBlur" />
|
||||
<feMergeNode in="SourceGraphic" />
|
||||
</feMerge>
|
||||
</filter>
|
||||
<linearGradient
|
||||
id="page-gradient"
|
||||
x1="0%"
|
||||
y1="0%"
|
||||
x2="100%"
|
||||
y2="100%"
|
||||
>
|
||||
<stop
|
||||
offset="0%"
|
||||
style={{ stopColor: "#ffffff", stopOpacity: 0.98 }}
|
||||
/>
|
||||
<stop
|
||||
offset="100%"
|
||||
style={{ stopColor: "#f3f4f6", stopOpacity: 0.98 }}
|
||||
/>
|
||||
</linearGradient>
|
||||
|
||||
<filter id="intense-glow">
|
||||
<feGaussianBlur stdDeviation="8" result="coloredBlur" />
|
||||
<feComponentTransfer in="coloredBlur" result="brightBlur">
|
||||
<feFuncA type="linear" slope="1.5" />
|
||||
</feComponentTransfer>
|
||||
<feMerge>
|
||||
<feMergeNode in="brightBlur" />
|
||||
<feMergeNode in="SourceGraphic" />
|
||||
</feMerge>
|
||||
</filter>
|
||||
{/* Enhanced Filters */}
|
||||
<filter id="petal-glow">
|
||||
<feGaussianBlur stdDeviation="2.5" result="coloredBlur" />
|
||||
<feMerge>
|
||||
<feMergeNode in="coloredBlur" />
|
||||
<feMergeNode in="SourceGraphic" />
|
||||
</feMerge>
|
||||
</filter>
|
||||
|
||||
<filter id="center-glow">
|
||||
<feGaussianBlur stdDeviation="4" result="coloredBlur" />
|
||||
<feMerge>
|
||||
<feMergeNode in="coloredBlur" />
|
||||
<feMergeNode in="coloredBlur" />
|
||||
<feMergeNode in="SourceGraphic" />
|
||||
</feMerge>
|
||||
</filter>
|
||||
<filter id="intense-glow">
|
||||
<feGaussianBlur stdDeviation="8" result="coloredBlur" />
|
||||
<feComponentTransfer in="coloredBlur" result="brightBlur">
|
||||
<feFuncA type="linear" slope="1.5" />
|
||||
</feComponentTransfer>
|
||||
<feMerge>
|
||||
<feMergeNode in="brightBlur" />
|
||||
<feMergeNode in="SourceGraphic" />
|
||||
</feMerge>
|
||||
</filter>
|
||||
|
||||
<filter id="sparkle-glow">
|
||||
<feGaussianBlur stdDeviation="2" result="coloredBlur" />
|
||||
<feMerge>
|
||||
<feMergeNode in="coloredBlur" />
|
||||
<feMergeNode in="SourceGraphic" />
|
||||
</feMerge>
|
||||
</filter>
|
||||
<filter id="center-glow">
|
||||
<feGaussianBlur stdDeviation="4" result="coloredBlur" />
|
||||
<feMerge>
|
||||
<feMergeNode in="coloredBlur" />
|
||||
<feMergeNode in="coloredBlur" />
|
||||
<feMergeNode in="SourceGraphic" />
|
||||
</feMerge>
|
||||
</filter>
|
||||
|
||||
<filter id="page-shadow">
|
||||
<feDropShadow dx="0" dy="2" stdDeviation="4" floodOpacity="0.15" />
|
||||
</filter>
|
||||
</defs>
|
||||
<filter id="sparkle-glow">
|
||||
<feGaussianBlur stdDeviation="2" result="coloredBlur" />
|
||||
<feMerge>
|
||||
<feMergeNode in="coloredBlur" />
|
||||
<feMergeNode in="SourceGraphic" />
|
||||
</feMerge>
|
||||
</filter>
|
||||
|
||||
{/* Subtle background glow */}
|
||||
<circle className="bg-glow" cx="128" cy="128" r="120" fill="url(#petal-gradient-3)" opacity="0.08" />
|
||||
<filter id="page-shadow">
|
||||
<feDropShadow dx="0" dy="2" stdDeviation="4" floodOpacity="0.15" />
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
{/* Outer layer - Large petals (8 petals) */}
|
||||
<g className="outer-petals">
|
||||
{[
|
||||
{ angle: 0, scaleX: 1.1, scaleY: 1, gradient: 1 },
|
||||
{ angle: 45, scaleX: 1, scaleY: 1.05, gradient: 2 },
|
||||
{ angle: 90, scaleX: 1.05, scaleY: 1, gradient: 3 },
|
||||
{ angle: 135, scaleX: 1, scaleY: 1.1, gradient: 4 },
|
||||
{ angle: 180, scaleX: 1.08, scaleY: 1, gradient: 1 },
|
||||
{ angle: 225, scaleX: 1, scaleY: 1.02, gradient: 2 },
|
||||
{ angle: 270, scaleX: 1.02, scaleY: 1, gradient: 3 },
|
||||
{ angle: 315, scaleX: 1, scaleY: 1.06, gradient: 4 },
|
||||
].map((petal, i) => (
|
||||
<ellipse
|
||||
key={`outer-${i}`}
|
||||
className={`petal outer-petal petal-${i}`}
|
||||
cx="128"
|
||||
cy="70"
|
||||
rx="40"
|
||||
ry="68"
|
||||
fill={`url(#petal-gradient-${petal.gradient})`}
|
||||
filter="url(#petal-glow)"
|
||||
style={{rotate: `${petal.angle}deg`, width: `${128 * petal.scaleX}px`, height: `${70 * petal.scaleY}px`}}
|
||||
/>
|
||||
))}
|
||||
</g>
|
||||
{/* Subtle background glow */}
|
||||
<circle
|
||||
className="bg-glow"
|
||||
cx="128"
|
||||
cy="128"
|
||||
r="120"
|
||||
fill="url(#petal-gradient-3)"
|
||||
opacity="0.08"
|
||||
/>
|
||||
|
||||
{/* Middle layer - Medium petals (8 petals, offset) */}
|
||||
<g className="middle-petals">
|
||||
{[
|
||||
{ angle: 22.5, scaleX: 1, scaleY: 1, gradient: 2 },
|
||||
{ angle: 67.5, scaleX: 1.05, scaleY: 1, gradient: 3 },
|
||||
{ angle: 112.5, scaleX: 1, scaleY: 1.02, gradient: 4 },
|
||||
{ angle: 157.5, scaleX: 1.02, scaleY: 1, gradient: 1 },
|
||||
{ angle: 202.5, scaleX: 1, scaleY: 1.05, gradient: 2 },
|
||||
{ angle: 247.5, scaleX: 1.03, scaleY: 1, gradient: 3 },
|
||||
{ angle: 292.5, scaleX: 1, scaleY: 1, gradient: 4 },
|
||||
{ angle: 337.5, scaleX: 1.02, scaleY: 1, gradient: 1 },
|
||||
].map((petal, i) => (
|
||||
<ellipse
|
||||
key={`middle-${i}`}
|
||||
className={`petal middle-petal petal-m-${i}`}
|
||||
cx="128"
|
||||
cy="78"
|
||||
rx="34"
|
||||
ry="56"
|
||||
fill={`url(#petal-gradient-${petal.gradient})`}
|
||||
filter="url(#petal-glow)"
|
||||
style={{rotate: `${petal.angle}deg`, width: `${128 * petal.scaleX}px`, height: `${70 * petal.scaleY}px`}}
|
||||
/>
|
||||
))}
|
||||
</g>
|
||||
{/* Outer layer - Large petals (8 petals) */}
|
||||
<g className="outer-petals">
|
||||
{[
|
||||
{ angle: 0, scaleX: 1.1, scaleY: 1, gradient: 1 },
|
||||
{ angle: 45, scaleX: 1, scaleY: 1.05, gradient: 2 },
|
||||
{ angle: 90, scaleX: 1.05, scaleY: 1, gradient: 3 },
|
||||
{ angle: 135, scaleX: 1, scaleY: 1.1, gradient: 4 },
|
||||
{ angle: 180, scaleX: 1.08, scaleY: 1, gradient: 1 },
|
||||
{ angle: 225, scaleX: 1, scaleY: 1.02, gradient: 2 },
|
||||
{ angle: 270, scaleX: 1.02, scaleY: 1, gradient: 3 },
|
||||
{ angle: 315, scaleX: 1, scaleY: 1.06, gradient: 4 },
|
||||
].map((petal, i) => (
|
||||
<ellipse
|
||||
key={`outer-${i}`}
|
||||
className={`petal outer-petal petal-${i}`}
|
||||
cx="128"
|
||||
cy="70"
|
||||
rx="40"
|
||||
ry="68"
|
||||
fill={`url(#petal-gradient-${petal.gradient})`}
|
||||
filter="url(#petal-glow)"
|
||||
style={{
|
||||
rotate: `${petal.angle}deg`,
|
||||
width: `${128 * petal.scaleX}px`,
|
||||
height: `${70 * petal.scaleY}px`,
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</g>
|
||||
|
||||
{/* Inner layer - Small petals (10 petals) */}
|
||||
<g className="inner-petals">
|
||||
{[
|
||||
{ angle: 0, gradient: 3 },
|
||||
{ angle: 45, gradient: 4 },
|
||||
{ angle: 90, gradient: 1 },
|
||||
{ angle: 135, gradient: 2 },
|
||||
{ angle: 180, gradient: 3 },
|
||||
{ angle: 225, gradient: 4 },
|
||||
{ angle: 270, gradient: 1 },
|
||||
{ angle: 315, gradient: 2 },
|
||||
].map((petal, i) => (
|
||||
<ellipse
|
||||
key={`inner-${i}`}
|
||||
className={`petal inner-petal petal-i-${i}`}
|
||||
cx="128"
|
||||
cy="88"
|
||||
rx="28"
|
||||
ry="44"
|
||||
fill={`url(#petal-gradient-${petal.gradient})`}
|
||||
filter="url(#petal-glow)"
|
||||
style={{rotate: `${petal.angle}deg`}}
|
||||
/>
|
||||
))}
|
||||
</g>
|
||||
{/* Middle layer - Medium petals (8 petals, offset) */}
|
||||
<g className="middle-petals">
|
||||
{[
|
||||
{ angle: 22.5, scaleX: 1, scaleY: 1, gradient: 2 },
|
||||
{ angle: 67.5, scaleX: 1.05, scaleY: 1, gradient: 3 },
|
||||
{ angle: 112.5, scaleX: 1, scaleY: 1.02, gradient: 4 },
|
||||
{ angle: 157.5, scaleX: 1.02, scaleY: 1, gradient: 1 },
|
||||
{ angle: 202.5, scaleX: 1, scaleY: 1.05, gradient: 2 },
|
||||
{ angle: 247.5, scaleX: 1.03, scaleY: 1, gradient: 3 },
|
||||
{ angle: 292.5, scaleX: 1, scaleY: 1, gradient: 4 },
|
||||
{ angle: 337.5, scaleX: 1.02, scaleY: 1, gradient: 1 },
|
||||
].map((petal, i) => (
|
||||
<ellipse
|
||||
key={`middle-${i}`}
|
||||
className={`petal middle-petal petal-m-${i}`}
|
||||
cx="128"
|
||||
cy="78"
|
||||
rx="34"
|
||||
ry="56"
|
||||
fill={`url(#petal-gradient-${petal.gradient})`}
|
||||
filter="url(#petal-glow)"
|
||||
style={{
|
||||
rotate: `${petal.angle}deg`,
|
||||
width: `${128 * petal.scaleX}px`,
|
||||
height: `${70 * petal.scaleY}px`,
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</g>
|
||||
|
||||
{/* Center circles - Flower stamen */}
|
||||
<circle
|
||||
className="center-circle-outer"
|
||||
cx="128"
|
||||
cy="128"
|
||||
r="12"
|
||||
fill="url(#center-gradient)"
|
||||
filter="url(#center-glow)"
|
||||
/>
|
||||
<circle
|
||||
className="center-circle-inner"
|
||||
cx="128"
|
||||
cy="128"
|
||||
r="2"
|
||||
fill="url(#center-inner-gradient)"
|
||||
opacity="0.9"
|
||||
/>
|
||||
{/* Inner layer - Small petals (10 petals) */}
|
||||
<g className="inner-petals">
|
||||
{[
|
||||
{ angle: 0, gradient: 3 },
|
||||
{ angle: 45, gradient: 4 },
|
||||
{ angle: 90, gradient: 1 },
|
||||
{ angle: 135, gradient: 2 },
|
||||
{ angle: 180, gradient: 3 },
|
||||
{ angle: 225, gradient: 4 },
|
||||
{ angle: 270, gradient: 1 },
|
||||
{ angle: 315, gradient: 2 },
|
||||
].map((petal, i) => (
|
||||
<ellipse
|
||||
key={`inner-${i}`}
|
||||
className={`petal inner-petal petal-i-${i}`}
|
||||
cx="128"
|
||||
cy="88"
|
||||
rx="28"
|
||||
ry="44"
|
||||
fill={`url(#petal-gradient-${petal.gradient})`}
|
||||
filter="url(#petal-glow)"
|
||||
style={{ rotate: `${petal.angle}deg` }}
|
||||
/>
|
||||
))}
|
||||
</g>
|
||||
|
||||
{/* Center details - tiny stamens */}
|
||||
<g className="center-stamens">
|
||||
{Array.from({ length: 8 }).map((_, i) => {
|
||||
const angle = (360 / 8) * i
|
||||
const x = 128 + Math.cos((angle * Math.PI) / 180) * 10
|
||||
const y = 128 + Math.sin((angle * Math.PI) / 180) * 10
|
||||
return (
|
||||
<circle
|
||||
key={`stamen-${i}`}
|
||||
className={`stamen stamen-${i}`}
|
||||
cx={x}
|
||||
cy={y}
|
||||
r="2"
|
||||
fill="#d97706"
|
||||
opacity="0.8"
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</g>
|
||||
{/* Center circles - Flower stamen */}
|
||||
<circle
|
||||
className="center-circle-outer"
|
||||
cx="128"
|
||||
cy="128"
|
||||
r="12"
|
||||
fill="url(#center-gradient)"
|
||||
filter="url(#center-glow)"
|
||||
/>
|
||||
<circle
|
||||
className="center-circle-inner"
|
||||
cx="128"
|
||||
cy="128"
|
||||
r="2"
|
||||
fill="url(#center-inner-gradient)"
|
||||
opacity="0.9"
|
||||
/>
|
||||
|
||||
{/* Sparkles - ambient magical effect */}
|
||||
<g className="sparkles">
|
||||
<circle className="sparkle sparkle-1" cx="180" cy="75" r="3" fill="#fbbf24" filter="url(#sparkle-glow)" />
|
||||
<circle className="sparkle sparkle-2" cx="76" cy="76" r="2.5" fill="#a855f7" filter="url(#sparkle-glow)" />
|
||||
<circle className="sparkle sparkle-3" cx="180" cy="180" r="2.5" fill="#ec4899" filter="url(#sparkle-glow)" />
|
||||
<circle className="sparkle sparkle-4" cx="76" cy="180" r="3" fill="#c026d3" filter="url(#sparkle-glow)" />
|
||||
<circle className="sparkle sparkle-5" cx="128" cy="50" r="2" fill="#f0abfc" filter="url(#sparkle-glow)" />
|
||||
<circle className="sparkle sparkle-6" cx="206" cy="128" r="2" fill="#fb7185" filter="url(#sparkle-glow)" />
|
||||
<circle className="sparkle sparkle-7" cx="128" cy="206" r="2.5" fill="#fbbf24" filter="url(#sparkle-glow)" />
|
||||
<circle className="sparkle sparkle-8" cx="50" cy="128" r="2" fill="#c084fc" filter="url(#sparkle-glow)" />
|
||||
</g>
|
||||
{/* Center details - tiny stamens */}
|
||||
<g className="center-stamens">
|
||||
{Array.from({ length: 8 }).map((_, i) => {
|
||||
const angle = (360 / 8) * i;
|
||||
const x = 128 + Math.cos((angle * Math.PI) / 180) * 10;
|
||||
const y = 128 + Math.sin((angle * Math.PI) / 180) * 10;
|
||||
return (
|
||||
<circle
|
||||
key={`stamen-${i}`}
|
||||
className={`stamen stamen-${i}`}
|
||||
cx={x}
|
||||
cy={y}
|
||||
r="2"
|
||||
fill="#d97706"
|
||||
opacity="0.8"
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</g>
|
||||
|
||||
{/* Flying bloom particles (visible on hover) */}
|
||||
<g className="bloom-particles">
|
||||
{bloomParticles.map((particle) => (
|
||||
<circle
|
||||
key={`bloom-particle-${particle.id}`}
|
||||
className={`bloom-particle bloom-particle-${particle.id}`}
|
||||
cx="128"
|
||||
cy="128"
|
||||
r={particle.size}
|
||||
fill={`url(#petal-gradient-${(particle.id % 4) + 1})`}
|
||||
opacity="0"
|
||||
filter="url(#sparkle-glow)"
|
||||
style={{
|
||||
'--particle-angle': `${particle.angle}deg`,
|
||||
'--particle-distance': `${particle.distance}px`,
|
||||
'--particle-delay': `${particle.delay}s`,
|
||||
} as React.CSSProperties}
|
||||
/>
|
||||
))}
|
||||
</g>
|
||||
</svg>
|
||||
{/* Sparkles - ambient magical effect */}
|
||||
<g className="sparkles">
|
||||
<circle
|
||||
className="sparkle sparkle-1"
|
||||
cx="180"
|
||||
cy="75"
|
||||
r="3"
|
||||
fill="#fbbf24"
|
||||
filter="url(#sparkle-glow)"
|
||||
/>
|
||||
<circle
|
||||
className="sparkle sparkle-2"
|
||||
cx="76"
|
||||
cy="76"
|
||||
r="2.5"
|
||||
fill="#a855f7"
|
||||
filter="url(#sparkle-glow)"
|
||||
/>
|
||||
<circle
|
||||
className="sparkle sparkle-3"
|
||||
cx="180"
|
||||
cy="180"
|
||||
r="2.5"
|
||||
fill="#ec4899"
|
||||
filter="url(#sparkle-glow)"
|
||||
/>
|
||||
<circle
|
||||
className="sparkle sparkle-4"
|
||||
cx="76"
|
||||
cy="180"
|
||||
r="3"
|
||||
fill="#c026d3"
|
||||
filter="url(#sparkle-glow)"
|
||||
/>
|
||||
<circle
|
||||
className="sparkle sparkle-5"
|
||||
cx="128"
|
||||
cy="50"
|
||||
r="2"
|
||||
fill="#f0abfc"
|
||||
filter="url(#sparkle-glow)"
|
||||
/>
|
||||
<circle
|
||||
className="sparkle sparkle-6"
|
||||
cx="206"
|
||||
cy="128"
|
||||
r="2"
|
||||
fill="#fb7185"
|
||||
filter="url(#sparkle-glow)"
|
||||
/>
|
||||
<circle
|
||||
className="sparkle sparkle-7"
|
||||
cx="128"
|
||||
cy="206"
|
||||
r="2.5"
|
||||
fill="#fbbf24"
|
||||
filter="url(#sparkle-glow)"
|
||||
/>
|
||||
<circle
|
||||
className="sparkle sparkle-8"
|
||||
cx="50"
|
||||
cy="128"
|
||||
r="2"
|
||||
fill="#c084fc"
|
||||
filter="url(#sparkle-glow)"
|
||||
/>
|
||||
</g>
|
||||
|
||||
{/* Optional label */}
|
||||
{showLabel && (
|
||||
<div className="icon-label">
|
||||
<span className="label-text">Pivoine Docs</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
{/* Flying bloom particles (visible on hover) */}
|
||||
<g className="bloom-particles">
|
||||
{bloomParticles.map((particle) => (
|
||||
<circle
|
||||
key={`bloom-particle-${particle.id}`}
|
||||
className={`bloom-particle bloom-particle-${particle.id}`}
|
||||
cx="128"
|
||||
cy="128"
|
||||
r={particle.size}
|
||||
fill={`url(#petal-gradient-${(particle.id % 4) + 1})`}
|
||||
opacity="0"
|
||||
filter="url(#sparkle-glow)"
|
||||
style={
|
||||
{
|
||||
"--particle-angle": `${particle.angle}deg`,
|
||||
"--particle-distance": `${particle.distance}px`,
|
||||
"--particle-delay": `${particle.delay}s`,
|
||||
} as React.CSSProperties
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
{/* Optional label */}
|
||||
{showLabel && (
|
||||
<div className="icon-label">
|
||||
<span className="label-text">Pivoine Docs</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user