diff options
author | Leonid Logvinov <logvinov.leon@gmail.com> | 2019-01-09 19:02:25 +0800 |
---|---|---|
committer | Leonid Logvinov <logvinov.leon@gmail.com> | 2019-01-09 19:02:25 +0800 |
commit | ea14913b412e78ff458bdfba47182f7363e776e5 (patch) | |
tree | 3ee220bfbbd9923b5e1adc36ee51f9b5d39ad640 /packages/website/ts/components/animatedChatIcon.tsx | |
parent | 5868c91cfb54cfa9177572b201d88d1168bf5b06 (diff) | |
parent | 5dd55491b86bf8577405e37d0f2d668aa1273b10 (diff) | |
download | dexon-sol-tools-ea14913b412e78ff458bdfba47182f7363e776e5.tar dexon-sol-tools-ea14913b412e78ff458bdfba47182f7363e776e5.tar.gz dexon-sol-tools-ea14913b412e78ff458bdfba47182f7363e776e5.tar.bz2 dexon-sol-tools-ea14913b412e78ff458bdfba47182f7363e776e5.tar.lz dexon-sol-tools-ea14913b412e78ff458bdfba47182f7363e776e5.tar.xz dexon-sol-tools-ea14913b412e78ff458bdfba47182f7363e776e5.tar.zst dexon-sol-tools-ea14913b412e78ff458bdfba47182f7363e776e5.zip |
Merge development
Diffstat (limited to 'packages/website/ts/components/animatedChatIcon.tsx')
-rw-r--r-- | packages/website/ts/components/animatedChatIcon.tsx | 106 |
1 files changed, 106 insertions, 0 deletions
diff --git a/packages/website/ts/components/animatedChatIcon.tsx b/packages/website/ts/components/animatedChatIcon.tsx new file mode 100644 index 000000000..9a86e244c --- /dev/null +++ b/packages/website/ts/components/animatedChatIcon.tsx @@ -0,0 +1,106 @@ +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; +`; |