aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/@next/components/animatedChatIcon.tsx
diff options
context:
space:
mode:
authorFred Carlsen <fred@sjelfull.no>2018-12-20 06:59:07 +0800
committerFred Carlsen <fred@sjelfull.no>2018-12-20 06:59:07 +0800
commit5eb316f5d832d0e7ffc8a3a3858350cc13af3dcf (patch)
treeaed059ac8540233b7fbd20aa32bc3a0f21734182 /packages/website/ts/@next/components/animatedChatIcon.tsx
parentaa5c2c249d43c980c06d3a5541233f2407a83371 (diff)
parent125a940560a01305781bfb6754f52fa64669a6f3 (diff)
downloaddexon-sol-tools-5eb316f5d832d0e7ffc8a3a3858350cc13af3dcf.tar
dexon-sol-tools-5eb316f5d832d0e7ffc8a3a3858350cc13af3dcf.tar.gz
dexon-sol-tools-5eb316f5d832d0e7ffc8a3a3858350cc13af3dcf.tar.bz2
dexon-sol-tools-5eb316f5d832d0e7ffc8a3a3858350cc13af3dcf.tar.lz
dexon-sol-tools-5eb316f5d832d0e7ffc8a3a3858350cc13af3dcf.tar.xz
dexon-sol-tools-5eb316f5d832d0e7ffc8a3a3858350cc13af3dcf.tar.zst
dexon-sol-tools-5eb316f5d832d0e7ffc8a3a3858350cc13af3dcf.zip
Merge remote-tracking branch 'upstream/feature/website/0x-org' into feature/website/0x-org
# Conflicts: # packages/website/ts/@next/components/button.tsx # packages/website/ts/@next/components/definition.tsx # packages/website/ts/@next/components/hero.tsx # packages/website/ts/@next/components/sections/landing/about.tsx # packages/website/ts/@next/pages/market_maker.tsx
Diffstat (limited to 'packages/website/ts/@next/components/animatedChatIcon.tsx')
-rw-r--r--packages/website/ts/@next/components/animatedChatIcon.tsx70
1 files changed, 57 insertions, 13 deletions
diff --git a/packages/website/ts/@next/components/animatedChatIcon.tsx b/packages/website/ts/@next/components/animatedChatIcon.tsx
index feaa0631f..9a86e244c 100644
--- a/packages/website/ts/@next/components/animatedChatIcon.tsx
+++ b/packages/website/ts/@next/components/animatedChatIcon.tsx
@@ -4,28 +4,69 @@ 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"/>
+ <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"/>
+ <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"/>
+ <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"/>
+ <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"/>
+ <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>
);
@@ -57,6 +98,9 @@ const Rays = styled.g`
transform-origin: 50% 50%;
`;
-const Dot = styled.circle<{ delay: number }>`
+const Dot =
+ styled.circle <
+ { delay: number } >
+ `
animation: ${fadeInOut} 4s ${props => `${props.delay}s`} infinite;
`;