Как создать чернильный след с помощью реакции, имеющей 3D-эффект? ⇐ Javascript

[Anonymous]

Я пытаюсь создать компонент чернильных знаков для игры, которую делаю. Я хочу, чтобы оно было 2D, но с «3D-эффектом», чтобы выглядело так, будто вы смотрите на него с высоты птичьего полета. Я также хочу, чтобы чернильные пятна каждый раз выглядели немного по-разному.
Вот эталонное изображение (зеленый чернильный знак в левом верхнем углу):
https://www.shutterstock.com/image-vect ... 2531263139
Я пытался использовать ИИ, но ни Близнецы, ни Клод не могли понять, как это сделать. Это мой текущий код для моего компонента «чернильный знак», он строго 2D и совсем не похож на зеленый код на изображении:
import { useMemo, type CSSProperties} from 'react';
import { useColor } from './ColorContext';

// Define the shape of the props for TypeScript
interface InkSplatProps {
size?: number;
color?: string;
style?: CSSProperties;
}

export default function InkSplat({ color, style }: InkSplatProps) {
const { activeColor } = useColor();
const displayColor = color || activeColor;

const internalSize = 100;

const { mainPath, droplets } = useMemo(() => {
const center = internalSize / 2;
const points = 14; // More points = more detail
const angleStep = (Math.PI * 2) / points;
const pathData = [];
const dots = [];

// 1. Generate the Main Splat Body
for (let i = 0; i 0.6;
const baseRadius = internalSize * (isSpike ? 0.35 : 0.2);
const randomRadius = baseRadius + Math.random() * (internalSize * 0.15);

const x = center + Math.cos(angle) * randomRadius;
const y = center + Math.sin(angle) * randomRadius;

if (i === 0) {
pathData.push(`M ${x} ${y}`);
} else {
const prevAngle = (i - 1) * angleStep;
// Increase ctrlRadius to make the curves more "liquid" and dramatic
const ctrlRadius = randomRadius * (1.5 + Math.random() * 0.5);
const cx = center + Math.cos(prevAngle + angleStep / 2) * ctrlRadius;
const cy = center + Math.sin(prevAngle + angleStep / 2) * ctrlRadius;
pathData.push(`Q ${cx} ${cy} ${x} ${y}`);
}
}

// 2. Generate Small Satellite Droplets
for (let j = 0; j < 5; j++) {
const dotAngle = Math.random() * Math.PI * 2;
const dotDistance =
(internalSize * 0.35) + Math.random() * (internalSize * 0.15);
dots.push({
cx: center + Math.cos(dotAngle) * dotDistance,
cy: center + Math.sin(dotAngle) * dotDistance,
r: 1 + Math.random() * 2, // Tiny varied sizes
});
}

return { mainPath: pathData.join(' ') + ' Z', droplets: dots };
}, [internalSize]);

return (
style={{
display: 'flex',
aspectRatio: '1 / 1',
justifyContent: 'center',
alignItems: 'center',
width: '100%',
...style
}}
>



{droplets.map((dot, i) => (

))}



);
};


Подробнее здесь: https://stackoverflow.com/questions/798 ... -3d-effect