diff options
Diffstat (limited to 'packages/website/ts/components/animatedChatIcon.tsx')
-rw-r--r-- | packages/website/ts/components/animatedChatIcon.tsx | 103 |
1 files changed, 0 insertions, 103 deletions
diff --git a/packages/website/ts/components/animatedChatIcon.tsx b/packages/website/ts/components/animatedChatIcon.tsx deleted file mode 100644 index 770536259..000000000 --- a/packages/website/ts/components/animatedChatIcon.tsx +++ /dev/null @@ -1,103 +0,0 @@ -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; -`; |