aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components/animatedChatIcon.tsx
blob: 77053625989ca94827e32eb26db954885b175521 (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
import * as React from 'react';
import styled, { keyframes } from 'styled-components';

export const AnimatedChatIcon = () => (
    <svg width="150" height="150" viewBox="0 0 150 150" fill="none" xmlns="http://www.w3.org/2000/svg">
        <mask id="mask30" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="150" height="150">
            <circle cx="75" cy="75" r="73" fill="#00AE99" stroke="#00AE99" stroke-width="3" />
        </mask>

        <g mask="url(#mask30)">
            <circle cx="75" cy="75" r="73" stroke="#00AE99" stroke-width="3" />

            <Rays>
                <path vector-effect="non-scaling-stroke" d="M76 37H137.5" stroke="#00AE99" stroke-width="3" />
                <path
                    vector-effect="non-scaling-stroke"
                    d="M37 73.5L37 12M113 137.5L113 75"
                    stroke="#00AE99"
                    stroke-width="3"
                />
                <path vector-effect="non-scaling-stroke" d="M13 113H71.5" stroke="#00AE99" stroke-width="3" />
                <path
                    vector-effect="non-scaling-stroke"
                    d="M49.087 47.5264L92.574 4.03932"
                    stroke="#00AE99"
                    stroke-width="3"
                />
                <path
                    vector-effect="non-scaling-stroke"
                    d="M47.3192 100.913L3.8321 57.4259M146.314 92.4277L102.12 48.2335"
                    stroke="#00AE99"
                    stroke-width="3"
                />
                <path
                    vector-effect="non-scaling-stroke"
                    d="M58.2793 145.814L101.766 102.327"
                    stroke="#00AE99"
                    stroke-width="3"
                />
            </Rays>

            <Bubble>
                <path
                    vector-effect="non-scaling-stroke"
                    d="M113 75C113 85.3064 108.897 94.6546 102.235 101.5C98.4048 105.436 71 132.5 71 132.5V112.792C51.8933 110.793 37 94.6359 37 75C37 54.0132 54.0132 37 75 37C95.9868 37 113 54.0132 113 75Z"
                    stroke="#00AE99"
                    strokeWidth="3"
                />
            </Bubble>

            <Dot delay={0} vector-effect="non-scaling-stroke" cx="75" cy="75" r="4" stroke="#00AE99" strokeWidth="3" />
            <Dot
                delay={4.4}
                vector-effect="non-scaling-stroke"
                cx="91"
                cy="75"
                r="4"
                stroke="#00AE99"
                strokeWidth="3"
            />
            <Dot
                delay={-4.6}
                vector-effect="non-scaling-stroke"
                cx="59"
                cy="75"
                r="4"
                stroke="#00AE99"
                strokeWidth="3"
            />
        </g>
    </svg>
);

const scale = keyframes`
    0% { transform: scale(1.2) }
    15% { transform: scale(1) }
    85% { transform: scale(1) }
    100% { transform: scale(1.2) }
`;

const fadeInOut = keyframes`
    0%, 30%, 50%, 100% {
        transform: initial;
    }

    40% {
        transform: translateY(-5px);
    }
`;

const Bubble = styled.g`
    animation: ${scale} 4s infinite cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-origin: 50% 50%;
`;

const Rays = styled.g`
    animation: ${scale} 4s infinite cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-origin: 50% 50%;
`;

const Dot = styled.circle<{ delay: number }>`
    animation: ${fadeInOut} 4s ${props => `${props.delay}s`} infinite;
`;