Skip to content

Commit

Permalink
feat: Add animated logo
Browse files Browse the repository at this point in the history
  • Loading branch information
@franky47
franky47 committed Apr 22, 2020
1 parent 22912a7 commit 9bde1a5
Show file tree
Hide file tree
Showing 7 changed files with 233 additions and 31 deletions.
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@
"@testing-library/react": "^10.0.2",
"@types/jest": "^25.2.1",
"@types/node": "^13.11.1",
"@types/styled-system__css": "^5.0.8",
"commitlint": "^8.3.5",
"emotion-theming": "^10.0.27",
"husky": "^4.2.5",
Expand Down
19 changes: 19 additions & 0 deletions pages/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import { NextPage } from 'next'
import Head from 'next/head'
import { StackContainer } from '@47ng/chakra-next'
import { AnimatedLogo } from '../src/index'

const DemoPage: NextPage = () => {
return (
<>
<Head>
<title>Chiffre.io - Design System</title>
</Head>
<StackContainer my={24} p={12}>
<AnimatedLogo h="64px" w="100%" speed={2} />
</StackContainer>
</>
)
}

export default DemoPage
141 changes: 141 additions & 0 deletions src/AnimatedLogo.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,141 @@
import React from 'react'
import { SvgBox } from '@47ng/chakra-next'
import { LogoProps, useLogoColors } from './Logo'
import { keyframes, ClassNames } from '@emotion/core'

export interface AnimatedLogoProps extends LogoProps {
speed?: number
}

const animation = keyframes`
10% {
fill: var(--animated-logo-active-dots);
}
50% {
fill: var(--animated-logo-inactive-dots);
}
`

export const AnimatedLogo: React.FC<AnimatedLogoProps> = ({
invertedColors = false,
speed = 1,
...props
}) => {
const colors = useLogoColors({ invertedColors })
return (
<SvgBox
width="100px"
height="25px"
viewBox="0 0 268 65"
aria-label="Chiffre.io"
{...props}
>
<path
d="M197.89 39.68a17.6 17.6 0 012.46-.32 21.14 21.14 0 014.61 0c.82.04 1.63.15 2.4.32 0 1.7-.15 3.3-.45 4.8a33.62 33.62 0 01-1.17 4.68c-.86.17-1.69.28-2.47.33a21.14 21.14 0 01-4.67 0c-.78-.05-1.56-.16-2.34-.33 0-1.69.13-3.29.4-4.8.3-1.52.7-3.08 1.23-4.68zM221.33 22.61h-4.1c0-.13-.01-.26-.06-.39v-.45c0-1.13.11-2.17.33-3.12.21-1 .54-2.01.97-3.05h13.11l-5.9 33.56c-1.65.26-3.2.4-4.68.4-1.34-.01-2.79-.14-4.35-.4l4.68-26.55zm1.88-12.66c-.04-1.51.04-2.94.26-4.28a31.1 31.1 0 011.17-4.35c.78-.17 1.6-.28 2.46-.33a21.83 21.83 0 014.6 0c.88.05 1.68.16 2.42.33 0 1.51-.13 2.96-.4 4.35a28.84 28.84 0 01-1.16 4.28c-.78.13-1.6.22-2.47.26a43.44 43.44 0 01-4.54 0c-.87-.04-1.65-.13-2.34-.26zM248.63 49.94c-4.46 0-7.75-1.17-9.87-3.5-2.08-2.34-3.12-5.54-3.12-9.61 0-2.6.4-5.2 1.17-7.8.78-2.63 1.95-5 3.5-7.07a18 18 0 015.85-5.13 16.64 16.64 0 018.3-2c4.5 0 7.8 1.18 9.87 3.56 2.12 2.38 3.19 5.6 3.19 9.67 0 2.69-.4 5.33-1.17 7.92A21.2 21.2 0 01262.9 43a18.12 18.12 0 01-5.91 5.07 17.7 17.7 0 01-8.38 1.88zm.84-7.01a5.9 5.9 0 004.15-1.56 11.83 11.83 0 002.73-3.83 19.36 19.36 0 001.56-4.87c.3-1.73.45-3.29.45-4.67 0-3.98-1.62-5.97-4.87-5.97-1.64 0-3 .54-4.09 1.62a12.98 12.98 0 00-2.66 3.96c-.69 1.56-1.19 3.2-1.5 4.93a31.41 31.41 0 00-.38 4.61c0 3.85 1.54 5.78 4.6 5.78z"
fill={colors.dotIo}
/>
<path
d="M28.44 40.33c.48 1.13.85 2.38 1.1 3.77.3 1.38.5 2.75.59 4.09-.95.39-1.97.71-3.05.97-1.08.22-2.14.37-3.18.46a35 35 0 01-4.94.32c-3.16 0-5.93-.43-8.3-1.3a16.61 16.61 0 01-5.91-3.63 15.54 15.54 0 01-3.5-5.65 21.92 21.92 0 01-1.18-7.34c0-4.2.63-8.13 1.89-11.81 1.25-3.68 3-6.88 5.25-9.6a24.52 24.52 0 018.25-6.5c3.2-1.6 6.75-2.4 10.64-2.4 2.04 0 3.83.13 5.4.39 1.6.21 3.24.71 4.93 1.5-.26 1.33-.61 2.59-1.04 3.76a25.4 25.4 0 01-1.7 3.83 19.4 19.4 0 00-7-1.37c-2.9 0-5.39.63-7.47 1.89a15.95 15.95 0 00-5.12 4.93c-1.3 1.99-2.28 4.26-2.93 6.81-.6 2.56-.9 5.13-.9 7.73 0 3.55.9 6.19 2.72 7.92 1.86 1.73 4.5 2.6 7.92 2.6a23.82 23.82 0 003.5-.26c.57-.09 1.18-.22 1.82-.4l2.21-.7zM41.57 14.3c.78-4.54 1.17-7.98 1.17-10.32 0-.48-.02-.86-.07-1.17 0-.34-.02-.71-.06-1.1a19.9 19.9 0 012.53-.26c.95-.09 1.77-.13 2.47-.13 1.25 0 2.64.13 4.15.39.22.65.33 1.47.33 2.47 0 1.9-.26 4.21-.78 6.94l-1.7 9.09a13.25 13.25 0 014.49-3.77A11.94 11.94 0 0160 14.9c2.6 0 4.61.67 6.04 2 1.47 1.3 2.2 3.5 2.2 6.56 0 .65-.03 1.35-.12 2.08-.09.74-.2 1.52-.33 2.34l-3.76 21.3a30.4 30.4 0 01-4.74.38c-1.51 0-3-.13-4.48-.39l3.64-20.58c.17-.86.26-1.68.26-2.46 0-1.3-.28-2.21-.85-2.73-.56-.52-1.36-.78-2.4-.78-.6 0-1.3.15-2.08.46A6 6 0 0051.11 25c-.78.95-1.53 2.32-2.27 4.1a34.77 34.77 0 00-1.88 7l-2.4 13.05c-.83.13-1.65.22-2.47.26a39.97 39.97 0 01-4.42 0c-.69-.04-1.44-.13-2.27-.26l6.17-34.86zM79.48 22.61h-4.1c0-.13-.01-.26-.06-.39v-.45c0-1.13.11-2.17.33-3.12.21-1 .54-2.01.97-3.05h13.11l-5.9 33.56a26.55 26.55 0 01-9.02 0l4.67-26.55zm1.88-12.66c-.04-1.51.04-2.94.26-4.28.26-1.39.65-2.84 1.17-4.35.78-.17 1.6-.28 2.47-.33a21.82 21.82 0 014.6 0c.87.05 1.67.16 2.4.33 0 1.51-.12 2.96-.38 4.35a28.9 28.9 0 01-1.17 4.28c-.78.13-1.6.22-2.47.26a43.44 43.44 0 01-4.54 0 17.5 17.5 0 01-2.34-.26zM139.83 30.01c.47-2.73.82-5.13 1.04-7.2.26-2.12.39-3.77.39-4.94V16.7c0-.34-.03-.71-.07-1.1a23.9 23.9 0 014.29-.39c.65 0 1.3.04 1.94.13.65.04 1.34.13 2.08.26a13.05 13.05 0 01.32 4.54c0 .4-.04.87-.13 1.43.44-.78.98-1.53 1.63-2.27a10.53 10.53 0 014.8-3.5c1-.4 2.08-.59 3.25-.59.9 0 1.69.1 2.33.33.05.17.07.34.07.51v.59c0 1.21-.15 2.47-.46 3.76-.3 1.3-.7 2.38-1.23 3.25l-.84-.13c-.3-.04-.7-.07-1.17-.07-1.78 0-3.25.3-4.41.91a7.63 7.63 0 00-2.8 2.6 13.36 13.36 0 00-1.75 3.96 58.61 58.61 0 00-1.17 5.2l-2.4 13.04c-1.69.26-3.27.39-4.74.39-1.51 0-3-.13-4.48-.39l3.5-19.15zM171.15 36.44c.26 2.08.95 3.63 2.08 4.67 1.13 1 2.77 1.5 4.93 1.5 1.73 0 3.25-.18 4.55-.52 1.34-.4 2.75-.9 4.22-1.5.69.87 1.14 1.93 1.36 3.18.26 1.21.39 2.51.39 3.9a19.39 19.39 0 01-5.58 1.62c-1.04.22-2.08.37-3.12.46-1.04.13-1.97.19-2.79.19a21.2 21.2 0 01-6.82-.97 13.07 13.07 0 01-4.67-2.73 11.6 11.6 0 01-2.73-4.35 18.42 18.42 0 01-.84-5.71c0-2.64.45-5.24 1.36-7.8.91-2.54 2.19-4.82 3.83-6.8a19.09 19.09 0 016.1-4.88 17.38 17.38 0 0112.08-1.36 8.8 8.8 0 013.24 1.62c.91.7 1.63 1.56 2.15 2.6s.78 2.25.78 3.64c0 1.94-.46 3.63-1.37 5.06a12.12 12.12 0 01-3.63 3.63 22.2 22.2 0 01-5.2 2.47c-1.9.6-3.9 1.06-5.97 1.36l-4.35.72zm3.7-6.62a21.1 21.1 0 004.03-.98c1.04-.43 1.86-.88 2.46-1.36a4.34 4.34 0 001.24-1.56c.21-.52.32-1.04.32-1.56 0-.82-.28-1.49-.84-2a2.9 2.9 0 00-2.14-.79 6.4 6.4 0 00-3.12.78c-.9.48-1.7 1.13-2.4 1.95-.7.82-1.3 1.77-1.82 2.86-.48 1.03-.84 2.1-1.1 3.18l3.37-.52zM118.58 22.61h-5.38c0-1.17.08-2.31.26-3.44.17-1.12.5-2.32.97-3.57h5.39l.13-.52c.86-4.85 2.53-8.42 5-10.71 2.46-2.3 5.73-3.44 9.8-3.44h3.54c1.87 0 3.03 7.46 1.29 7.46H135c-.78 0-1.5.11-2.14.33-.61.17-1.17.5-1.7.97-.47.48-.9 1.15-1.29 2.02a18.5 18.5 0 00-.9 3.3l-.14.59h7.08c0 1.26-.09 2.42-.26 3.5-.18 1.04-.5 2.21-.98 3.51h-7.07l-4.68 26.23a30.9 30.9 0 01-2.33 7.85 15.45 15.45 0 01-3.38 4.93 10.47 10.47 0 01-4.41 2.6c-1.65.52-3.42.78-5.33.78h-5.87c-1.4 0 .15-7.34 1.83-7.34h3.26c.83 0 1.6-.13 2.34-.39.74-.21 1.4-.69 2.01-1.42a8.8 8.8 0 001.7-2.92c.51-1.26.94-2.9 1.29-4.94l4.54-25.38zM99.07 22.61h-5.4c0-1.17.1-2.31.27-3.44.17-1.12.5-2.32.97-3.57h5.39l.13-.52c.86-4.85 2.53-8.42 5-10.71 2.46-2.3 5.73-3.44 9.8-3.44h3.55c1.86 0 3.02 7.46 1.28 7.46h-4.57c-.78 0-1.5.11-2.14.33-.6.17-1.17.5-1.7.97-.47.48-.9 1.15-1.29 2.02a18.6 18.6 0 00-.9 3.3l-.14.59h7.08c0 1.26-.09 2.42-.26 3.5-.17 1.04-.5 2.21-.98 3.51h-7.07l-4.67 26.23a30.9 30.9 0 01-2.34 7.85 15.46 15.46 0 01-3.38 4.93 10.48 10.48 0 01-4.41 2.6c-1.65.52-3.42.78-5.33.78H82.1c-1.4 0 .15-7.34 1.83-7.34h3.27c.82 0 1.6-.13 2.33-.39.74-.21 1.4-.69 2.02-1.42a8.8 8.8 0 001.68-2.92c.52-1.26.96-2.9 1.3-4.94l4.55-25.38z"
fill={colors.chiffre}
/>

{/* Dots */}
<ClassNames>
{({ css }) => {
const animationClass = css({
animation: `${animation} ${1.5 / speed}s ease infinite`
})

return (
<g
className={css({
'--animated-logo-active-dots': colors.dotsActive,
'--animated-logo-inactive-dots': colors.dots
})}
>
{/* Lower Dots */}
<path
d="M5.9274 60.9597C5.75594 62.0228 5.68735 63.1544 5.72165 64.3546C6.27032 64.4575 6.88757 64.5261 7.57341 64.5604C8.25925 64.5947 8.85937 64.6118 9.37375 64.6118C9.92242 64.6118 10.5225 64.5947 11.1741 64.5604C11.8599 64.5261 12.5115 64.4575 13.1287 64.3546C13.5402 63.1887 13.8488 62.0571 14.0546 60.9597C14.2603 59.8624 14.3632 58.7136 14.3632 57.5134C13.7803 57.3762 13.1459 57.2905 12.46 57.2562C11.8085 57.1876 11.2084 57.1533 10.6597 57.1533C10.111 57.1533 9.49377 57.1876 8.80793 57.2562C8.12209 57.2905 7.47054 57.3762 6.85328 57.5134C6.44178 58.7136 6.13315 59.8624 5.9274 60.9597Z"
fill={colors.dots}
className={animationClass}
/>
<path
d="M21.1745 60.9597C21.003 62.0228 20.9344 63.1544 20.9687 64.3546C21.5174 64.4575 22.1346 64.5261 22.8205 64.5604C23.5063 64.5947 24.1064 64.6118 24.6208 64.6118C25.1695 64.6118 25.7696 64.5947 26.4211 64.5604C27.107 64.5261 27.7585 64.4575 28.3758 64.3546C28.7873 63.1887 29.0959 62.0571 29.3017 60.9597C29.5074 59.8624 29.6103 58.7136 29.6103 57.5134C29.0273 57.3762 28.3929 57.2905 27.7071 57.2562C27.0555 57.1876 26.4554 57.1533 25.9068 57.1533C25.3581 57.1533 24.7408 57.1876 24.055 57.2562C23.3692 57.2905 22.7176 57.3762 22.1004 57.5134C21.6888 58.7136 21.3802 59.8624 21.1745 60.9597Z"
fill={colors.dots}
className={animationClass}
style={{
animationDelay: `${0.1 / speed}s`
}}
/>
<path
d="M36.4216 60.9597C36.2501 62.0228 36.1815 63.1544 36.2158 64.3546C36.7645 64.4575 37.3817 64.5261 38.0676 64.5604C38.7534 64.5947 39.3535 64.6118 39.8679 64.6118C40.4166 64.6118 41.0167 64.5947 41.6682 64.5604C42.3541 64.5261 43.0056 64.4575 43.6229 64.3546C44.0344 63.1887 44.343 62.0571 44.5488 60.9597C44.7545 59.8624 44.8574 58.7136 44.8574 57.5134C44.2744 57.3762 43.64 57.2905 42.9542 57.2562C42.3027 57.1876 41.7025 57.1533 41.1539 57.1533C40.6052 57.1533 39.9879 57.1876 39.3021 57.2562C38.6163 57.2905 37.9647 57.3762 37.3475 57.5134C36.9359 58.7136 36.6273 59.8624 36.4216 60.9597Z"
fill={colors.dots}
className={animationClass}
style={{
animationDelay: `${0.2 / speed}s`
}}
/>
<path
d="M51.6686 60.9597C51.4972 62.0228 51.4286 63.1544 51.4629 64.3546C52.0116 64.4575 52.6288 64.5261 53.3147 64.5604C54.0005 64.5947 54.6006 64.6118 55.115 64.6118C55.6637 64.6118 56.2638 64.5947 56.9153 64.5604C57.6011 64.5261 58.2527 64.4575 58.87 64.3546C59.2815 63.1887 59.5901 62.0571 59.7958 60.9597C60.0016 59.8624 60.1045 58.7136 60.1045 57.5134C59.5215 57.3762 58.8871 57.2905 58.2013 57.2562C57.5497 57.1876 56.9496 57.1533 56.4009 57.1533C55.8523 57.1533 55.235 57.1876 54.5492 57.2562C53.8633 57.2905 53.2118 57.3762 52.5945 57.5134C52.183 58.7136 51.8744 59.8624 51.6686 60.9597Z"
fill={colors.dots}
className={animationClass}
style={{
animationDelay: `${0.3 / speed}s`
}}
/>
<path
d="M66.9157 61.0242C66.7443 62.0872 66.6757 63.2189 66.71 64.4191C67.2586 64.522 67.8759 64.5906 68.5617 64.6248C69.2476 64.6591 69.8477 64.6763 70.3621 64.6763C70.9107 64.6763 71.5108 64.6591 72.1624 64.6248C72.8482 64.5906 73.4998 64.522 74.117 64.4191C74.5285 63.2532 74.8372 62.1215 75.0429 61.0242C75.2487 59.9268 75.3515 58.7781 75.3515 57.5778C74.7686 57.4407 74.1342 57.3549 73.4483 57.3206C72.7968 57.2521 72.1967 57.2178 71.648 57.2178C71.0993 57.2178 70.4821 57.2521 69.7962 57.3206C69.1104 57.3549 68.4588 57.4407 67.8416 57.5778C67.4301 58.7781 67.1215 59.9268 66.9157 61.0242Z"
fill={colors.dots}
className={animationClass}
style={{
animationDelay: `${0.4 / speed}s`
}}
/>
{/* Upper Dots */}
<path
d="M147.141 4.34743C146.97 5.41048 146.901 6.54211 146.935 7.74233C147.484 7.84521 148.101 7.91379 148.787 7.94809C149.473 7.98238 150.073 7.99952 150.587 7.99952C151.136 7.99952 151.736 7.98238 152.388 7.94809C153.074 7.91379 153.725 7.84521 154.342 7.74233C154.754 6.57641 155.063 5.44477 155.268 4.34743C155.474 3.25008 155.577 2.1013 155.577 0.90108C154.994 0.763912 154.36 0.678182 153.674 0.64389C153.022 0.575307 152.422 0.541016 151.873 0.541016C151.325 0.541016 150.708 0.575307 150.022 0.64389C149.336 0.678182 148.684 0.763912 148.067 0.90108C147.656 2.1013 147.347 3.25008 147.141 4.34743Z"
fill={colors.dots}
className={animationClass}
style={{
animationDelay: `${0.75 / speed}s`
}}
/>
<path
d="M162.388 4.34743C162.217 5.41048 162.148 6.54211 162.182 7.74233C162.731 7.84521 163.348 7.91379 164.034 7.94809C164.72 7.98238 165.32 7.99952 165.835 7.99952C166.383 7.99952 166.983 7.98238 167.635 7.94809C168.321 7.91379 168.972 7.84521 169.59 7.74233C170.001 6.57641 170.31 5.44477 170.515 4.34743C170.721 3.25008 170.824 2.1013 170.824 0.90108C170.241 0.763912 169.607 0.678182 168.921 0.64389C168.269 0.575307 167.669 0.541016 167.121 0.541016C166.572 0.541016 165.955 0.575307 165.269 0.64389C164.583 0.678182 163.931 0.763912 163.314 0.90108C162.903 2.1013 162.594 3.25008 162.388 4.34743Z"
fill={colors.dots}
className={animationClass}
style={{
animationDelay: `${0.85 / speed}s`
}}
/>
<path
d="M177.635 4.34743C177.464 5.41048 177.395 6.54211 177.43 7.74233C177.978 7.84521 178.595 7.91379 179.281 7.94809C179.967 7.98238 180.567 7.99952 181.082 7.99952C181.63 7.99952 182.23 7.98238 182.882 7.94809C183.568 7.91379 184.219 7.84521 184.837 7.74233C185.248 6.57641 185.557 5.44477 185.763 4.34743C185.968 3.25008 186.071 2.1013 186.071 0.90108C185.488 0.763912 184.854 0.678182 184.168 0.64389C183.516 0.575307 182.916 0.541016 182.368 0.541016C181.819 0.541016 181.202 0.575307 180.516 0.64389C179.83 0.678182 179.178 0.763912 178.561 0.90108C178.15 2.1013 177.841 3.25008 177.635 4.34743Z"
fill={colors.dots}
className={animationClass}
style={{
animationDelay: `${0.95 / speed}s`
}}
/>
<path
d="M192.882 4.34743C192.711 5.41048 192.642 6.54211 192.677 7.74233C193.225 7.84521 193.843 7.91379 194.528 7.94809C195.214 7.98238 195.814 7.99952 196.329 7.99952C196.877 7.99952 197.478 7.98238 198.129 7.94809C198.815 7.91379 199.466 7.84521 200.084 7.74233C200.495 6.57641 200.804 5.44477 201.01 4.34743C201.215 3.25008 201.318 2.1013 201.318 0.90108C200.735 0.763912 200.101 0.678182 199.415 0.64389C198.763 0.575307 198.163 0.541016 197.615 0.541016C197.066 0.541016 196.449 0.575307 195.763 0.64389C195.077 0.678182 194.426 0.763912 193.808 0.90108C193.397 2.1013 193.088 3.25008 192.882 4.34743Z"
fill={colors.dots}
className={animationClass}
style={{
animationDelay: `${1.05 / speed}s`
}}
/>
<path
d="M208.129 4.41188C207.958 5.47493 207.889 6.60657 207.924 7.80679C208.472 7.90966 209.09 7.97825 209.775 8.01254C210.461 8.04683 211.061 8.06397 211.576 8.06397C212.124 8.06397 212.725 8.04683 213.376 8.01254C214.062 7.97825 214.714 7.90966 215.331 7.80679C215.742 6.64086 216.051 5.50922 216.257 4.41188C216.462 3.31454 216.565 2.16575 216.565 0.965533C215.982 0.828365 215.348 0.742635 214.662 0.708343C214.011 0.63976 213.41 0.605469 212.862 0.605469C212.313 0.605469 211.696 0.63976 211.01 0.708343C210.324 0.742635 209.673 0.828365 209.055 0.965533C208.644 2.16575 208.335 3.31454 208.129 4.41188Z"
fill={colors.dots}
className={animationClass}
style={{
animationDelay: `${1.15 / speed}s`
}}
/>
</g>
)
}}
</ClassNames>
</SvgBox>
)
}
Loading

0 comments on commit 9bde1a5

Please sign in to comment.