Skip to content
This repository has been archived by the owner on Mar 4, 2020. It is now read-only.

feat(Loader): add support for SVG animations, update in Teams theme #1097

Merged
merged 15 commits into from
Mar 28, 2019
Merged

feat(Loader): add support for SVG animations, update in Teams theme #1097

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
9bd6d01
feat(Loader): add support for SVG animations, update in Teams theme
layershifter Mar 25, 2019
732e384
add changelog entry
layershifter Mar 25, 2019
51d8c47
add missing sizes
layershifter Mar 25, 2019
f8ed85c
feat(Loader): add support for SVG animations, update in Teams theme
layershifter Mar 25, 2019
7c21c0a
add changelog entry
layershifter Mar 25, 2019
03321f9
add missing sizes
layershifter Mar 25, 2019
d5af174
use svg slot
layershifter Mar 27, 2019
e4a1e35
add propType
layershifter Mar 27, 2019
98a49e4
fix className
layershifter Mar 27, 2019
e204136
move changelog entry
layershifter Mar 27, 2019
b50b22d
merge in lastest
Mar 27, 2019
8e6d155
update loader size, translation variables & update the Loader size ex…
Mar 27, 2019
4d7ddcd
removing old changelog entry from bad merge
Mar 27, 2019
8755bfe
Merge branches 'feat/loader-svg' and 'master' of https://github.com/s…
layershifter Mar 28, 2019
34ff8d3
fix size in prototype
layershifter Mar 28, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
- Add `Alert` component @Bugaa92 ([#1063](https://github.com/stardust-ui/react/pull/1063))
- Add `placeholderColor` variable for `Input` component in Teams theme @layershifter ([#1092](https://github.com/stardust-ui/react/pull/1092))
- Add and export files icons in Teams theme @codepretty ([#1094](https://github.com/stardust-ui/react/pull/1094))
- Add support for SVG animations to `Loader`, update in Teams theme @layershifter ([#1097](https://github.com/stardust-ui/react/pull/1097))

### Documentation
- Add layout guide @kuzhelov ([#1091](https://github.com/stardust-ui/react/pull/1091))
Expand Down
36 changes: 32 additions & 4 deletions packages/react/src/components/Loader/Loader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,12 @@ import Box from '../Box/Box'

export type LoaderPosition = 'above' | 'below' | 'start' | 'end'

export interface LoaderSlotClassNames {
indicator: string
label: string
svg: string
}

export interface LoaderProps extends UIComponentProps, ColorComponentProps {
/**
* Accessibility behavior if overridden by the user.
Expand All @@ -41,6 +47,9 @@ export interface LoaderProps extends UIComponentProps, ColorComponentProps {

/** A size of the loader. */
size?: SizeValue

/** A loader can contain a custom svg element. */
svg?: ShorthandValue
}

export interface LoaderState {
Expand All @@ -54,6 +63,11 @@ class Loader extends UIComponent<ReactProps<LoaderProps>, LoaderState> {
static create: Function
static displayName = 'Loader'
static className = 'ui-loader'
static slotClassNames: LoaderSlotClassNames = {
indicator: `${Loader.className}__indicator`,
label: `${Loader.className}__label`,
svg: `${Loader.className}__svg`,
}

static propTypes = {
...commonPropTypes.createCommon({
Expand All @@ -67,13 +81,15 @@ class Loader extends UIComponent<ReactProps<LoaderProps>, LoaderState> {
label: customPropTypes.itemShorthand,
labelPosition: PropTypes.oneOf(['above', 'below', 'start', 'end']),
size: customPropTypes.size,
svg: customPropTypes.itemShorthand,
}

static defaultProps = {
accessibility: loaderBehavior,
delay: 0,
indicator: '',
indicator: {},
labelPosition: 'below',
svg: '',
size: 'medium',
}

Expand Down Expand Up @@ -102,18 +118,30 @@ class Loader extends UIComponent<ReactProps<LoaderProps>, LoaderState> {
}

renderComponent({ ElementType, classes, accessibility, variables, styles, unhandledProps }) {
const { indicator, label } = this.props
const { indicator, label, svg } = this.props
const { visible } = this.state

const svgElement = Box.create(svg, {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am wondering whether the better shorthand for the svg would be the Icon component.. Can you elaborate why we are using the Box here?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you please clarify why it can be Icon? For example, this loader is an extra big SVG:

image

And actually, I don't see any way how spinners below can be used as icons:

image

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Make sense, I mention icon only because it is an svg

defaultProps: { className: Loader.slotClassNames.indicator, styles: styles.svg },
layershifter marked this conversation as resolved.
Show resolved Hide resolved
})

return (
visible && (
<ElementType
className={classes.root}
{...accessibility.attributes.root}
{...unhandledProps}
>
{Box.create(indicator, { defaultProps: { styles: styles.indicator } })}
{Box.create(label, { defaultProps: { styles: styles.label } })}
{Box.create(indicator, {
defaultProps: {
children: svgElement,
className: Loader.slotClassNames.indicator,
styles: styles.indicator,
},
})}
{Box.create(label, {
defaultProps: { className: Loader.slotClassNames.label, styles: styles.label },
})}
</ElementType>
)
)
Expand Down
2 changes: 2 additions & 0 deletions packages/react/src/themes/teams/componentStyles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,8 @@ export { default as Label } from './components/Label/labelStyles'

export { default as Layout } from './components/Layout/layoutStyles'

export { default as Loader } from './components/Loader/loaderStyles'

export { default as ItemLayout } from './components/ItemLayout/itemLayoutStyles'

export { default as List } from './components/List/listStyles'
Expand Down
2 changes: 2 additions & 0 deletions packages/react/src/themes/teams/componentVariables.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,8 @@ export { default as Label } from './components/Label/labelVariables'

export { default as Layout } from './components/Layout/layoutVariables'

export { default as Loader } from './components/Loader/loaderVariables'

export { default as ItemLayout } from './components/ItemLayout/itemLayoutVariables'

export { default as ListItem } from './components/List/listItemVariables'
Expand Down
85 changes: 85 additions & 0 deletions packages/react/src/themes/teams/components/Loader/loaderStyles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
import { LoaderProps } from '../../../../components/Loader/Loader'
import { ComponentStyleFunctionParam, ICSSInJSStyle } from '../../../types'
import { LoaderVariables } from './loaderVariables'

export default {
indicator: ({
props: p,
variables: v,
}: ComponentStyleFunctionParam<LoaderProps, LoaderVariables>): ICSSInJSStyle => ({
// Reset existing styles from base theme
animationName: 'none',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wish we didn't have to reset here all existing styles from the base theme, but I don't have any other proposal. The styles for the base theme seems reasonable for it's usage

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yep, it's absolutely not funny, but I don't have a better idea now...

animationDuration: 'unset',
animationIterationCount: 'unset',
animationTimingFunction: 'unset',
borderColor: 'transparent',
borderRadius: 0,
borderStyle: 'none',
borderWidth: 0,

height: v.containerHeights[p.size],
width: v.containerWidths[p.size],
overflow: 'hidden',
}),
svg: ({
props: p,
theme: t,
variables: v,
}: ComponentStyleFunctionParam<LoaderProps, LoaderVariables>) => {
const outerAnimation: ICSSInJSStyle = {
animationName: t.renderer.renderKeyframe(
() =>
({
to: {
opacity: 1,
},
} as any),
{},
),
animationDelay: '1.5s',
animationDirection: 'normal',
animationDuration: '.3s',
animationFillMode: 'both',
animationIterationCount: '1',
animationPlayState: 'running',
animationTimingFunction: 'ease-out',
display: 'block',
overflow: 'hidden',
position: 'relative',
}
const svgAnimation: ICSSInJSStyle = {
animationName: t.renderer.renderKeyframe(
() =>
({
to: {
transform: `translate3d(0, ${v.svgTranslatePosition[p.size]}, 0)`,
},
} as any),
{},
),
animationDelay: '0s',
animationDirection: 'normal',
animationDuration: '2s',
animationFillMode: 'both',
animationPlayState: 'running',
animationTimingFunction: 'steps(60, end)',
animationIterationCount: 'infinite',
}

return {
...outerAnimation,

':before': {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How does this works? why we have animations for the svg and the :before? Can we somehow move this to the indicator and the svg accordingly?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this because of the svg that is used?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Idea with svg slot works fine, but Teams loader requires specific markup, i.e need one more element. Here is match:
image

I'm opened for better idea...

...svgAnimation,

backgroundImage: v.svgContent,
content: '" "',
display: 'block',
overflow: 'hidden',

height: v.svgHeights[p.size],
width: v.svgWidths[p.size],
},
}
},
}
1 change: 1 addition & 0 deletions packages/react/src/themes/teams/components/Loader/loaderSvgDataUrl.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export default `url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 80 4880\'%3E%3Cg role=\'presentation\'%3E%3Cpath fill=\'%236264a7\' d=\'M67.4 26.4c5.8-2 12.4 3.3 11.4 9.4-.4 6.5-8.8 10-13.8 6-5.6-3.6-4.2-13.5 2.4-15.3zM66.5 113.7c5.7-3.3 13.6 1.8 12.7 8.4 0 6.4-8 10.4-13.2 7-5.6-3.2-5.4-12.5.5-15.3z\'%3E%3C/path%3E%3Cpath fill=\'%235659b0\' d=\'M65.5 200.4c5.7-3.4 13.6 2 12.6 8.5 0 6-7 10.7-12.7 7.7-6.4-3-6-13.2.2-16.3z\'%3E%3C/path%3E%3Cpath fill=\'%23575ab1\' d=\'M64.3 286.2c5-2 11.3 2.3 11.2 7.8 0 5.4-4.5 11.7-10.5 11-5.4-.3-9.2-6.3-7.3-11.2 1.2-3.2 3.2-6.5 6.6-7.6z\'%3E%3C/path%3E%3Cpath fill=\'%23585bb2\' d=\'M59.4 372.5c5-2.6 11.6 1 12 6.5.8 5-3.4 8.6-7 11.3-4.5 3.2-11.7.2-12.6-5.3-1.4-5.5 3.6-9.7 7.6-12.5z\'%3E%3C/path%3E%3Cpath fill=\'%235a5db4\' d=\'M54.3 457.4c4-2.2 9.6 0 11.2 4.2 1.7 3.7 0 8.4-3.5 10.5-3.7 2.5-8.2 5.6-12.8 4-4.3-1.6-6.5-6.8-4.8-11 1.5-4.2 6.4-5.4 10-7.6z\'%3E%3C/path%3E%3Cpath fill=\'%235b5fb6\' d=\'M48.6 540.7c4.4-2 10 1 11 5.7 1 4-1.4 8.4-5.4 9.7-4 1.6-8.5 3-13 2.5-5.6-.8-8.6-8-5.3-12.6 2.7-4.4 8.4-3.5 12.6-5.3z\'%3E%3C/path%3E%3Cpath fill=\'%235d60b8\' d=\'M29.4 622.4c3-1.5 6.4 0 9.6 0 3.4.3 7.3-1 10.3 1.3 4.6 3 4.4 10.4-.2 13.3-3.7 2-8.2 1.7-12.4 1.5-3.6-.5-7.8-.7-10.2-4-3.2-3.7-1.6-10.2 3-12z\'%3E%3C/path%3E%3Cpath fill=\'%235f63ba\' d=\'M20.3 698.3c4-2 7.8 1.3 11.4 2.8 4 2 9.6 1 12.2 5 3.3 4.7-.2 12-6 12.3-7 0-14-2.6-19.7-6.6-4.7-3.4-3.5-11.6 2-13.4z\'%3E%3C/path%3E%3Cpath fill=\'%236165bc\' d=\'M12.3 771.3c3-1.5 7-.6 9 2 3 3.8 6.7 6.7 11 8.3 3.3 1 5.7 4 5.5 7.4.2 4.8-4.8 8.7-9.3 7.4-7.7-2.2-14.5-7.2-19.3-13.6-2.8-3.7-1.2-9.8 3-11.5z\'%3E%3C/path%3E%3Cpath fill=\'%236467bf\' d=\'M7.5 841.7c4-2 9.2.3 10.3 4.6 1.7 5.4 5 10 9.7 13 4 2.5 4.6 8.4 1.4 11.6-2.5 2.6-7 3-10 1-7.4-5-13-12.6-15.5-21-1.2-3.6.5-8 4-9.3z\'%3E%3C/path%3E%3Cpath fill=\'%23666ac1\' d=\'M6.5 910.8c3-1.6 7.3-.4 9 2.6 1.7 2.2 1 5 1.4 7.6 0 5.6 2.5 11 6 15 2.5 2.5 2.7 6.7.5 9.5-2.4 3.3-7.8 3.8-10.7 1-7.6-7.8-11.5-19-10.6-29.6.2-2.7 1.8-5.2 4.3-6.2z\'%3E%3C/path%3E%3Cpath fill=\'%23696cc4\' d=\'M9.3 980c3.7-2 9 .3 10 4.4 1 2.4-.2 4.8-1 7-2.4 5.7-2.3 12.4.3 18 1 2.3 2.4 5 1.5 7.6-1 4-5.7 6.2-9.5 4.5-2.6-1-3.8-3.7-5-6-4.4-10-4.3-21.8.4-31.6.6-1.7 1.7-3 3.3-4z\'%3E%3C/path%3E%3Cpath fill=\'%236b6fc7\' d=\'M16.3 1051.2c4-2.6 10 1 10 5.8.5 3-2 5.3-4 7.4-5.3 5.7-7 14-5.2 21.6 1 3.5-1 7.4-4.4 8.5-3.4 1.2-7.6-.8-8.7-4.3-4.2-13.8.7-30.2 12.3-39z\'%3E%3C/path%3E%3Cpath fill=\'%236e72ca\' d=\'M26.4 1125.3c4.5-2.6 10.7 1.5 10 6.7-.4 3.3-3.3 5.2-6 6.3-8.2 3.4-14 11.8-14.2 20.6 0 2.6-.6 5.6-3.2 7-4 2.8-10 0-10.2-5-.8-15.3 9.2-30.3 23.6-35.7z\'%3E%3C/path%3E%3Cpath fill=\'%237175cd\' d=\'M35.3 1203.2c3.7-.3 8.6-1.2 11.2 2.3 2.7 3.2 1 8.8-3 10-3.7.8-7.7.3-11.3 1.7-8 2.6-13.8 9.5-15.8 17.5-1 4.7-7.6 6.2-10.8 2.7-2.8-2.7-1.7-7-.4-10 4.5-13 16.6-22.6 30-24.2z\'%3E%3C/path%3E%3Cpath fill=\'%237478d0\' d=\'M36.4 1283.3c7-.6 14.2.5 20.3 4 3.8 2.4 3.3 8.7-.8 10.6-3 1.5-6-.2-8.6-1-9.8-3.5-21.6.5-27.3 9-1.5 2.4-3 5.6-6 6-4.6 1-9-4.4-6.8-8.7 5.4-11 17-18.8 29.2-20z\'%3E%3C/path%3E%3Cpath fill=\'%23777bd3\' d=\'M36.5 1363.5c11.6-1 23.8 3.6 31.3 12.7 2.7 3.6-.3 9.5-4.8 9.4-3.2.3-5-2.6-7.3-4.4-8.4-7.4-22.2-7.6-31-.4-2.3 1.8-4.3 5-7.7 4.7-4.7 0-7.5-6.3-4.4-9.8 6-7 14.8-11.3 24-12.2z\'%3E%3C/path%3E%3Cpath fill=\'%237a7ed6\' d=\'M31.4 1444.6c18-4.8 38.3 6.6 43.3 24.6 1 4-3.5 8-7.4 6.6-3.5-1-4-4.8-5.5-7.5-5.5-10.8-19.6-16-30.8-11.4-3.2 1-6.2 4.3-10 3-3.8-1.4-5-7.2-1.7-9.8 3.5-2.8 7.8-4.4 12-5.6z\'%3E%3C/path%3E%3Cpath fill=\'%237d81da\' d=\'M32.4 1524.6c15-3.4 31.8 4 39.2 17.8 3.5 6.5 5.3 14 4.3 21.5-1 4-6.7 5.5-9.5 2.4-2-2-1.4-5-1.6-7.4-.2-11.6-9.6-22-21-23.7-4.4-.8-8.8 0-13 1-4 1.2-7.7-3.5-6-7.2 1-3 4.6-3.7 7.4-4.4z\'%3E%3C/path%3E%3Cpath fill=\'%238084dd\' d=\'M36.3 1604.4c14-2 28.5 6 35 18.2 6 10.6 6 24.3 0 34.8-2 3.5-7.6 3-9-.6-1.8-3.5 1.4-6.8 2-10.2 3.8-12.4-4-26.7-16.3-30.5-4-1.6-8.3-.8-12.4-1.6-4.6-1.7-4-9 .7-10z\'%3E%3C/path%3E%3Cpath fill=\'%238387e0\' d=\'M43.3 1685.3c4-1.2 8.2 1 12 2.5 14.7 6.6 23.3 24.2 19.5 40-1.8 8-6.5 15.7-13.4 20.6-3 2.2-8-.6-7.7-4.4 0-2.3 1.8-3.7 3.3-5 7-6 10-16 7.8-24.7-1.8-8-7.6-15-15.3-18-2.2-.8-4.6-1-6.8-2-3.4-2-3-7.5.6-9z\'%3E%3C/path%3E%3Cpath fill=\'%23868be4\' d=\'M50.2 1768c1.4-.8 3.2-.8 4.7 0 13.2 5.7 21.7 20.5 20.3 35-1 15-12.6 28.5-27.3 31.4-3.4.6-6.4-3-5-6.3.6-2.6 3.7-3 6-4 8.2-2.8 14.5-10.4 16.2-19 2-9-1.5-18.8-8.6-24.6-2.2-2-5-3-7.2-4.8-2.2-2-1.7-6 .8-7.5z\'%3E%3C/path%3E%3Cpath fill=\'%238a8ee7\' d=\'M57.4 1852.2c3.7-1.8 6.6 2 9 4.5 11 12 11.7 31.6 1.7 44.5-6.8 9.3-18.5 14.6-30 14-2.4-.3-5.3-.2-7-2.2-1.6-2-1-5.4 1.3-6.8 1.7-1 3.8-.3 5.6-.4 9.8 1 20-4.5 24.7-13.2 4.6-8 4.3-18.7-.8-26.5-1.8-3-4.5-5-6.6-7.4-1.4-2.2-.4-5.4 2-6.4z\'%3E%3C/path%3E%3Cpath fill=\'%238d91ea\' d=\'M62.3 1938.3c1.7-1 4.3-1 5.6.8 9 11.5 9.2 28.8.8 40.8-7 10.4-20 16.4-32.6 15-5.7-.7-11.3-2.7-16-6-2.6-1.8-2-6.4 1-7.5 2.2-1 4.2.6 6 1.5 8.6 5 20 4.4 28-1.5 7.7-5.4 12-15 10.8-24.3-.3-4.5-2.3-8.6-4.7-12.4-1.6-2-1-5 1-6.3z\'%3E%3C/path%3E%3Cpath fill=\'%239095ee\' d=\'M66.3 2025.2c2-1.2 4.8-.5 5.7 1.6 5.6 12.8 2.2 28.7-8 38.2-9.4 9.2-24.2 12.2-36.5 7.4-7-2.8-13.5-8-17.3-14.7-1.2-2.6 1-5.8 3.8-5.7 2.5 0 3.7 2.4 5 4 7 9.5 20.5 13 31.2 8.4 12-4.7 19-18.8 15.3-31-.8-2.7-2.3-6.5.8-8.2z\'%3E%3C/path%3E%3Cpath fill=\'%239398f1\' d=\'M68.6 2112.7c2-1 5 0 5.4 2.4 2.4 14.5-5.8 30-19.2 36-12.5 6.2-28.7 3.6-38.7-6.2-5.6-5.5-9.4-13-10-21-.4-4 6-5 7.2-1.2 1 5.5 3 11 7 15.3 7 7.8 19 11 28.8 7 10.7-3.6 18.4-14.7 17.7-26-.2-2.2-.6-5.3 2-6.3z\'%3E%3C/path%3E%3Cpath fill=\'%23969bf5\' d=\'M8.4 2188.4c2-2 6-.3 6 2.6-.4 2-1 4-1.2 5.8-1 8.8 2.5 18 9.3 23.7 7 6 17.2 8 26 5 10-3 17-12.3 18.4-22.5.3-4 6.7-3.6 7 .3-1 15-13.3 28-28 30.3-13 2.5-27.4-3.6-34.6-15-5.2-7.8-6.8-17.8-4.6-27 .4-1 .6-2.4 1.6-3.2z\'%3E%3C/path%3E%3Cpath fill=\'%23999ef8\' d=\'M15.3 2257c2-1 4.4 0 5 2.2.3 2-1.3 3.3-2.3 4.8-5.7 7.6-6.8 18.2-3 27 4.3 10 15 16.7 26 16.2 10-.3 19.4-6.6 23.7-15.6 1.2-3.4 6.7-2.2 6.4 1.4-.7 3.4-3 6.3-5 9-9.3 11-26 15-39.3 9.2C13.8 2306 5 2292 6 2278c.7-7.8 3.7-15.7 9.3-21z\'%3E%3C/path%3E%3Cpath fill=\'%239ca1fb\' d=\'M25.6 2329.6c1.8-1.2 4.5.2 4.6 2.5.2 2.7-2.8 3.4-4.6 4.7-12 7-16.6 23.5-10 35.7 5.8 12.2 21.6 18.4 34.2 13.2 3.6-1.2 6.4-3.6 9.5-5.7 2.8-2 6 2.5 3.6 4.7-11.4 11-30.5 12-43 2.4-12.8-9-17.4-27.3-10.5-41.3 3.3-7 9-13 16-16z\'%3E%3C/path%3E%3Cpath fill=\'%236264a7\' d=\'M33.2 2407.2c2.3-.4 4.6-.8 7-.6 2.4.5 3 4.2.6 5.4-4 .7-8.3 1-12 2.8-12.6 5.3-19.5 20.5-15.2 33.4 4 13.3 18.8 22 32.3 18.8 2-.6 6-2 6.7 1.3.7 3.7-4 4-6.6 4.6-15.4 3-32.3-6.4-37.4-21.4-5.3-13.8 0-30.6 12-39 3.8-2.6 8-4.4 12.6-5.4z\'%3E%3C/path%3E%3Cpath fill=\'%239ca1fb\' d=\'M37.4 2486.4c5.5-.4 11.3.4 16.3 3 2 1.6.8 5.3-2 5.4-3.5-.8-7-2.3-10.8-2.2-13-.7-25.2 9-27.8 21.4-3 12 3.4 25 14.4 30.5 3.4 2 7.3 2.3 11 3 2.7 1 2.3 5.6-.6 6-17.3-.3-32-16.3-31.7-33.5-.4-17 14-32.7 31-33.6z\'%3E%3C/path%3E%3Cpath fill=\'%23999ef8\' d=\'M33.5 2566.7c10.8-2.2 22.7 1.3 30.5 9.3 1.8 1.6 1 5-1.3 5.6-2.3 1-4-1.5-5.6-2.7-9.6-8.4-25-8-34.6.3-8.6 7-12 19.7-8 30 2.3 6.4 7 11.4 12.7 14.8 3.2 2 .6 7.3-2.8 6-13.8-6.8-21.2-24-17-38.7 3-12.3 13.8-22.3 26.3-24.6z\'%3E%3C/path%3E%3Cpath fill=\'%23969bf5\' d=\'M32.4 2646.7c15-3.7 32 4.3 38.3 18.5.8 2.3-1.4 4.8-3.8 4.5-2.2 0-3-2.2-4-3.7-5.6-9.7-17.8-14.8-28.6-12.4-9.8 2-18 10-20.5 19.6-2 7.2-.8 15.2 3.4 21.4 1 1.5 2.4 3.3 1.4 5.2-1 2.4-4.7 2.8-6 .7-9.2-11.7-9.2-29.2-.2-41 4.8-6.4 12-11 19.8-12.8z\'%3E%3C/path%3E%3Cpath fill=\'%239398f1\' d=\'M31.4 2726.7c14.6-4 31.3 3 38.5 16.3 1.7 3.3 3.4 7 3.7 10.8-.3 2.8-4 4.3-6 2.6-1.6-1-1.7-3-2.3-4.6-2.5-8.4-9.6-15-18-17.5-8.6-2.6-18.6-.3-25.2 5.8-6.5 6-10 15-8.6 23.5 0 1.8 1 4-.5 5.6-1.5 2.2-5.2 1.8-6.3-.7-5.2-17.5 7-37.5 24.7-41.6z\'%3E%3C/path%3E%3Cpath fill=\'%239095ee\' d=\'M36.4 2805.5c14.7-1.7 29.7 7 35.4 20.6 2 5 3.2 10.4 2.8 15.7-.5 4-6.7 4.5-7.8.7-.6-3.3-.3-6.8-1.5-10-3-10.4-12.7-18.2-23.4-18.8-11.8-1-23.7 6.8-27 18-1 2.2-1 5-3.4 6-2.7 1.2-6-1.4-5.6-4.3 2.6-14.6 15.7-26.5 30.4-27.8z\'%3E%3C/path%3E%3Cpath fill=\'%238d91ea\' d=\'M33.5 2885.7c14-2.8 29.3 4 36.5 16.3 5 8.4 6.4 19 3.3 28.2-1 3-5.7 3.6-7.5 1-1.5-2.2 0-4.8 0-7 2.3-12-5-24.4-16.3-28.6-9.8-4-22-1.2-29 7-1.5 1.5-2.8 4-5.4 3.8-3.2 0-5.3-4-3.3-6.8 5-7.2 13-12.3 21.8-14z\'%3E%3C/path%3E%3Cpath fill=\'%238a8ee7\' d=\'M32.4 2965.7c15-3.5 31.4 4 38.5 17.4 5.8 10.8 5.6 24.7-1 35.2-1.6 3-6.4 2.6-7.8-.5-1.4-2.3.4-4.7 1.3-7 4.2-8.3 3-19-2.8-26.4-6-8-17-12-27-9.5-3 .6-5.7 2.6-8.8 3.3-4 .4-6.4-5-3.6-7.6 3.2-2.5 7.2-3.8 11-4.8z\'%3E%3C/path%3E%3Cpath fill=\'%23868be4\' d=\'M34.4 3045.4c14.2-3.4 29.8 4.8 36.7 17.5 7.7 13.5 5 32-6.5 42.5-2.5 2.2-7 .7-7.6-2.5-1-3.2 2-5.3 3.5-7.6 6-7.6 7-18.6 2.4-27-4.4-8.5-13.5-14.3-23-14-2-.2-4.6.4-6.3-1.2-2.5-2-2-6.3.7-7.8z\'%3E%3C/path%3E%3Cpath fill=\'%238387e0\' d=\'M48.2 3126c4.2-.4 8 2.2 11.5 4.2 13 8.3 19 25.5 14.5 40-2.6 8.7-8.6 16.4-16.5 20.7-3.2 2-7.7-1-7.4-4.8 0-2.7 2.5-4 4.5-5.5 7.5-5 11.6-14.7 10.5-23.6-1-9-7.2-17.2-15.7-20.5-1.8-1-4-1.5-4.8-3.6-1.3-2.8.5-6.3 3.4-7z\'%3E%3C/path%3E%3Cpath fill=\'%238084dd\' d=\'M58.3 3212.3c3.8-1.7 6.8 1.8 9 4.4 9.5 10.8 11.3 27.5 4.5 40-4.6 8.7-12.8 15.4-22.2 18-3.7 1-7.6-2.8-6.5-6.5 1-3.7 5-4 7.8-5.4 11.3-5 17.4-19.2 13-30.8-1.3-4.5-4.2-8.2-7.5-11.4-2.4-2.5-1.2-7 2-8.3z\'%3E%3C/path%3E%3Cpath fill=\'%237d81da\' d=\'M65.2 3302.3c2.8-1.5 6.5-.2 7.7 2.7 2.6 6 3.6 12.6 3 19-1.7 17.8-18.2 32.7-36 32-4.5 0-6.6-6.3-3.4-9.3 2.6-2.5 6.6-1.5 9.7-2.5 10.8-2.6 19-13 18.7-24.2 0-4-1.2-7.6-2.5-11.3-1-2.4.5-5.3 2.7-6.4z\'%3E%3C/path%3E%3Cpath fill=\'%237a7ed6\' d=\'M67.4 3394.4c3-2.2 8-.2 8.8 3.6 1.3 15-8.5 30.3-22.6 35.8-7.2 2.8-15.4 3.5-23 1.3-3.8-1.3-4.7-7.2-1.3-9.7 2.8-2.4 6.5-.6 9.7-.6 12 .8 23.8-8.7 25.4-20.7.6-3.3-.3-7.6 3-9.5z\'%3E%3C/path%3E%3Cpath fill=\'%23777bd3\' d=\'M66.5 3485.7c4.3-1.7 9.2 2.8 7.7 7.2-5 14.3-20 24.2-35.2 23.6-6-.2-12-1.6-17-4.8-3.5-2.5-2.8-8.7 1.3-10.2 3-1.5 6 .6 8.7 1.5 10.6 4.2 23.8-.8 29.2-10.8 1.4-2.4 2.3-5.7 5.3-6.5z\'%3E%3C/path%3E%3Cpath fill=\'%237478d0\' d=\'M59.5 3575.7c3.7-1.5 8.3 1.4 8.4 5.4.3 4.4-4 7-6.8 9.2-13.7 10-34.2 8.6-46.3-3.2-3.4-3.2-1.5-9.6 3-10.4 3-1 5.4 1.3 7.6 3 7.4 5.7 18.3 6.3 26.4 1.5 2.8-1.3 4.8-4 7.5-5.3z\'%3E%3C/path%3E%3Cpath fill=\'%237175cd\' d=\'M11.4 3651.2c2.5-1.4 6-1 8 1.4 2 2.5 4 5.3 6.8 7 6.6 5 15.5 5.6 23 2.7 4.7-2.3 10.3 2.6 8.8 7.6-1 4-5.6 5-9 6-15 4-32-2.8-40-16-2-3-.7-7.2 2.4-8.8z\'%3E%3C/path%3E%3Cpath fill=\'%236e72ca\' d=\'M9.5 3723.6c3.4-1 7 1.2 8 4.6 3 8.3 11 14.7 19.8 15.4 2.4.4 5.3 0 7.2 2 3 2.4 3 7.4 0 10-2.5 2.4-6.4 1.7-9.6 1.3C21 3755 9 3745 4.6 3732c-1.2-3.5 1-7.6 4.8-8.4z\'%3E%3C/path%3E%3Cpath fill=\'%236b6fc7\' d=\'M6.4 3796.4c3.3-1.6 7.6-.2 9.3 3 1 2.7 1 5.5 2 8.2 2 6 6.3 11 12 13.6 2.5 1.2 5.2 2.8 5.6 5.8 1.2 4.7-3.6 9.4-8.3 8-13.5-4.5-23.5-17.8-24.4-32-.2-2.8 1.5-5.4 3.8-6.6z\'%3E%3C/path%3E%3Cpath fill=\'%23696cc4\' d=\'M7.3 3868.4c3.3-1.3 7.3.3 9 3.5 1 1.8.4 4 .4 6-.7 7 2 13.7 6.7 18.6 2.4 2 3.4 5.8 1.8 8.7-1.8 4-7.5 5.2-10.8 2.3C5 3899.4.7 3886 2.8 3874c.4-2.6 2.2-4.7 4.5-5.6z\'%3E%3C/path%3E%3Cpath fill=\'%23666ac1\' d=\'M8.5 3941.4c4.6-2.7 11 1.3 10.7 6.7-.7 4-2.7 7.8-2.4 12-.2 4 1.3 7.5 2.5 11 1.2 4-1.6 8.3-5.5 9-3.4.8-7-1-8.3-4.4-4.3-9.3-4.5-20.3-.7-29.8.7-1.8 2-3.5 3.7-4.4z\'%3E%3C/path%3E%3Cpath fill=\'%236467bf\' d=\'M12.5 4014.7c4.2-2.2 9.8.6 10.5 5.3 1 5-4 8.3-5 13-2 4.6.7 10.7-3.4 14.6-3.8 4-11.3 1.7-12.4-3.7-1.2-8.7 1.2-17.6 6-25 1-1.6 2.3-3.5 4.3-4.3z\'%3E%3C/path%3E%3Cpath fill=\'%236165bc\' d=\'M17.4 4089.3c4.7-2.6 11.3 1.2 11 6.7.5 5-5 7.3-7.3 11-2.7 3.7-2.6 9.7-7.5 11.4-5.3 2.3-11.6-2.8-10.4-8.4 2.2-8.2 7.3-16 14.4-20.7z\'%3E%3C/path%3E%3Cpath fill=\'%235f63ba\' d=\'M25.4 4164.6c5.4-1.4 11 4 9.3 9.5-.7 4.2-5 5.6-8 7.7-4 2.3-5.7 7.7-10.7 7.8-6 .8-10.6-6.7-7.3-11.8 4-6 10-10.7 16.7-13z\'%3E%3C/path%3E%3Cpath fill=\'%235d60b8\' d=\'M30.3 4242.6c4.3-1.7 10 0 11.3 4.8 1.8 4.7-1.7 10-6.6 10.6-5 .8-9 6-14.3 4.2-5.6-1.3-7.6-9-3.6-13 3.8-3.4 8.6-5.2 13.3-6.6z\'%3E%3C/path%3E%3Cpath fill=\'%235b5fb6\' d=\'M35.4 4321.5c4.2-.4 9.4-1 12.3 2.8 3.6 4.3 1.3 12-4.3 13l-11.4 1.2c-6 .3-10-6.8-7-11.8 1.7-4 6.5-4.7 10.4-5.2z\'%3E%3C/path%3E%3Cpath fill=\'%235a5db4\' d=\'M39.3 4401.5c4.3-.8 8.7.2 12.7 1.6 5.2 2.3 6.2 10.2 2 13.8-4.4 3.8-10.4 1.2-15.3.4-7.2-2.4-6.6-14 .6-15.7z\'%3E%3C/path%3E%3Cpath fill=\'%23585bb2\' d=\'M49.3 4483c4-.5 7.7 1.7 11 3.8 4.5 3.5 3.7 11.5-1.6 14-4.6 2.4-9.5-.6-13.4-3-5.3-4.2-2.7-13.8 4-14.7z\'%3E%3C/path%3E%3Cpath fill=\'%23575ab1\' d=\'M56.3 4567.4c7-1.7 15 6.2 12 13.2-1.6 4.6-7.8 6.7-12 4-2.8-1.6-5.7-4-6.2-7.7-.6-4.2 2.2-8.6 6.3-9.6z\'%3E%3C/path%3E%3Cpath fill=\'%235659b0\' d=\'M61.4 4653.5c7-3 14.7 5.6 11.5 12.3-2.3 6-11 7-14.8 2-4.2-4.3-2.7-12.4 3-14.3z\'%3E%3C/path%3E%3Cpath fill=\'%236264a7\' d=\'M64.5 4740.3c5.7-3 13.2 2.2 12.4 8.6-.3 6.3-8.4 10.2-13.6 6.5-5.5-3.4-5-12.7 1-15.2zM67.3 4826.3c6.2-2.4 13 4 11.3 10.3-1 6-9.3 9-14 4.8-5.2-4-3.7-13.4 2.7-15z\'%3E%3C/path%3E%3C/g%3E%3C/svg%3E")`
Loading