v3/packages/design-system/atoms/sparkle/Shapes.tsx

import * as React from 'react';
import { CSSProperties } from 'styled-components';

type SparkleProps = {
    height: string;
    strokeColor: string;
    repeatCount?: number;
    style?: CSSProperties;
    delay?: number;
};

const Animation = (props: SparkleProps) => (
    <>
        <animateTransform
            fill="freeze"
            attributeName="transform"
            type="scale"
            begin={`${props.delay || 0}s`}
            additive="sum"
            dur="1s"
            repeatCount={props.repeatCount || 'indefinite'}
            from="-1 -1"
            to="1 1"
        />
        <animateTransform
            fill="freeze"
            attributeName="transform"
            type="translate"
            begin={`${props.delay || 0}s`}
            additive="sum"
            dur="1s"
            repeatCount={props.repeatCount || 'indefinite'}
            from="-1 -1"
            to="1 1"
        />

        <animateTransform
            // additive="sum"
            fill="freeze"
            attributeName="transform"
            type="scale"
            to="0 0"
            dur="0.3s"
            begin={props.repeatCount || 10}
        />
    </>
);

const SparkleCircle = (props: SparkleProps) => (
    <svg height={props.height} style={props.style} viewBox="-16 -16 16 16" fill="none">
        <g transform="translate(-8 -8)">
            <circle cx="0" cy="0" r="6.5" stroke={props.strokeColor} strokeWidth="2">
                <Animation {...props} />
            </circle>
        </g>
    </svg>
);

const SparkleStar = (props: SparkleProps) => (
    <svg height={props.height} style={props.style} viewBox="-30 -30 30 30" fill="none">
        <g transform="translate(0 0)">
            <path
                d="M15.5 3.23607L18.0289 11.0193L18.2534 11.7102H18.98H27.1637L20.5429 16.5205L19.9551 16.9476L20.1796 17.6385L22.7086 25.4217L16.0878 20.6115L15.5 20.1844L14.9122 20.6115L8.29144 25.4217L10.8204 17.6385L11.0449 16.9476L10.4571 16.5205L3.83631 11.7102H12.02H12.7466L12.9711 11.0193L15.5 3.23607Z"
                stroke={props.strokeColor}
                strokeWidth="2"
            >
                <Animation {...props} />
                <animateTransform
                    fill="freeze"
                    attributeName="transform"
                    type="translate"
                    begin={`${props.delay || 0}s`}
                    additive="sum"
                    dur="0.5s"
                    repeatCount={props.repeatCount || 'indefinite'}
                    from="30 30"
                    to="0 0"
                />
            </path>
        </g>
    </svg>
);

const SparkleCross = (props: SparkleProps) => (
    <svg height={props.height} style={props.style} viewBox="-15 -15 15 15" fill="none">
        <g transform="translate(-15 -15)">
            <path
                d="M-3.27836e-07 7.5L5 7.5M7.5 4.99999L7.5 2.53319e-06M9.99999 7.49999L15 7.49999M7.5 15L7.5 10"
                stroke={props.strokeColor}
                strokeWidth="2"
            >
                <Animation {...props} />
            </path>
        </g>
    </svg>
);

const patternBase: CSSProperties = {
    position: 'relative',
};

const shapeMixin: CSSProperties = {
    position: 'absolute',
};

export const SparklePatternAlpha = ({ style, ...props }: SparkleProps) => (
    <div style={patternBase}>
        <SparkleCircle
            {...props}
            height="20%"
            style={{
                ...shapeMixin,

                top: 0,
                left: 0,
            }}
            delay={0.24}
        />
        <SparkleCross
            {...props}
            height="20%"
            style={{
                ...shapeMixin,

                top: '45%',
                left: '15%',
            }}
            delay={0.55}
        />
        <SparkleCross
            {...props}
            height="10%"
            style={{
                ...shapeMixin,

                top: '30%',
                left: '-15%',
                transform: 'rotate(30deg)',
            }}
            delay={0.33}
        />
        <SparkleStar
            {...props}
            height="30%"
            style={{
                ...shapeMixin,

                bottom: '0%',
                right: '10%',
            }}
            delay={0.75}
        />
    </div>
);

export const SparklePatternBeta = ({ style, ...props }: SparkleProps) => (
    <div style={patternBase}>
        <SparkleCircle
            {...props}
            height="15%"
            style={{
                ...shapeMixin,

                top: '60%',
                left: '20%',
            }}
            delay={0.9}
        />
        <SparkleCross
            {...props}
            height="20%"
            style={{
                ...shapeMixin,

                top: 0,
                right: 0,
            }}
            delay={0.11}
        />
        <SparkleCross
            {...props}
            height="15%"
            style={{
                ...shapeMixin,

                top: '80%',
                right: 0,
            }}
            delay={0.15}
        />
        <SparkleStar
            {...props}
            height="30%"
            style={{
                ...shapeMixin,

                top: '20%',
                left: '30%',
                transform: 'rotate(30deg)',
            }}
            delay={0.6}
        />
    </div>
);