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/animatedCompassIcon.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/animatedCompassIcon.tsx')
| -rw-r--r-- | packages/website/ts/components/animatedCompassIcon.tsx | 53 |
1 files changed, 53 insertions, 0 deletions
diff --git a/packages/website/ts/components/animatedCompassIcon.tsx b/packages/website/ts/components/animatedCompassIcon.tsx new file mode 100644 index 000000000..5388f95ca --- /dev/null +++ b/packages/website/ts/components/animatedCompassIcon.tsx @@ -0,0 +1,53 @@ +import * as React from 'react'; +import styled, { keyframes } from 'styled-components'; + +export const AnimatedCompassIcon = () => ( + <svg width="150" height="150" viewBox="0 0 150 150" fill="none" xmlns="http://www.w3.org/2000/svg"> + <g> + <circle cx="75" cy="75" r="73" stroke="#00AE99" stroke-width="3" /> + <circle cx="75" cy="75" r="58" stroke="#00AE99" stroke-width="3" /> + <Needle + d="M62.9792 62.9792L36.6447 113.355L87.0208 87.0208M62.9792 62.9792L113.355 36.6447L87.0208 87.0208M62.9792 62.9792L87.0208 87.0208" + stroke="#00AE99" + strokeWidth="3" + /> + + <Dial> + <path d="M75 2V17M75 133V148" stroke="#00AE99" stroke-width="3" /> + <path d="M2 75L17 75M133 75L148 75" stroke="#00AE99" stroke-width="3" /> + <path d="M11.7801 38.5L24.7705 46M125.229 104L138.22 111.5" stroke="#00AE99" stroke-width="3" /> + <path d="M38.5001 11.7801L46.0001 24.7705M104 125.229L111.5 138.22" stroke="#00AE99" stroke-width="3" /> + <path d="M111.5 11.7801L104 24.7705M46 125.229L38.5 138.22" stroke="#00AE99" stroke-width="3" /> + <path d="M138.22 38.5L125.229 46M24.7705 104L11.7801 111.5" stroke="#00AE99" stroke-width="3" /> + </Dial> + </g> + </svg> +); + +const point = keyframes` + 0% { transform: rotate(0deg) } + 20% { transform: rotate(10deg) } + 30% { transform: rotate(30deg) } + 60% { transform: rotate(-20deg) } + 80% { transform: rotate(-20deg) } + 100% { transform: rotate(0deg) } +`; + +const rotate = keyframes` + 0% { transform: rotate(0deg) } + 20% { transform: rotate(-10deg) } + 30% { transform: rotate(-30deg) } + 60% { transform: rotate(20deg) } + 80% { transform: rotate(20deg) } + 100% { transform: rotate(0deg) } +`; + +const Needle = styled.path` + animation: ${point} 5s infinite; + transform-origin: 50% 50%; +`; + +const Dial = styled.g` + animation: ${rotate} 5s infinite; + transform-origin: 50% 50%; +`; |