├── .editorconfig ├── .github ├── CONTRIBUTING.md └── ISSUE_TEMPLATE.md ├── .gitignore ├── LICENSE ├── lottie-animation.gif ├── package-lock.json ├── package.json ├── readme.md ├── src ├── assets │ ├── body_movin.json │ └── lottie_logo.json ├── components.d.ts ├── components │ └── lottie-animation │ │ ├── lottie-animation.css │ │ ├── lottie-animation.spec.ts │ │ └── lottie-animation.tsx ├── index.html └── index.ts ├── stencil.config.js └── tsconfig.json /.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | 3 | root = true 4 | 5 | [*] 6 | charset = utf-8 7 | indent_style = space 8 | indent_size = 2 9 | end_of_line = lf 10 | insert_final_newline = true 11 | trim_trailing_whitespace = true 12 | 13 | [*.md] 14 | insert_final_newline = false 15 | trim_trailing_whitespace = false 16 | -------------------------------------------------------------------------------- /.github/CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | Thanks for your interest in contributing to the Stencil Component Starter! :tada: 4 | 5 | 6 | ## Contributing Etiquette 7 | 8 | Please see our [Contributor Code of Conduct](https://github.com/ionic-team/stencil/blob/master/CODE_OF_CONDUCT.md) for information on our rules of conduct. 9 | 10 | 11 | ## Creating an Issue 12 | 13 | * If you have a question about using Stencil, please ask in the [Stencil Worldwide Slack](https://join.slack.com/t/stencil-worldwide/shared_invite/enQtMjQ2MzkyMTY0MTk0LTQ4ODgzYjFjNjdkNDY3YWVhMmNlMTljMWQxNTM3Yjg0ZTIyZTM1MmU2YWE5YzNjNzE1MmQ3ZTk2NjQ1YzM5ZDM group. 14 | 15 | * It is required that you clearly describe the steps necessary to reproduce the issue you are running into. Although we would love to help our users as much as possible, diagnosing issues without clear reproduction steps is extremely time-consuming and simply not sustainable. 16 | 17 | * The issue list of this repository is exclusively for bug reports and feature requests. Non-conforming issues will be closed immediately. 18 | 19 | * Issues with no clear steps to reproduce will not be triaged. If an issue is labeled with "needs reply" and receives no further replies from the author of the issue for more than 5 days, it will be closed. 20 | 21 | * If you think you have found a bug, or have a new feature idea, please start by making sure it hasn't already been [reported](https://github.com/ionic-team/stencil/issues?utf8=%E2%9C%93&q=is%3Aissue). You can search through existing issues to see if there is a similar one reported. Include closed issues as it may have been closed with a solution. 22 | 23 | * Next, [create a new issue](https://github.com/ionic-team/stencil-component-starter/issues/new) that thoroughly explains the problem. Please fill out the populated issue form before submitting the issue. 24 | 25 | 26 | ## Creating a Pull Request 27 | 28 | * We appreciate you taking the time to contribute! Before submitting a pull request, we ask that you please [create an issue](#creating-an-issue) that explains the bug or feature request and let us know that you plan on creating a pull request for it. If an issue already exists, please comment on that issue letting us know you would like to submit a pull request for it. This helps us to keep track of the pull request and make sure there isn't duplicated effort. 29 | 30 | * Looking for an issue to fix? Make sure to look through our issues with the [help wanted](https://github.com/ionic-team/stencil-component-starter/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22) label! 31 | 32 | ### Setup 33 | 34 | 1. Fork the repo. 35 | 2. Clone your fork. 36 | 3. Make a branch for your change. 37 | 4. Run `npm install` (make sure you have [node](https://nodejs.org/en/) and [npm](http://blog.npmjs.org/post/85484771375/how-to-install-npm) installed first) 38 | 39 | 40 | #### Updates 41 | 42 | 1. Unit test. Unit test. Unit test. Please take a look at how other unit tests are written, and you can't write too many tests. 43 | 2. If there is a `*.spec.ts` file located in the components folder, update it to include a test for your change, if needed. If this file doesn't exist, please notify us. 44 | 3. Run `npm run test` or `npm run test.watch` to make sure all tests are working, regardless if a test was added. 45 | 46 | 47 | ## Commit Message Format 48 | 49 | We have very precise rules over how our git commit messages should be formatted. This leads to readable messages that are easy to follow when looking through the project history. We also use the git commit messages to generate our changelog. (Ok you got us, it's basically Angular's commit message format). 50 | 51 | `type(scope): subject` 52 | 53 | #### Type 54 | Must be one of the following: 55 | 56 | * **feat**: A new feature 57 | * **fix**: A bug fix 58 | * **docs**: Documentation only changes 59 | * **style**: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc) 60 | * **refactor**: A code change that neither fixes a bug nor adds a feature 61 | * **perf**: A code change that improves performance 62 | * **test**: Adding missing tests 63 | * **chore**: Changes to the build process or auxiliary tools and libraries such as documentation generation 64 | 65 | #### Scope 66 | The scope can be anything specifying place of the commit change. For example `renderer`, `compiler`, etc. 67 | 68 | #### Subject 69 | The subject contains succinct description of the change: 70 | 71 | * use the imperative, present tense: "change" not "changed" nor "changes" 72 | * do not capitalize first letter 73 | * do not place a period `.` at the end 74 | * entire length of the commit message must not go over 50 characters 75 | * describe what the commit does, not what issue it relates to or fixes 76 | * **be brief, yet descriptive** - we should have a good understanding of what the commit does by reading the subject 77 | 78 | 79 | #### Adding Documentation 80 | 81 | Please see the [stencil-site](https://github.com/ionic-team/stencil-site) repo to update documentation. 82 | 83 | 84 | ## License 85 | 86 | By contributing your code to the ionic-team/stencil GitHub Repository, you agree to license your contribution under the MIT license. 87 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | **Resources:** 2 | Before submitting an issue, please consult our [docs](https://stenciljs.com/). 3 | 4 | **Stencil version:** (run `npm list @stencil/core` from a terminal/cmd prompt and paste output below): 5 | 6 | ``` 7 | insert the output from npm list @stencil/core here 8 | ``` 9 | 10 | **I'm submitting a ...** (check one with "x") 11 | [ ] bug report 12 | [ ] feature request 13 | [ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://stencil-worldwide.slack.com 14 | 15 | **Current behavior:** 16 | 17 | 18 | **Expected behavior:** 19 | 20 | 21 | **Steps to reproduce:** 22 | 24 | 25 | **Related code:** 26 | 27 | ``` 28 | insert any relevant code here 29 | ``` 30 | 31 | **Other information:** 32 | 33 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | dist/ 2 | www/ 3 | 4 | *~ 5 | *.sw[mnpcod] 6 | *.log 7 | *.lock 8 | *.tmp 9 | *.tmp.* 10 | log.txt 11 | *.sublime-project 12 | *.sublime-workspace 13 | 14 | .idea/ 15 | .vscode/ 16 | .sass-cache/ 17 | .versions/ 18 | node_modules/ 19 | $RECYCLE.BIN/ 20 | 21 | .DS_Store 22 | Thumbs.db 23 | UserInterfaceState.xcuserstate 24 | .env 25 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Ionic 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /lottie-animation.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/splitinfinities/lottie-wc/26f896941053c852b214e7cf03736202b38020ed/lottie-animation.gif -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "lottie-wc", 3 | "version": "1.1.0", 4 | "description": "Provides , a simple web component to use lottie animations by Airbnb", 5 | "main": "dist/lottie.js", 6 | "types": "dist/types/index.d.ts", 7 | "collection": "dist/collection/collection-manifest.json", 8 | "files": [ 9 | "dist/" 10 | ], 11 | "browser": "dist/lottie.js", 12 | "scripts": { 13 | "build": "stencil build", 14 | "dev": "sd concurrent \"stencil build --dev --watch\" \"stencil-dev-server\" ", 15 | "serve": "stencil-dev-server", 16 | "start": "npm run dev", 17 | "test": "jest --no-cache", 18 | "test.watch": "jest --watch --no-cache" 19 | }, 20 | "dependencies": { 21 | "lottie-web": "^5.1.9" 22 | }, 23 | "devDependencies": { 24 | "@stencil/core": "^0.7.6", 25 | "@stencil/dev-server": "latest", 26 | "@stencil/utils": "latest", 27 | "@types/jest": "^21.1.1", 28 | "jest": "^21.2.1" 29 | }, 30 | "repository": { 31 | "type": "git", 32 | "url": "git+https://github.com/splitinfinities/lottie-wc.git" 33 | }, 34 | "author": "Ionic Team", 35 | "license": "MIT", 36 | "bugs": { 37 | "url": "https://github.com/splitinfinities/lottie-wc" 38 | }, 39 | "homepage": "https://github.com/splitinfinities/lottie-wc", 40 | "jest": { 41 | "transform": { 42 | "^.+\\.(ts|tsx)$": "/node_modules/@stencil/core/testing/jest.preprocessor.js" 43 | }, 44 | "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(tsx?|jsx?)$", 45 | "moduleFileExtensions": [ 46 | "ts", 47 | "tsx", 48 | "js", 49 | "json", 50 | "jsx" 51 | ] 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | ![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square) 2 | 3 | # Lottie Animation Web Component 4 | 5 | This is a dead simple [lottie](https://github.com/airbnb/lottie-web) animation web component, compiled with Stencil. 6 | 7 | ```html 8 | 9 | 10 | ``` 11 | 12 | It's intentionally minimal design so that you can apply your own design language to this. 13 | 14 | ![Lottie Animation Example](lottie-animation.gif) 15 | 16 | ## Using this component 17 | 18 | ### Script tag 19 | 20 | - [Publish to NPM](https://docs.npmjs.com/getting-started/publishing-npm-packages) 21 | - Put a script tag similar to this `` in the head of your index.html 22 | - Then you can use the element anywhere in your template, JSX, html etc 23 | 24 | ### Node Modules 25 | - Run `npm install lottie-wc --save` 26 | - Put a script tag similar to this `` in the head of your index.html 27 | - Then you can use the element anywhere in your template, JSX, html etc 28 | 29 | ### In a stencil-starter app 30 | - Run `npm install lottie-wc --save` 31 | - Add `{ name: 'lottie-wc' }` to your [collections](https://github.com/ionic-team/stencil-starter/blob/master/stencil.config.js#L5) 32 | - Then you can use the element anywhere in your template, JSX, html etc 33 | 34 | 35 | ## Developing 36 | 37 | To start building a new web component using Stencil, clone this repo to a new directory: 38 | 39 | ```bash 40 | git clone https://github.com/splitinfinities/lottie-wc.git lottie-wc 41 | cd lottie-wc 42 | git remote rm origin 43 | ``` 44 | 45 | and run: 46 | 47 | ```bash 48 | npm install 49 | npm start 50 | ``` 51 | 52 | To watch for file changes during develop, run: 53 | 54 | ```bash 55 | npm run dev 56 | ``` 57 | 58 | To build the component for production, run: 59 | 60 | ```bash 61 | npm run build 62 | ``` 63 | 64 | To run the unit tests for the components, run: 65 | 66 | ```bash 67 | npm test 68 | ``` 69 | 70 | Need help? Check out our docs [here](https://stenciljs.com/docs/my-first-component). 71 | -------------------------------------------------------------------------------- /src/assets/lottie_logo.json: -------------------------------------------------------------------------------- 1 | {"assets":[],"layers":[{"ddd":0,"ind":0,"ty":1,"nm":"MASTER","ks":{"o":{"k":0},"r":{"k":0},"p":{"k":[214.457,347.822,0]},"a":{"k":[60,60,0]},"s":{"k":[100,100,100]}},"ao":0,"sw":120,"sh":120,"sc":"#ffffff","ip":12,"op":179,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":1,"ty":4,"nm":"S5-Y 4","parent":0,"ks":{"o":{"k":100},"r":{"k":-89.1},"p":{"k":[53.205,131.606,0]},"a":{"k":[0,0,0]},"s":{"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[142.038,29.278],[131.282,21.807]],"c":false}},"nm":"Path 1"},{"ty":"tm","s":{"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":76,"s":[87],"e":[50.633]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":79,"s":[50.633],"e":[0]},{"t":83}],"ix":1},"e":{"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":76,"s":[100],"e":[75.856]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":79,"s":[75.856],"e":[0]},{"t":83}],"ix":2},"o":{"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1"},{"ty":"st","fillEnabled":true,"c":{"k":[1,1,1,1]},"o":{"k":100},"w":{"k":2},"lc":2,"lj":1,"ml":4,"nm":"Stroke 1"},{"ty":"tr","p":{"k":[0,0],"ix":2},"a":{"k":[0,0],"ix":1},"s":{"k":[100,100],"ix":3},"r":{"k":0,"ix":6},"o":{"k":100,"ix":7},"sk":{"k":0,"ix":4},"sa":{"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1"}],"ip":76,"op":84,"st":40,"bm":0,"sr":1},{"ddd":0,"ind":2,"ty":4,"nm":"S4-Y 4","parent":0,"ks":{"o":{"k":100},"r":{"k":-89.1},"p":{"k":[53.205,131.606,0]},"a":{"k":[0,0,0]},"s":{"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[142.183,-5.112],[130.029,5.016]],"c":false}},"nm":"Path 1"},{"ty":"tm","s":{"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":76,"s":[87],"e":[43.833]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":79,"s":[43.833],"e":[0]},{"t":83}],"ix":1},"e":{"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":76,"s":[100],"e":[66.356]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":79,"s":[66.356],"e":[0]},{"t":83}],"ix":2},"o":{"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1"},{"ty":"st","fillEnabled":true,"c":{"k":[1,1,1,1]},"o":{"k":100},"w":{"k":2},"lc":2,"lj":1,"ml":4,"nm":"Stroke 1"},{"ty":"tr","p":{"k":[0,0],"ix":2},"a":{"k":[0,0],"ix":1},"s":{"k":[100,100],"ix":3},"r":{"k":0,"ix":6},"o":{"k":100,"ix":7},"sk":{"k":0,"ix":4},"sa":{"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1"}],"ip":76,"op":84,"st":40,"bm":0,"sr":1},{"ddd":0,"ind":3,"ty":4,"nm":"S3-Y 4","parent":0,"ks":{"o":{"k":100},"r":{"k":-89.1},"p":{"k":[53.205,131.606,0]},"a":{"k":[0,0,0]},"s":{"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[147.699,13.025],[133.195,13.21]],"c":false}},"nm":"Path 1"},{"ty":"tm","s":{"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":76,"s":[87],"e":[42.133]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":79,"s":[42.133],"e":[0]},{"t":83}],"ix":1},"e":{"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":76,"s":[100],"e":[66.356]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":79,"s":[66.356],"e":[0]},{"t":83}],"ix":2},"o":{"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1"},{"ty":"st","fillEnabled":true,"c":{"k":[1,1,1,1]},"o":{"k":100},"w":{"k":2},"lc":2,"lj":1,"ml":4,"nm":"Stroke 1"},{"ty":"tr","p":{"k":[0,0],"ix":2},"a":{"k":[0,0],"ix":1},"s":{"k":[100,100],"ix":3},"r":{"k":0,"ix":6},"o":{"k":100,"ix":7},"sk":{"k":0,"ix":4},"sa":{"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1"}],"ip":76,"op":84,"st":40,"bm":0,"sr":1},{"ddd":0,"ind":4,"ty":4,"nm":"S5-Y 3","parent":0,"ks":{"o":{"k":100},"r":{"k":97.9},"p":{"k":[58.205,-39.394,0]},"a":{"k":[0,0,0]},"s":{"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[145.677,22.22],[134.922,14.749]],"c":false}},"nm":"Path 1"},{"ty":"tm","s":{"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":75,"s":[87],"e":[50.633]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":78,"s":[50.633],"e":[0]},{"t":82}],"ix":1},"e":{"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":75,"s":[100],"e":[75.856]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":78,"s":[75.856],"e":[0]},{"t":82}],"ix":2},"o":{"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1"},{"ty":"st","fillEnabled":true,"c":{"k":[1,1,1,1]},"o":{"k":100},"w":{"k":2},"lc":2,"lj":1,"ml":4,"nm":"Stroke 1"},{"ty":"tr","p":{"k":[0,0],"ix":2},"a":{"k":[0,0],"ix":1},"s":{"k":[100,100],"ix":3},"r":{"k":0,"ix":6},"o":{"k":100,"ix":7},"sk":{"k":0,"ix":4},"sa":{"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1"}],"ip":75,"op":83,"st":39,"bm":0,"sr":1},{"ddd":0,"ind":5,"ty":4,"nm":"S4-Y 3","parent":0,"ks":{"o":{"k":100},"r":{"k":97.9},"p":{"k":[58.205,-39.394,0]},"a":{"k":[0,0,0]},"s":{"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[144.429,-5.397],[132.275,4.731]],"c":false}},"nm":"Path 1"},{"ty":"tm","s":{"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":75,"s":[87],"e":[43.833]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":78,"s":[43.833],"e":[0]},{"t":82}],"ix":1},"e":{"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":75,"s":[100],"e":[66.356]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":78,"s":[66.356],"e":[0]},{"t":82}],"ix":2},"o":{"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1"},{"ty":"st","fillEnabled":true,"c":{"k":[1,1,1,1]},"o":{"k":100},"w":{"k":2},"lc":2,"lj":1,"ml":4,"nm":"Stroke 1"},{"ty":"tr","p":{"k":[0,0],"ix":2},"a":{"k":[0,0],"ix":1},"s":{"k":[100,100],"ix":3},"r":{"k":0,"ix":6},"o":{"k":100,"ix":7},"sk":{"k":0,"ix":4},"sa":{"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1"}],"ip":75,"op":83,"st":39,"bm":0,"sr":1},{"ddd":0,"ind":6,"ty":4,"nm":"S3-Y 3","parent":0,"ks":{"o":{"k":100},"r":{"k":97.9},"p":{"k":[58.205,-39.394,0]},"a":{"k":[0,0,0]},"s":{"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[149.624,8.244],[136.648,10.156]],"c":false}},"nm":"Path 1"},{"ty":"tm","s":{"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":75,"s":[87],"e":[42.133]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":78,"s":[42.133],"e":[0]},{"t":82}],"ix":1},"e":{"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":75,"s":[100],"e":[66.356]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":78,"s":[66.356],"e":[0]},{"t":82}],"ix":2},"o":{"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1"},{"ty":"st","fillEnabled":true,"c":{"k":[1,1,1,1]},"o":{"k":100},"w":{"k":2},"lc":2,"lj":1,"ml":4,"nm":"Stroke 1"},{"ty":"tr","p":{"k":[0,0],"ix":2},"a":{"k":[0,0],"ix":1},"s":{"k":[100,100],"ix":3},"r":{"k":0,"ix":6},"o":{"k":100,"ix":7},"sk":{"k":0,"ix":4},"sa":{"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1"}],"ip":75,"op":83,"st":39,"bm":0,"sr":1},{"ddd":0,"ind":7,"ty":4,"nm":"S13","parent":0,"ks":{"o":{"k":100},"r":{"k":0},"p":{"k":[25.043,45.678,0]},"a":{"k":[0,0,0]},"s":{"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[128,3.65],[78.25,3.5]],"c":false}},"nm":"Path 1"},{"ty":"tm","s":{"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":85,"s":[87],"e":[21.233]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":90,"s":[21.233],"e":[0]},{"t":94}],"ix":1},"e":{"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":85,"s":[100],"e":[66.356]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":90,"s":[66.356],"e":[0]},{"t":94}],"ix":2},"o":{"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1"},{"ty":"st","fillEnabled":true,"c":{"k":[1,1,1,1]},"o":{"k":100},"w":{"k":1.5},"lc":2,"lj":1,"ml":4,"nm":"Stroke 1"},{"ty":"tr","p":{"k":[0,0],"ix":2},"a":{"k":[0,0],"ix":1},"s":{"k":[100,100],"ix":3},"r":{"k":0,"ix":6},"o":{"k":100,"ix":7},"sk":{"k":0,"ix":4},"sa":{"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1"}],"ip":85,"op":95,"st":49,"bm":0,"sr":1},{"ddd":0,"ind":8,"ty":4,"nm":"S12","parent":0,"ks":{"o":{"k":100},"r":{"k":0},"p":{"k":[25.043,45.678,0]},"a":{"k":[0,0,0]},"s":{"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[119.25,-20.05],[63.5,-20.5]],"c":false}},"nm":"Path 1"},{"ty":"tm","s":{"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":84,"s":[87],"e":[21.233]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":87,"s":[21.233],"e":[0]},{"t":91}],"ix":1},"e":{"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":84,"s":[100],"e":[66.356]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":87,"s":[66.356],"e":[0]},{"t":91}],"ix":2},"o":{"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1"},{"ty":"st","fillEnabled":true,"c":{"k":[1,1,1,1]},"o":{"k":100},"w":{"k":1.5},"lc":2,"lj":1,"ml":4,"nm":"Stroke 1"},{"ty":"tr","p":{"k":[0,0],"ix":2},"a":{"k":[0,0],"ix":1},"s":{"k":[100,100],"ix":3},"r":{"k":0,"ix":6},"o":{"k":100,"ix":7},"sk":{"k":0,"ix":4},"sa":{"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1"}],"ip":84,"op":94,"st":48,"bm":0,"sr":1},{"ddd":0,"ind":9,"ty":4,"nm":"S11","parent":0,"ks":{"o":{"k":100},"r":{"k":0},"p":{"k":[25.043,45.678,0]},"a":{"k":[0,0,0]},"s":{"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[119.5,-45.05],[82.75,-44.75]],"c":false}},"nm":"Path 1"},{"ty":"tm","s":{"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":80,"s":[87],"e":[21.233]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":83,"s":[21.233],"e":[0]},{"t":87}],"ix":1},"e":{"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":80,"s":[100],"e":[66.356]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":83,"s":[66.356],"e":[0]},{"t":87}],"ix":2},"o":{"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1"},{"ty":"st","fillEnabled":true,"c":{"k":[1,1,1,1]},"o":{"k":100},"w":{"k":1.5},"lc":2,"lj":1,"ml":4,"nm":"Stroke 1"},{"ty":"tr","p":{"k":[0,0],"ix":2},"a":{"k":[0,0],"ix":1},"s":{"k":[100,100],"ix":3},"r":{"k":0,"ix":6},"o":{"k":100,"ix":7},"sk":{"k":0,"ix":4},"sa":{"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1"}],"ip":80,"op":90,"st":44,"bm":0,"sr":1},{"ddd":0,"ind":10,"ty":4,"nm":"S5-Y 2","parent":0,"ks":{"o":{"k":100},"r":{"k":0},"p":{"k":[25.043,45.678,0]},"a":{"k":[0,0,0]},"s":{"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[169.5,18.073],[137.481,11.365]],"c":false}},"nm":"Path 1"},{"ty":"tm","s":{"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":97,"s":[87],"e":[50.633]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":100,"s":[50.633],"e":[0]},{"t":107}],"ix":1},"e":{"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":97,"s":[100],"e":[75.856]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":100,"s":[75.856],"e":[0]},{"t":107}],"ix":2},"o":{"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1"},{"ty":"st","fillEnabled":true,"c":{"k":[1,1,1,1]},"o":{"k":100},"w":{"k":2},"lc":2,"lj":1,"ml":4,"nm":"Stroke 1"},{"ty":"tr","p":{"k":[0,0],"ix":2},"a":{"k":[0,0],"ix":1},"s":{"k":[100,100],"ix":3},"r":{"k":0,"ix":6},"o":{"k":100,"ix":7},"sk":{"k":0,"ix":4},"sa":{"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1"}],"ip":97,"op":107,"st":61,"bm":0,"sr":1},{"ddd":0,"ind":11,"ty":4,"nm":"S4-Y 2","parent":0,"ks":{"o":{"k":100},"r":{"k":0},"p":{"k":[25.043,45.678,0]},"a":{"k":[0,0,0]},"s":{"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[156.45,-23.05],[132,2.75]],"c":false}},"nm":"Path 1"},{"ty":"tm","s":{"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":97,"s":[87],"e":[43.833]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":100,"s":[43.833],"e":[0]},{"t":107}],"ix":1},"e":{"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":97,"s":[100],"e":[66.356]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":100,"s":[66.356],"e":[0]},{"t":107}],"ix":2},"o":{"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1"},{"ty":"st","fillEnabled":true,"c":{"k":[1,1,1,1]},"o":{"k":100},"w":{"k":2},"lc":2,"lj":1,"ml":4,"nm":"Stroke 1"},{"ty":"tr","p":{"k":[0,0],"ix":2},"a":{"k":[0,0],"ix":1},"s":{"k":[100,100],"ix":3},"r":{"k":0,"ix":6},"o":{"k":100,"ix":7},"sk":{"k":0,"ix":4},"sa":{"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1"}],"ip":97,"op":107,"st":61,"bm":0,"sr":1},{"ddd":0,"ind":12,"ty":4,"nm":"S3-Y 2","parent":0,"ks":{"o":{"k":100},"r":{"k":0},"p":{"k":[25.043,45.678,0]},"a":{"k":[0,0,0]},"s":{"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[166.731,-7.927],[136.731,7.115]],"c":false}},"nm":"Path 1"},{"ty":"tm","s":{"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":97,"s":[87],"e":[42.133]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":100,"s":[42.133],"e":[0]},{"t":107}],"ix":1},"e":{"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":97,"s":[100],"e":[66.356]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":100,"s":[66.356],"e":[0]},{"t":107}],"ix":2},"o":{"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1"},{"ty":"st","fillEnabled":true,"c":{"k":[1,1,1,1]},"o":{"k":100},"w":{"k":2},"lc":2,"lj":1,"ml":4,"nm":"Stroke 1"},{"ty":"tr","p":{"k":[0,0],"ix":2},"a":{"k":[0,0],"ix":1},"s":{"k":[100,100],"ix":3},"r":{"k":0,"ix":6},"o":{"k":100,"ix":7},"sk":{"k":0,"ix":4},"sa":{"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1"}],"ip":97,"op":107,"st":61,"bm":0,"sr":1},{"ddd":0,"ind":13,"ty":4,"nm":"S6-Y","parent":0,"ks":{"o":{"k":100},"r":{"k":0},"p":{"k":[25.043,45.678,0]},"a":{"k":[0,0,0]},"s":{"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-87.5,20.95],[-48.75,54.75]],"c":false}},"nm":"Path 1"},{"ty":"tm","s":{"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":54,"s":[87],"e":[43.933]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":57,"s":[43.933],"e":[0]},{"t":64}],"ix":1},"e":{"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":54,"s":[100],"e":[70.456]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":57,"s":[70.456],"e":[0]},{"t":64}],"ix":2},"o":{"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1"},{"ty":"st","fillEnabled":true,"c":{"k":[1,1,1,1]},"o":{"k":100},"w":{"k":2},"lc":2,"lj":1,"ml":4,"nm":"Stroke 1"},{"ty":"tr","p":{"k":[0,0],"ix":2},"a":{"k":[0,0],"ix":1},"s":{"k":[100,100],"ix":3},"r":{"k":0,"ix":6},"o":{"k":100,"ix":7},"sk":{"k":0,"ix":4},"sa":{"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1"}],"ip":54,"op":64,"st":18,"bm":0,"sr":1},{"ddd":0,"ind":14,"ty":4,"nm":"S5-Y","parent":0,"ks":{"o":{"k":100},"r":{"k":0},"p":{"k":[25.043,45.678,0]},"a":{"k":[0,0,0]},"s":{"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-94.5,37.073],[-48.769,55.365]],"c":false}},"nm":"Path 1"},{"ty":"tm","s":{"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":54,"s":[87],"e":[50.633]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":57,"s":[50.633],"e":[0]},{"t":64}],"ix":1},"e":{"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":54,"s":[100],"e":[75.856]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":57,"s":[75.856],"e":[0]},{"t":64}],"ix":2},"o":{"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1"},{"ty":"st","fillEnabled":true,"c":{"k":[1,1,1,1]},"o":{"k":100},"w":{"k":2},"lc":2,"lj":1,"ml":4,"nm":"Stroke 1"},{"ty":"tr","p":{"k":[0,0],"ix":2},"a":{"k":[0,0],"ix":1},"s":{"k":[100,100],"ix":3},"r":{"k":0,"ix":6},"o":{"k":100,"ix":7},"sk":{"k":0,"ix":4},"sa":{"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1"}],"ip":54,"op":64,"st":18,"bm":0,"sr":1},{"ddd":0,"ind":15,"ty":4,"nm":"S4-Y","parent":0,"ks":{"o":{"k":100},"r":{"k":0},"p":{"k":[25.043,45.678,0]},"a":{"k":[0,0,0]},"s":{"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[7.45,21.95],[-32.75,55.75]],"c":false}},"nm":"Path 1"},{"ty":"tm","s":{"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":54,"s":[87],"e":[43.833]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":57,"s":[43.833],"e":[0]},{"t":64}],"ix":1},"e":{"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":54,"s":[100],"e":[66.356]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":57,"s":[66.356],"e":[0]},{"t":64}],"ix":2},"o":{"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1"},{"ty":"st","fillEnabled":true,"c":{"k":[1,1,1,1]},"o":{"k":100},"w":{"k":2},"lc":2,"lj":1,"ml":4,"nm":"Stroke 1"},{"ty":"tr","p":{"k":[0,0],"ix":2},"a":{"k":[0,0],"ix":1},"s":{"k":[100,100],"ix":3},"r":{"k":0,"ix":6},"o":{"k":100,"ix":7},"sk":{"k":0,"ix":4},"sa":{"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1"}],"ip":54,"op":64,"st":18,"bm":0,"sr":1},{"ddd":0,"ind":16,"ty":4,"nm":"S3-Y","parent":0,"ks":{"o":{"k":100},"r":{"k":0},"p":{"k":[25.043,45.678,0]},"a":{"k":[0,0,0]},"s":{"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[16.231,39.073],[-32.769,57.365]],"c":false}},"nm":"Path 1"},{"ty":"tm","s":{"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":54,"s":[87],"e":[42.133]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":57,"s":[42.133],"e":[0]},{"t":64}],"ix":1},"e":{"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":54,"s":[100],"e":[66.356]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":57,"s":[66.356],"e":[0]},{"t":64}],"ix":2},"o":{"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1"},{"ty":"st","fillEnabled":true,"c":{"k":[1,1,1,1]},"o":{"k":100},"w":{"k":2},"lc":2,"lj":1,"ml":4,"nm":"Stroke 1"},{"ty":"tr","p":{"k":[0,0],"ix":2},"a":{"k":[0,0],"ix":1},"s":{"k":[100,100],"ix":3},"r":{"k":0,"ix":6},"o":{"k":100,"ix":7},"sk":{"k":0,"ix":4},"sa":{"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1"}],"ip":54,"op":64,"st":18,"bm":0,"sr":1},{"ddd":0,"ind":17,"ty":4,"nm":"S8","parent":0,"ks":{"o":{"k":100},"r":{"k":0},"p":{"k":[25.043,45.678,0]},"a":{"k":[0,0,0]},"s":{"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"k":{"i":[[0,0],[-0.148,14.256],[10.476,0],[0,0]],"o":[[0,0],[-8.551,-8.263],[-21.454,0],[0,0]],"v":[[-3,35.95],[-1.352,-6.756],[-32.046,-20.579],[-42.25,4.25]],"c":false}},"nm":"Path 1"},{"ty":"tm","s":{"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":65,"s":[87],"e":[21.233]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":70,"s":[21.233],"e":[0]},{"t":75}],"ix":1},"e":{"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":65,"s":[100],"e":[66.356]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":70,"s":[66.356],"e":[0]},{"t":75}],"ix":2},"o":{"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1"},{"ty":"st","fillEnabled":true,"c":{"k":[1,1,1,1]},"o":{"k":100},"w":{"k":1.5},"lc":2,"lj":1,"ml":4,"nm":"Stroke 1"},{"ty":"tr","p":{"k":[0,0],"ix":2},"a":{"k":[0,0],"ix":1},"s":{"k":[100,100],"ix":3},"r":{"k":0,"ix":6},"o":{"k":100,"ix":7},"sk":{"k":0,"ix":4},"sa":{"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1"}],"ip":65,"op":75,"st":29,"bm":0,"sr":1},{"ddd":0,"ind":18,"ty":4,"nm":"S7","parent":0,"ks":{"o":{"k":100},"r":{"k":0},"p":{"k":[25.043,45.678,0]},"a":{"k":[0,0,0]},"s":{"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"k":{"i":[[27,1.45],[31.046,-1.421],[0,0]],"o":[[-27,-1.45],[-26.426,1.21],[0,0]],"v":[[34.5,-13.05],[-35.046,-35.579],[-62.25,-5.75]],"c":false}},"nm":"Path 1"},{"ty":"tm","s":{"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":65,"s":[87],"e":[21.233]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":70,"s":[21.233],"e":[0]},{"t":75}],"ix":1},"e":{"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":65,"s":[100],"e":[66.356]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":70,"s":[66.356],"e":[0]},{"t":75}],"ix":2},"o":{"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1"},{"ty":"st","fillEnabled":true,"c":{"k":[1,1,1,1]},"o":{"k":100},"w":{"k":1.5},"lc":2,"lj":1,"ml":4,"nm":"Stroke 1"},{"ty":"tr","p":{"k":[0,0],"ix":2},"a":{"k":[0,0],"ix":1},"s":{"k":[100,100],"ix":3},"r":{"k":0,"ix":6},"o":{"k":100,"ix":7},"sk":{"k":0,"ix":4},"sa":{"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1"}],"ip":65,"op":75,"st":29,"bm":0,"sr":1},{"ddd":0,"ind":19,"ty":4,"nm":"S2-Y","parent":0,"ks":{"o":{"k":100},"r":{"k":0},"p":{"k":[25.043,45.678,0]},"a":{"k":[0,0,0]},"s":{"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"k":{"i":[[0,0],[1.9,-10.768],[1,-19]],"o":[[0,0],[-3.167,17.951],[-1,19]],"v":[[-67.25,-105.5],[-72.333,-84.201],[-76.5,-37.75]],"c":false}},"nm":"Path 1"},{"ty":"tm","s":{"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":29,"s":[87],"e":[25.333]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":33,"s":[25.333],"e":[0]},{"t":36}],"ix":1},"e":{"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":29,"s":[100],"e":[69.056]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":33,"s":[69.056],"e":[0]},{"t":36}],"ix":2},"o":{"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1"},{"ty":"st","fillEnabled":true,"c":{"k":[1,1,1,1]},"o":{"k":100},"w":{"k":1.5},"lc":2,"lj":1,"ml":4,"nm":"Stroke 1"},{"ty":"tr","p":{"k":[0,0],"ix":2},"a":{"k":[0,0],"ix":1},"s":{"k":[100,100],"ix":3},"r":{"k":0,"ix":6},"o":{"k":100,"ix":7},"sk":{"k":0,"ix":4},"sa":{"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1"}],"ip":30,"op":37,"st":-7,"bm":0,"sr":1},{"ddd":0,"ind":20,"ty":4,"nm":"S1-Y","parent":0,"ks":{"o":{"k":100},"r":{"k":0},"p":{"k":[25.043,45.678,0]},"a":{"k":[0,0,0]},"s":{"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"k":{"i":[[0,0],[1.9,-10.768],[1,-19]],"o":[[0,0],[-3.167,17.951],[-1,19]],"v":[[-67.125,-112],[-75.458,-89.951],[-80.375,-39.25]],"c":false}},"nm":"Path 1"},{"ty":"tm","s":{"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":29,"s":[87],"e":[37.533]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":33,"s":[37.533],"e":[0]},{"t":36}],"ix":1},"e":{"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":29,"s":[100],"e":[66.356]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":33,"s":[66.356],"e":[0]},{"t":36}],"ix":2},"o":{"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1"},{"ty":"st","fillEnabled":true,"c":{"k":[1,1,1,1]},"o":{"k":100},"w":{"k":1.5},"lc":2,"lj":1,"ml":4,"nm":"Stroke 1"},{"ty":"tr","p":{"k":[0,0],"ix":2},"a":{"k":[0,0],"ix":1},"s":{"k":[100,100],"ix":3},"r":{"k":0,"ix":6},"o":{"k":100,"ix":7},"sk":{"k":0,"ix":4},"sa":{"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1"}],"ip":30,"op":37,"st":-7,"bm":0,"sr":1},{"ddd":0,"ind":21,"ty":4,"nm":"Dot1","parent":0,"ks":{"o":{"k":100},"r":{"k":0},"p":{"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.823,"y":0},"n":"0p833_0p833_0p823_0","t":-3,"s":[295.771,108.994,0],"e":[35.771,108.994,0],"to":[0,0,0],"ti":[0,0,0]},{"t":16}]},"a":{"k":[196.791,266.504,0]},"s":{"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"k":[9.4,9.4]},"p":{"k":[0.8,-0.5]},"nm":"Ellipse Path 1"},{"ty":"fl","fillEnabled":true,"c":{"k":[1,1,1,1]},"o":{"k":100},"nm":"Fill 1"},{"ty":"tr","p":{"k":[196,267],"ix":2},"a":{"k":[0,0],"ix":1},"s":{"k":[100,100],"ix":3},"r":{"k":0,"ix":6},"o":{"k":100,"ix":7},"sk":{"k":0,"ix":4},"sa":{"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1"}],"ip":-5,"op":17,"st":-36,"bm":0,"sr":1},{"ddd":0,"ind":22,"ty":4,"nm":"L-B","parent":0,"ks":{"o":{"k":100},"r":{"k":0},"p":{"k":[39.043,45.678,0]},"a":{"k":[250,250,0]},"s":{"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"k":{"i":[[0,0],[25.671,-4.167],[1.456,6.902],[-8.481,1.863],[-47.562,13.01],[-0.501,0.133],[-71.423,-2.315]],"o":[[0,0],[-8.224,1.335],[-1.456,-6.903],[23.817,-5.233],[0.16,-0.044],[0.501,-0.133],[0,0]],"v":[[-8.837,-58.229],[-35.834,33.662],[-51.688,23.148],[-41.174,7.293],[51.797,44.178],[53.188,43.741],[140.394,43.672]],"c":false}},"nm":"Path 1"},{"ty":"st","fillEnabled":true,"c":{"k":[0,0.48,0.53,1]},"o":{"k":100},"w":{"k":9.194},"lc":2,"lj":1,"ml":10,"nm":"Stroke 1"},{"ty":"tr","p":{"k":[166.029,270.643],"ix":2},"a":{"k":[0,0],"ix":1},"s":{"k":[100,100],"ix":3},"r":{"k":0,"ix":6},"o":{"k":100,"ix":7},"sk":{"k":0,"ix":4},"sa":{"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 8"},{"ty":"tm","s":{"k":[{"i":{"x":[0.703],"y":[0.821]},"o":{"x":[0.167],"y":[0.167]},"n":["0p703_0p821_0p167_0p167"],"t":18,"s":[80],"e":[50]},{"i":{"x":[0.263],"y":[1]},"o":{"x":[0.037],"y":[0.168]},"n":["0p263_1_0p037_0p168"],"t":23,"s":[50],"e":[30]},{"t":55}],"ix":1},"e":{"k":[{"i":{"x":[0.337],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0p337_1_0p167_0p167"],"t":18,"s":[81],"e":[73.4]},{"t":29}],"ix":2},"o":{"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1"}],"ip":18,"op":179,"st":8,"bm":0,"sr":1},{"ddd":0,"ind":23,"ty":4,"nm":"L-Y","parent":0,"ks":{"o":{"k":100},"r":{"k":0},"p":{"k":[39.043,45.678,0]},"a":{"k":[250,250,0]},"s":{"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"k":{"i":[[0,0],[25.671,-4.167],[1.456,6.902],[-8.481,1.863],[-47.562,13.01],[-0.501,0.133],[-71.423,-2.315]],"o":[[0,0],[-8.224,1.335],[-1.456,-6.903],[23.817,-5.233],[0.16,-0.044],[0.501,-0.133],[0,0]],"v":[[-8.837,-58.229],[-35.834,33.662],[-51.688,23.148],[-41.174,7.293],[51.797,44.178],[53.188,43.741],[140.394,43.672]],"c":false}},"nm":"Path 1"},{"ty":"st","fillEnabled":true,"c":{"k":[1,1,1,1]},"o":{"k":100},"w":{"k":8.4},"lc":2,"lj":1,"ml":10,"nm":"Stroke 1"},{"ty":"tr","p":{"k":[166.029,270.643],"ix":2},"a":{"k":[0,0],"ix":1},"s":{"k":[100,100],"ix":3},"r":{"k":0,"ix":6},"o":{"k":100,"ix":7},"sk":{"k":0,"ix":4},"sa":{"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 8"},{"ty":"tm","s":{"k":[{"i":{"x":[0.703],"y":[0.857]},"o":{"x":[0.167],"y":[0.167]},"n":["0p703_0p857_0p167_0p167"],"t":16,"s":[80],"e":[50]},{"i":{"x":[0.938],"y":[1]},"o":{"x":[0.333],"y":[0.202]},"n":["0p938_1_0p333_0p202"],"t":20,"s":[50],"e":[0]},{"t":28}],"ix":1},"e":{"k":[{"i":{"x":[0.337],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0p337_1_0p167_0p167"],"t":16,"s":[81],"e":[73.4]},{"t":27}],"ix":2},"o":{"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1"}],"ip":16,"op":179,"st":8,"bm":0,"sr":1},{"ddd":0,"ind":24,"ty":1,"nm":"N","parent":0,"ks":{"o":{"k":0},"r":{"k":0},"p":{"k":[{"i":{"x":0.26,"y":1},"o":{"x":0.167,"y":0.167},"n":"0p26_1_0p167_0p167","t":28,"s":[-33.667,8.182,0],"e":[-33.667,-72.818,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.74,"y":0},"n":"0p833_0p833_0p74_0","t":40,"s":[-33.667,-72.818,0],"e":[-33.667,102.057,0],"to":[0,0,0],"ti":[0,0,0]},{"t":54}]},"a":{"k":[60,60,0]},"s":{"k":[100,100,100]}},"ao":0,"sw":120,"sh":120,"sc":"#ffffff","ip":28,"op":54,"st":0,"bm":0,"sr":1},{"ddd":0,"ind":25,"ty":4,"nm":"Dot-Y","parent":24,"ks":{"o":{"k":100},"r":{"k":0},"p":{"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":28,"s":[39.875,60,0],"e":[79.375,60,0],"to":[6.58333349227905,0,0],"ti":[-6.58333349227905,0,0]},{"t":54}]},"a":{"k":[196.791,266.504,0]},"s":{"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"k":[9.4,9.4]},"p":{"k":[0.8,-0.5]},"nm":"Ellipse Path 1"},{"ty":"fl","fillEnabled":true,"c":{"k":[1,1,1,1]},"o":{"k":100},"nm":"Fill 1"},{"ty":"tr","p":{"k":[196,267],"ix":2},"a":{"k":[0,0],"ix":1},"s":{"k":[100,100],"ix":3},"r":{"k":0,"ix":6},"o":{"k":100,"ix":7},"sk":{"k":0,"ix":4},"sa":{"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1"}],"ip":28,"op":54,"st":4,"bm":0,"sr":1},{"ddd":0,"ind":26,"ty":4,"nm":"T1a-B","parent":36,"ks":{"o":{"k":100},"r":{"k":0},"p":{"k":[250,250,0]},"a":{"k":[250,250,0]},"s":{"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"k":{"i":[[-0.5,9.501],[-0.048,5.655],[0.054,0.06],[0.946,1.486],[-9.967,8.05],[-40.546,0]],"o":[[0.031,-0.594],[0.076,-8.978],[-1.161,-1.3],[-5.939,-9.327],[24.677,-19.929],[0,0]],"v":[[-30.72,63.761],[-30.741,45.192],[-37.397,27.014],[-40.698,22.661],[-37.873,-7.117],[49.506,11.559]],"c":false}},"nm":"Path 1"},{"ty":"tm","s":{"k":24.9,"ix":1},"e":{"k":[{"i":{"x":[0.673],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0p673_1_0p167_0p167"],"t":70,"s":[24.9],"e":[89.1]},{"t":84}],"ix":2},"o":{"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1"},{"ty":"st","fillEnabled":true,"c":{"k":[1,1,1,1]},"o":{"k":100},"w":{"k":9.194},"lc":2,"lj":1,"ml":10,"nm":"Stroke 1"},{"ty":"tr","p":{"k":[227.677,234.375],"ix":2},"a":{"k":[0,0],"ix":1},"s":{"k":[100,100],"ix":3},"r":{"k":0,"ix":6},"o":{"k":100,"ix":7},"sk":{"k":0,"ix":4},"sa":{"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 9"}],"ip":70,"op":179,"st":17,"bm":0,"sr":1},{"ddd":0,"ind":27,"ty":4,"nm":"T2a-B","parent":0,"ks":{"o":{"k":100},"r":{"k":0},"p":{"k":[39.043,45.678,0]},"a":{"k":[250,250,0]},"s":{"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[1.681,-29.992],[-1.681,29.992]],"c":false}},"nm":"Path 1"},{"ty":"tm","s":{"k":[{"i":{"x":[0.06],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0p06_1_0p167_0p167"],"t":75,"s":[50],"e":[0]},{"t":85}],"ix":1},"e":{"k":[{"i":{"x":[0.06],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0p06_1_0p167_0p167"],"t":75,"s":[50],"e":[100]},{"t":85}],"ix":2},"o":{"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1"},{"ty":"st","fillEnabled":true,"c":{"k":[0,0.48,0.53,1]},"o":{"k":100},"w":{"k":9.194},"lc":3,"lj":1,"ml":10,"nm":"Stroke 1"},{"ty":"tr","p":{"k":[277.698,247.258],"ix":2},"a":{"k":[0,0],"ix":1},"s":{"k":[100,100],"ix":3},"r":{"k":0,"ix":6},"o":{"k":100,"ix":7},"sk":{"k":0,"ix":4},"sa":{"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 7"}],"ip":75,"op":179,"st":15,"bm":0,"sr":1},{"ddd":0,"ind":28,"ty":4,"nm":"T1a-Y 2","parent":0,"ks":{"o":{"k":100},"r":{"k":0},"p":{"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"n":"0p667_1_0p167_0p167","t":56,"s":[39.043,48.678,0],"e":[39.043,45.678,0],"to":[0,0,0],"ti":[0,0,0]},{"t":64}]},"a":{"k":[250,250,0]},"s":{"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"k":{"i":[[-0.5,9.501],[-0.048,5.655],[0.054,0.06],[0.946,1.486],[-9.967,8.05],[-40.546,0]],"o":[[0.031,-0.594],[0.076,-8.978],[-1.161,-1.3],[-5.939,-9.327],[24.677,-19.929],[0,0]],"v":[[-30.72,63.761],[-30.741,45.192],[-37.397,27.014],[-40.698,22.661],[-37.873,-7.117],[49.506,11.559]],"c":false}},"nm":"Path 1"},{"ty":"tm","s":{"k":[{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.301],"y":[0]},"n":["0p833_1_0p301_0"],"t":54,"s":[0],"e":[24.9]},{"t":70}],"ix":1},"e":{"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.301],"y":[0]},"n":["0p667_1_0p301_0"],"t":54,"s":[0],"e":[100]},{"t":78}],"ix":2},"o":{"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1"},{"ty":"st","fillEnabled":true,"c":{"k":[0,0.48,0.53,1]},"o":{"k":100},"w":{"k":8.4},"lc":2,"lj":1,"ml":10,"nm":"Stroke 1"},{"ty":"tr","p":{"k":[227.677,234.375],"ix":2},"a":{"k":[0,0],"ix":1},"s":{"k":[100,100],"ix":3},"r":{"k":0,"ix":6},"o":{"k":100,"ix":7},"sk":{"k":0,"ix":4},"sa":{"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 9"}],"ip":59,"op":179,"st":12,"bm":0,"sr":1},{"ddd":0,"ind":29,"ty":4,"nm":"O-B","parent":0,"ks":{"o":{"k":100},"r":{"k":0},"p":{"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":31,"s":[-62.792,73.057,0],"e":[-53.792,7.557,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.638,"y":1},"o":{"x":0.167,"y":0.198},"n":"0p638_1_0p167_0p198","t":35.257,"s":[-53.792,7.557,0],"e":[-33.667,-72.818,0],"to":[0,0,0],"ti":[-19.1562919616699,1.73831975460052,0]},{"i":{"x":0.795,"y":1},"o":{"x":0.523,"y":0},"n":"0p795_1_0p523_0","t":44,"s":[-33.667,-72.818,0],"e":[-14.167,102.182,0],"to":[16.2075271606445,-1.47073686122894,0],"ti":[0,0,0]},{"i":{"x":0.348,"y":1},"o":{"x":0.18,"y":0},"n":"0p348_1_0p18_0","t":54,"s":[-14.167,102.182,0],"e":[-14.167,59.182,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.27,"y":1},"o":{"x":0.693,"y":0},"n":"0p27_1_0p693_0","t":63,"s":[-14.167,59.182,0],"e":[-14.167,62.182,0],"to":[0,0,0],"ti":[0,0,0]},{"t":73}]},"a":{"k":[196.791,266.504,0]},"s":{"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"k":[{"i":{"x":[0.667,0.667],"y":[1,1]},"o":{"x":[0.333,0.333],"y":[0,0]},"n":["0p667_1_0p333_0","0p667_1_0p333_0"],"t":54,"s":[3,3],"e":[44.6,44.6]},{"t":61}]},"p":{"k":[0.8,-0.5]},"nm":"Ellipse Path 1"},{"ty":"st","fillEnabled":true,"c":{"k":[0,0.48,0.53,1]},"o":{"k":100},"w":{"k":9.194},"lc":2,"lj":1,"ml":4,"nm":"Stroke 1"},{"ty":"tr","p":{"k":[196,267],"ix":2},"a":{"k":[0,0],"ix":1},"s":{"k":[100,100],"ix":3},"r":{"k":0,"ix":6},"o":{"k":100,"ix":7},"sk":{"k":0,"ix":4},"sa":{"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1"},{"ty":"tm","s":{"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":54,"s":[0],"e":[30]},{"i":{"x":[0.432],"y":[1]},"o":{"x":[0.167],"y":[1.124]},"n":["0p432_1_0p167_1p124"],"t":63,"s":[30],"e":[39.9]},{"t":91}],"ix":1},"e":{"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":54,"s":[100],"e":[88]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":63,"s":[88],"e":[88]},{"t":91}],"ix":2},"o":{"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1"}],"ip":54,"op":179,"st":4,"bm":0,"sr":1},{"ddd":0,"ind":30,"ty":4,"nm":"O-Y","parent":0,"ks":{"o":{"k":100},"r":{"k":0},"p":{"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":31,"s":[-62.792,73.057,0],"e":[-53.792,7.557,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.638,"y":1},"o":{"x":0.167,"y":0.198},"n":"0p638_1_0p167_0p198","t":35.257,"s":[-53.792,7.557,0],"e":[-33.667,-72.818,0],"to":[0,0,0],"ti":[-19.1562919616699,1.73831975460052,0]},{"i":{"x":0.795,"y":1},"o":{"x":0.523,"y":0},"n":"0p795_1_0p523_0","t":44,"s":[-33.667,-72.818,0],"e":[-14.167,102.182,0],"to":[16.2075271606445,-1.47073686122894,0],"ti":[0,0,0]},{"i":{"x":0.348,"y":1},"o":{"x":0.18,"y":0},"n":"0p348_1_0p18_0","t":54,"s":[-14.167,102.182,0],"e":[-14.167,59.182,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.27,"y":1},"o":{"x":0.693,"y":0},"n":"0p27_1_0p693_0","t":63,"s":[-14.167,59.182,0],"e":[-14.167,62.182,0],"to":[0,0,0],"ti":[0,0,0]},{"t":73}]},"a":{"k":[196.791,266.504,0]},"s":{"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"k":[{"i":{"x":[0.667,0.667],"y":[1,1]},"o":{"x":[0.333,0.333],"y":[0,0]},"n":["0p667_1_0p333_0","0p667_1_0p333_0"],"t":54,"s":[3,3],"e":[44.6,44.6]},{"t":61}]},"p":{"k":[0.8,-0.5]},"nm":"Ellipse Path 1"},{"ty":"st","fillEnabled":true,"c":{"k":[1,1,1,1]},"o":{"k":100},"w":{"k":8.8},"lc":1,"lj":1,"ml":4,"nm":"Stroke 1"},{"ty":"tr","p":{"k":[196,267],"ix":2},"a":{"k":[0,0],"ix":1},"s":{"k":[100,100],"ix":3},"r":{"k":0,"ix":6},"o":{"k":100,"ix":7},"sk":{"k":0,"ix":4},"sa":{"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1"}],"ip":54,"op":179,"st":4,"bm":0,"sr":1},{"ddd":0,"ind":31,"ty":4,"nm":"T1b-B","parent":0,"ks":{"o":{"k":100},"r":{"k":0},"p":{"k":[39.043,45.678,0]},"a":{"k":[250,250,0]},"s":{"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[1.768,-25.966],[-1.768,25.966]],"c":false}},"nm":"Path 1"},{"ty":"tm","s":{"k":0,"ix":1},"e":{"k":[{"i":{"x":[0.21],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0p21_1_0p167_0p167"],"t":81,"s":[11.7],"e":[100]},{"t":88}],"ix":2},"o":{"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1"},{"ty":"st","fillEnabled":true,"c":{"k":[1,1,1,1]},"o":{"k":100},"w":{"k":9.194},"lc":2,"lj":2,"nm":"Stroke 1"},{"ty":"tr","p":{"k":[242.756,265.581],"ix":2},"a":{"k":[0,0],"ix":1},"s":{"k":[100,100],"ix":3},"r":{"k":0,"ix":6},"o":{"k":100,"ix":7},"sk":{"k":0,"ix":4},"sa":{"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 10"}],"ip":81,"op":179,"st":26,"bm":0,"sr":1},{"ddd":0,"ind":32,"ty":4,"nm":"T1b-Y","parent":0,"ks":{"o":{"k":100},"r":{"k":0},"p":{"k":[39.043,45.678,0]},"a":{"k":[250,250,0]},"s":{"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[1.768,-25.966],[-1.768,25.966]],"c":false}},"nm":"Path 1"},{"ty":"tm","s":{"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":70,"s":[0],"e":[0]},{"t":75}],"ix":1},"e":{"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":70,"s":[11.7],"e":[100]},{"t":75}],"ix":2},"o":{"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1"},{"ty":"st","fillEnabled":true,"c":{"k":[0,0.48,0.53,1]},"o":{"k":100},"w":{"k":8.4},"lc":2,"lj":2,"nm":"Stroke 1"},{"ty":"tr","p":{"k":[242.756,265.581],"ix":2},"a":{"k":[0,0],"ix":1},"s":{"k":[100,100],"ix":3},"r":{"k":0,"ix":6},"o":{"k":100,"ix":7},"sk":{"k":0,"ix":4},"sa":{"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 10"}],"ip":70,"op":161,"st":15,"bm":0,"sr":1},{"ddd":0,"ind":33,"ty":4,"nm":"T2b-B","parent":0,"ks":{"o":{"k":100},"r":{"k":0},"p":{"k":[39.043,45.678,0]},"a":{"k":[250,250,0]},"s":{"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[246.65,213.814],[340.956,213.628]],"c":false}},"nm":"Path 1"},{"ty":"tm","s":{"k":[{"i":{"x":[0.12],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0p12_1_0p167_0p167"],"t":82,"s":[29],"e":[0]},{"t":91}],"ix":1},"e":{"k":[{"i":{"x":[0.12],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0p12_1_0p167_0p167"],"t":82,"s":[41.1],"e":[66.5]},{"t":91}],"ix":2},"o":{"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1"},{"ty":"st","fillEnabled":true,"c":{"k":[0,0.48,0.53,1]},"o":{"k":100},"w":{"k":9.194},"lc":2,"lj":1,"ml":10,"nm":"Stroke 1"},{"ty":"tr","p":{"k":[0,0],"ix":2},"a":{"k":[0,0],"ix":1},"s":{"k":[100,100],"ix":3},"r":{"k":0,"ix":6},"o":{"k":100,"ix":7},"sk":{"k":0,"ix":4},"sa":{"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 5"}],"ip":82,"op":179,"st":-17,"bm":0,"sr":1},{"ddd":0,"ind":34,"ty":4,"nm":"T2a-Y","parent":0,"ks":{"o":{"k":100},"r":{"k":0},"p":{"k":[39.043,45.678,0]},"a":{"k":[250,250,0]},"s":{"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[1.681,-29.992],[-1.681,29.992]],"c":false}},"nm":"Path 1"},{"ty":"tm","s":{"k":[{"i":{"x":[0.06],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0p06_1_0p167_0p167"],"t":72,"s":[50],"e":[0]},{"t":82}],"ix":1},"e":{"k":[{"i":{"x":[0.06],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0p06_1_0p167_0p167"],"t":72,"s":[50],"e":[100]},{"t":82}],"ix":2},"o":{"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1"},{"ty":"st","fillEnabled":true,"c":{"k":[1,1,1,1]},"o":{"k":100},"w":{"k":9.194},"lc":3,"lj":1,"ml":10,"nm":"Stroke 1"},{"ty":"tr","p":{"k":[277.698,247.258],"ix":2},"a":{"k":[0,0],"ix":1},"s":{"k":[100,100],"ix":3},"r":{"k":0,"ix":6},"o":{"k":100,"ix":7},"sk":{"k":0,"ix":4},"sa":{"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 7"}],"ip":72,"op":89,"st":12,"bm":0,"sr":1},{"ddd":0,"ind":35,"ty":4,"nm":"T2b-Y","parent":0,"ks":{"o":{"k":100},"r":{"k":0},"p":{"k":[39.043,45.678,0]},"a":{"k":[250,250,0]},"s":{"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[246.65,213.814],[340.956,213.628]],"c":false}},"nm":"Path 1"},{"ty":"tm","s":{"k":[{"i":{"x":[0.12],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0p12_1_0p167_0p167"],"t":76,"s":[29],"e":[0]},{"t":85}],"ix":1},"e":{"k":[{"i":{"x":[0.12],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0p12_1_0p167_0p167"],"t":76,"s":[41.1],"e":[66.5]},{"t":85}],"ix":2},"o":{"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1"},{"ty":"st","fillEnabled":true,"c":{"k":[1,1,1,1]},"o":{"k":100},"w":{"k":9.194},"lc":2,"lj":1,"ml":10,"nm":"Stroke 1"},{"ty":"tr","p":{"k":[0,0],"ix":2},"a":{"k":[0,0],"ix":1},"s":{"k":[100,100],"ix":3},"r":{"k":0,"ix":6},"o":{"k":100,"ix":7},"sk":{"k":0,"ix":4},"sa":{"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 5"}],"ip":76,"op":92,"st":-23,"bm":0,"sr":1},{"ddd":0,"ind":36,"ty":4,"nm":"T1a-Y","parent":0,"ks":{"o":{"k":100},"r":{"k":0},"p":{"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"n":"0p667_1_0p167_0p167","t":56,"s":[39.043,48.678,0],"e":[39.043,45.678,0],"to":[0,0,0],"ti":[0,0,0]},{"t":64}]},"a":{"k":[250,250,0]},"s":{"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"k":{"i":[[-0.5,9.501],[-0.048,5.655],[0.054,0.06],[0.946,1.486],[-9.967,8.05],[-40.546,0]],"o":[[0.031,-0.594],[0.076,-8.978],[-1.161,-1.3],[-5.939,-9.327],[24.677,-19.929],[0,0]],"v":[[-30.72,63.761],[-30.741,45.192],[-37.397,27.014],[-40.698,22.661],[-37.873,-7.117],[49.506,11.559]],"c":false}},"nm":"Path 1"},{"ty":"tm","s":{"k":[{"i":{"x":[0.833],"y":[1]},"o":{"x":[0.301],"y":[0]},"n":["0p833_1_0p301_0"],"t":54,"s":[0],"e":[24.9]},{"t":70}],"ix":1},"e":{"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.301],"y":[0]},"n":["0p667_1_0p301_0"],"t":54,"s":[0],"e":[100]},{"t":74}],"ix":2},"o":{"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1"},{"ty":"st","fillEnabled":true,"c":{"k":[1,1,1,1]},"o":{"k":100},"w":{"k":8.4},"lc":2,"lj":1,"ml":10,"nm":"Stroke 1"},{"ty":"tr","p":{"k":[227.677,234.375],"ix":2},"a":{"k":[0,0],"ix":1},"s":{"k":[100,100],"ix":3},"r":{"k":0,"ix":6},"o":{"k":100,"ix":7},"sk":{"k":0,"ix":4},"sa":{"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 9"}],"ip":59,"op":156,"st":12,"bm":0,"sr":1},{"ddd":0,"ind":37,"ty":4,"nm":"E1-B","parent":38,"ks":{"o":{"k":100},"r":{"k":0},"p":{"k":[344.672,214.842,0]},"a":{"k":[344.672,214.842,0]},"s":{"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-13.664,-0.145],[62.163,0.29]],"c":false}},"nm":"Path 1"},{"ty":"st","fillEnabled":true,"c":{"k":[1,1,1,1]},"o":{"k":100},"w":{"k":9.562},"lc":2,"lj":1,"ml":10,"nm":"Stroke 1"},{"ty":"tr","p":{"k":[344.672,214.842],"ix":2},"a":{"k":[0,0],"ix":1},"s":{"k":[100,100],"ix":3},"r":{"k":0,"ix":6},"o":{"k":100,"ix":7},"sk":{"k":0,"ix":4},"sa":{"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 2"},{"ty":"tm","s":{"k":[{"i":{"x":[0.12],"y":[0.12]},"o":{"x":[0.167],"y":[0.167]},"n":["0p12_0p12_0p167_0p167"],"t":84,"s":[0],"e":[0]},{"t":93}],"ix":1},"e":{"k":[{"i":{"x":[0.12],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0p12_1_0p167_0p167"],"t":84,"s":[0],"e":[37.5]},{"t":93}],"ix":2},"o":{"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1"}],"ip":84,"op":179,"st":84,"bm":0,"sr":1},{"ddd":0,"ind":38,"ty":4,"nm":"E1-Y","parent":0,"ks":{"o":{"k":100},"r":{"k":0},"p":{"k":[{"i":{"x":0.12,"y":1},"o":{"x":0.167,"y":0.167},"n":"0p12_1_0p167_0p167","t":79,"s":[113.715,9.146,0],"e":[137.715,9.146,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.12,"y":1},"o":{"x":0.167,"y":0},"n":"0p12_1_0p167_0","t":88,"s":[137.715,9.146,0],"e":[133.715,9.146,0],"to":[0,0,0],"ti":[0,0,0]},{"t":92}]},"a":{"k":[344.672,214.842,0]},"s":{"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-13.664,-0.145],[62.163,0.29]],"c":false}},"nm":"Path 1"},{"ty":"st","fillEnabled":true,"c":{"k":[0,0.48,0.53,1]},"o":{"k":100},"w":{"k":8.4},"lc":2,"lj":1,"ml":10,"nm":"Stroke 1"},{"ty":"tr","p":{"k":[344.672,214.842],"ix":2},"a":{"k":[0,0],"ix":1},"s":{"k":[100,100],"ix":3},"r":{"k":0,"ix":6},"o":{"k":100,"ix":7},"sk":{"k":0,"ix":4},"sa":{"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 2"},{"ty":"tm","s":{"k":[{"i":{"x":[0.12],"y":[0.12]},"o":{"x":[0.167],"y":[0.167]},"n":["0p12_0p12_0p167_0p167"],"t":79,"s":[0],"e":[0]},{"t":88}],"ix":1},"e":{"k":[{"i":{"x":[0.12],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0p12_1_0p167_0p167"],"t":79,"s":[0],"e":[37.5]},{"t":88}],"ix":2},"o":{"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1"}],"ip":79,"op":94,"st":79,"bm":0,"sr":1},{"ddd":0,"ind":39,"ty":4,"nm":"E2-B","parent":40,"ks":{"o":{"k":100},"r":{"k":0},"p":{"k":[332.05,237.932,0]},"a":{"k":[332.05,237.932,0]},"s":{"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-26.67,-0.283],[99.171,0.066]],"c":false}},"nm":"Path 1"},{"ty":"tm","s":{"k":[{"i":{"x":[0.12],"y":[0.12]},"o":{"x":[0.167],"y":[0.167]},"n":["0p12_0p12_0p167_0p167"],"t":86,"s":[0],"e":[0]},{"t":95}],"ix":1},"e":{"k":[{"i":{"x":[0.12],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0p12_1_0p167_0p167"],"t":86,"s":[0],"e":[43]},{"t":95}],"ix":2},"o":{"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1"},{"ty":"st","fillEnabled":true,"c":{"k":[1,1,1,1]},"o":{"k":100},"w":{"k":9.562},"lc":2,"lj":1,"ml":10,"nm":"Stroke 1"},{"ty":"tr","p":{"k":[331.664,238.14],"ix":2},"a":{"k":[0,0],"ix":1},"s":{"k":[100,100],"ix":3},"r":{"k":0,"ix":6},"o":{"k":100,"ix":7},"sk":{"k":0,"ix":4},"sa":{"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 3"}],"ip":86,"op":179,"st":86,"bm":0,"sr":1},{"ddd":0,"ind":40,"ty":4,"nm":"E2-Y","parent":0,"ks":{"o":{"k":100},"r":{"k":0},"p":{"k":[{"i":{"x":0.12,"y":1},"o":{"x":0.167,"y":0.167},"n":"0p12_1_0p167_0p167","t":83,"s":[109.092,33.61,0],"e":[121.092,33.61,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.12,"y":0.12},"o":{"x":0.167,"y":0.167},"n":"0p12_0p12_0p167_0p167","t":92,"s":[121.092,33.61,0],"e":[121.092,33.61,0],"to":[0,0,0],"ti":[0,0,0]},{"t":96}]},"a":{"k":[332.05,237.932,0]},"s":{"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-26.67,-0.283],[99.171,0.066]],"c":false}},"nm":"Path 1"},{"ty":"tm","s":{"k":[{"i":{"x":[0.12],"y":[0.12]},"o":{"x":[0.167],"y":[0.167]},"n":["0p12_0p12_0p167_0p167"],"t":83,"s":[0],"e":[0]},{"t":92}],"ix":1},"e":{"k":[{"i":{"x":[0.12],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0p12_1_0p167_0p167"],"t":83,"s":[0],"e":[43]},{"t":92}],"ix":2},"o":{"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1"},{"ty":"st","fillEnabled":true,"c":{"k":[0,0.48,0.53,1]},"o":{"k":100},"w":{"k":8.4},"lc":2,"lj":1,"ml":10,"nm":"Stroke 1"},{"ty":"tr","p":{"k":[331.664,238.14],"ix":2},"a":{"k":[0,0],"ix":1},"s":{"k":[100,100],"ix":3},"r":{"k":0,"ix":6},"o":{"k":100,"ix":7},"sk":{"k":0,"ix":4},"sa":{"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 3"}],"ip":83,"op":96,"st":83,"bm":0,"sr":1},{"ddd":0,"ind":41,"ty":4,"nm":"I-B","parent":42,"ks":{"o":{"k":100},"r":{"k":0},"p":{"k":[303.802,282.182,0]},"a":{"k":[303.802,282.182,0]},"s":{"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[0.859,-21.143],[-4.359,70.392]],"c":false}},"nm":"Path 1"},{"ty":"tm","s":{"k":[{"i":{"x":[0.12],"y":[0.12]},"o":{"x":[0.167],"y":[0.167]},"n":["0p12_0p12_0p167_0p167"],"t":81,"s":[0],"e":[0]},{"t":91}],"ix":1},"e":{"k":[{"i":{"x":[0.12],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0p12_1_0p167_0p167"],"t":81,"s":[0],"e":[45.7]},{"t":91}],"ix":2},"o":{"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1"},{"ty":"st","fillEnabled":true,"c":{"k":[1,1,1,1]},"o":{"k":100},"w":{"k":9.194},"lc":3,"lj":1,"ml":10,"nm":"Stroke 1"},{"ty":"tr","p":{"k":[304.135,282.409],"ix":2},"a":{"k":[0,0],"ix":1},"s":{"k":[100,100],"ix":3},"r":{"k":0,"ix":6},"o":{"k":100,"ix":7},"sk":{"k":0,"ix":4},"sa":{"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 6"}],"ip":81,"op":179,"st":18,"bm":0,"sr":1},{"ddd":0,"ind":42,"ty":4,"nm":"I-Y","parent":0,"ks":{"o":{"k":100},"r":{"k":0},"p":{"k":[{"i":{"x":0.12,"y":1},"o":{"x":0.167,"y":0.167},"n":"0p12_1_0p167_0p167","t":78,"s":[93.594,62.861,0],"e":[92.626,82.829,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.12,"y":1},"o":{"x":0.167,"y":0},"n":"0p12_1_0p167_0","t":88,"s":[92.626,82.829,0],"e":[92.844,77.861,0],"to":[0,0,0],"ti":[0,0,0]},{"t":92}]},"a":{"k":[303.802,282.182,0]},"s":{"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[0.859,-21.143],[-4.359,70.392]],"c":false}},"nm":"Path 1"},{"ty":"tm","s":{"k":[{"i":{"x":[0.12],"y":[0.12]},"o":{"x":[0.167],"y":[0.167]},"n":["0p12_0p12_0p167_0p167"],"t":78,"s":[0],"e":[0]},{"t":88}],"ix":1},"e":{"k":[{"i":{"x":[0.12],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"n":["0p12_1_0p167_0p167"],"t":78,"s":[0],"e":[45.7]},{"t":88}],"ix":2},"o":{"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1"},{"ty":"st","fillEnabled":true,"c":{"k":[0,0.48,0.53,1]},"o":{"k":100},"w":{"k":8.4},"lc":3,"lj":1,"ml":10,"nm":"Stroke 1"},{"ty":"tr","p":{"k":[304.135,282.409],"ix":2},"a":{"k":[0,0],"ix":1},"s":{"k":[100,100],"ix":3},"r":{"k":0,"ix":6},"o":{"k":100,"ix":7},"sk":{"k":0,"ix":4},"sa":{"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 6"}],"ip":78,"op":93,"st":15,"bm":0,"sr":1},{"ddd":0,"ind":43,"ty":4,"nm":"E3-B","parent":44,"ks":{"o":{"k":100},"r":{"k":0},"p":{"k":[345.189,261.801,0]},"a":{"k":[345.124,261.801,0]},"s":{"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-13.664,-0.145],[75.663,0.29]],"c":false}},"nm":"Path 1"},{"ty":"tm","s":{"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":92,"s":[0],"e":[0]},{"t":97}],"ix":1},"e":{"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":92,"s":[0],"e":[31.6]},{"t":97}],"ix":2},"o":{"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 2"},{"ty":"st","fillEnabled":true,"c":{"k":[1,1,1,1]},"o":{"k":100},"w":{"k":9.562},"lc":2,"lj":1,"ml":10,"nm":"Stroke 1"},{"ty":"tr","p":{"k":[344.674,261.877],"ix":2},"a":{"k":[0,0],"ix":1},"s":{"k":[100,100],"ix":3},"r":{"k":0,"ix":6},"o":{"k":100,"ix":7},"sk":{"k":0,"ix":4},"sa":{"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1"}],"ip":92,"op":179,"st":29,"bm":0,"sr":1},{"ddd":0,"ind":44,"ty":4,"nm":"E3-Y","parent":0,"ks":{"o":{"k":100},"r":{"k":0},"p":{"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.167},"n":"0p667_1_0p167_0p167","t":84,"s":[119.167,57.479,0],"e":[137.167,57.479,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0},"n":"0p667_1_0p167_0","t":92,"s":[137.167,57.479,0],"e":[134.167,57.479,0],"to":[0,0,0],"ti":[0,0,0]},{"t":96}]},"a":{"k":[345.124,261.801,0]},"s":{"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ks":{"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-13.664,-0.145],[75.663,0.29]],"c":false}},"nm":"Path 1"},{"ty":"tm","s":{"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":84,"s":[0],"e":[0]},{"t":92}],"ix":1},"e":{"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":84,"s":[0],"e":[31.6]},{"t":92}],"ix":2},"o":{"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 2"},{"ty":"st","fillEnabled":true,"c":{"k":[0,0.48,0.53,1]},"o":{"k":100},"w":{"k":9.562},"lc":2,"lj":1,"ml":10,"nm":"Stroke 1"},{"ty":"tr","p":{"k":[344.674,261.877],"ix":2},"a":{"k":[0,0],"ix":1},"s":{"k":[100,100],"ix":3},"r":{"k":0,"ix":6},"o":{"k":100,"ix":7},"sk":{"k":0,"ix":4},"sa":{"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1"}],"ip":84,"op":102,"st":21,"bm":0,"sr":1},{"ddd":0,"ind":45,"ty":4,"nm":"Dot-Y","parent":46,"ks":{"o":{"k":100},"r":{"k":0},"p":{"k":[{"i":{"x":0,"y":0.812},"o":{"x":0,"y":0},"n":"0_0p812_0_0","t":96,"s":[43.263,59.75,0],"e":[62.513,59.75,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.708,"y":1},"o":{"x":0.39,"y":0.707},"n":"0p708_1_0p39_0p707","t":108,"s":[62.513,59.75,0],"e":[63.763,59.75,0],"to":[0,0,0],"ti":[0,0,0]},{"t":115}]},"a":{"k":[196.791,266.504,0]},"s":{"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"d":1,"ty":"el","s":{"k":[9.2,9.2]},"p":{"k":[0.8,-0.5]},"nm":"Ellipse Path 1"},{"ty":"fl","fillEnabled":true,"c":{"k":[1,1,1,1]},"o":{"k":100},"nm":"Fill 1"},{"ty":"tr","p":{"k":[196,267],"ix":2},"a":{"k":[0,0],"ix":1},"s":{"k":[100,100],"ix":3},"r":{"k":0,"ix":6},"o":{"k":100,"ix":7},"sk":{"k":0,"ix":4},"sa":{"k":0,"ix":5},"nm":"Transform"}],"nm":"Ellipse 1"}],"ip":96,"op":182,"st":65,"bm":0,"sr":1},{"ddd":0,"ind":46,"ty":1,"nm":"Bncr","parent":0,"ks":{"o":{"k":0},"r":{"k":0},"p":{"k":[{"i":{"x":0.18,"y":1},"o":{"x":0.167,"y":0.167},"n":"0p18_1_0p167_0p167","t":96,"s":[164.782,57.473,0],"e":[164.782,55.473,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.82,"y":0},"n":"0p833_0p833_0p82_0","t":99,"s":[164.782,55.473,0],"e":[164.782,57.473,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.18,"y":1},"o":{"x":0.167,"y":0.167},"n":"0p18_1_0p167_0p167","t":102,"s":[164.782,57.473,0],"e":[164.782,56.909,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.82,"y":0},"n":"0p833_0p833_0p82_0","t":105,"s":[164.782,56.909,0],"e":[164.782,57.473,0],"to":[0,0,0],"ti":[0,0,0]},{"t":108}]},"a":{"k":[60,60,0]},"s":{"k":[100,100,100]}},"ao":0,"sw":120,"sh":120,"sc":"#ffffff","ip":96,"op":182,"st":15,"bm":0,"sr":1},{"ddd":0,"ind":47,"ty":4,"nm":"BG","ks":{"o":{"k":100},"r":{"k":0},"p":{"k":[187.5,333.5,0]},"a":{"k":[0,0,0]},"s":{"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ty":"rc","d":1,"s":{"k":[375,667]},"p":{"k":[0,0]},"r":{"k":0},"nm":"Rectangle Path 1"},{"ty":"fl","fillEnabled":true,"c":{"k":[0,0.82,0.76,1]},"o":{"k":100},"nm":"Fill 1"},{"ty":"tr","p":{"k":[0,0],"ix":2},"a":{"k":[0,0],"ix":1},"s":{"k":[100,100],"ix":3},"r":{"k":0,"ix":6},"o":{"k":100,"ix":7},"sk":{"k":0,"ix":4},"sa":{"k":0,"ix":5},"nm":"Transform"}],"nm":"Rectangle 1"}],"ip":0,"op":179,"st":0,"bm":0,"sr":1}],"v":"4.4.26","ddd":0,"ip":0,"op":179,"fr":30,"w":375,"h":667} -------------------------------------------------------------------------------- /src/components.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * This is an autogenerated file created by the Stencil build process. 3 | * It contains typing information for all components that exist in this project 4 | * and imports for stencil collections that might be configured in your stencil.config.js file 5 | */ 6 | declare global { 7 | namespace JSX { 8 | interface Element {} 9 | export interface IntrinsicElements {} 10 | } 11 | namespace JSXElements {} 12 | 13 | interface HTMLStencilElement extends HTMLElement { 14 | componentOnReady(): Promise; 15 | componentOnReady(done: (ele?: this) => void): void; 16 | 17 | forceUpdate(): void; 18 | } 19 | 20 | interface HTMLAttributes {} 21 | } 22 | 23 | 24 | import { 25 | LottieAnimation as LottieAnimation 26 | } from './components/lottie-animation/lottie-animation'; 27 | 28 | declare global { 29 | interface HTMLLottieAnimationElement extends LottieAnimation, HTMLStencilElement { 30 | } 31 | var HTMLLottieAnimationElement: { 32 | prototype: HTMLLottieAnimationElement; 33 | new (): HTMLLottieAnimationElement; 34 | }; 35 | interface HTMLElementTagNameMap { 36 | 'lottie-animation': HTMLLottieAnimationElement; 37 | } 38 | interface ElementTagNameMap { 39 | 'lottie-animation': HTMLLottieAnimationElement; 40 | } 41 | namespace JSX { 42 | interface IntrinsicElements { 43 | 'lottie-animation': JSXElements.LottieAnimationAttributes; 44 | } 45 | } 46 | namespace JSXElements { 47 | export interface LottieAnimationAttributes extends HTMLAttributes { 48 | /** 49 | * input the lottie data directly to the component 50 | */ 51 | 'animationData'?: string; 52 | 'autoplay'?: boolean; 53 | 'controls'?: boolean; 54 | 'count'?: number; 55 | 'direction'?: number; 56 | 'loop'?: boolean; 57 | 'renderer'?: string; 58 | 'speed'?: number; 59 | /** 60 | * Get the animation via src attribute 61 | */ 62 | 'src'?: string; 63 | 64 | } 65 | } 66 | } 67 | 68 | declare global { namespace JSX { interface StencilJSX {} } } 69 | -------------------------------------------------------------------------------- /src/components/lottie-animation/lottie-animation.css: -------------------------------------------------------------------------------- 1 | lottie-animation { 2 | display: block; 3 | } 4 | 5 | lottie-animation progress { 6 | display: block; 7 | width: 100%; 8 | height: 32px; 9 | -webkit-appearance: none; 10 | appearance: none; 11 | } 12 | -------------------------------------------------------------------------------- /src/components/lottie-animation/lottie-animation.spec.ts: -------------------------------------------------------------------------------- 1 | import { flush, render } from '@stencil/core/testing'; 2 | import { LottieAnimation } from './lottie-animation'; 3 | 4 | describe('lottie-animation', () => { 5 | it('should build', () => { 6 | expect(new LottieAnimation()).toBeTruthy(); 7 | }); 8 | 9 | describe('rendering', () => { 10 | let element; 11 | beforeEach(async () => { 12 | element = await render({ 13 | components: [LottieAnimation], 14 | html: '' 15 | }); 16 | }); 17 | 18 | it('should work without parameters', () => { 19 | expect(element.textContent.trim()).toEqual('Hello, World! I\'m'); 20 | }); 21 | 22 | it('should work with a first name', async () => { 23 | element.first = 'Peter'; 24 | await flush(element); 25 | expect(element.textContent.trim()).toEqual('Hello, World! I\'m Peter'); 26 | }); 27 | 28 | it('should work with a last name', async () => { 29 | element.last = 'Parker'; 30 | await flush(element); 31 | expect(element.textContent.trim()).toEqual('Hello, World! I\'m Parker'); 32 | }); 33 | 34 | it('should work with both a first and a last name', async () => { 35 | element.first = 'Peter' 36 | element.last = 'Parker'; 37 | await flush(element); 38 | expect(element.textContent.trim()).toEqual('Hello, World! I\'m Peter Parker'); 39 | }); 40 | }); 41 | }); 42 | -------------------------------------------------------------------------------- /src/components/lottie-animation/lottie-animation.tsx: -------------------------------------------------------------------------------- 1 | import { Component, Prop, State, Method, Element } from '@stencil/core'; 2 | import lottie from 'lottie-web'; 3 | 4 | @Component({ 5 | tag: 'lottie-animation', 6 | styleUrl: 'lottie-animation.css' 7 | }) 8 | export class LottieAnimation { 9 | @Element() element: HTMLElement; 10 | @Element() progress: HTMLElement; 11 | 12 | /** 13 | * input the lottie data directly to the component 14 | */ 15 | @Prop() animationData: string; 16 | /** 17 | * Get the animation via src attribute 18 | */ 19 | @Prop() src: string; 20 | @Prop() loop: boolean; 21 | @Prop() count: number; 22 | @Prop() autoplay: boolean; 23 | @Prop() controls: boolean; 24 | @Prop() renderer: string = "svg"; 25 | @Prop() speed: number = 1; 26 | @Prop() direction: number = 1; 27 | 28 | @State() __paused: boolean = false; 29 | 30 | @State() settings: Object = {}; 31 | 32 | @State() io: IntersectionObserver; 33 | @State() status: string; 34 | @State() lottie: any; 35 | @State() duration: any; 36 | @State() currentTime: any; 37 | @State() mouseDown: any; 38 | 39 | componentDidLoad() { 40 | this.update({ container: this.element.querySelector('.animation') }) 41 | this.load(); 42 | this.setSpeed(this.speed); 43 | this.setDirection(this.direction); 44 | 45 | if (this.autoplay) { 46 | this.addIntersectionObserver(); 47 | } 48 | } 49 | 50 | load () { 51 | this.lottie = lottie.loadAnimation(this.settings); 52 | 53 | if (this.controls) { 54 | this.lottie.addEventListener("data_ready", () => { this.handleDataReady() }); 55 | this.lottie.addEventListener("enterFrame", () => { this.handleNewFrame() }); 56 | } 57 | } 58 | 59 | handleDataReady () { 60 | this.duration = this.lottie.totalFrames / this.lottie.frameRate; 61 | } 62 | 63 | handleNewFrame () { 64 | this.currentTime = this.lottie.currentFrame / this.lottie.frameRate; 65 | } 66 | 67 | addIntersectionObserver() { 68 | if ('IntersectionObserver' in window) { 69 | this.io = new IntersectionObserver((data: any) => { 70 | // because there will only ever be one instance 71 | // of the element we are observing 72 | // we can just use data[0] 73 | if (data[0].isIntersecting) { 74 | this.play(); 75 | } else { 76 | this.pause(); 77 | } 78 | }) 79 | 80 | this.io.observe(this.element.querySelector('.animation')); 81 | } else { 82 | // fall back to setTimeout for Safari and IE 83 | setTimeout(() => { 84 | this.handleVisible(); 85 | }, 300); 86 | } 87 | } 88 | 89 | handleVisible() { 90 | this.pause(); 91 | } 92 | 93 | removeIntersectionObserver() { 94 | if (this.io) { 95 | this.io.disconnect(); 96 | this.io = null; 97 | } 98 | } 99 | 100 | @Method() 101 | play() { 102 | this.status = "play"; 103 | this.lottie.play() 104 | } 105 | 106 | @Method() 107 | pause() { 108 | this.__paused = true; 109 | this.status = "pause"; 110 | this.lottie.pause() 111 | } 112 | 113 | @Method() 114 | stop() { 115 | this.status = "stop"; 116 | this.lottie.stop() 117 | } 118 | 119 | @Method() 120 | setSpeed(value: number = 1) { 121 | this.lottie.setSpeed(value); 122 | } 123 | 124 | @Method() 125 | setDirection(value: number = 1) { 126 | this.lottie.setDirection(value); 127 | } 128 | 129 | @Method() 130 | rendererSettings(settings) { 131 | this.settings = settings; 132 | this.lottie = this.settings 133 | } 134 | 135 | @Method() 136 | instance() { 137 | return this.lottie; 138 | } 139 | 140 | /** 141 | Renders the settings object and checks if the data is added via src or animationData element 142 | */ 143 | @Method() 144 | update(settings) { 145 | const settingsObj: any = { 146 | renderer: this.renderer, 147 | loop: this.count ? this.count : this.loop, 148 | autoplay: this.autoplay, 149 | rendererSettings: { 150 | scaleMode: 'noScale', 151 | clearCanvas: false, 152 | progressiveLoad: true, 153 | hideOnTransparent: true 154 | }, 155 | ...settings 156 | }; 157 | if(this.animationData) { 158 | settingsObj.animationData = this.animationData; 159 | } else { 160 | settingsObj.path = this.src; 161 | } 162 | this.settings = settingsObj; 163 | } 164 | 165 | handleProgressClick(e) { 166 | var x = e.offsetX; 167 | let clickedValue = (x / this.progress.offsetWidth) * 1000; 168 | clickedValue = this.duration * clickedValue; 169 | 170 | if (this.lottie.isPaused && this.__paused) { 171 | this.lottie.goToAndStop(clickedValue, false) 172 | } else { 173 | this.lottie.goToAndPlay(clickedValue, false) 174 | } 175 | } 176 | 177 | round (number) { 178 | var factor = Math.pow(10, 4); 179 | return Math.round(number * factor) / factor; 180 | } 181 | 182 | renderControls() { 183 | return ( 184 |
185 | 186 | 187 |
188 | { this.mouseDown = true; this.pause(); this.__paused = true; }} onMouseMove={(e) => { if (this.mouseDown) { this.handleProgressClick(e); } }} onMouseUp={() => { this.mouseDown = false; this.play(); }} onBlur={() => {this.mouseDown = false;}}> 189 |
190 |

{this.round(this.duration)}

191 | 192 |

{this.round(this.currentTime)}

193 | 194 |
195 | 196 |
197 |
198 | ); 199 | } 200 | 201 | render() { 202 | return ( 203 |
204 |
205 | {this.lottie && this.controls && this.renderControls()} 206 |
207 | ); 208 | } 209 | } 210 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Stencil Component Starter 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | export * from './components'; 2 | -------------------------------------------------------------------------------- /stencil.config.js: -------------------------------------------------------------------------------- 1 | exports.config = { 2 | namespace: 'lottie', 3 | outputTargets:[{type: 'dist'}, {type: 'www', serviceWorker: false}] 4 | }; 5 | 6 | exports.devServer = { 7 | root: 'www', 8 | watchGlob: '**/**' 9 | } 10 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowSyntheticDefaultImports": true, 4 | "allowUnreachableCode": false, 5 | "declaration": false, 6 | "experimentalDecorators": true, 7 | "lib": [ 8 | "dom", 9 | "es2015" 10 | ], 11 | "moduleResolution": "node", 12 | "module": "es2015", 13 | "target": "es2015", 14 | "noUnusedLocals": true, 15 | "noUnusedParameters": true, 16 | "jsx": "react", 17 | "jsxFactory": "h" 18 | }, 19 | "include": [ 20 | "src", 21 | "types/jsx.d.ts" 22 | ], 23 | "exclude": [ 24 | "node_modules" 25 | ] 26 | } 27 | --------------------------------------------------------------------------------