├── .gitattributes ├── src ├── Blazor.Lottie.Player │ ├── _Imports.razor │ ├── wwwroot │ │ ├── Nuget.png │ │ ├── loadLottieWeb.js │ │ ├── lottiePlayerModule.js │ │ └── loading.json │ ├── Component │ │ ├── LottiePlayer.razor │ │ ├── LottiePlaybackOptions.cs │ │ ├── LottiePlayerModule.cs │ │ └── LottiePlayer.razor.cs │ ├── Enums │ │ ├── LottieAnimationDirection.cs │ │ ├── LottieAnimationType.cs │ │ └── LottieAnimationQuality.cs │ ├── EventArgs │ │ ├── LottiePlayerLoadedEventArgs.cs │ │ └── LottiePlayerEventFrameArgs.cs │ ├── Extensions │ │ ├── Identifier.cs │ │ └── EnumExtensions.cs │ ├── Blazor.Lottie.Player.csproj │ ├── Configuration │ │ └── LottieAnimationOptions.cs │ └── Player-API-Documentation.txt ├── Blazor.Lottie.Player.Docs.WASM │ ├── wwwroot │ │ ├── MudX_Transparent_Logo.ico │ │ ├── MudX_Transparent_Logo.png │ │ ├── index.html │ │ ├── css │ │ │ └── app.css │ │ └── lottie │ │ │ ├── BunBun.json │ │ │ └── newAnimation.json │ ├── Layout │ │ └── MainLayout.razor │ ├── App.razor │ ├── _Imports.razor │ ├── Program.cs │ ├── Blazor.Lottie.Player.Docs.WASM.csproj │ ├── Properties │ │ └── launchSettings.json │ └── Pages │ │ └── Home.razor ├── Readme.txt └── Blazor.Lottie.Player.sln ├── tests ├── README.md └── Blazor.Lottie.Player.UnitTests │ ├── BunitTest.cs │ ├── Blazor.Lottie.Player.UnitTests.csproj │ ├── LottieModuleTests.cs │ └── LottieTests.cs ├── docs └── README.md ├── LICENSE ├── README.md ├── .editorconfig └── .gitignore /.gitattributes: -------------------------------------------------------------------------------- 1 | # Force this repository to use Windows line endings 2 | * text=auto -------------------------------------------------------------------------------- /src/Blazor.Lottie.Player/_Imports.razor: -------------------------------------------------------------------------------- 1 | @using Microsoft.AspNetCore.Components.Web 2 | -------------------------------------------------------------------------------- /tests/README.md: -------------------------------------------------------------------------------- 1 | # Tests 2 | Unit, integration, acceptance, etc tests should go here. Preferred framework is xUnit. -------------------------------------------------------------------------------- /src/Blazor.Lottie.Player/wwwroot/Nuget.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MudXtra/LottiePlayer/HEAD/src/Blazor.Lottie.Player/wwwroot/Nuget.png -------------------------------------------------------------------------------- /docs/README.md: -------------------------------------------------------------------------------- 1 | # Documentation 2 | Any documentation relevant to the project should be included here. General info can go in this README, but adding extra files is acceptable. 3 | -------------------------------------------------------------------------------- /src/Blazor.Lottie.Player.Docs.WASM/wwwroot/MudX_Transparent_Logo.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MudXtra/LottiePlayer/HEAD/src/Blazor.Lottie.Player.Docs.WASM/wwwroot/MudX_Transparent_Logo.ico -------------------------------------------------------------------------------- /src/Blazor.Lottie.Player.Docs.WASM/wwwroot/MudX_Transparent_Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/MudXtra/LottiePlayer/HEAD/src/Blazor.Lottie.Player.Docs.WASM/wwwroot/MudX_Transparent_Logo.png -------------------------------------------------------------------------------- /src/Blazor.Lottie.Player.Docs.WASM/Layout/MainLayout.razor: -------------------------------------------------------------------------------- 1 | @inherits LayoutComponentBase 2 | 3 | @using MudBlazor 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | @Body 12 | -------------------------------------------------------------------------------- /src/Readme.txt: -------------------------------------------------------------------------------- 1 | First Update the Version in csproj file. 2 | Set Mode to Release. 3 | Manually run right click, pack, then upload the .nupkg file to NuGet.org. 4 | Push changes to Github repository. 5 | When Nuget package is updated, update the MudX. 6 | Set Mode back to Debug. 7 | -------------------------------------------------------------------------------- /src/Blazor.Lottie.Player/Component/LottiePlayer.razor: -------------------------------------------------------------------------------- 1 | @namespace Blazor.Lottie.Player 2 | @inherits ComponentBase 3 | 4 |
5 | @if (_failMessage != null) 6 | { 7 | @_failMessage 8 | } 9 |
10 | -------------------------------------------------------------------------------- /src/Blazor.Lottie.Player/Enums/LottieAnimationDirection.cs: -------------------------------------------------------------------------------- 1 | namespace Blazor.Lottie.Player; 2 | /// 3 | /// Specifies the playback direction for a Lottie animation. 4 | /// 5 | public enum LottieAnimationDirection 6 | { 7 | /// 8 | /// Represents the forward direction an animation will play. 9 | /// 10 | Forward = 1, 11 | /// 12 | /// Represents the reverse direction an animation will play. 13 | /// 14 | Reverse = -1, 15 | } 16 | -------------------------------------------------------------------------------- /src/Blazor.Lottie.Player.Docs.WASM/App.razor: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Not found 8 | 9 |

Sorry, there's nothing at this address.

10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/Blazor.Lottie.Player.Docs.WASM/_Imports.razor: -------------------------------------------------------------------------------- 1 | @using System.Net.Http 2 | @using System.Net.Http.Json 3 | @using Microsoft.AspNetCore.Components.Forms 4 | @using Microsoft.AspNetCore.Components.Routing 5 | @using Microsoft.AspNetCore.Components.Web 6 | @using Microsoft.AspNetCore.Components.Web.Virtualization 7 | @using Microsoft.AspNetCore.Components.WebAssembly.Http 8 | @using Microsoft.JSInterop 9 | @using Blazor.Lottie.Player.Docs.WASM 10 | @using Blazor.Lottie.Player.Docs.WASM.Layout 11 | 12 | @using Blazor.Lottie.Player 13 | @using MudBlazor 14 | @using MudX 15 | -------------------------------------------------------------------------------- /src/Blazor.Lottie.Player.Docs.WASM/Program.cs: -------------------------------------------------------------------------------- 1 | using Blazor.Lottie.Player.Docs.WASM; 2 | using Microsoft.AspNetCore.Components.Web; 3 | using Microsoft.AspNetCore.Components.WebAssembly.Hosting; 4 | using MudBlazor.Services; 5 | 6 | var builder = WebAssemblyHostBuilder.CreateDefault(args); 7 | builder.RootComponents.Add("#app"); 8 | builder.RootComponents.Add("head::after"); 9 | 10 | builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) }); 11 | 12 | builder.Services.AddMudServices(); 13 | 14 | await builder.Build().RunAsync(); 15 | -------------------------------------------------------------------------------- /tests/Blazor.Lottie.Player.UnitTests/BunitTest.cs: -------------------------------------------------------------------------------- 1 | using Bunit; 2 | 3 | namespace Blazor.Lottie.Player.UnitTests; 4 | public abstract class BunitTest 5 | { 6 | protected Bunit.TestContext Context { get; private set; } = null!; 7 | 8 | [SetUp] 9 | public virtual void Setup() 10 | { 11 | Context = new Bunit.TestContext(); 12 | //Context.Services.; // This is where you add services if needed 13 | Context.JSInterop.Mode = JSRuntimeMode.Loose; // Use Loose mode for JS Interop 14 | } 15 | 16 | [TearDown] 17 | public virtual void TearDown() 18 | { 19 | Context.Dispose(); 20 | Context = null!; 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/Blazor.Lottie.Player/EventArgs/LottiePlayerLoadedEventArgs.cs: -------------------------------------------------------------------------------- 1 | namespace Blazor.Lottie.Player; 2 | /// 3 | /// Event arguments for the Lottie player loaded event. 4 | /// 5 | public record LottiePlayerLoadedEventArgs 6 | { 7 | /// 8 | /// Gets the ID of the Lottie player element. 9 | /// 10 | public string ElementId { get; init; } = default!; 11 | 12 | /// 13 | /// Gets the current frame of the animation as a zero-based index. 14 | /// 15 | public double CurrentFrame { get; init; } 16 | 17 | /// 18 | /// Gets the total number of frames processed. 19 | /// 20 | public double TotalFrames { get; init; } 21 | 22 | } 23 | -------------------------------------------------------------------------------- /src/Blazor.Lottie.Player/Extensions/Identifier.cs: -------------------------------------------------------------------------------- 1 | namespace Blazor.Lottie.Player.Extensions; 2 | internal class Identifier 3 | { 4 | private const string _chars = "abcdefghijklmnopqrstuvwxyz0123456789"; 5 | private const int _charsLength = 35; 6 | private const int _randomStringLength = 8; 7 | 8 | public static string Create(ReadOnlySpan prefix) 9 | { 10 | Span identifierSpan = stackalloc char[prefix.Length + _randomStringLength]; 11 | prefix.CopyTo(identifierSpan); 12 | for (var i = 0; i < _randomStringLength; i++) 13 | { 14 | var index = Random.Shared.Next(_charsLength); 15 | identifierSpan[prefix.Length + i] = _chars[index]; 16 | } 17 | return identifierSpan.ToString(); 18 | } 19 | 20 | public static string Create() => Create("mudxtra-"); 21 | } 22 | -------------------------------------------------------------------------------- /src/Blazor.Lottie.Player.Docs.WASM/Blazor.Lottie.Player.Docs.WASM.csproj: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | net9.0 5 | enable 6 | enable 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /src/Blazor.Lottie.Player/EventArgs/LottiePlayerEventFrameArgs.cs: -------------------------------------------------------------------------------- 1 | namespace Blazor.Lottie.Player; 2 | /// 3 | /// Event arguments for the Lottie player loaded event. 4 | /// 5 | public record LottiePlayerEventFrameArgs 6 | { 7 | /// 8 | /// Gets the ID of the event. 9 | /// 10 | public string Type { get; init; } = "enterFrame"; 11 | 12 | /// 13 | /// Gets the current frame of the animation as a zero-based index. 14 | /// 15 | public double CurrentTime { get; init; } 16 | 17 | /// 18 | /// Gets the total number of frames to be processed. 19 | /// 20 | public double TotalTime { get; init; } 21 | 22 | /// 23 | /// The current direction of the Lottie animation playback. 24 | /// 25 | public LottieAnimationDirection Direction { get; init; } = LottieAnimationDirection.Forward; 26 | 27 | } 28 | -------------------------------------------------------------------------------- /src/Blazor.Lottie.Player.Docs.WASM/Properties/launchSettings.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://json.schemastore.org/launchsettings.json", 3 | "profiles": { 4 | "http": { 5 | "commandName": "Project", 6 | "dotnetRunMessages": true, 7 | "launchBrowser": true, 8 | "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}", 9 | "applicationUrl": "http://localhost:5266", 10 | "environmentVariables": { 11 | "ASPNETCORE_ENVIRONMENT": "Development" 12 | } 13 | }, 14 | "https": { 15 | "commandName": "Project", 16 | "dotnetRunMessages": true, 17 | "launchBrowser": true, 18 | "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}", 19 | "applicationUrl": "https://localhost:7190;http://localhost:5266", 20 | "environmentVariables": { 21 | "ASPNETCORE_ENVIRONMENT": "Development" 22 | } 23 | } 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 Bell County, TX 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 | -------------------------------------------------------------------------------- /src/Blazor.Lottie.Player/Enums/LottieAnimationType.cs: -------------------------------------------------------------------------------- 1 | using System.ComponentModel; 2 | 3 | namespace Blazor.Lottie.Player 4 | { 5 | /// 6 | /// Specifies the type of Lottie animation to render. 7 | /// 8 | public enum LottieAnimationType 9 | { 10 | /// 11 | /// Creates clean SVG elements with proper viewBox handling. 12 | /// 13 | /// Best feature support and general purpose. 14 | [Description("svg")] 15 | Svg, 16 | 17 | /// 18 | /// Uses 2D context, clears canvas each frame, handles sizing automatically. 19 | /// 20 | /// Performance option for complex animations, typically better for full screen or 21 | /// large animations. 22 | [Description("canvas")] 23 | Canvas, 24 | 25 | /// 26 | /// Creates HTML elements with CSS transforms. 27 | /// 28 | /// Optional, generally slower with limited support for complex animations. 29 | [Description("html")] 30 | Html 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /src/Blazor.Lottie.Player.Docs.WASM/wwwroot/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Blazor Lottie Player Documentation 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 |
Blazor Lottie Player
21 |
22 | 23 |
24 | An unhandled error has occurred. 25 | Reload 26 | 🗙 27 |
28 | 29 | 30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /src/Blazor.Lottie.Player/Extensions/EnumExtensions.cs: -------------------------------------------------------------------------------- 1 | using System.ComponentModel; 2 | using System.Reflection; 3 | 4 | namespace Blazor.Lottie.Player; 5 | /// 6 | /// Provides extension methods for working with enumeration types. 7 | /// 8 | /// This class includes methods that enhance the functionality of enums, such as retrieving 9 | /// custom descriptions defined by the . 10 | internal static class EnumExtensions 11 | { 12 | /// 13 | /// Retrieves the description associated with an enumeration value. 14 | /// 15 | /// This method is useful for obtaining human-readable descriptions of enumeration 16 | /// values when the is used to provide metadata for the 17 | /// values. 18 | public static string ToDescription(this Enum value) 19 | { 20 | if (value == null) 21 | return string.Empty; 22 | 23 | var field = value.GetType().GetField(value.ToString()); 24 | if (field == null) 25 | return value.ToString(); 26 | 27 | var attribute = field.GetCustomAttribute(); 28 | return attribute?.Description ?? value.ToString(); 29 | } 30 | } 31 | 32 | -------------------------------------------------------------------------------- /src/Blazor.Lottie.Player/Enums/LottieAnimationQuality.cs: -------------------------------------------------------------------------------- 1 | using System.ComponentModel; 2 | 3 | namespace Blazor.Lottie.Player; 4 | 5 | /// 6 | /// Specifies the rendering quality level for Lottie animations. 7 | /// 8 | /// 9 | /// Quality affects the precision of curve calculations and overall visual fidelity. 10 | /// Higher quality settings provide smoother curves and better visual accuracy but 11 | /// require more computational resources. 12 | /// 13 | public enum LottieAnimationQuality 14 | { 15 | /// 16 | /// Low quality rendering with basic curve precision. 17 | /// 18 | /// 19 | /// Fastest performance with reduced visual fidelity. Best for simple animations 20 | /// or when performance is critical (mobile devices, multiple simultaneous animations). 21 | /// 22 | [Description("low")] 23 | Low, 24 | 25 | /// 26 | /// Medium quality rendering with balanced precision and performance. 27 | /// 28 | /// 29 | /// Good balance between visual quality and performance. Suitable for most 30 | /// general-purpose animations and typical web applications. 31 | /// 32 | [Description("medium")] 33 | Medium, 34 | 35 | /// 36 | /// High quality rendering with maximum curve precision and visual fidelity. 37 | /// 38 | /// 39 | /// Best visual quality with smooth, precise curves. Use for detailed animations 40 | /// where visual perfection is important. May impact performance on lower-end devices. 41 | /// 42 | [Description("high")] 43 | High 44 | } 45 | -------------------------------------------------------------------------------- /tests/Blazor.Lottie.Player.UnitTests/Blazor.Lottie.Player.UnitTests.csproj: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | net9.0 5 | latest 6 | enable 7 | enable 8 | false 9 | Blazor.Lottie.Player.UnitTests 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | all 19 | runtime; build; native; contentfiles; analyzers; buildtransitive 20 | 21 | 22 | all 23 | runtime; build; native; contentfiles; analyzers; buildtransitive 24 | 25 | 26 | 27 | 28 | 29 | all 30 | runtime; build; native; contentfiles; analyzers; buildtransitive 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /src/Blazor.Lottie.Player/wwwroot/loadLottieWeb.js: -------------------------------------------------------------------------------- 1 | export async function initialize(source) { 2 | try { 3 | if (window.lottie && typeof window.lottie === "object") { 4 | // Lottie is already loaded 5 | return true; 6 | } 7 | await injectJsLibrary(source); 8 | if (window.lottie && typeof window.lottie === "object") { 9 | return true; 10 | } 11 | return false; 12 | } 13 | catch (error) { 14 | console.error("Error initializing Lottie Web:", error); 15 | return false; 16 | } 17 | } 18 | 19 | export async function injectJsLibrary(source) { 20 | return new Promise((resolve, reject) => { 21 | if (document.querySelector("script[data-bodymovinjs]")) { 22 | // Already loaded 23 | if (window.lottie) { 24 | return resolve(); 25 | } 26 | return waitForLottie(resolve, reject); 27 | } 28 | // Check if lottie is already available globally 29 | if (window.lottie) { 30 | return resolve(); 31 | } 32 | const script = document.createElement("script"); 33 | script.setAttribute("data-bodymovinjs", "true"); 34 | script.type = "text/javascript"; 35 | script.src = source; 36 | 37 | script.onload = () => waitForLottie(resolve, reject); 38 | script.onerror = () => reject(new Error(`Failed to load ${source}`)); 39 | 40 | document.head.appendChild(script); 41 | }); 42 | } 43 | 44 | function waitForLottie(resolve, reject) { 45 | const start = Date.now(); 46 | const timeout = 1000; 47 | const interval = 25; 48 | 49 | function check() { 50 | if (window.lottie && typeof window.lottie === "object") { 51 | resolve(); 52 | } else if (Date.now() - start >= timeout) { 53 | console.error(`Lottie did not become available within ${timeout}ms, continuing load.`); 54 | resolve(); 55 | } else { 56 | setTimeout(check, interval); 57 | } 58 | } 59 | check(); 60 | } 61 | -------------------------------------------------------------------------------- /src/Blazor.Lottie.Player.sln: -------------------------------------------------------------------------------- 1 | 2 | Microsoft Visual Studio Solution File, Format Version 12.00 3 | # Visual Studio Version 17 4 | VisualStudioVersion = 17.14.36221.1 5 | MinimumVisualStudioVersion = 10.0.40219.1 6 | Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Blazor.Lottie.Player", "Blazor.Lottie.Player\Blazor.Lottie.Player.csproj", "{A256F3B7-5BA4-4CE4-80B8-B86B1240315B}" 7 | EndProject 8 | Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Blazor.Lottie.Player.Docs.WASM", "Blazor.Lottie.Player.Docs.WASM\Blazor.Lottie.Player.Docs.WASM.csproj", "{E701A428-9E74-4876-9752-703495976F01}" 9 | EndProject 10 | Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Blazor.Lottie.Player.UnitTests", "..\tests\Blazor.Lottie.Player.UnitTests\Blazor.Lottie.Player.UnitTests.csproj", "{31B59C97-E241-4555-B733-17DAD6362AAF}" 11 | EndProject 12 | Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "SolutionItems", "SolutionItems", "{02EA681E-C7D8-13C7-8484-4AC65E1B71E8}" 13 | ProjectSection(SolutionItems) = preProject 14 | ..\.editorconfig = ..\.editorconfig 15 | ..\README.md = ..\README.md 16 | Readme.txt = Readme.txt 17 | EndProjectSection 18 | EndProject 19 | Global 20 | GlobalSection(SolutionConfigurationPlatforms) = preSolution 21 | Debug|Any CPU = Debug|Any CPU 22 | Release|Any CPU = Release|Any CPU 23 | EndGlobalSection 24 | GlobalSection(ProjectConfigurationPlatforms) = postSolution 25 | {A256F3B7-5BA4-4CE4-80B8-B86B1240315B}.Debug|Any CPU.ActiveCfg = Debug|Any CPU 26 | {A256F3B7-5BA4-4CE4-80B8-B86B1240315B}.Debug|Any CPU.Build.0 = Debug|Any CPU 27 | {A256F3B7-5BA4-4CE4-80B8-B86B1240315B}.Release|Any CPU.ActiveCfg = Release|Any CPU 28 | {A256F3B7-5BA4-4CE4-80B8-B86B1240315B}.Release|Any CPU.Build.0 = Release|Any CPU 29 | {E701A428-9E74-4876-9752-703495976F01}.Debug|Any CPU.ActiveCfg = Debug|Any CPU 30 | {E701A428-9E74-4876-9752-703495976F01}.Debug|Any CPU.Build.0 = Debug|Any CPU 31 | {E701A428-9E74-4876-9752-703495976F01}.Release|Any CPU.ActiveCfg = Release|Any CPU 32 | {E701A428-9E74-4876-9752-703495976F01}.Release|Any CPU.Build.0 = Release|Any CPU 33 | {31B59C97-E241-4555-B733-17DAD6362AAF}.Debug|Any CPU.ActiveCfg = Debug|Any CPU 34 | {31B59C97-E241-4555-B733-17DAD6362AAF}.Debug|Any CPU.Build.0 = Debug|Any CPU 35 | {31B59C97-E241-4555-B733-17DAD6362AAF}.Release|Any CPU.ActiveCfg = Release|Any CPU 36 | {31B59C97-E241-4555-B733-17DAD6362AAF}.Release|Any CPU.Build.0 = Release|Any CPU 37 | EndGlobalSection 38 | GlobalSection(SolutionProperties) = preSolution 39 | HideSolutionNode = FALSE 40 | EndGlobalSection 41 | GlobalSection(ExtensibilityGlobals) = postSolution 42 | SolutionGuid = {DB1F496D-F870-424A-8DFC-9E8F30D4F08F} 43 | EndGlobalSection 44 | EndGlobal 45 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![Sponsor](https://img.shields.io/badge/Sponsor-❤️_GitHub_Sponsors-orange?logo=github&style=for-the-badge)](https://github.com/sponsors/versile2) 2 | 3 | # Blazor Lottie Player 4 | 5 | Blazor Lottie Player makes it easy to integrate high-quality Lottie animations into your Blazor applications. 6 | 7 | ## 🚀 Getting Started 8 | 9 | ### 1. Install the NuGet Package 10 | 11 | Add [Blazor.Lottie.Player](https://mudx.org/docs/lottie) to your project via NuGet. 12 | 13 | ### 2. Choose How to Use the Component 14 | 15 | There are two ways to use Blazor Lottie Player: 16 | 17 | #### a. Using the Built-in Component 18 | 19 | - Add `@using Blazor.Lottie.Player` to your `_Imports.razor` file. 20 | - Use the `` component in your Razor files, setting the `Src` parameter to your Lottie animation JSON file. 21 | - The player will size itself to fill its parent container. Use CSS to control its width and height as needed. 22 | 23 | #### b. Using the Module Programmatically (Advanced) 24 | 25 | - Add `@using Blazor.Lottie.Player` to your `_Imports.razor` file. 26 | - Include the Lottie Web library (The LottiePlayer component loads it from the below CDN): 27 | 28 | ```html 29 | 30 | ``` 31 | 32 | - Instantiate and use the `LottiePlayer` class in your code-behind or component logic: 33 | 34 | ```csharp 35 | var player = new LottiePlayerModule(IJSRuntime, ElementReference); 36 | await player.InitializeAsync(LottiePlaybackOptions); 37 | // Optional Commands 38 | await player.PlayAsync(); 39 | await player.PauseAsync(); 40 | await player.StopAsync(); 41 | await player.GoToAndPlay(double frame, true); 42 | await player.GoToAndStop(double frame, true); 43 | await player.SetSpeedAsync(double speed, true); 44 | await player.SetDirectionAsync(LottieDirection.Forward); 45 | // Subscribe to Events 46 | player.OnAnimationLoaded += (args) => { /* Handle Animation Loaded */ }; 47 | player.OnDOMLoaded += (args) => { /* Handle DOM Loaded */ }; 48 | player.OnAnimationComplete += () => { /* Handle Animation Complete */ }; 49 | player.OnEnterFrame += (args) => { /* Handle Enter Frame */ }; 50 | player.OnComplete += () => { /* Handle Complete */ }; 51 | player.OnLoopComplete += () => { /* Handle Loop Complete */ }; 52 | ``` 53 | 54 | ### 3. Read the Docs 55 | 56 | Visit the [Blazor Lottie Player documentation](https://mudx.org/docs/lottie) for detailed usage instructions, examples, and API reference. 57 | 58 | ### 4. Get Help, Support, or Contribute 59 | 60 | If you need help, want to report an issue, or would like to support or contribute to the project, please visit the [GitHub repository](https://github.com/MudXtra/LottiePlayer) for more information. 61 | -------------------------------------------------------------------------------- /src/Blazor.Lottie.Player/Component/LottiePlaybackOptions.cs: -------------------------------------------------------------------------------- 1 | 2 | namespace Blazor.Lottie.Player; 3 | /// 4 | /// Configuration options for Lottie animation playback and rendering. 5 | /// 6 | public class LottiePlaybackOptions 7 | { 8 | /// 9 | /// The source or path to the lottie animation JSON file. 10 | /// 11 | /// 12 | /// This can be a URL or a local path relative to the web root.
e.g. "./_content/Blazor.Lottie.Player/loading.json" 13 | ///
or "https://example.com/path/to/animation.json".
14 | /// 15 | public string Path { get; set; } = "./_content/Blazor.Lottie.Player/loading.json"; 16 | 17 | /// 18 | /// Gets or sets whether the animation should start playing automatically. 19 | /// 20 | /// Default is true. 21 | public bool AutoPlay { get; set; } = true; 22 | 23 | /// 24 | /// Gets or sets the type of Lottie animation to render. 25 | /// 26 | /// Default is SVG for best feature support. 27 | public string Renderer { get; set; } = LottieAnimationType.Svg.ToDescription(); 28 | 29 | /// 30 | /// Gets or sets the loop behavior for the animation. 31 | /// 32 | /// 33 | /// Can be true (infinite loop), false (no loop), or a positive integer 34 | /// for a specific number of loops. 35 | /// 36 | public object Loop { get; set; } = true; 37 | 38 | /// 39 | /// Gets or sets the playback direction. 40 | /// 41 | /// 1 for forward, -1 for reverse. Default is 1. 42 | public int Direction { get; set; } = (int)LottieAnimationDirection.Forward; 43 | 44 | /// 45 | /// Gets or sets the playback speed multiplier. 46 | /// 47 | /// 1.0 is normal speed, 2.0 is double speed, 0.5 is half speed. Default is 1.0. 48 | public double Speed { get; set; } = 1.0; 49 | 50 | /// 51 | /// Gets or sets whether to enable smooth frame interpolation for high refresh rate displays. 52 | /// 53 | /// Default is true for smooth animations. 54 | public bool SetSubFrame { get; set; } = true; 55 | 56 | /// 57 | /// Gets or sets the rendering quality level. 58 | /// 59 | /// Default is High. 60 | public string Quality { get; set; } = LottieAnimationQuality.High.ToDescription(); 61 | 62 | /// 63 | /// Whether to enable the enterFrame event. 64 | /// 65 | /// 66 | /// If CurrentFrameChangedFunc is null this should be false. 67 | /// 68 | public bool EnterFrameEvent { get; set; } = false; 69 | } 70 | -------------------------------------------------------------------------------- /src/Blazor.Lottie.Player/Blazor.Lottie.Player.csproj: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | net8.0;net9.0 5 | enable 6 | enable 7 | 1.0.5 8 | 9 | 10 | 11 | Blazor.Lottie.Player 12 | Blazor.Lottie.Player 13 | MIT 14 | Nuget.png 15 | MudXtra 16 | Versile and Contributors 17 | Copyright 2025 MudXtra 18 | Blazor, Component, Blazor Components, Blazor Library, Lottie, Lottie Player, Lottie Animations 19 | A component wrapper to display Lottie Animations in Blazor. 20 | https://mudx.org/docs/lottieplayer 21 | README.md 22 | https://github.com/MudXtra/LottiePlayer 23 | git 24 | 25 | 26 | 27 | true 28 | true 29 | true 30 | snupkg 31 | 32 | 33 | 34 | true 35 | False 36 | true 37 | false 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | True 51 | \ 52 | 53 | 54 | True 55 | \ 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /src/Blazor.Lottie.Player/Configuration/LottieAnimationOptions.cs: -------------------------------------------------------------------------------- 1 | namespace Blazor.Lottie.Player; 2 | 3 | /// 4 | /// Represents the advanced configuration options for rendering Lottie animations. 5 | /// 6 | public class LottieAnimationOptions 7 | { 8 | /// 9 | /// Gets or sets the URL of the Lottie JavaScript library used for rendering Lottie animations. 10 | /// 11 | public string LottieSourceJs { get; set; } = "https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.13.0/lottie.min.js"; 12 | 13 | /// 14 | /// Gets or sets the quality level of the Lottie animation rendering. This is a global setting. 15 | /// 16 | /// Defaults to . Higher quality levels may 17 | /// result in smoother animations but could increase resource usage. 18 | public LottieAnimationQuality AnimationQuality { get; set; } = LottieAnimationQuality.High; 19 | 20 | /// 21 | /// Gets or sets whether to enable smooth frame interpolation for high refresh rate displays. 22 | /// 23 | /// 24 | /// When true (default), the animation will interpolate between keyframes to create 25 | /// smooth motion that adapts to your display's refresh rate (60Hz, 120Hz, etc.). 26 | /// When false, the animation will only update on the original After Effects keyframes, 27 | /// which may appear choppy on high refresh displays but offers better performance and 28 | /// pixel-perfect reproduction of the original animation timing. 29 | /// 30 | public bool SmoothFrameInterpolation { get; set; } = true; 31 | 32 | /// 33 | /// Determines whether the specified object is equal to the current instance. 34 | /// 35 | /// Two instances are considered equal if they have the same , , and values. 37 | /// The object to compare with the current instance. 38 | /// if the specified object is equal to the current instance; otherwise, . 40 | public override bool Equals(object? obj) 41 | { 42 | if (ReferenceEquals(this, obj)) 43 | return true; 44 | if (obj is not LottieAnimationOptions other) 45 | return false; 46 | 47 | return string.Equals(LottieSourceJs, other.LottieSourceJs, StringComparison.Ordinal) 48 | && AnimationQuality == other.AnimationQuality 49 | && SmoothFrameInterpolation == other.SmoothFrameInterpolation; 50 | } 51 | 52 | /// 53 | /// Returns a hash code for the current object. 54 | /// 55 | /// The hash code is computed based on the values of the , , and properties. This ensures that objects 57 | /// with the same property values produce the same hash code. 58 | /// An integer hash code that represents the current object. 59 | public override int GetHashCode() 60 | { 61 | return HashCode.Combine( 62 | LottieSourceJs != null ? StringComparer.Ordinal.GetHashCode(LottieSourceJs) : 0, 63 | AnimationQuality, 64 | SmoothFrameInterpolation 65 | ); 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /src/Blazor.Lottie.Player.Docs.WASM/wwwroot/css/app.css: -------------------------------------------------------------------------------- 1 | .valid.modified:not([type=checkbox]) { 2 | outline: 1px solid #26b050; 3 | } 4 | 5 | .invalid { 6 | outline: 1px solid red; 7 | } 8 | 9 | .validation-message { 10 | color: red; 11 | } 12 | 13 | #blazor-error-ui { 14 | color-scheme: light only; 15 | background: lightyellow; 16 | bottom: 0; 17 | box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); 18 | box-sizing: border-box; 19 | display: none; 20 | left: 0; 21 | padding: 0.6rem 1.25rem 0.7rem 1.25rem; 22 | position: fixed; 23 | width: 100%; 24 | z-index: 1000; 25 | } 26 | 27 | #blazor-error-ui .dismiss { 28 | cursor: pointer; 29 | position: absolute; 30 | right: 0.75rem; 31 | top: 0.5rem; 32 | } 33 | 34 | .blazor-error-boundary { 35 | background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; 36 | padding: 1rem 1rem 1rem 3.7rem; 37 | color: white; 38 | } 39 | 40 | .blazor-error-boundary::after { 41 | content: "An error has occurred." 42 | } 43 | 44 | .loading-progress { 45 | position: relative; 46 | display: block; 47 | width: 8rem; 48 | height: 8rem; 49 | margin: 20vh auto 1rem auto; 50 | } 51 | 52 | .loading-progress circle { 53 | fill: none; 54 | stroke: #e0e0e0; 55 | stroke-width: 0.6rem; 56 | transform-origin: 50% 50%; 57 | transform: rotate(-90deg); 58 | } 59 | 60 | .loading-progress circle:last-child { 61 | stroke: #1b6ec2; 62 | stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%; 63 | transition: stroke-dasharray 0.05s ease-in-out; 64 | } 65 | 66 | .loading-progress-text { 67 | position: absolute; 68 | text-align: center; 69 | font-weight: bold; 70 | inset: calc(20vh + 3.25rem) 0 auto 0.2rem; 71 | } 72 | 73 | .loading-progress-text:after { 74 | content: var(--blazor-load-percentage-text, "Loading"); 75 | } 76 | 77 | code { 78 | color: #c02d76; 79 | } 80 | 81 | .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { 82 | color: var(--bs-secondary-color); 83 | text-align: end; 84 | } 85 | 86 | .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { 87 | text-align: start; 88 | } -------------------------------------------------------------------------------- /src/Blazor.Lottie.Player/Player-API-Documentation.txt: -------------------------------------------------------------------------------- 1 | https://airbnb.io/lottie/#/web 2 | ** Lottie BodyMovin Version 5.13.0 ** 3 | Getting Started 4 | 5 | Bodymovin can render Lottie JSON files on the web. 6 | 7 | First, get the bodymovin player javascript library. It is statically hosted at https://cdnjs.com/libraries/bodymovin or you can get the javascript directly by clicking Get Player in the bodymovin plugin. 8 | 9 | 10 | 11 | 12 | 13 | Bodymovin is also available on npm and bower. 14 | 15 | Then playing the animation is as simple as: 16 | 17 | var animation = bodymovin.loadAnimation({ 18 | container: document.getElementById('lottie'), // Required 19 | path: 'data.json', // Required 20 | renderer: 'svg/canvas/html', // Required 21 | loop: true, // Optional 22 | autoplay: true, // Optional 23 | name: "Hello World", // Name for future reference. Optional. 24 | }) 25 | 26 | HTML player installation 27 | Static URL 28 | 29 | Or you can use the script file from here: https://cdnjs.com/libraries/lottie-web 30 | 31 | Usage 32 | 33 | Call lottie.loadAnimation() to start an animation. It takes an object as a unique param with: 34 | 35 | animationData: an Object with the exported animation data. 36 | path: the relative path to the animation object. (animationData and path are mutually exclusive) 37 | loop: true / false / number 38 | autoplay: true / false it will start playing as soon as it is ready 39 | name: animation name for future reference 40 | renderer: 'svg' / 'canvas' / 'html' to set the renderer 41 | container: the dom element on which to render the animation 42 | 43 | It returns the animation instance you can control with play, pause, setSpeed, etc. 44 | 45 | lottie.loadAnimation({ 46 | container: element, // the dom element that will contain the animation 47 | renderer: 'svg', 48 | loop: true, 49 | autoplay: true, 50 | path: 'data.json' // the path to the animation json 51 | }); 52 | 53 | Usage 54 | 55 | animation instances have these main methods: 56 | 57 | anim.play() 58 | anim.stop() 59 | anim.pause() 60 | anim.setLocationHref(locationHref) -- one param usually pass as location.href. Its useful when you experience mask issue in safari where your url does not have # symbol. 61 | anim.setSpeed(speed) -- one param speed (1 is normal speed) 62 | anim.goToAndStop(value, isFrame) first param is a numeric value. second param is a boolean that defines time or frames for first param 63 | anim.goToAndPlay(value, isFrame) first param is a numeric value. second param is a boolean that defines time or frames for first param 64 | anim.setDirection(direction) -- one param direction (1 is normal direction.) 65 | anim.playSegments(segments, forceFlag) -- first param is a single array or multiple arrays of two values each(fromFrame,toFrame), second param is a boolean for forcing the new segment right away 66 | anim.setSubframe(flag) -- If false, it will respect the original AE fps. If true, it will update as much as possible. (true by default 67 | anim.destroy() 68 | 69 | lottie has 8 main methods: 70 | 71 | lottie.play() -- with 1 optional parameter name to target a specific animation 72 | lottie.stop() -- with 1 optional parameter name to target a specific animation 73 | lottie.setSpeed() -- first param speed (1 is normal speed) -- with 1 optional parameter name to target a specific animation 74 | lottie.setDirection() -- first param direction (1 is normal direction.) -- with 1 optional parameter name to target a specific animation 75 | lottie.searchAnimations() -- looks for elements with class "lottie" 76 | lottie.loadAnimation() -- Explained above. returns an animation instance to control individually. 77 | lottie.destroy() -- To destroy and release resources. The DOM element will be emptied. 78 | lottie.registerAnimation() -- you can register an element directly with registerAnimation. It must have the "data-animation-path" attribute pointing at the data.json url 79 | lottie.setQuality() -- default 'high', set 'high','medium','low', or a number > 1 to improve player performance. In some animations as low as 2 won't show any difference. 80 | 81 | Events 82 | 83 | onComplete 84 | onLoopComplete 85 | onEnterFrame 86 | onSegmentStart 87 | 88 | you can also use addEventListener with the following events: 89 | 90 | complete 91 | loopComplete 92 | enterFrame 93 | segmentStart 94 | config_ready (when initial config is done) 95 | data_ready (when all parts of the animation have been loaded) 96 | DOMLoaded (when elements have been added to the DOM) 97 | destroy 98 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | end_of_line = crlf 6 | charset = utf-8 7 | indent_size = 4 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | csharp_using_directive_placement = outside_namespace:silent 11 | csharp_prefer_simple_using_statement = true:suggestion 12 | csharp_prefer_braces = true:silent 13 | csharp_style_namespace_declarations = file_scoped:silent 14 | csharp_style_prefer_method_group_conversion = true:silent 15 | csharp_style_prefer_top_level_statements = true:silent 16 | csharp_style_prefer_primary_constructors = true:suggestion 17 | csharp_prefer_system_threading_lock = true:suggestion 18 | csharp_style_expression_bodied_methods = false:silent 19 | csharp_style_expression_bodied_constructors = false:silent 20 | csharp_style_expression_bodied_operators = false:silent 21 | csharp_style_expression_bodied_properties = true:silent 22 | csharp_style_expression_bodied_indexers = true:silent 23 | csharp_style_expression_bodied_accessors = true:silent 24 | csharp_style_expression_bodied_lambdas = true:silent 25 | csharp_style_expression_bodied_local_functions = false:silent 26 | csharp_indent_labels = one_less_than_current 27 | 28 | [*.json] 29 | indent_style = space 30 | end_of_line = crlf 31 | charset = utf-8 32 | indent_size = 2 33 | 34 | [*.{yml,yaml}] 35 | indent_style = space 36 | end_of_line = crlf 37 | charset = utf-8 38 | indent_size = 2 39 | 40 | [*.md] 41 | trim_trailing_whitespace = false 42 | insert_final_newline = false 43 | 44 | [*.{cs,vb}] 45 | #### Naming styles #### 46 | 47 | # Naming rules 48 | 49 | dotnet_naming_rule.interface_should_be_begins_with_i.severity = suggestion 50 | dotnet_naming_rule.interface_should_be_begins_with_i.symbols = interface 51 | dotnet_naming_rule.interface_should_be_begins_with_i.style = begins_with_i 52 | 53 | dotnet_naming_rule.types_should_be_pascal_case.severity = suggestion 54 | dotnet_naming_rule.types_should_be_pascal_case.symbols = types 55 | dotnet_naming_rule.types_should_be_pascal_case.style = pascal_case 56 | 57 | dotnet_naming_rule.non_field_members_should_be_pascal_case.severity = suggestion 58 | dotnet_naming_rule.non_field_members_should_be_pascal_case.symbols = non_field_members 59 | dotnet_naming_rule.non_field_members_should_be_pascal_case.style = pascal_case 60 | dotnet_diagnostic.IDE0130.severity = none 61 | 62 | # Symbol specifications 63 | 64 | dotnet_naming_symbols.interface.applicable_kinds = interface 65 | dotnet_naming_symbols.interface.applicable_accessibilities = public, internal, private, protected, protected_internal, private_protected 66 | dotnet_naming_symbols.interface.required_modifiers = 67 | 68 | dotnet_naming_symbols.types.applicable_kinds = class, struct, interface, enum 69 | dotnet_naming_symbols.types.applicable_accessibilities = public, internal, private, protected, protected_internal, private_protected 70 | dotnet_naming_symbols.types.required_modifiers = 71 | 72 | dotnet_naming_symbols.non_field_members.applicable_kinds = property, event, method 73 | dotnet_naming_symbols.non_field_members.applicable_accessibilities = public, internal, private, protected, protected_internal, private_protected 74 | dotnet_naming_symbols.non_field_members.required_modifiers = 75 | 76 | # Naming styles 77 | 78 | dotnet_naming_style.begins_with_i.required_prefix = I 79 | dotnet_naming_style.begins_with_i.required_suffix = 80 | dotnet_naming_style.begins_with_i.word_separator = 81 | dotnet_naming_style.begins_with_i.capitalization = pascal_case 82 | 83 | dotnet_naming_style.pascal_case.required_prefix = 84 | dotnet_naming_style.pascal_case.required_suffix = 85 | dotnet_naming_style.pascal_case.word_separator = 86 | dotnet_naming_style.pascal_case.capitalization = pascal_case 87 | 88 | dotnet_naming_style.pascal_case.required_prefix = 89 | dotnet_naming_style.pascal_case.required_suffix = 90 | dotnet_naming_style.pascal_case.word_separator = 91 | dotnet_naming_style.pascal_case.capitalization = pascal_case 92 | dotnet_style_coalesce_expression = true:suggestion 93 | dotnet_style_null_propagation = true:suggestion 94 | dotnet_style_prefer_is_null_check_over_reference_equality_method = true:suggestion 95 | dotnet_style_prefer_auto_properties = true:silent 96 | dotnet_style_object_initializer = true:suggestion 97 | dotnet_style_collection_initializer = true:suggestion 98 | dotnet_style_prefer_simplified_boolean_expressions = true:suggestion 99 | dotnet_style_prefer_conditional_expression_over_assignment = true:silent 100 | dotnet_style_prefer_conditional_expression_over_return = true:silent 101 | dotnet_style_explicit_tuple_names = true:suggestion 102 | dotnet_style_prefer_inferred_tuple_names = true:suggestion 103 | dotnet_style_prefer_inferred_anonymous_type_member_names = true:suggestion 104 | dotnet_style_prefer_compound_assignment = true:suggestion 105 | dotnet_style_operator_placement_when_wrapping = beginning_of_line 106 | tab_width = 4 107 | dotnet_style_prefer_simplified_interpolation = true:suggestion 108 | dotnet_style_namespace_match_folder = true:suggestion 109 | -------------------------------------------------------------------------------- /src/Blazor.Lottie.Player/wwwroot/lottiePlayerModule.js: -------------------------------------------------------------------------------- 1 | 2 | export function initialize(dotNetRef, elementRef, options) { 3 | const animation = lottie.loadAnimation({ 4 | container: elementRef, 5 | renderer: options.renderer, 6 | loop: options.loop, 7 | autoplay: false, 8 | path: options.path 9 | }); 10 | let success = animation !== null && animation !== undefined; 11 | if (!success) { 12 | console.error("Failed to load Lottie animation. Check the path and options."); 13 | return null; 14 | } 15 | 16 | // Set up options 17 | success = setOptions(animation, options); 18 | if (!success) { 19 | console.error("Failed to set options for Lottie animation."); 20 | return null; 21 | } 22 | // Set up event listeners 23 | success = addEvents(animation, dotNetRef, options, elementRef); 24 | if (!success) { 25 | console.error("Failed to add event listeners for Lottie animation."); 26 | return null; 27 | } 28 | // start playing the animation if autoplay is true 29 | if (options.autoPlay) { 30 | // If autoplay is true, play the animation immediately 31 | animation.play(); 32 | } 33 | return animation; // Return animation if successful 34 | } 35 | 36 | function setOptions(animation, options) { 37 | if (animation && options) { 38 | // Apply various options 39 | if (options.speed !== undefined && options.speed !== 1.0) animation.setSpeed(options.speed); 40 | if (options.direction !== undefined && options.direction !== 1) animation.setDirection(options.direction); 41 | if (options.setSubFrame !== true) animation.setSubframe(false); 42 | if (options.quality !== undefined && options.quality !== 'high') lottie.setQuality(options.quality); 43 | return true; 44 | } 45 | return false; 46 | } 47 | 48 | function addEvents(animation, dotNetAdapter, options, elementRef) { 49 | if (animation && dotNetAdapter && options && elementRef) { 50 | animation.addEventListener('data_ready', () => { 51 | // Add event listeners 52 | const eventArgs = { 53 | elementId: elementRef.id, 54 | currentFrame: animation.currentFrame, 55 | totalFrames: animation.totalFrames 56 | }; 57 | invokeDotNetMethodAsync(dotNetAdapter, "AnimationReadyEvent", eventArgs); 58 | }); 59 | animation.addEventListener('DOMLoaded', () => { 60 | // Add event listeners 61 | const eventArgs = { 62 | elementId: elementRef.id, 63 | currentFrame: animation.currentFrame, 64 | totalFrames: animation.totalFrames 65 | }; 66 | invokeDotNetMethodAsync(dotNetAdapter, "DOMLoadedEvent", eventArgs); 67 | }); 68 | animation.addEventListener('complete', () => { 69 | invokeDotNetMethodAsync(dotNetAdapter, 'CompleteEvent'); 70 | }); 71 | animation.addEventListener('loopComplete', () => { 72 | invokeDotNetMethodAsync(dotNetAdapter, 'LoopCompleteEvent'); 73 | }); 74 | if (options.enterFrameEvent) { 75 | animation.addEventListener('enterFrame', (e) => { 76 | invokeDotNetMethodAsync(dotNetAdapter, 'EnterFrameEvent', e); 77 | }); 78 | } 79 | return true; 80 | } 81 | return false; 82 | } 83 | 84 | function invokeDotNetMethodAsync(dotNetAdapter, methodName, ...args) { 85 | return dotNetAdapter.invokeMethodAsync(methodName, ...args) 86 | .catch((reason) => { 87 | console.error(reason); 88 | }); 89 | } 90 | 91 | export function play(animation) { 92 | if (animation) { 93 | animation.play(); 94 | } else { 95 | console.error("Animation instance is null or undefined."); 96 | } 97 | } 98 | 99 | export function stop(animation) { 100 | if (animation) { 101 | animation.stop(); 102 | } else { 103 | console.error("Animation instance is null or undefined."); 104 | } 105 | } 106 | 107 | export function pause(animation) { 108 | if (animation) { 109 | animation.pause(); 110 | } else { 111 | console.error("Animation instance is null or undefined."); 112 | } 113 | } 114 | 115 | export function goToAndStop(animation, frame, isFrame) { 116 | if (animation) { 117 | if (isFrame) { 118 | animation.goToAndStop(frame, true); 119 | } else { 120 | animation.goToAndStop(animation.totalFrames * frame, true); 121 | } 122 | } else { 123 | console.error("Animation instance is null or undefined."); 124 | } 125 | } 126 | 127 | export function goToAndPlay(animation, frame, isFrame) { 128 | if (animation) { 129 | if (isFrame) { 130 | animation.goToAndPlay(frame, true); 131 | } else { 132 | animation.goToAndPlay(animation.totalFrames * frame, true); 133 | } 134 | } else { 135 | console.error("Animation instance is null or undefined."); 136 | } 137 | } 138 | 139 | export function setDirection(animation, direction) { 140 | if (animation && (direction === 1 || direction === -1)) { 141 | animation.setDirection(direction); 142 | } else { 143 | console.error("Invalid animation instance or direction value. Direction must be 1 or -1."); 144 | } 145 | } 146 | 147 | export function setSpeed(animation, speed) { 148 | if (animation && speed > 0) { 149 | animation.setSpeed(speed); 150 | } else { 151 | console.error("Invalid animation instance or speed value. Speed must be greater than 0."); 152 | } 153 | } 154 | 155 | export function destroy(animation) { 156 | if (animation) { 157 | animation.destroy(); 158 | } else { 159 | console.error("Animation instance is null or undefined."); 160 | } 161 | } 162 | -------------------------------------------------------------------------------- /tests/Blazor.Lottie.Player.UnitTests/LottieModuleTests.cs: -------------------------------------------------------------------------------- 1 | using AwesomeAssertions; 2 | using Bunit; 3 | using Moq; 4 | 5 | namespace Blazor.Lottie.Player.UnitTests; 6 | public class LottieModuleTests : BunitTest 7 | { 8 | [SetUp] 9 | public override void Setup() 10 | { 11 | base.Setup(); 12 | 13 | // Setup the import call to return a mock module 14 | var moduleMock = Context.JSInterop.SetupModule("./_content/Blazor.Lottie.Player/loadLottieWeb.js"); 15 | // Setup the initialize call to return true 16 | moduleMock.Setup("initialize", _ => true).SetResult(true); 17 | 18 | var lottieModuleMock = Context.JSInterop.SetupModule("./_content/Blazor.Lottie.Player/lottiePlayerModule.js"); 19 | lottieModuleMock.Setup("initialize", _ => true).SetResult(true); 20 | 21 | lottieModuleMock.Setup("play", _ => true).SetResult(true); 22 | lottieModuleMock.Setup("pause", _ => true).SetResult(true); 23 | lottieModuleMock.Setup("stop", _ => true).SetResult(true); 24 | lottieModuleMock.Setup("destroy", _ => true).SetResult(true); 25 | lottieModuleMock.Setup("setSpeed", _ => true).SetResult(true); 26 | lottieModuleMock.Setup("setDirection", _ => true).SetResult(true); 27 | } 28 | 29 | [Test] 30 | public void LottiePlayerModule_Initialization() 31 | { 32 | var comp = Context.RenderComponent(parameters => parameters 33 | .Add(p => p.Src, "https://example.com/lottie.json") 34 | ); 35 | 36 | var lottieModule = comp.Instance.LottiePlayerModule; 37 | lottieModule.Should().NotBeNull(); 38 | 39 | lottieModule._lottieAnimationRef.Should().NotBeNull(); 40 | 41 | // after init, jsruntime, elementref, and dotnetobjectref should be setup 42 | lottieModule._js.Should().NotBeNull(); 43 | lottieModule._elementRef.Should().NotBeNull(); 44 | lottieModule._dotNetReference.Should().NotBeNull(); 45 | lottieModule._isDisposing.Should().BeFalse(); 46 | 47 | // verify element ref 48 | lottieModule._elementRef.Should().NotBeNull(); 49 | } 50 | 51 | [Test] 52 | public void LottiePlayerModule_Events() 53 | { 54 | var comp = Context.RenderComponent(parameters => parameters 55 | .Add(p => p.Src, "https://example.com/lottie.json") 56 | ); 57 | 58 | var lottieModule = comp.Instance.LottiePlayerModule; 59 | lottieModule.Should().NotBeNull(); 60 | 61 | var loadedEventArgs = new LottiePlayerLoadedEventArgs 62 | { 63 | ElementId = comp.Instance.ElementId, 64 | CurrentFrame = 0.0, 65 | TotalFrames = 100.0, 66 | }; 67 | 68 | var eventTriggered = false; 69 | lottieModule.OnDOMLoaded += (sender, args) => eventTriggered = true; 70 | comp.InvokeAsync(() => lottieModule.DOMLoadedEvent(loadedEventArgs)); 71 | eventTriggered.Should().BeTrue(); 72 | 73 | eventTriggered = false; 74 | lottieModule.OnAnimationReady += (sender, args) => eventTriggered = true; 75 | comp.InvokeAsync(() => lottieModule.AnimationReadyEvent(loadedEventArgs)); 76 | eventTriggered.Should().BeTrue(); 77 | 78 | eventTriggered = false; 79 | lottieModule.OnEnterFrame += (sender, args) => eventTriggered = true; 80 | comp.InvokeAsync(() => lottieModule.EnterFrameEvent(new LottiePlayerEventFrameArgs() { CurrentTime = 23.7 })); 81 | eventTriggered.Should().BeTrue(); 82 | 83 | eventTriggered = false; 84 | lottieModule.OnComplete += (sender, args) => eventTriggered = true; 85 | comp.InvokeAsync(() => lottieModule.CompleteEvent()); 86 | eventTriggered.Should().BeTrue(); 87 | 88 | eventTriggered = false; 89 | lottieModule.OnLoopComplete += (sender, args) => eventTriggered = true; 90 | comp.InvokeAsync(() => lottieModule.LoopCompleteEvent()); 91 | eventTriggered.Should().BeTrue(); 92 | } 93 | 94 | [Test] 95 | public async Task LottiePlayerModule_Actions() 96 | { 97 | var comp = Context.RenderComponent(parameters => parameters 98 | .Add(p => p.Src, "https://example.com/lottie.json") 99 | .Add(p => p.AutoPlay, false) 100 | ); 101 | 102 | var lottieModule = comp.Instance.LottiePlayerModule; 103 | lottieModule.Should().NotBeNull(); 104 | 105 | // Test play 106 | await lottieModule.PlayAsync(); 107 | Context.JSInterop.VerifyInvoke("play"); 108 | 109 | // Test pause 110 | await lottieModule.PauseAsync(); 111 | Context.JSInterop.VerifyInvoke("pause"); 112 | 113 | // Test stop 114 | await lottieModule.StopAsync(); 115 | Context.JSInterop.VerifyInvoke("stop"); 116 | 117 | // Test set speed 118 | await lottieModule.SetSpeedAsync(1.5); 119 | Context.JSInterop.VerifyInvoke("setSpeed"); 120 | 121 | // Test set direction 122 | await lottieModule.SetDirectionAsync(LottieAnimationDirection.Forward); 123 | Context.JSInterop.VerifyInvoke("setDirection"); 124 | } 125 | 126 | [Test] 127 | public async Task LottiePlayerModule_Dispose() 128 | { 129 | var comp = Context.RenderComponent(parameters => parameters 130 | .Add(p => p.Src, "https://example.com/lottie.json") 131 | .Add(p => p.AutoPlay, false) 132 | ); 133 | var lottieModule = comp.Instance.LottiePlayerModule; 134 | lottieModule.Should().NotBeNull(); 135 | // Dispose the module 136 | await lottieModule.DisposeAsync(); 137 | lottieModule._isDisposing.Should().BeTrue(); 138 | lottieModule._lottieAnimationRef.Should().BeNull(); 139 | 140 | // test CanExecute returns false after dispose 141 | lottieModule.CanExecute.Should().BeFalse(); 142 | var eventTriggered = false; 143 | 144 | // test actions can't execute after dispose 145 | await lottieModule.PlayAsync(); 146 | Context.JSInterop.VerifyNotInvoke("play"); 147 | await lottieModule.PauseAsync(); 148 | Context.JSInterop.VerifyNotInvoke("pause"); 149 | await lottieModule.StopAsync(); 150 | Context.JSInterop.VerifyNotInvoke("stop"); 151 | await lottieModule.SetSpeedAsync(1.5); 152 | Context.JSInterop.VerifyNotInvoke("setSpeed"); 153 | await lottieModule.SetDirectionAsync(LottieAnimationDirection.Forward); 154 | Context.JSInterop.VerifyNotInvoke("setDirection"); 155 | 156 | // test events can't trigger after dispose 157 | lottieModule.OnDOMLoaded += (sender, args) => eventTriggered = true; 158 | await lottieModule.DOMLoadedEvent(It.IsAny()); 159 | eventTriggered.Should().BeFalse(); 160 | lottieModule.OnAnimationReady += (sender, args) => eventTriggered = true; 161 | await lottieModule.AnimationReadyEvent(It.IsAny()); 162 | eventTriggered.Should().BeFalse(); 163 | lottieModule.OnEnterFrame += (sender, args) => eventTriggered = true; 164 | await lottieModule.EnterFrameEvent(new LottiePlayerEventFrameArgs()); 165 | eventTriggered.Should().BeFalse(); 166 | lottieModule.OnComplete += (sender, args) => eventTriggered = true; 167 | await lottieModule.CompleteEvent(); 168 | eventTriggered.Should().BeFalse(); 169 | lottieModule.OnLoopComplete += (sender, args) => eventTriggered = true; 170 | await lottieModule.LoopCompleteEvent(); 171 | eventTriggered.Should().BeFalse(); 172 | 173 | Context.JSInterop.VerifyInvoke("destroy"); 174 | } 175 | } 176 | -------------------------------------------------------------------------------- /src/Blazor.Lottie.Player.Docs.WASM/Pages/Home.razor: -------------------------------------------------------------------------------- 1 | @page "/" 2 | @inject ISnackbar Snackbar 3 | 4 | Blazor Lottie Player Documentation 5 | 6 |

Blazor Lottie Player

7 | 8 |

Welcome to the Blazor Lottie Player Documentation.

9 | 10 |

This is a simple Blazor WebAssembly application that demonstrates how to use the 11 | Blazor Lottie Player component. The Lottie Player component allows you to easily 12 | integrate Lottie animations into your Blazor applications without regard to what 13 | UI components you might be using.

14 | 15 |

To get started, you can check out

16 | 17 | Copyright @@ 2025 MudXtra 18 | 19 | 20 | 21 | Example 1: Basic Controls 22 |
23 | 24 |
25 | 26 | Play 27 | Pause 28 | Stop 29 | 30 | 31 | 32 | 33 | 34 | Example 2: Autoplay, Loop, and Speed 35 |
36 | 41 |
42 | 43 | 44 | 45 | 46 | Speed: @_speed2.ToString("0.0")x 47 | 48 | 49 | 50 | 51 | 52 | Example 3: Direction Control 53 |
54 | 57 |
58 | 59 | 60 | Forward 61 | Reverse 62 | 63 | Frame: @_lottiePlayer3?.CurrentAnimationFrame of @_lottiePlayer3!.TotalAnimationFrames 64 | Set Direction 65 | 66 | 67 | 68 | 69 | 70 | Example 4: Responsive Sizing 71 |
72 | 74 |
75 | 76 | Size: @_size4 px 77 | 78 | 79 | 80 | 81 | Example 5: Disabled State 82 |
83 | 86 |
87 | 88 | 89 | @foreach (var lottie in _lottieList.OrderBy(x => x.Name)) 90 | { 91 | @lottie.Name 92 | } 93 | 94 | 95 | 96 | Add 97 | 98 | 99 | 100 | @code { 101 | private List _lottieList = []; 102 | 103 | // Example 1 104 | LottiePlayer? _lottiePlayer1; 105 | int _lottie1Sel = 1; 106 | 107 | // Example 2 108 | LottiePlayer? _lottiePlayer2; 109 | bool _autoplay2 = true; 110 | bool _loop2 = true; 111 | double _speed2 = 1.0; 112 | int _lottie2Sel = 2; 113 | 114 | // Example 3 115 | LottiePlayer? _lottiePlayer3; 116 | int _direction3 = 1; 117 | int _lottie3Sel = 3; 118 | 119 | // Example 4 120 | LottiePlayer? _lottiePlayer4; 121 | int _size4 = 300; 122 | string _size4px => $"{_size4}px"; 123 | string _lottieName = string.Empty; 124 | string _lottieSrc = string.Empty; 125 | LottieAnimationList _lottieAnim = default!; 126 | 127 | // Legacy example 128 | LottiePlayer? _lottiePlayer; 129 | int _lottie5Sel = 0; 130 | 131 | protected override void OnInitialized() 132 | { 133 | _lottieList.Add(new LottieAnimationList() { Name = "Hand Loading", Src = "https://lottie.host/99ab6923-62d6-4030-aeb0-282d33242f3e/Z1CzIUWU18.json" }); 134 | _lottieList.Add(new LottieAnimationList() { Name = "Gift Box", Src = "./lottie/newAnimation.json" }); 135 | _lottieList.Add(new LottieAnimationList() { Name = "Lego Loading", Src = "https://lottie.host/694149cc-b526-4803-acff-522c384f3319/UM1M0cO0TD.json" }); 136 | _lottieList.Add(new LottieAnimationList() { Name = "Handshake", Src = "https://lottie.host/382bbcd7-e7b1-4a30-90cd-884a9c7c3bb1/F7I9nPKEr1.json" }); 137 | _lottieList.Add(new LottieAnimationList() { Name = "HotDog Loading", Src = "./lottie/BunBun.json" }); 138 | _lottieList.Add(new LottieAnimationList() { Name = "Hand Loading JSON", Src = "./lottie/loading.json" }); 139 | _lottieAnim = _lottieList[4]; 140 | } 141 | 142 | private void AddLottie(MouseEventArgs args) 143 | { 144 | if (!string.IsNullOrWhiteSpace(_lottieName) && !string.IsNullOrWhiteSpace(_lottieSrc)) 145 | { 146 | _lottieList.Add(new LottieAnimationList() { Name = _lottieName, Src = _lottieSrc }); 147 | _lottieName = string.Empty; 148 | _lottieSrc = string.Empty; 149 | Snackbar.Add("Lottie animation added successfully!", Severity.Success); 150 | } 151 | else 152 | { 153 | Snackbar.Add("Please provide both name and source URL for the Lottie animation.", Severity.Error); 154 | } 155 | } 156 | 157 | private void LottiePlayer_OnCurrentFrameChanged(LottiePlayerEventFrameArgs e) 158 | { 159 | if (e.CurrentTime > 99999999) 160 | { 161 | Snackbar.Add("Current time exceeds the maximum limit.", Severity.Warning); 162 | } 163 | } 164 | } 165 | 166 | @code { 167 | public class LottieAnimationList 168 | { 169 | public string Name { get; set; } = string.Empty; 170 | public string Src { get; set; } = string.Empty; 171 | public override string ToString() 172 | { 173 | return $"{Name}"; 174 | } 175 | } 176 | } 177 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | ## Ignore Visual Studio temporary files, build results, and 2 | ## files generated by popular Visual Studio add-ons. 3 | ## 4 | ## Get latest from https://github.com/github/gitignore/blob/main/VisualStudio.gitignore 5 | 6 | # User-specific files 7 | *.rsuser 8 | *.suo 9 | *.user 10 | *.userosscache 11 | *.sln.docstates 12 | 13 | # User-specific files (MonoDevelop/Xamarin Studio) 14 | *.userprefs 15 | 16 | # Mono auto generated files 17 | mono_crash.* 18 | 19 | # Build results 20 | [Dd]ebug/ 21 | [Dd]ebugPublic/ 22 | [Rr]elease/ 23 | [Rr]eleases/ 24 | x64/ 25 | x86/ 26 | [Ww][Ii][Nn]32/ 27 | [Aa][Rr][Mm]/ 28 | [Aa][Rr][Mm]64/ 29 | bld/ 30 | [Bb]in/ 31 | [Oo]bj/ 32 | [Ll]og/ 33 | [Ll]ogs/ 34 | 35 | # Visual Studio 2015/2017 cache/options directory 36 | .vs/ 37 | # Uncomment if you have tasks that create the project's static files in wwwroot 38 | #wwwroot/ 39 | 40 | # Visual Studio 2017 auto generated files 41 | Generated\ Files/ 42 | 43 | # MSTest test Results 44 | [Tt]est[Rr]esult*/ 45 | [Bb]uild[Ll]og.* 46 | 47 | # NUnit 48 | *.VisualState.xml 49 | TestResult.xml 50 | nunit-*.xml 51 | 52 | # Build Results of an ATL Project 53 | [Dd]ebugPS/ 54 | [Rr]eleasePS/ 55 | dlldata.c 56 | 57 | # Benchmark Results 58 | BenchmarkDotNet.Artifacts/ 59 | 60 | # .NET Core 61 | project.lock.json 62 | project.fragment.lock.json 63 | artifacts/ 64 | 65 | # ASP.NET Scaffolding 66 | ScaffoldingReadMe.txt 67 | 68 | # StyleCop 69 | StyleCopReport.xml 70 | 71 | # Files built by Visual Studio 72 | *_i.c 73 | *_p.c 74 | *_h.h 75 | *.ilk 76 | *.meta 77 | *.obj 78 | *.iobj 79 | *.pch 80 | *.pdb 81 | *.ipdb 82 | *.pgc 83 | *.pgd 84 | *.rsp 85 | *.sbr 86 | *.tlb 87 | *.tli 88 | *.tlh 89 | *.tmp 90 | *.tmp_proj 91 | *_wpftmp.csproj 92 | *.log 93 | *.tlog 94 | *.vspscc 95 | *.vssscc 96 | .builds 97 | *.pidb 98 | *.svclog 99 | *.scc 100 | 101 | # Chutzpah Test files 102 | _Chutzpah* 103 | 104 | # Visual C++ cache files 105 | ipch/ 106 | *.aps 107 | *.ncb 108 | *.opendb 109 | *.opensdf 110 | *.sdf 111 | *.cachefile 112 | *.VC.db 113 | *.VC.VC.opendb 114 | 115 | # Visual Studio profiler 116 | *.psess 117 | *.vsp 118 | *.vspx 119 | *.sap 120 | 121 | # Visual Studio Trace Files 122 | *.e2e 123 | 124 | # TFS 2012 Local Workspace 125 | $tf/ 126 | 127 | # Guidance Automation Toolkit 128 | *.gpState 129 | 130 | # ReSharper is a .NET coding add-in 131 | _ReSharper*/ 132 | *.[Rr]e[Ss]harper 133 | *.DotSettings.user 134 | 135 | # TeamCity is a build add-in 136 | _TeamCity* 137 | 138 | # DotCover is a Code Coverage Tool 139 | *.dotCover 140 | 141 | # AxoCover is a Code Coverage Tool 142 | .axoCover/* 143 | !.axoCover/settings.json 144 | 145 | # Coverlet is a free, cross platform Code Coverage Tool 146 | coverage*.json 147 | coverage*.xml 148 | coverage*.info 149 | 150 | # Visual Studio code coverage results 151 | *.coverage 152 | *.coveragexml 153 | 154 | # NCrunch 155 | _NCrunch_* 156 | .*crunch*.local.xml 157 | nCrunchTemp_* 158 | 159 | # MightyMoose 160 | *.mm.* 161 | AutoTest.Net/ 162 | 163 | # Web workbench (sass) 164 | .sass-cache/ 165 | 166 | # Installshield output folder 167 | [Ee]xpress/ 168 | 169 | # DocProject is a documentation generator add-in 170 | DocProject/buildhelp/ 171 | DocProject/Help/*.HxT 172 | DocProject/Help/*.HxC 173 | DocProject/Help/*.hhc 174 | DocProject/Help/*.hhk 175 | DocProject/Help/*.hhp 176 | DocProject/Help/Html2 177 | DocProject/Help/html 178 | 179 | # Click-Once directory 180 | publish/ 181 | 182 | # Publish Web Output 183 | *.[Pp]ublish.xml 184 | *.azurePubxml 185 | # Note: Comment the next line if you want to checkin your web deploy settings, 186 | # but database connection strings (with potential passwords) will be unencrypted 187 | *.pubxml 188 | *.publishproj 189 | 190 | # Microsoft Azure Web App publish settings. Comment the next line if you want to 191 | # checkin your Azure Web App publish settings, but sensitive information contained 192 | # in these scripts will be unencrypted 193 | PublishScripts/ 194 | 195 | # NuGet Packages 196 | *.nupkg 197 | # NuGet Symbol Packages 198 | *.snupkg 199 | # The packages folder can be ignored because of Package Restore 200 | **/[Pp]ackages/* 201 | # except build/, which is used as an MSBuild target. 202 | !**/[Pp]ackages/build/ 203 | # Uncomment if necessary however generally it will be regenerated when needed 204 | #!**/[Pp]ackages/repositories.config 205 | # NuGet v3's project.json files produces more ignorable files 206 | *.nuget.props 207 | *.nuget.targets 208 | 209 | # Microsoft Azure Build Output 210 | csx/ 211 | *.build.csdef 212 | 213 | # Microsoft Azure Emulator 214 | ecf/ 215 | rcf/ 216 | 217 | # Windows Store app package directories and files 218 | AppPackages/ 219 | BundleArtifacts/ 220 | Package.StoreAssociation.xml 221 | _pkginfo.txt 222 | *.appx 223 | *.appxbundle 224 | *.appxupload 225 | 226 | # Visual Studio cache files 227 | # files ending in .cache can be ignored 228 | *.[Cc]ache 229 | # but keep track of directories ending in .cache 230 | !?*.[Cc]ache/ 231 | 232 | # Others 233 | ClientBin/ 234 | ~$* 235 | *~ 236 | *.dbmdl 237 | *.dbproj.schemaview 238 | *.jfm 239 | *.pfx 240 | *.publishsettings 241 | orleans.codegen.cs 242 | 243 | # Including strong name files can present a security risk 244 | # (https://github.com/github/gitignore/pull/2483#issue-259490424) 245 | #*.snk 246 | 247 | # Since there are multiple workflows, uncomment next line to ignore bower_components 248 | # (https://github.com/github/gitignore/pull/1529#issuecomment-104372622) 249 | #bower_components/ 250 | 251 | # RIA/Silverlight projects 252 | Generated_Code/ 253 | 254 | # Backup & report files from converting an old project file 255 | # to a newer Visual Studio version. Backup files are not needed, 256 | # because we have git ;-) 257 | _UpgradeReport_Files/ 258 | Backup*/ 259 | UpgradeLog*.XML 260 | UpgradeLog*.htm 261 | ServiceFabricBackup/ 262 | *.rptproj.bak 263 | 264 | # SQL Server files 265 | *.mdf 266 | *.ldf 267 | *.ndf 268 | 269 | # Business Intelligence projects 270 | *.rdl.data 271 | *.bim.layout 272 | *.bim_*.settings 273 | *.rptproj.rsuser 274 | *- [Bb]ackup.rdl 275 | *- [Bb]ackup ([0-9]).rdl 276 | *- [Bb]ackup ([0-9][0-9]).rdl 277 | 278 | # Microsoft Fakes 279 | FakesAssemblies/ 280 | 281 | # GhostDoc plugin setting file 282 | *.GhostDoc.xml 283 | 284 | # Node.js Tools for Visual Studio 285 | .ntvs_analysis.dat 286 | node_modules/ 287 | 288 | # Visual Studio 6 build log 289 | *.plg 290 | 291 | # Visual Studio 6 workspace options file 292 | *.opt 293 | 294 | # Visual Studio 6 auto-generated workspace file (contains which files were open etc.) 295 | *.vbw 296 | 297 | # Visual Studio 6 auto-generated project file (contains which files were open etc.) 298 | *.vbp 299 | 300 | # Visual Studio 6 workspace and project file (working project files containing files to include in project) 301 | *.dsw 302 | *.dsp 303 | 304 | # Visual Studio 6 technical files 305 | *.ncb 306 | *.aps 307 | 308 | # Visual Studio LightSwitch build output 309 | **/*.HTMLClient/GeneratedArtifacts 310 | **/*.DesktopClient/GeneratedArtifacts 311 | **/*.DesktopClient/ModelManifest.xml 312 | **/*.Server/GeneratedArtifacts 313 | **/*.Server/ModelManifest.xml 314 | _Pvt_Extensions 315 | 316 | # Paket dependency manager 317 | .paket/paket.exe 318 | paket-files/ 319 | 320 | # FAKE - F# Make 321 | .fake/ 322 | 323 | # CodeRush personal settings 324 | .cr/personal 325 | 326 | # Python Tools for Visual Studio (PTVS) 327 | __pycache__/ 328 | *.pyc 329 | 330 | # Cake - Uncomment if you are using it 331 | # tools/** 332 | # !tools/packages.config 333 | 334 | # Tabs Studio 335 | *.tss 336 | 337 | # Telerik's JustMock configuration file 338 | *.jmconfig 339 | 340 | # BizTalk build output 341 | *.btp.cs 342 | *.btm.cs 343 | *.odx.cs 344 | *.xsd.cs 345 | 346 | # OpenCover UI analysis results 347 | OpenCover/ 348 | 349 | # Azure Stream Analytics local run output 350 | ASALocalRun/ 351 | 352 | # MSBuild Binary and Structured Log 353 | *.binlog 354 | 355 | # NVidia Nsight GPU debugger configuration file 356 | *.nvuser 357 | 358 | # MFractors (Xamarin productivity tool) working folder 359 | .mfractor/ 360 | 361 | # Local History for Visual Studio 362 | .localhistory/ 363 | 364 | # Visual Studio History (VSHistory) files 365 | .vshistory/ 366 | 367 | # BeatPulse healthcheck temp database 368 | healthchecksdb 369 | 370 | # Backup folder for Package Reference Convert tool in Visual Studio 2017 371 | MigrationBackup/ 372 | 373 | # Ionide (cross platform F# VS Code tools) working folder 374 | .ionide/ 375 | 376 | # Fody - auto-generated XML schema 377 | FodyWeavers.xsd 378 | 379 | # VS Code files for those working on multiple tools 380 | .vscode/* 381 | !.vscode/settings.json 382 | !.vscode/tasks.json 383 | !.vscode/launch.json 384 | !.vscode/extensions.json 385 | *.code-workspace 386 | 387 | # Local History for Visual Studio Code 388 | .history/ 389 | 390 | # Windows Installer files from build outputs 391 | *.cab 392 | *.msi 393 | *.msix 394 | *.msm 395 | *.msp 396 | 397 | # JetBrains Rider 398 | *.sln.iml 399 | -------------------------------------------------------------------------------- /src/Blazor.Lottie.Player.Docs.WASM/wwwroot/lottie/BunBun.json: -------------------------------------------------------------------------------- 1 | {"v":"5.5.7","meta":{"g":"LottieFiles AE 0.1.20","a":"","k":"","d":"","tc":""},"fr":60,"ip":0,"op":181,"w":1000,"h":1000,"nm":"Group 6","ddd":0,"assets":[{"id":"comp_0","layers":[{"ddd":0,"ind":1,"ty":4,"nm":"zig zag/Group 6 Outlines 2","parent":2,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[287.528,279.089,0],"ix":2},"a":{"a":0,"k":[201,182,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[-16.836,16.283],[-16.834,16.281],[-16.835,16.281],[-16.837,16.283],[-16.837,16.284],[-16.837,16.285],[-16.837,16.284],[-16.84,16.286],[-16.839,16.286]],"o":[[16.837,-16.283],[16.835,-16.282],[16.835,-16.281],[16.836,-16.284],[16.837,-16.283],[16.838,-16.284],[16.838,-16.283],[16.84,-16.286],[16.839,-16.285],[0,0]],"v":[[-158.483,139.365],[-110.906,121.175],[-91.142,74.236],[-43.569,56.05],[-23.799,9.106],[23.777,-9.085],[43.548,-56.03],[91.126,-74.221],[110.902,-121.17],[158.483,-139.365]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0,0,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":16.879,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[200.681,181.562],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":101,"s":[0]},{"t":129,"s":[100]}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":0,"op":181,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"sausage Outlines 2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.899},"o":{"x":0.333,"y":0},"t":35,"s":[-94.241,1083.395,0],"to":[75.107,-73.726,0],"ti":[-156.414,153.538,0]},{"i":{"x":0,"y":0.533},"o":{"x":0.167,"y":0.668},"t":58,"s":[545.34,447.783,0],"to":[39.458,-38.732,0],"ti":[16.759,-16.662,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.167,"y":0.515},"t":78,"s":[482.032,511.557,0],"to":[-3.788,3.767,0],"ti":[-1.958,1.556,0]},{"t":97,"s":[493.78,502.22,0]}],"ix":2},"a":{"a":0,"k":[283.309,283.309,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[19.23,19.23],[-19.211,19.221],[0,0],[-19.23,-19.231],[19.211,-19.222]],"o":[[-19.231,19.23],[-19.211,-19.221],[0,0],[19.23,-19.231],[19.211,19.22],[0,0]],"v":[[-152.266,221.881],[-221.9,221.881],[-221.9,152.267],[152.267,-221.88],[221.9,-221.88],[221.9,-152.265]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0,0,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":16.879,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[0.917999985639,0.352999997606,0.277999997606,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[283.308,283.308],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":181,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"zig zag/Group 6 Outlines","parent":4,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[287.528,279.089,0],"ix":2},"a":{"a":0,"k":[201,182,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[-16.836,16.283],[-16.834,16.281],[-16.835,16.281],[-16.837,16.283],[-16.837,16.284],[-16.837,16.285],[-16.837,16.284],[-16.84,16.286],[-16.839,16.286]],"o":[[16.837,-16.283],[16.835,-16.282],[16.835,-16.281],[16.836,-16.284],[16.837,-16.283],[16.838,-16.284],[16.838,-16.283],[16.84,-16.286],[16.839,-16.285],[0,0]],"v":[[-158.483,139.365],[-110.906,121.175],[-91.142,74.236],[-43.569,56.05],[-23.799,9.106],[23.777,-9.085],[43.548,-56.03],[91.126,-74.221],[110.902,-121.17],[158.483,-139.365]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0,0,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":16.879,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[200.681,181.562],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":181,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"sausage Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.869,"y":1},"o":{"x":1,"y":0},"t":10,"s":[493.78,502.22,0],"to":[102.647,-100.896,0],"ti":[-102.647,100.896,0]},{"t":35,"s":[1109.663,-103.156,0]}],"ix":2},"a":{"a":0,"k":[283.309,283.309,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[19.23,19.23],[-19.211,19.221],[0,0],[-19.23,-19.231],[19.211,-19.222]],"o":[[-19.231,19.23],[-19.211,-19.221],[0,0],[19.23,-19.231],[19.211,19.22],[0,0]],"v":[[-152.266,221.881],[-221.9,221.881],[-221.9,152.267],[152.267,-221.88],[221.9,-221.88],[221.9,-152.265]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0,0,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":16.879,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[0.917999985639,0.352999997606,0.277999997606,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[283.308,283.308],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":181,"st":0,"bm":0}]}],"layers":[{"ddd":0,"ind":1,"ty":0,"nm":"sausage","refId":"comp_0","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[500,500,0],"ix":2},"a":{"a":0,"k":[500,500,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"hasMask":true,"masksProperties":[{"inv":false,"mode":"s","pt":{"a":0,"k":{"i":[[68,108],[0,0],[0,0],[0,0],[64,49]],"o":[[-15.047,-23.898],[0,0],[0,0],[0,0],[-41.319,-31.635]],"v":[[79,745],[6,788],[-76,1086],[248,1052],[251,917]],"c":true},"ix":1},"o":{"a":0,"k":100,"ix":3},"x":{"a":0,"k":0,"ix":4},"nm":"Mask 1"},{"inv":false,"mode":"s","pt":{"a":0,"k":{"i":[[0,0],[-44.823,-30.774],[-16,-22],[0,0],[0,0],[0,0]],"o":[[0,0],[67,46],[12.9,17.737],[0,0],[0,0],[0,0]],"v":[[776,-65],[761,89],[905,228],[990,201],[1149,184],[1192,-52]],"c":true},"ix":1},"o":{"a":0,"k":100,"ix":3},"x":{"a":0,"k":0,"ix":4},"nm":"Mask 2"}],"w":1000,"h":1000,"ip":0,"op":181,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"bun Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":51,"s":[495.78,504.22,0],"to":[2.833,-2.833,0],"ti":[-0.833,0.833,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":59,"s":[512.78,487.22,0],"to":[0.833,-0.833,0],"ti":[2.833,-2.833,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":75,"s":[500.78,499.22,0],"to":[-2.833,2.833,0],"ti":[0.833,-0.833,0]},{"t":85,"s":[495.78,504.22,0]}],"ix":2},"a":{"a":0,"k":[283.309,283.309,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[-19.212,19.23],[0,0],[19.212,19.22],[0,0]],"o":[[0,0],[19.23,19.23],[0,0],[19.212,-19.23],[0,0],[0,0]],"v":[[-217.598,129.445],[-175.805,170.497],[-106.189,170.497],[170.516,-106.172],[170.516,-175.794],[136.283,-209.918]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0,0,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":16.879,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[334.692,334.692],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[19.229,-19.231],[0,0],[-19.211,-19.221],[0,0]],"o":[[0,0],[-19.212,-19.231],[0,0],[-19.23,19.231],[0,0],[0,0]],"v":[[239.409,-107.256],[175.804,-170.497],[106.19,-170.497],[-170.498,106.171],[-170.516,175.794],[-116.445,229.598]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0,0,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":16.879,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[231.925,231.925],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 2","np":2,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[19.229,-19.231],[0,0],[-19.211,-19.221],[0,0],[-19.211,19.231],[0,0],[19.211,19.22]],"o":[[-19.212,-19.231],[0,0],[-19.23,19.231],[0,0],[19.23,19.231],[0,0],[19.211,-19.231],[0,0]],"v":[[124.421,-221.881],[54.807,-221.881],[-221.881,54.787],[-221.9,124.411],[-124.42,221.88],[-54.807,221.88],[221.9,-54.788],[221.9,-124.411]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.957000014361,0.666999966491,0.255000005984,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[283.309,283.309],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 3","np":2,"cix":2,"bm":0,"ix":3,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":181,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"bg Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[500,500,0],"ix":2},"a":{"a":0,"k":[485.516,485.516,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-268.005,0],[0,-268.005],[268.005,0],[0,268.005]],"o":[[268.005,0],[0,268.005],[-268.005,0],[0,-268.005]],"v":[[0,-485.266],[485.266,0],[0,485.266],[-485.266,0]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.411999990426,0.885999971278,0.616000007181,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[485.516,485.516],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":181,"st":0,"bm":0}],"markers":[]} -------------------------------------------------------------------------------- /src/Blazor.Lottie.Player/Component/LottiePlayerModule.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.AspNetCore.Components; 2 | using Microsoft.JSInterop; 3 | 4 | namespace Blazor.Lottie.Player; 5 | /// 6 | /// Provides functionality to control and manage a Lottie animation player in a Blazor application. 7 | /// 8 | /// 9 | /// This class interacts with a JavaScript module to initialize, play, pause, and stop Lottie animations 10 | /// within a specified HTML element. It also implements asynchronous disposal to clean up resources. 11 | /// WARNING: This class does not load lottie javascript files, you must load those yourself or use the component. 12 | /// 13 | public class LottiePlayerModule : IAsyncDisposable 14 | { 15 | internal readonly IJSRuntime _js; 16 | internal IJSObjectReference? _lottieAnimationRef; 17 | internal readonly ElementReference _elementRef; 18 | internal DotNetObjectReference? _dotNetReference; 19 | internal bool _isDisposing; 20 | 21 | /// 22 | /// Indicates whether the module can execute javascript based on its current state. 23 | /// 24 | internal bool CanExecute => !(_isDisposing || _js is null || _lottieAnimationRef is null); 25 | 26 | /// 27 | /// The constructor for the LottiePlayerModule class. 28 | /// 29 | /// An active IJSRuntime 30 | /// The reference to the HTML element that the Lottie animation will be rendered in. 31 | public LottiePlayerModule(IJSRuntime js, ElementReference elementRef) 32 | { 33 | _dotNetReference = DotNetObjectReference.Create(this); 34 | _js = js; 35 | _elementRef = elementRef; 36 | } 37 | 38 | /// 39 | /// The current time/frame as reported back after EventFrame events. 40 | /// 41 | public double CurrentFrame { get; private set; } = 0.0; 42 | 43 | /// 44 | /// The total number of frames in the animation as returned by AnimationReady 45 | /// 46 | public double TotalFrames { get; private set; } = 0.0; 47 | 48 | /// 49 | /// Initializes the Lottie player with the specified playback options. 50 | /// 51 | /// This method imports the required JavaScript module and invokes the initialization logic for 52 | /// the Lottie player. It also ensures that the instance is not disposing and that the JavaScript runtime is available before 53 | /// loading the module. 54 | /// The playback options to configure the Lottie player. 55 | /// if the initialization is successful; otherwise, . 56 | public async Task InitializeAsync(LottiePlaybackOptions lottiePlaybackOptions) 57 | { 58 | if (_isDisposing || _js is null) return false; 59 | var _module = await _js.InvokeAsync("import", "./_content/Blazor.Lottie.Player/lottiePlayerModule.js"); 60 | _lottieAnimationRef = await _module!.InvokeAsync("initialize", _dotNetReference, _elementRef, lottiePlaybackOptions); 61 | if (lottiePlaybackOptions.AutoPlay) 62 | { 63 | await PlayAsync(); 64 | } 65 | return _lottieAnimationRef != null; 66 | } 67 | 68 | #region Actions 69 | 70 | /// 71 | /// Plays the Lottie animation. 72 | /// 73 | public ValueTask PlayAsync() 74 | { 75 | if (!CanExecute) return ValueTask.CompletedTask; 76 | return _lottieAnimationRef!.InvokeVoidAsync("play"); 77 | } 78 | 79 | /// 80 | /// Pauses the currently playing Lottie animation. 81 | /// 82 | public ValueTask PauseAsync() 83 | { 84 | if (!CanExecute) return ValueTask.CompletedTask; 85 | return _lottieAnimationRef!.InvokeVoidAsync("pause"); 86 | } 87 | 88 | /// 89 | /// Stops the currently playing Lottie animation. 90 | /// 91 | public ValueTask StopAsync() 92 | { 93 | if (!CanExecute) return ValueTask.CompletedTask; 94 | return _lottieAnimationRef!.InvokeVoidAsync("stop"); 95 | } 96 | 97 | /// 98 | /// Moves the animation to the specified frame and starts playback from that point. 99 | /// 100 | /// The frame number to move the animation to. Must be a non-negative value. 101 | /// A boolean value indicating whether to force the animation to move to the specified frame even if it is already 102 | /// playing. to force the action; otherwise, . 103 | public ValueTask GoToAndPlay(double frame, bool force = false) 104 | { 105 | if (!CanExecute) return ValueTask.CompletedTask; 106 | return _lottieAnimationRef!.InvokeVoidAsync("goToAndPlay", frame, force); 107 | } 108 | 109 | /// 110 | /// Moves the animation to the specified frame and stops playback at that point. 111 | /// 112 | /// The frame number to move the animation to. Must be a non-negative value. 113 | /// A boolean value indicating whether to force the animation to move to the specified frame even if it is already 114 | /// playing. to force the action; otherwise, . 115 | public ValueTask GoToAndStop(double frame, bool force = false) 116 | { 117 | if (!CanExecute) return ValueTask.CompletedTask; 118 | return _lottieAnimationRef!.InvokeVoidAsync("goToAndStop", frame, force); 119 | } 120 | 121 | /// 122 | /// Asynchronously sets the speed for the associated animation. 1 is normal speed, 2 is double speed, 0.5 is half speed, etc. 123 | /// 124 | /// The speed value to set. Must be a non-negative number. 125 | public ValueTask SetSpeedAsync(double speed) 126 | { 127 | if (!CanExecute || speed < 0) return ValueTask.CompletedTask; 128 | return _lottieAnimationRef!.InvokeVoidAsync("setSpeed", speed); 129 | } 130 | 131 | /// 132 | /// Asynchronously sets the playback direction for the associated animation. 133 | /// 134 | /// The direction to play the animation. It can be forward or backward. 135 | public ValueTask SetDirectionAsync(LottieAnimationDirection direction) 136 | { 137 | if (!CanExecute) return ValueTask.CompletedTask; 138 | var dir = (int)direction; 139 | return _lottieAnimationRef!.InvokeVoidAsync("setDirection", dir); 140 | } 141 | 142 | /// 143 | /// Executes javascript directly from the Lottie animation reference. So you can call any method that is available on the Lottie animation object. 144 | /// 145 | /// 146 | /// 147 | /// 148 | public ValueTask ExecuteActionAsync(string action, params object?[]? args) 149 | { 150 | if (!CanExecute) return ValueTask.CompletedTask; 151 | return _lottieAnimationRef!.InvokeVoidAsync(action, args); 152 | } 153 | 154 | #endregion 155 | 156 | #region Events 157 | 158 | /// 159 | /// Triggers when the Lottie animation is ready to be played and loaded by the DOM. 160 | /// 161 | public event EventHandler? OnAnimationReady; 162 | 163 | /// 164 | /// Triggers when the Lottie animation has fully loaded in the DOM. 165 | /// 166 | public event EventHandler? OnDOMLoaded; 167 | 168 | /// 169 | /// Triggers when the Lottie animation enters a new frame. 170 | /// 171 | public event EventHandler? OnEnterFrame; 172 | 173 | /// 174 | /// Triggers when the Lottie animation completes playing. 175 | /// 176 | /// 177 | /// If an animation is set to loop indefinitely, this event will not be triggered. 178 | /// 179 | public event EventHandler? OnComplete; 180 | 181 | /// 182 | /// Triggers when the Lottie animation completes a loop. 183 | /// 184 | public event EventHandler? OnLoopComplete; 185 | 186 | /// 187 | /// Invokes the event when the animation is ready. (DOMLoaded) 188 | /// 189 | [JSInvokable] 190 | public Task AnimationReadyEvent(LottiePlayerLoadedEventArgs args) 191 | { 192 | if (!CanExecute) return Task.CompletedTask; 193 | TotalFrames = args.TotalFrames; 194 | OnAnimationReady?.Invoke(this, args); 195 | return Task.CompletedTask; 196 | } 197 | 198 | /// 199 | /// Invokes the event when the DOM is fully loaded with the Lottie animation. 200 | /// 201 | /// 202 | [JSInvokable] 203 | public Task DOMLoadedEvent(LottiePlayerLoadedEventArgs args) 204 | { 205 | if (!CanExecute) return Task.CompletedTask; 206 | 207 | OnDOMLoaded?.Invoke(this, args); 208 | return Task.CompletedTask; 209 | } 210 | 211 | /// 212 | /// Invokes the event when the animation completes. 213 | /// 214 | /// 215 | /// This event is triggered when the animation has finished playing all frames and loops, if applicable. If it's set to loop 216 | /// indefinitely, this event will never be triggered. 217 | /// 218 | [JSInvokable] 219 | public Task CompleteEvent() 220 | { 221 | if (!CanExecute) return Task.CompletedTask; 222 | 223 | OnComplete?.Invoke(this, true); 224 | return Task.CompletedTask; 225 | } 226 | 227 | /// 228 | /// Invokes the event when a loop completes. 229 | /// 230 | [JSInvokable] 231 | public Task LoopCompleteEvent() 232 | { 233 | if (!CanExecute) return Task.CompletedTask; 234 | 235 | OnLoopComplete?.Invoke(this, true); 236 | return Task.CompletedTask; 237 | } 238 | 239 | /// 240 | /// Invokes the event with the specified arguments. 241 | /// 242 | [JSInvokable] 243 | public Task EnterFrameEvent(LottiePlayerEventFrameArgs args) 244 | { 245 | if (!CanExecute) return Task.CompletedTask; 246 | CurrentFrame = args.CurrentTime; 247 | OnEnterFrame?.Invoke(this, args); 248 | return Task.CompletedTask; 249 | } 250 | 251 | #endregion 252 | 253 | /// 254 | /// Disposes the Lottie player module and cleans up resources. 255 | /// 256 | public async ValueTask DisposeAsync() 257 | { 258 | _isDisposing = true; 259 | if (_lottieAnimationRef is not null) 260 | { 261 | try 262 | { 263 | await _lottieAnimationRef.InvokeVoidAsync("destroy"); 264 | } 265 | catch (JSException) 266 | { 267 | // Ignore JS exceptions during dispose, as the module may already be disposed. 268 | } 269 | await _lottieAnimationRef.DisposeAsync(); 270 | _lottieAnimationRef = null; 271 | } 272 | if (_dotNetReference is not null) 273 | { 274 | _dotNetReference.Dispose(); 275 | _dotNetReference = null; 276 | } 277 | GC.SuppressFinalize(this); 278 | } 279 | } 280 | -------------------------------------------------------------------------------- /tests/Blazor.Lottie.Player.UnitTests/LottieTests.cs: -------------------------------------------------------------------------------- 1 | using System.Reflection; 2 | using AwesomeAssertions; 3 | using Bunit; 4 | using Microsoft.JSInterop; 5 | using Moq; 6 | 7 | namespace Blazor.Lottie.Player.UnitTests 8 | { 9 | [TestFixture] 10 | public class LottieTests : BunitTest 11 | { 12 | private const string LottieSrc = "https://raw.githubusercontent.com/MudXtra/LottiePlayer/refs/heads/main/src/Blazor.Lottie.Player.Docs.WASM/wwwroot/lottie/newAnimation.json"; 13 | 14 | [SetUp] 15 | public override void Setup() 16 | { 17 | base.Setup(); 18 | 19 | // Setup the import call to return a mock module 20 | var moduleMock = Context.JSInterop.SetupModule("./_content/Blazor.Lottie.Player/loadLottieWeb.js"); 21 | // Setup the initialize call to return true 22 | moduleMock.Setup("initialize", _ => true).SetResult(true); 23 | 24 | var lottieModuleMock = Context.JSInterop.SetupModule("./_content/Blazor.Lottie.Player/lottiePlayerModule.js"); 25 | var animationModuleMock = new Mock(); 26 | lottieModuleMock.SetupVoid("initialize"); 27 | 28 | lottieModuleMock.Setup("play", _ => true).SetResult(true); 29 | lottieModuleMock.Setup("pause", _ => true).SetResult(true); 30 | lottieModuleMock.Setup("stop", _ => true).SetResult(true); 31 | lottieModuleMock.Setup("destroy", _ => true).SetResult(true); 32 | lottieModuleMock.Setup("setSpeed", _ => true).SetResult(true); 33 | lottieModuleMock.Setup("setDirection", _ => true).SetResult(true); 34 | } 35 | 36 | [Test] 37 | public async Task LottieComponentRendersCorrectly() 38 | { 39 | // Arrange 40 | var comp = Context.RenderComponent(parameters => parameters 41 | .Add(p => p.Src, LottieSrc) 42 | .Add(p => p.Class, "test-class") 43 | .Add(p => p.Style, "width: 100%; height: 100%;") 44 | ); 45 | // Act 46 | var element = comp.Find($"#{comp.Instance.ElementId}"); 47 | element.Should().NotBeNull(); 48 | 49 | // Assert Defaults 50 | comp.Instance.AutoPlay.Should().BeTrue(); 51 | comp.Instance.Loop.Should().BeTrue(); 52 | comp.Instance.LoopCount.Should().Be(0); 53 | comp.Instance.AnimationType.Should().Be(LottieAnimationType.Svg); 54 | comp.Instance.AnimationSpeed.Should().Be(1.0); 55 | comp.Instance.AnimationDirection.Should().Be(LottieAnimationDirection.Forward); 56 | var options = comp.Instance.AnimationOptions; 57 | options.Should().NotBeNull(); 58 | options.LottieSourceJs.Should().Be("https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.13.0/lottie.min.js"); 59 | options.AnimationQuality.Should().Be(LottieAnimationQuality.High); 60 | options.SmoothFrameInterpolation.Should().BeTrue(); 61 | 62 | // get and invoke private void HandleAnimationReady(object? sender, LottiePlayerLoadedEventArgs args) 63 | var method = typeof(LottiePlayer).GetMethod("HandleAnimationReady", BindingFlags.NonPublic | BindingFlags.Instance); 64 | method.Should().NotBeNull(); 65 | // Invoke the method with a mock LottiePlayerLoadedEventArgs 66 | var args = new LottiePlayerLoadedEventArgs 67 | { 68 | ElementId = comp.Instance.ElementId, 69 | CurrentFrame = 0.0, 70 | TotalFrames = 100.0, 71 | }; 72 | await comp.InvokeAsync(() => method.Invoke(comp.Instance, [this, args])); 73 | 74 | comp.Instance.IsAnimationLoaded.Should().BeTrue(); 75 | comp.Instance.IsAnimationPaused.Should().Be(!comp.Instance.AutoPlay); 76 | comp.Instance.CurrentAnimationFrame.Should().Be(0.0); 77 | } 78 | 79 | [Test] 80 | public void LottiePlayer_RendersUserAttributes() 81 | { 82 | var comp = Context.RenderComponent(parameters => parameters 83 | .Add(p => p.Src, "https://example.com/lottie.json") 84 | ); 85 | var element = comp.Find($"#{comp.Instance.ElementId}"); 86 | 87 | // Check default attributes 88 | element.HasAttribute("data-test").Should().BeFalse(); 89 | element.GetAttribute("role").Should().Be("animation"); 90 | element.GetAttribute("aria-label").Should().Be("Lottie Animation"); 91 | 92 | comp.SetParametersAndRender(parameters => parameters 93 | .Add(p => p.UserAttributes, new Dictionary 94 | { 95 | { "data-test", "abc" }, 96 | { "aria-label", "lottie" } 97 | }) 98 | ); 99 | 100 | element = comp.Find($"#{comp.Instance.ElementId}"); 101 | 102 | element.HasAttribute("data-test").Should().BeTrue(); 103 | element.GetAttribute("data-test").Should().Be("abc"); 104 | element.GetAttribute("aria-label").Should().Be("lottie"); 105 | element.GetAttribute("role").Should().Be("animation"); 106 | } 107 | 108 | [Test] 109 | public void LottiePlayer_ClassnameAndStylename_NullOrWhitespace() 110 | { 111 | var comp = Context.RenderComponent(parameters => parameters 112 | .Add(p => p.Src, "https://example.com/lottie.json") 113 | .Add(p => p.Class, null) 114 | .Add(p => p.Style, " ") 115 | ); 116 | var element = comp.Find($"#{comp.Instance.ElementId}"); 117 | element.ClassList.Should().Contain("blazor-lottie-player"); 118 | element.GetAttribute("style").Should().BeNullOrWhiteSpace(); 119 | } 120 | 121 | [Test] 122 | public void LottiePlayer_PublicMethods_ThrowIfModuleNull() 123 | { 124 | var comp = Context.RenderComponent(parameters => parameters 125 | .Add(p => p.Src, "https://example.com/lottie.json") 126 | ); 127 | // Simulate module disposal 128 | comp.Instance.LottiePlayerModule.Should().NotBeNull(); 129 | comp.InvokeAsync(() => comp.Instance.DisposeAsync()); 130 | comp.Instance.LottiePlayerModule.Should().BeNull(); 131 | 132 | Assert.ThrowsAsync(async () => await comp.Instance.PlayAnimationAsync()); 133 | Assert.ThrowsAsync(async () => await comp.Instance.PauseAnimationAsync()); 134 | Assert.ThrowsAsync(async () => await comp.Instance.StopAnimationAsync()); 135 | Assert.ThrowsAsync(async () => await comp.Instance.SetSpeedAsync(1.0)); 136 | Assert.ThrowsAsync(async () => await comp.Instance.SetDirectionAsync(LottieAnimationDirection.Forward)); 137 | } 138 | 139 | [Test] 140 | public void LottiePlayer_ThrowsIfJsModuleFailsToLoad() 141 | { 142 | var moduleMock = Context.JSInterop.SetupModule("./_content/Blazor.Lottie.Player/loadLottieWeb.js"); 143 | moduleMock.Setup("initialize", _ => false); 144 | 145 | var ex = Assert.Throws(() => 146 | Context.RenderComponent(parameters => parameters 147 | .Add(p => p.Src, "https://example.com/lottie.json") 148 | ) 149 | ); 150 | ex.Message.Should().Contain("Failed to initialize Lottie Web Player Module"); 151 | } 152 | 153 | 154 | 155 | [Test] 156 | public void LottiePlayer_InitShouldReinitReasonably() 157 | { 158 | var comp = Context.RenderComponent(parameters => parameters 159 | .Add(p => p.Src, LottieSrc) 160 | ); 161 | 162 | var field = typeof(LottiePlayer).GetField("_initCount", BindingFlags.NonPublic | BindingFlags.Instance); 163 | field.Should().NotBeNull(); 164 | var initCount = (int)field.GetValue(comp.Instance)!; 165 | initCount.Should().Be(1); 166 | 167 | // Changing these parameters should not reinitialize 168 | comp.SetParametersAndRender(parameters => parameters 169 | .Add(p => p.Class, "test-class") 170 | .Add(p => p.Style, "width: 100%; height: 100%;") 171 | .Add(p => p.UserAttributes, new Dictionary 172 | { 173 | { "data-test", "test-value" } 174 | }) 175 | ); 176 | initCount = (int)field.GetValue(comp.Instance)!; 177 | initCount.Should().Be(1); 178 | 179 | // Change any of these parameters should reinitialize but only once per parameter submission 180 | comp.SetParametersAndRender(parameters => parameters 181 | .Add(p => p.Src, "https://assets2.lottiefiles.com/packages/lf20_8j3q1k.json") 182 | .Add(p => p.AutoPlay, false) 183 | .Add(p => p.Loop, false) 184 | .Add(p => p.LoopCount, 5) 185 | .Add(p => p.AnimationType, LottieAnimationType.Canvas) 186 | .Add(p => p.AnimationSpeed, 0.5) 187 | .Add(p => p.AnimationDirection, LottieAnimationDirection.Reverse) 188 | ); 189 | initCount = (int)field.GetValue(comp.Instance)!; 190 | initCount.Should().Be(2); 191 | 192 | // Change a single parameter on the list should reinitialize 193 | comp.SetParametersAndRender(parameters => parameters 194 | .Add(p => p.AnimationType, LottieAnimationType.Html) 195 | ); 196 | initCount = (int)field.GetValue(comp.Instance)!; 197 | initCount.Should().Be(3); 198 | 199 | var options = new LottieAnimationOptions 200 | { 201 | AnimationQuality = LottieAnimationQuality.Medium 202 | }; 203 | comp.Instance.AnimationOptions.Should().NotBe(options.AnimationQuality); 204 | 205 | // Change a options class should reinitialize 206 | comp.SetParametersAndRender(parameters => parameters 207 | .Add(p => p.AnimationOptions, options) 208 | ); 209 | initCount = (int)field.GetValue(comp.Instance)!; 210 | initCount.Should().Be(4); 211 | } 212 | 213 | [Test] 214 | public async Task LottiePlayer_PublicMethods() 215 | { 216 | var comp = Context.RenderComponent(parameters => parameters 217 | .Add(p => p.Src, LottieSrc) 218 | ); 219 | // Check public methods 220 | comp.Instance.AutoPlay.Should().BeTrue(); 221 | comp.Instance.IsAnimationLoaded.Should().BeTrue(); 222 | comp.Instance.IsAnimationPaused.Should().BeFalse(); 223 | 224 | await comp.InvokeAsync(async () => await comp.Instance.PauseAnimationAsync()); 225 | comp.Instance.IsAnimationPaused.Should().BeTrue(); 226 | 227 | await comp.InvokeAsync(async () => await comp.Instance.PlayAnimationAsync()); 228 | comp.Instance.IsAnimationPaused.Should().BeFalse(); 229 | 230 | await comp.InvokeAsync(async () => await comp.Instance.SetSpeedAsync(2.0)); 231 | 232 | await comp.InvokeAsync(async () => await comp.Instance.SetDirectionAsync(LottieAnimationDirection.Reverse)); 233 | 234 | await comp.InvokeAsync(async () => await comp.Instance.StopAnimationAsync()); 235 | comp.Instance.IsAnimationPaused.Should().BeFalse(); 236 | comp.Instance.IsAnimationStopped.Should().BeTrue(); 237 | } 238 | 239 | [Test] 240 | public void LottiePlayer_Events() 241 | { 242 | bool handledom = false, 243 | handleenterframe = false, 244 | handlecomplete = false, 245 | handleloopcomplete = false, 246 | handleanimationready = false; 247 | 248 | var comp = Context.RenderComponent(parameters => parameters 249 | .Add(p => p.Src, LottieSrc) 250 | .Add(p => p.DOMLoaded, (() => handledom = true)) 251 | .Add(p => p.AnimationReady, () => handleenterframe = true) 252 | .Add(p => p.AnimationCompleted, (isLooping) => handlecomplete = true) 253 | .Add(p => p.AnimationLoopCompleted, (isLooping) => handleloopcomplete = true) 254 | .Add(p => p.CurrentFrameChanged, (args) => handleanimationready = true) 255 | ); 256 | // invoke the methods that invoke the events 257 | var domloadedMethod = typeof(LottiePlayer).GetMethod("HandleDOMLoaded", BindingFlags.NonPublic | BindingFlags.Instance); 258 | comp.InvokeAsync(() => domloadedMethod!.Invoke(comp.Instance, [this, new LottiePlayerLoadedEventArgs()])); 259 | var animationReadyMethod = typeof(LottiePlayer).GetMethod("HandleAnimationReady", BindingFlags.NonPublic | BindingFlags.Instance); 260 | comp.InvokeAsync(() => animationReadyMethod!.Invoke(comp.Instance, [this, new LottiePlayerLoadedEventArgs()])); 261 | var animationCompletedMethod = typeof(LottiePlayer).GetMethod("HandleAnimationCompleted", BindingFlags.NonPublic | BindingFlags.Instance); 262 | comp.InvokeAsync(() => animationCompletedMethod!.Invoke(comp.Instance, [this, true])); 263 | var loopCompleteMethod = typeof(LottiePlayer).GetMethod("HandleAnimationLoopCompleted", BindingFlags.NonPublic | BindingFlags.Instance); 264 | comp.InvokeAsync(() => loopCompleteMethod!.Invoke(comp.Instance, [this, true])); 265 | var currentFrameChangedMethod = typeof(LottiePlayer).GetMethod("HandleCurrentFrameChanged", BindingFlags.NonPublic | BindingFlags.Instance); 266 | comp.InvokeAsync(() => currentFrameChangedMethod!.Invoke(comp.Instance, [this, new LottiePlayerEventFrameArgs()])); 267 | 268 | // Check event invocations 269 | handledom.Should().BeTrue(); 270 | handleenterframe.Should().BeTrue(); 271 | handlecomplete.Should().BeTrue(); 272 | handleloopcomplete.Should().BeTrue(); 273 | handleanimationready.Should().BeTrue(); 274 | } 275 | 276 | #pragma warning disable CS8619 277 | private static IEnumerable CurrentFrameChangeFuncCases() 278 | { 279 | yield return new object[] { (Func)(frame => frame % 10 == 0), 10 }; 280 | yield return new object?[] { null, 5 }; 281 | } 282 | #pragma warning restore CS8619 283 | 284 | [Test, TestCaseSource(nameof(CurrentFrameChangeFuncCases))] 285 | public void Lottie_CurrentFrameChanged(object? funcObj, int maxFrames) 286 | { 287 | var currentFrameChangeFunc = funcObj as Func; 288 | var frameChangedCount = 0; 289 | 290 | var comp = Context.RenderComponent(parameters => parameters 291 | .Add(p => p.Src, "https://assets2.lottiefiles.com/packages/lf20_8j3q1k.json") 292 | .Add(p => p.CurrentFrameChangeFunc, currentFrameChangeFunc) 293 | .Add(p => p.CurrentFrameChanged, (Action)(args => 294 | { 295 | frameChangedCount++; 296 | })) 297 | ); 298 | 299 | if (currentFrameChangeFunc != null) 300 | { 301 | for (int frame = 0; frame < maxFrames; frame++) 302 | { 303 | if (currentFrameChangeFunc(frame)) 304 | { 305 | // Your logic here 306 | } 307 | } 308 | } 309 | } 310 | 311 | [Test] 312 | public void LottiePlayer_CurrentFrameChangeFunc_False_DoesNotInvokeEvent() 313 | { 314 | bool eventInvoked = false; 315 | var comp = Context.RenderComponent(parameters => parameters 316 | .Add(p => p.Src, "https://example.com/lottie.json") 317 | .Add(p => p.CurrentFrameChangeFunc, (Func)(_ => false)) 318 | .Add(p => p.CurrentFrameChanged, (Action)(_ => eventInvoked = true)) 319 | ); 320 | // Use reflection to invoke the private handler 321 | var method = typeof(LottiePlayer).GetMethod("HandleCurrentFrameChanged", BindingFlags.NonPublic | BindingFlags.Instance); 322 | method!.Invoke(comp.Instance, [null, new LottiePlayerEventFrameArgs { CurrentTime = 42.0 }]); 323 | eventInvoked.Should().BeFalse(); 324 | } 325 | 326 | [Test] 327 | public async Task LottiePlayer_DisposeAsync_Idempotent() 328 | { 329 | var comp = Context.RenderComponent(parameters => parameters 330 | .Add(p => p.Src, "https://example.com/lottie.json") 331 | ); 332 | await comp.Instance.DisposeAsync(); 333 | // Should not throw or double-dispose 334 | await comp.Instance.DisposeAsync(); 335 | } 336 | 337 | [Test] 338 | public async Task LottiePlayer_InitCount_AfterDisposeAndReinit() 339 | { 340 | var comp = Context.RenderComponent(parameters => parameters 341 | .Add(p => p.Src, "https://example.com/lottie.json") 342 | ); 343 | var field = typeof(LottiePlayer).GetField("_initCount", BindingFlags.NonPublic | BindingFlags.Instance); 344 | int initCount = (int)field!.GetValue(comp.Instance)!; 345 | await comp.Instance.DisposeAsync(); 346 | // Re-initialize by changing a key parameter 347 | comp.SetParametersAndRender(p => p.Add(x => x.Src, "https://example.com/other.json")); 348 | int newInitCount = (int)field.GetValue(comp.Instance)!; 349 | newInitCount.Should().Be(initCount + 1); 350 | } 351 | } 352 | } 353 | -------------------------------------------------------------------------------- /src/Blazor.Lottie.Player/Component/LottiePlayer.razor.cs: -------------------------------------------------------------------------------- 1 | using Blazor.Lottie.Player.Extensions; 2 | using Microsoft.AspNetCore.Components; 3 | using Microsoft.JSInterop; 4 | 5 | namespace Blazor.Lottie.Player; 6 | /// 7 | /// A Blazor component for rendering and controlling Lottie animations using BodyMovin. 8 | /// 9 | /// The component provides a flexible way to integrate Lottie animations into 10 | /// Blazor applications. It supports various customization options, including animation source, playback settings, and 11 | /// event callbacks for animation lifecycle events. 12 | public partial class LottiePlayer : ComponentBase, IAsyncDisposable 13 | { 14 | #region Private Variables 15 | 16 | private ElementReference ElementRef { get; set; } = default!; 17 | /// 18 | /// Represents the unique identifier for a Lottie element's surrounding div. 19 | /// 20 | public readonly string ElementId = Identifier.Create("lottie-"); 21 | private string? _failMessage = null; 22 | private bool _lottieLoaded = false; 23 | /// 24 | /// The module used to control Lottie Player functionality. 25 | /// 26 | public LottiePlayerModule? LottiePlayerModule { get; private set; } 27 | private int _initCount = 0; 28 | 29 | /// 30 | /// The class list for the surrounding div, which includes the base class and the Blazor Lottie Player class. 31 | /// 32 | protected string Classname 33 | => string.IsNullOrWhiteSpace(Class) 34 | ? "blazor-lottie-player" 35 | : $"blazor-lottie-player {Class}"; 36 | 37 | /// 38 | /// The style string for the surrounding div, which includes the base style and any user-defined styles. 39 | /// 40 | protected string? Stylename 41 | => string.IsNullOrWhiteSpace(Style) ? null : Style; 42 | 43 | 44 | /// 45 | /// Returns the merged user attributes with sensible defaults, allowing user overrides. 46 | /// 47 | protected IReadOnlyDictionary MergedUserAttributes 48 | { 49 | get 50 | { 51 | var dict = UserAttributes != null 52 | ? new Dictionary(UserAttributes) 53 | : []; 54 | 55 | dict.TryAdd("aria-label", "Lottie Animation"); 56 | dict.TryAdd("role", "animation"); 57 | return dict; 58 | } 59 | } 60 | 61 | #endregion 62 | 63 | #region Injected Services 64 | 65 | [Inject] 66 | private IJSRuntime JSRuntime { get; set; } = default!; 67 | 68 | #endregion 69 | 70 | #region Parameters 71 | 72 | /// 73 | /// The CSS class name(s) to apply to the container. 74 | /// 75 | [Parameter] 76 | public string? Class { get; set; } 77 | 78 | /// 79 | /// The inline CSS styles to apply to the component. 80 | /// 81 | [Parameter] 82 | public string? Style { get; set; } 83 | 84 | /// 85 | /// Sets a collection of user-defined HTML attributes represented as key-value pairs. 86 | /// 87 | /// 88 | /// This property is typically used to provide additional HTML attributes during 89 | /// rendering such as ARIA accessibility tags, data attributes, or any other custom 90 | /// HTML attributes that you want to apply to the component. 91 | /// 92 | [Parameter(CaptureUnmatchedValues = true)] 93 | public Dictionary? UserAttributes { get; set; } 94 | 95 | /// 96 | /// Gets or sets the source or relative URL for the component's content. 97 | /// 98 | /// 99 | /// *Required* e.g.
100 | /// Src="https://mudxtra.github.io/LottiePlayer/newAnimation.json"
101 | /// Src="./wwwroot/lottie/newAnimation.json" 102 | /// 103 | [Parameter, EditorRequired] 104 | public string Src { get; set; } = default!; 105 | 106 | /// 107 | /// A value indicating whether the media should automatically start playing when loaded. If set to 108 | /// false, the media will not start playing until AnimationPaused is set to false. 109 | /// 110 | [Parameter] 111 | public bool AutoPlay { get; set; } = true; 112 | 113 | /// 114 | /// Gets or sets whether the animation should loop. 115 | /// 116 | [Parameter] 117 | public bool Loop { get; set; } = true; 118 | 119 | /// 120 | /// Gets or sets the number of times a loop should occur. Requires to be true. 121 | /// 122 | /// 123 | /// Default is 0 (infinite loop). 124 | /// 125 | [Parameter] 126 | public int LoopCount { get; set; } = 0; 127 | 128 | /// 129 | /// Gets or sets the type of animation to be used for rendering the Lottie animation. 130 | /// 131 | /// 132 | /// Defaults to . 133 | /// 134 | [Parameter] 135 | public LottieAnimationType AnimationType { get; set; } = LottieAnimationType.Svg; 136 | 137 | /// 138 | /// Gets or sets the direction in which the Lottie animation plays. 139 | /// 140 | /// 141 | /// Defaults to .
142 | /// Changing this property after initialization will not change the playback direction of the animation, use 143 | /// 144 | [Parameter] 145 | public LottieAnimationDirection AnimationDirection { get; set; } = LottieAnimationDirection.Forward; 146 | 147 | /// 148 | /// Gets or sets the speed of the animation. 149 | /// 150 | /// 151 | /// Defaults to 1.0 (normal speed).
152 | /// Changing this property after initialization will not change the speed of the animation, use 153 | /// 154 | [Parameter] 155 | public double AnimationSpeed { get; set; } = 1.0; 156 | 157 | /// 158 | /// Called when the current frame changes, with custom filtering logic 159 | /// 160 | /// 161 | /// The function receives the current frame number and should return true if the event should be raised. 162 | /// This allows for custom throttling logic (e.g., only every 10th frame, only on specific frames, etc.) 163 | ///
Warning: Frame updates could happen as frequently as 30-60 times per second. 164 | ///
Defaults to null. is only raised if something is attached to the handler. 165 | ///
Example: frame => frame % 10 == 0 will raise the event every 10th frame. 166 | /// 167 | [Parameter] public Func? CurrentFrameChangeFunc { get; set; } 168 | 169 | /// 170 | /// Called when the current frame changes (only when returns true) 171 | /// 172 | [Parameter] public EventCallback CurrentFrameChanged { get; set; } 173 | 174 | /// 175 | /// Called when the Lottie player is initialized and the DOM is ready. 176 | /// 177 | [Parameter] 178 | public EventCallback DOMLoaded { get; set; } 179 | 180 | /// 181 | /// Called when the animation is fully loaded and ready for playback. 182 | /// 183 | [Parameter] 184 | public EventCallback AnimationReady { get; set; } 185 | 186 | /// 187 | /// Called when the animation completes. 188 | /// 189 | [Parameter] 190 | public EventCallback AnimationCompleted { get; set; } 191 | 192 | /// 193 | /// Called when an animation loop completes. 194 | /// 195 | [Parameter] 196 | public EventCallback AnimationLoopCompleted { get; set; } 197 | 198 | /// 199 | /// Additional Less Used Animation Options. 200 | /// 201 | /// Refer to for defaults. 202 | [Parameter] 203 | public LottieAnimationOptions AnimationOptions { get; set; } = new(); 204 | 205 | #endregion 206 | 207 | #region Component Public Properties 208 | 209 | /// 210 | /// The total number of frames in the animation. This is set when the animation is loaded and ready for playback. 211 | /// 212 | public double TotalAnimationFrames => LottiePlayerModule?.TotalFrames ?? 0.0; 213 | 214 | /// 215 | /// Gets the current animation frame as a double-precision value. This is updated during playback by the EventCallback of CurrentFrameChanged. 216 | /// 217 | public double CurrentAnimationFrame => LottiePlayerModule?.CurrentFrame ?? 0.0; 218 | 219 | /// 220 | /// Gets a value indicating whether the animation has been loaded and is ready for playback. 221 | /// 222 | public bool IsAnimationLoaded { get; private set; } = false; 223 | 224 | /// 225 | /// Gets a value indicating whether the animation is paused. 226 | /// 227 | public bool IsAnimationPaused { get; private set; } = false; 228 | 229 | /// 230 | /// Gets a value indicating whether the animation is stopped. 231 | /// 232 | public bool IsAnimationStopped { get; private set; } = true; 233 | #endregion 234 | 235 | #region Public Methods 236 | 237 | /// 238 | /// If the animation is not already playing, this method will start playing the animation. 239 | /// 240 | /// Should not be called before OnAfterRenderAsync. 241 | /// if the animation was successfully started; otherwise, . 242 | /// 243 | public async ValueTask PlayAnimationAsync() 244 | { 245 | if (LottiePlayerModule == null) 246 | { 247 | throw new InvalidOperationException("Lottie Player Module failed."); 248 | } 249 | 250 | if (IsAnimationStopped) 251 | { 252 | // If the animation is stopped, we need to reset the frame to 0 before playing 253 | await LottiePlayerModule.GoToAndPlay(0.0, true); 254 | IsAnimationStopped = false; 255 | } 256 | 257 | IsAnimationPaused = false; 258 | await LottiePlayerModule.PlayAsync(); 259 | } 260 | 261 | /// 262 | /// Pauses the currently playing animation in the Lottie player. 263 | /// 264 | /// Should not be called before OnAfterRenderAsync. 265 | /// if the animation was successfully paused; otherwise, . 266 | /// 267 | public async ValueTask PauseAnimationAsync() 268 | { 269 | if (LottiePlayerModule == null) 270 | { 271 | throw new InvalidOperationException("Lottie Player Module failed."); 272 | } 273 | if (IsAnimationStopped) 274 | { 275 | await LottiePlayerModule.GoToAndStop(0.0, true); 276 | IsAnimationStopped = false; 277 | } 278 | IsAnimationPaused = true; 279 | await LottiePlayerModule.PauseAsync(); 280 | } 281 | 282 | /// 283 | /// Stops the currently playing animation asynchronously. 284 | /// 285 | /// This method halts the animation playback if an animation is currently running. The method 286 | /// returns a boolean indicating whether the operation was successful. 287 | /// if the animation was successfully stopped; otherwise, . 288 | /// Thrown if the Lottie Player Module is not initialized. 289 | public ValueTask StopAnimationAsync() 290 | { 291 | if (LottiePlayerModule == null) 292 | { 293 | throw new InvalidOperationException("Lottie Player Module failed."); 294 | } 295 | IsAnimationPaused = false; 296 | IsAnimationStopped = true; 297 | return LottiePlayerModule.StopAsync(); 298 | } 299 | 300 | /// 301 | /// Asynchronously sets the playback speed for the Lottie animation. 302 | /// 303 | /// The desired playback speed. Must be a positive value, where 1.0 represents normal speed. 304 | /// Thrown if the Lottie Player Module is not initialized. 305 | public ValueTask SetSpeedAsync(double speed) 306 | { 307 | if (LottiePlayerModule == null) 308 | { 309 | throw new InvalidOperationException("Lottie Player Module failed."); 310 | } 311 | return LottiePlayerModule.SetSpeedAsync(speed); 312 | } 313 | 314 | /// 315 | /// Sets the playback direction of the Lottie animation asynchronously. 316 | /// 317 | /// The desired playback direction of the animation. Must be a valid value. 318 | /// Thrown if the Lottie Player Module is not initialized. 319 | public ValueTask SetDirectionAsync(LottieAnimationDirection direction) 320 | { 321 | if (LottiePlayerModule == null) 322 | { 323 | throw new InvalidOperationException("Lottie Player Module failed."); 324 | } 325 | return LottiePlayerModule.SetDirectionAsync(direction); 326 | } 327 | 328 | #endregion 329 | 330 | #region Events 331 | 332 | private void HandleDOMLoaded(object? sender, LottiePlayerLoadedEventArgs args) 333 | { 334 | IsAnimationLoaded = true; 335 | DOMLoaded.InvokeAsync(args); 336 | StateHasChanged(); 337 | } 338 | 339 | private void HandleAnimationReady(object? sender, LottiePlayerLoadedEventArgs args) 340 | { 341 | IsAnimationLoaded = true; 342 | AnimationReady.InvokeAsync(args); 343 | StateHasChanged(); 344 | } 345 | 346 | private void HandleAnimationCompleted(object? sender, bool completed) 347 | { 348 | AnimationCompleted.InvokeAsync(); 349 | } 350 | 351 | private void HandleAnimationLoopCompleted(object? sender, bool completed) 352 | { 353 | AnimationLoopCompleted.InvokeAsync(); 354 | } 355 | 356 | private void HandleCurrentFrameChanged(object? sender, LottiePlayerEventFrameArgs args) 357 | { 358 | if (CurrentFrameChangeFunc == null || CurrentFrameChangeFunc.Invoke(args.CurrentTime)) 359 | { 360 | CurrentFrameChanged.InvokeAsync(args); 361 | } 362 | } 363 | 364 | #endregion 365 | 366 | /// 367 | /// Disposes the LottiePlayer Module if it exists, cleaning up resources and references. Then re-initializes it with 368 | /// any updated options. 369 | /// 370 | /// 371 | private async Task InitializeLottieModule() 372 | { 373 | // dispose the existing module if it exists 374 | if (LottiePlayerModule != null && _initCount > 0) 375 | { 376 | // cancel event handlers to prevent memory leaks 377 | EventSubscription(false); 378 | 379 | await LottiePlayerModule.DisposeAsync(); 380 | LottiePlayerModule = null; 381 | IsAnimationLoaded = false; 382 | IsAnimationPaused = false; 383 | } 384 | // initialize the new module with the current parameters 385 | LottiePlayerModule = new LottiePlayerModule(JSRuntime, ElementRef); 386 | var lottiePlaybackOptions = new LottiePlaybackOptions 387 | { 388 | AutoPlay = AutoPlay, 389 | Path = Src, 390 | Renderer = AnimationType.ToDescription(), 391 | Loop = Loop ? (object)(LoopCount > 0 ? LoopCount : true) : false, 392 | Direction = (int)AnimationDirection, 393 | Speed = AnimationSpeed, 394 | SetSubFrame = AnimationOptions.SmoothFrameInterpolation, 395 | Quality = AnimationOptions.AnimationQuality.ToDescription(), 396 | EnterFrameEvent = CurrentFrameChanged.HasDelegate, 397 | }; 398 | IsAnimationLoaded = await LottiePlayerModule.InitializeAsync(lottiePlaybackOptions); 399 | if (!IsAnimationLoaded) 400 | { 401 | throw new InvalidOperationException("Failed to initialize Lottie Animation"); 402 | } 403 | // redraw the screen to reflect the changes 404 | _initCount++; 405 | IsAnimationPaused = !lottiePlaybackOptions.AutoPlay; 406 | 407 | // setup events 408 | EventSubscription(true); 409 | 410 | StateHasChanged(); 411 | } 412 | 413 | private void EventSubscription(bool subscribe) 414 | { 415 | if (LottiePlayerModule == null) return; 416 | if (subscribe) 417 | { 418 | LottiePlayerModule.OnDOMLoaded += HandleDOMLoaded; 419 | LottiePlayerModule.OnAnimationReady += HandleAnimationReady; 420 | LottiePlayerModule.OnComplete += HandleAnimationCompleted; 421 | LottiePlayerModule.OnLoopComplete += HandleAnimationLoopCompleted; 422 | LottiePlayerModule.OnEnterFrame += HandleCurrentFrameChanged; 423 | } 424 | else 425 | { 426 | LottiePlayerModule.OnDOMLoaded -= HandleDOMLoaded; 427 | LottiePlayerModule.OnAnimationReady -= HandleAnimationReady; 428 | LottiePlayerModule.OnComplete -= HandleAnimationCompleted; 429 | LottiePlayerModule.OnLoopComplete -= HandleAnimationLoopCompleted; 430 | LottiePlayerModule.OnEnterFrame -= HandleCurrentFrameChanged; 431 | } 432 | } 433 | 434 | #region Compoinent Lifecycle 435 | 436 | /// 437 | /// OnAfterRenderAsync override 438 | /// 439 | protected override async Task OnAfterRenderAsync(bool firstRender) 440 | { 441 | if (firstRender || !_lottieLoaded) 442 | { 443 | // load the Lottie Web Player JS from CDN 444 | var initModule = await JSRuntime.InvokeAsync("import", "./_content/Blazor.Lottie.Player/loadLottieWeb.js"); 445 | // if cdn failed on 2nd try let's swap to local copy 446 | var initJs = firstRender ? AnimationOptions.LottieSourceJs : "./_content/Blazor.Lottie.Player/lottie.min.js"; 447 | _lottieLoaded = await initModule.InvokeAsync("initialize", initJs); 448 | if (!_lottieLoaded) 449 | { 450 | StateHasChanged(); 451 | return; 452 | } 453 | await InitializeLottieModule(); 454 | } 455 | } 456 | 457 | /// 458 | /// Override the SetParametersAsync method to handle component parameters. 459 | /// 460 | /// The parameters submitted with the component 461 | public override Task SetParametersAsync(ParameterView parameters) 462 | { 463 | var reInitialize = false; 464 | 465 | var oldSrc = Src; 466 | var oldAutoPlay = AutoPlay; 467 | var oldLoop = Loop; 468 | var oldLoopCount = LoopCount; 469 | var oldType = AnimationType; 470 | var oldOptions = AnimationOptions; 471 | 472 | // Apply the parameters to the component 473 | parameters.SetParameterProperties(this); 474 | 475 | // check if Src returns is json 476 | if (string.IsNullOrWhiteSpace(Src) || !Src.EndsWith(".json", StringComparison.OrdinalIgnoreCase)) 477 | { 478 | _failMessage = "Src must be a valid JSON file path ending with .json"; 479 | 480 | } 481 | 482 | // Check if any key parameters changed 483 | if (AutoPlay != oldAutoPlay || 484 | Loop != oldLoop || 485 | !Equals(AnimationType, oldType) || 486 | !Equals(AnimationOptions, oldOptions) || 487 | Src != oldSrc || 488 | LoopCount != oldLoopCount) 489 | { 490 | reInitialize = true; 491 | } 492 | 493 | if (reInitialize && _initCount > 0) 494 | { 495 | return InitializeLottieModule(); 496 | } 497 | return base.SetParametersAsync(parameters); 498 | } 499 | 500 | /// 501 | /// Disposes the LottiePlayer component asynchronously, cleaning up resources and references. 502 | /// 503 | /// 504 | public async ValueTask DisposeAsync() 505 | { 506 | if (LottiePlayerModule != null) 507 | { 508 | // cancel event handlers to prevent memory leaks 509 | EventSubscription(false); 510 | 511 | await LottiePlayerModule.DisposeAsync(); 512 | LottiePlayerModule = null; 513 | } 514 | 515 | GC.SuppressFinalize(this); 516 | } 517 | 518 | #endregion 519 | } 520 | 521 | -------------------------------------------------------------------------------- /src/Blazor.Lottie.Player.Docs.WASM/wwwroot/lottie/newAnimation.json: -------------------------------------------------------------------------------- 1 | {"v":"4.9.0","fr":30,"ip":0,"op":38,"w":315,"h":280,"nm":"new","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"bodyband Konturen","parent":3,"sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[157.5,129,0]},"a":{"a":0,"k":[157.5,140,0]},"s":{"a":0,"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":9,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-14.5,52],[14.5,52],[14.5,52.25],[-14.5,52.25]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-14.5,-41],[14.5,-41],[14.5,52.25],[-14.5,52.25]],"c":true}]},{"t":19.111328125}]},"nm":"Pfad 1","mn":"ADBE Vector Shape - Group"},{"ty":"fl","c":{"a":0,"k":[0.871,0.702,0.271,1]},"o":{"a":0,"k":100},"r":1,"nm":"Fläche 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":0,"k":[160.5,184],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transformieren"}],"nm":"Gruppe 1","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group"}],"ip":0,"op":150,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"topband Konturen","parent":4,"sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[157.5,140,0]},"a":{"a":0,"k":[157.5,140,0]},"s":{"a":0,"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":16.777,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-14.5,-14.5],[14.5,-14.5],[15.036,-14.207],[-13.964,-14.207]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-14.5,-14.5],[14.5,-14.5],[14.5,14.5],[-14.5,14.5]],"c":true}]},{"t":23}]},"nm":"Pfad 1","mn":"ADBE Vector Shape - Group"},{"ty":"fl","c":{"a":0,"k":[1,0.831,0.396,1]},"o":{"a":0,"k":100},"r":1,"nm":"Fläche 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":0,"k":[160.5,128.5],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transformieren"}],"nm":"Gruppe 1","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group"}],"ip":0,"op":150,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"body Konturen","sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":0,"s":[0],"e":[-13]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":5.432,"s":[-13],"e":[17.85]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":11.111,"s":[17.85],"e":[0]},{"t":16.2958984375}]},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":0,"s":[162.125,247.599,0],"e":[162.125,145.599,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"n":"0p667_1_0p333_0","t":8.148,"s":[162.125,145.599,0],"e":[162.125,236.099,0],"to":[0,0,0],"ti":[0,0,0]},{"t":16.2958984375}]},"a":{"a":0,"k":[162.125,225.099,0]},"s":{"a":0,"k":[100,100,100]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":0,"s":[{"i":[[0,0],[0,0],[0,0],[-3.228,0],[0,0],[-2.75,0.062]],"o":[[0,0],[0,0],[4.75,-0.188],[0,0],[3.228,0],[0,0]],"v":[[56.25,46.5],[-54.75,46.5],[-55,46.688],[-49.658,46.5],[49.658,46.5],[56,46.688]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[-3.228,0],[0,0],[0,3.21]],"o":[[0,0],[0,0],[0,3.21],[0,0],[3.228,0],[0,0]],"v":[[55.5,-46.5],[-55.5,-46.5],[-55.5,40.688],[-49.658,46.5],[49.658,46.5],[55.5,40.688]],"c":true}]},{"t":3.7041015625}]},"nm":"Pfad 1","mn":"ADBE Vector Shape - Group"},{"ty":"fl","c":{"a":0,"k":[0.008,0.588,0.847,1]},"o":{"a":0,"k":100},"r":1,"nm":"Fläche 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":0,"k":[161.5,178.5],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transformieren"}],"nm":"Gruppe 1","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group"}],"ip":0,"op":150,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"top Konturen","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":3.704,"s":[0],"e":[100]},{"t":4.4443359375}]},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":8.148,"s":[10],"e":[-23]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":14.074,"s":[-23],"e":[0]},{"t":20}]},"p":{"a":1,"k":[{"i":{"x":0.937,"y":0.946},"o":{"x":0.167,"y":0.167},"n":"0p937_0p946_0p167_0p167","t":0,"s":[160,177.5,0],"e":[150,34.5,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.097,"y":0},"o":{"x":0.084,"y":0.101},"n":"0p097_0_0p084_0p101","t":10.37,"s":[150,34.5,0],"e":[161,128.5,0],"to":[0,0,0],"ti":[0,0,0]},{"t":20}]},"a":{"a":0,"k":[161,128.5,0]},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"n":["0p667_1_0p333_0","0p667_1_0p333_0","0p667_1_0p333_0"],"t":0,"s":[0,0,100],"e":[58.621,58.621,100]},{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"n":["0p667_1_0p333_0","0p667_1_0p333_0","0p667_1_0p333_0"],"t":10.37,"s":[58.621,58.621,100],"e":[100,100,100]},{"t":20}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[3.219,0],[0,0],[0,-3.204],[0,0],[-3.219,0],[0,0],[0,3.204],[0,0]],"o":[[0,0],[-3.219,0],[0,0],[0,3.204],[0,0],[3.219,0],[0,0],[0,-3.204]],"v":[[61.174,-14.5],[-61.174,-14.5],[-67,-8.7],[-67,8.7],[-61.174,14.5],[61.174,14.5],[67,8.7],[67,-8.7]],"c":true}},"nm":"Pfad 1","mn":"ADBE Vector Shape - Group"},{"ty":"fl","c":{"a":0,"k":[0.012,0.663,0.957,1]},"o":{"a":0,"k":100},"r":1,"nm":"Fläche 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":0,"k":[161,128.5],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transformieren"}],"nm":"Gruppe 1","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group"}],"ip":0,"op":150,"st":0,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"schleife/new Konturen","parent":4,"sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[161,115,0]},"a":{"a":0,"k":[161,115,0]},"s":{"a":1,"k":[{"i":{"x":[0.029,0.029,0.833],"y":[1.656,1.656,-15.667]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,16.667]},"n":["0p029_1p656_0p167_0p167","0p029_1p656_0p167_0p167","0p833_-15p667_0p167_16p667"],"t":23,"s":[0,0,100],"e":[100,100,100]},{"t":34}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[8.059,0],[1.667,-0.428],[-0.598,-1.849],[-1.278,0],[0,-4.797],[4.835,0],[0,0],[-8.693,2.139],[0.541,1.87],[3.006,-6.366],[4.932,3.716],[1.157,-1.595],[-1.586,-3.998],[0,0],[0,4.796],[-4.834,0],[-2.606,-1.934],[-1.272,1.478],[5.256,0],[0,-7.995],[-8.058,0],[0,0],[0,0],[0,7.995]],"o":[[-1.91,0],[0.541,1.87],[1.145,-0.282],[4.835,0],[0,4.796],[0,0],[2.097,-5.318],[-0.598,-1.849],[-9.385,2.413],[-2.071,-4.386],[-1.272,1.478],[5.152,3.823],[0,0],[-4.834,0],[0,-4.797],[3.679,0],[1.157,-1.595],[-3.498,-2.637],[-8.058,0],[0,7.995],[0,0],[0,0],[8.059,0],[0,-7.995]],"v":[[23.385,-14.5],[18.024,-13.831],[19.756,-8.259],[23.385,-8.7],[32.155,0],[23.385,8.7],[4.075,8.7],[19.756,-8.259],[18.024,-13.831],[0,3.422],[-10.322,-10.065],[-13.987,-5.478],[-4.083,8.7],[-23.385,8.7],[-32.154,0],[-23.385,-8.7],[-13.987,-5.478],[-10.322,-10.065],[-23.385,-14.5],[-38,0],[-23.385,14.5],[0,14.5],[23.385,14.5],[38,0]],"c":true}},"nm":"Pfad 1","mn":"ADBE Vector Shape - Group"},{"ty":"fl","c":{"a":0,"k":[1,0.831,0.396,1]},"o":{"a":0,"k":100},"r":1,"nm":"Fläche 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":0,"k":[161,100.5],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transformieren"}],"nm":"Gruppe 1","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group"}],"ip":0,"op":150,"st":0,"bm":0},{"ddd":0,"ind":6,"ty":4,"nm":"shadow Konturen","sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":0,"k":0},"p":{"a":0,"k":[162,236,0]},"a":{"a":0,"k":[162,225,0]},"s":{"a":1,"k":[{"i":{"x":[0.115,0.115,0.833],"y":[1,1,-5.19]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,16.667]},"n":["0p115_1_0p167_0p167","0p115_1_0p167_0p167","0p833_-5p19_0p167_16p667"],"t":0,"s":[0,0,100],"e":[100,100,100]},{"t":13}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-53.02,0],[0,-3.313],[53.02,0],[0,3.313]],"o":[[53.02,0],[0,3.313],[-53.02,0],[0,-3.313]],"v":[[0,-6],[96,0],[0,6],[-96,0]],"c":true}},"nm":"Pfad 1","mn":"ADBE Vector Shape - Group"},{"ty":"fl","c":{"a":0,"k":[0.945,0.945,0.945,1]},"o":{"a":0,"k":100},"r":1,"nm":"Fläche 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":0,"k":[162,225],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transformieren"}],"nm":"Gruppe 1","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group"}],"ip":0,"op":150,"st":0,"bm":0},{"ddd":0,"ind":7,"ty":4,"nm":"Ebene 12 Konturen","sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":9,"s":[262],"e":[0]},{"t":29}]},"p":{"a":1,"k":[{"i":{"x":0,"y":0.359},"o":{"x":0.167,"y":0.167},"n":"0_0p359_0p167_0p167","t":9,"s":[157.5,140,0],"e":[95.449,44.997,0],"to":[0,0,0],"ti":[0,0,0]},{"t":29}]},"a":{"a":0,"k":[95.449,44.997,0]},"s":{"a":1,"k":[{"i":{"x":[0.042,0.042,0.833],"y":[1.006,1.006,-26.778]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,16.667]},"n":["0p042_1p006_0p167_0p167","0p042_1p006_0p167_0p167","0p833_-26p778_0p167_16p667"],"t":9,"s":[0,0,100],"e":[100,100,100]},{"t":29}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[-2.18,-3.777],[2.178,-3.775],[4.359,0.001],[2.181,3.777],[-2.18,3.775],[-4.359,-0.001]],"c":true}},"nm":"Pfad 1","mn":"ADBE Vector Shape - Group"},{"ty":"st","c":{"a":0,"k":[0.012,0.663,0.957,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":1,"lj":1,"ml":4,"nm":"Kontur 1","mn":"ADBE Vector Graphic - Stroke"},{"ty":"tr","p":{"a":0,"k":[95.449,44.997],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transformieren"}],"nm":"Gruppe 1","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group"}],"ip":0,"op":150,"st":0,"bm":0},{"ddd":0,"ind":8,"ty":4,"nm":"Ebene 13 Konturen","sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":3,"s":[-63],"e":[0]},{"t":23}]},"p":{"a":1,"k":[{"i":{"x":0,"y":0.564},"o":{"x":0.167,"y":0.167},"n":"0_0p564_0p167_0p167","t":3,"s":[157.5,140,0],"e":[248.067,112.75,0],"to":[0,0,0],"ti":[0,0,0]},{"t":23}]},"a":{"a":0,"k":[248.067,112.75,0]},"s":{"a":1,"k":[{"i":{"x":[0.042,0.042,0.833],"y":[1.006,1.006,-26.778]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,16.667]},"n":["0p042_1p006_0p167_0p167","0p042_1p006_0p167_0p167","0p833_-26p778_0p167_16p667"],"t":3,"s":[0,0,100],"e":[100,100,100]},{"t":23}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[-1.53,-6.63],[4.974,-4.639],[6.505,1.99],[1.532,6.63],[-4.972,4.64],[-6.505,-1.989]],"c":true}},"nm":"Pfad 1","mn":"ADBE Vector Shape - Group"},{"ty":"st","c":{"a":0,"k":[0.012,0.663,0.957,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":1,"lj":1,"ml":4,"nm":"Kontur 1","mn":"ADBE Vector Graphic - Stroke"},{"ty":"tr","p":{"a":0,"k":[248.067,112.75],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transformieren"}],"nm":"Gruppe 1","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group"}],"ip":0,"op":150,"st":0,"bm":0},{"ddd":0,"ind":9,"ty":4,"nm":"Ebene 14 Konturen","sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":0,"s":[-200],"e":[0]},{"t":20}]},"p":{"a":1,"k":[{"i":{"x":0,"y":0.477},"o":{"x":0.167,"y":0.167},"n":"0_0p477_0p167_0p167","t":0,"s":[157.5,140,0],"e":[268.728,57.196,0],"to":[0,0,0],"ti":[0,0,0]},{"t":20}]},"a":{"a":0,"k":[120.728,247.196,0]},"s":{"a":1,"k":[{"i":{"x":[0.042,0.042,0.833],"y":[1.006,1.006,-26.778]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,16.667]},"n":["0p042_1p006_0p167_0p167","0p042_1p006_0p167_0p167","0p833_-26p778_0p167_16p667"],"t":0,"s":[0,0,100],"e":[100,100,100]},{"t":20}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[-2.376,-3.394],[2.799,1.018],[-2.799,3.394]],"c":true}},"nm":"Pfad 1","mn":"ADBE Vector Shape - Group"},{"ty":"st","c":{"a":0,"k":[0.149,0.784,0.333,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":1,"lj":1,"ml":4,"nm":"Kontur 1","mn":"ADBE Vector Graphic - Stroke"},{"ty":"tr","p":{"a":0,"k":[120.728,247.196],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transformieren"}],"nm":"Gruppe 1","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group"}],"ip":0,"op":150,"st":0,"bm":0},{"ddd":0,"ind":10,"ty":4,"nm":"Ebene 15 Konturen","sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":8,"s":[134],"e":[0]},{"t":28}]},"p":{"a":1,"k":[{"i":{"x":0,"y":0.547},"o":{"x":0.167,"y":0.167},"n":"0_0p547_0p167_0p167","t":8,"s":[157.5,140,0],"e":[61.63,139.445,0],"to":[0,0,0],"ti":[0,0,0]},{"t":28}]},"a":{"a":0,"k":[61.63,139.445,0]},"s":{"a":1,"k":[{"i":{"x":[0.042,0.042,0.833],"y":[1.006,1.006,-26.778]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,16.667]},"n":["0p042_1p006_0p167_0p167","0p042_1p006_0p167_0p167","0p833_-26p778_0p167_16p667"],"t":8,"s":[0,0,100],"e":[100,100,100]},{"t":28}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[4.37,-5.433],[4.286,5.433],[-4.37,1.022]],"c":true}},"nm":"Pfad 1","mn":"ADBE Vector Shape - Group"},{"ty":"st","c":{"a":0,"k":[0.149,0.784,0.333,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":1,"lj":1,"ml":4,"nm":"Kontur 1","mn":"ADBE Vector Graphic - Stroke"},{"ty":"tr","p":{"a":0,"k":[61.63,139.445],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transformieren"}],"nm":"Gruppe 1","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group"}],"ip":0,"op":150,"st":0,"bm":0},{"ddd":0,"ind":11,"ty":4,"nm":"Ebene 16 Konturen","sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":5,"s":[74],"e":[0]},{"t":25}]},"p":{"a":1,"k":[{"i":{"x":0,"y":0.387},"o":{"x":0.167,"y":0.167},"n":"0_0p387_0p167_0p167","t":5,"s":[157.5,140,0],"e":[183.561,32.661,0],"to":[0,0,0],"ti":[0,0,0]},{"t":25}]},"a":{"a":0,"k":[183.561,32.661,0]},"s":{"a":1,"k":[{"i":{"x":[0.042,0.042,0.833],"y":[1.006,1.006,-26.778]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,16.667]},"n":["0p042_1p006_0p167_0p167","0p042_1p006_0p167_0p167","0p833_-26p778_0p167_16p667"],"t":5,"s":[0,0,100],"e":[100,100,100]},{"t":25}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-2.146,0],[0,-2.147],[2.146,0],[0,2.147]],"o":[[2.146,0],[0,2.147],[-2.146,0],[0,-2.147]],"v":[[-0.001,-3.888],[3.886,0],[-0.001,3.888],[-3.887,0]],"c":true}},"nm":"Pfad 1","mn":"ADBE Vector Shape - Group"},{"ty":"st","c":{"a":0,"k":[0.039,0.314,0.392,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":1,"lj":1,"ml":4,"nm":"Kontur 1","mn":"ADBE Vector Graphic - Stroke"},{"ty":"tr","p":{"a":0,"k":[183.561,32.661],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transformieren"}],"nm":"Gruppe 1","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group"}],"ip":0,"op":150,"st":0,"bm":0},{"ddd":0,"ind":12,"ty":4,"nm":"Ebene 17 Konturen","sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":12,"s":[29],"e":[0]},{"t":32}]},"p":{"a":1,"k":[{"i":{"x":0,"y":0.463},"o":{"x":0.167,"y":0.167},"n":"0_0p463_0p167_0p167","t":12,"s":[157.5,140,0],"e":[44.65,36.558,0],"to":[0,0,0],"ti":[0,0,0]},{"t":32}]},"a":{"a":0,"k":[214.65,244.558,0]},"s":{"a":1,"k":[{"i":{"x":[0.042,0.042,0.833],"y":[1.006,1.006,-26.778]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,16.667]},"n":["0p042_1p006_0p167_0p167","0p042_1p006_0p167_0p167","0p833_-26p778_0p167_16p667"],"t":12,"s":[0,0,100],"e":[100,100,100]},{"t":32}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-3.22,0],[0,-3.222],[3.22,0],[0,3.221]],"o":[[3.22,0],[0,3.221],[-3.22,0],[0,-3.222]],"v":[[0,-5.832],[5.829,0],[0,5.832],[-5.829,0]],"c":true}},"nm":"Pfad 1","mn":"ADBE Vector Shape - Group"},{"ty":"st","c":{"a":0,"k":[0.039,0.314,0.392,1]},"o":{"a":0,"k":100},"w":{"a":0,"k":1},"lc":1,"lj":1,"ml":4,"nm":"Kontur 1","mn":"ADBE Vector Graphic - Stroke"},{"ty":"tr","p":{"a":0,"k":[214.65,244.558],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transformieren"}],"nm":"Gruppe 1","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group"}],"ip":0,"op":150,"st":0,"bm":0},{"ddd":0,"ind":13,"ty":4,"nm":"Ebene 18 Konturen","sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":3,"s":[168],"e":[0]},{"t":23}]},"p":{"a":1,"k":[{"i":{"x":0,"y":0.243},"o":{"x":0.167,"y":0.167},"n":"0_0p243_0p167_0p167","t":3,"s":[157.5,140,0],"e":[294.925,112.226,0],"to":[0,0,0],"ti":[0,0,0]},{"t":23}]},"a":{"a":0,"k":[62.925,234.226,0]},"s":{"a":1,"k":[{"i":{"x":[0.042,0.042,0.833],"y":[1.006,1.006,-26.778]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,16.667]},"n":["0p042_1p006_0p167_0p167","0p042_1p006_0p167_0p167","0p833_-26p778_0p167_16p667"],"t":3,"s":[0,0,100],"e":[100,100,100]},{"t":23}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0.209,0.131],[0,0],[0,0],[0.174,-0.142],[0,0],[0,0],[-0.093,-0.228],[0,0],[0,0],[-0.247,0.014],[0,0],[0,0],[-0.059,0.236],[0,0],[0,0]],"o":[[0,0],[0,0],[-0.012,-0.223],[0,0],[0,0],[-0.238,-0.069],[0,0],[0,0],[-0.135,0.201],[0,0],[0,0],[0.155,0.19],[0,0],[0,0],[0.232,-0.083]],"v":[[2.206,-0.077],[1.1,-0.771],[1.036,-2.051],[0.544,-2.269],[-0.45,-1.461],[-1.706,-1.819],[-2.062,-1.431],[-1.568,-0.237],[-2.281,0.82],[-2.008,1.278],[-0.711,1.208],[0.105,2.221],[0.628,2.116],[0.938,0.878],[2.156,0.446]],"c":true}},"nm":"Pfad 1","mn":"ADBE Vector Shape - Group"},{"ty":"fl","c":{"a":0,"k":[1,0.729,0.031,1]},"o":{"a":0,"k":100},"r":1,"nm":"Fläche 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":0,"k":[62.916,234.223],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transformieren"}],"nm":"Gruppe 1","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group"}],"ip":0,"op":150,"st":0,"bm":0},{"ddd":0,"ind":14,"ty":4,"nm":"Ebene 19 Konturen","sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":8,"s":[-209],"e":[0]},{"t":28}]},"p":{"a":1,"k":[{"i":{"x":0,"y":0.25},"o":{"x":0.167,"y":0.167},"n":"0_0p25_0p167_0p167","t":8,"s":[157.5,140,0],"e":[35.721,103.978,0],"to":[0,0,0],"ti":[0,0,0]},{"t":28}]},"a":{"a":0,"k":[35.721,103.978,0]},"s":{"a":1,"k":[{"i":{"x":[0.042,0.042,0.833],"y":[1.006,1.006,-26.778]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,16.667]},"n":["0p042_1p006_0p167_0p167","0p042_1p006_0p167_0p167","0p833_-26p778_0p167_16p667"],"t":8,"s":[0,0,100],"e":[100,100,100]},{"t":28}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0.209,0.131],[0,0],[0,0],[0.174,-0.141],[0,0],[0,0],[-0.094,-0.227],[0,0],[0,0],[-0.247,0.014],[0,0],[0,0],[-0.059,0.237],[0,0],[0,0]],"o":[[0,0],[0,0],[-0.012,-0.224],[0,0],[0,0],[-0.238,-0.068],[0,0],[0,0],[-0.135,0.2],[0,0],[0,0],[0.155,0.191],[0,0],[0,0],[0.231,-0.083]],"v":[[2.206,-0.078],[1.1,-0.771],[1.036,-2.051],[0.544,-2.27],[-0.45,-1.461],[-1.706,-1.82],[-2.062,-1.432],[-1.568,-0.238],[-2.281,0.82],[-2.008,1.278],[-0.711,1.207],[0.105,2.22],[0.628,2.115],[0.938,0.878],[2.156,0.446]],"c":true}},"nm":"Pfad 1","mn":"ADBE Vector Shape - Group"},{"ty":"fl","c":{"a":0,"k":[1,0.729,0.031,1]},"o":{"a":0,"k":100},"r":1,"nm":"Fläche 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":0,"k":[35.712,103.975],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transformieren"}],"nm":"Gruppe 1","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group"}],"ip":0,"op":150,"st":0,"bm":0},{"ddd":0,"ind":15,"ty":4,"nm":"Ebene 20 Konturen","sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":7,"s":[275],"e":[0]},{"t":27}]},"p":{"a":1,"k":[{"i":{"x":0,"y":0.09},"o":{"x":0.167,"y":0.167},"n":"0_0p09_0p167_0p167","t":7,"s":[157.5,140,0],"e":[261.12,26.218,0],"to":[0,0,0],"ti":[0,0,0]},{"t":27}]},"a":{"a":0,"k":[261.12,26.218,0]},"s":{"a":1,"k":[{"i":{"x":[0.042,0.042,0.833],"y":[1.006,1.006,-26.778]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,16.667]},"n":["0p042_1p006_0p167_0p167","0p042_1p006_0p167_0p167","0p833_-26p778_0p167_16p667"],"t":7,"s":[0,0,100],"e":[100,100,100]},{"t":27}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0.21,0.131],[0,0],[0,0],[0.174,-0.141],[0,0],[0,0],[-0.093,-0.228],[0,0],[0,0],[-0.247,0.014],[0,0],[0,0],[-0.059,0.236],[0,0],[0,0]],"o":[[0,0],[0,0],[-0.011,-0.223],[0,0],[0,0],[-0.238,-0.068],[0,0],[0,0],[-0.135,0.2],[0,0],[0,0],[0.155,0.19],[0,0],[0,0],[0.232,-0.082]],"v":[[2.206,-0.078],[1.099,-0.771],[1.034,-2.052],[0.543,-2.27],[-0.45,-1.461],[-1.707,-1.82],[-2.062,-1.432],[-1.568,-0.238],[-2.281,0.82],[-2.009,1.278],[-0.711,1.207],[0.105,2.22],[0.628,2.115],[0.937,0.878],[2.155,0.445]],"c":true}},"nm":"Pfad 1","mn":"ADBE Vector Shape - Group"},{"ty":"fl","c":{"a":0,"k":[1,0.729,0.031,1]},"o":{"a":0,"k":100},"r":1,"nm":"Fläche 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":0,"k":[261.111,26.215],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transformieren"}],"nm":"Gruppe 1","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group"}],"ip":0,"op":150,"st":0,"bm":0},{"ddd":0,"ind":16,"ty":4,"nm":"Ebene 21 Konturen","sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":3,"s":[132.9],"e":[0]},{"t":23}]},"p":{"a":1,"k":[{"i":{"x":0,"y":0.326},"o":{"x":0.167,"y":0.167},"n":"0_0p326_0p167_0p167","t":3,"s":[157.5,140,0],"e":[268.337,196.938,0],"to":[0,0,0],"ti":[0,0,0]},{"t":23}]},"a":{"a":0,"k":[252.337,213.938,0]},"s":{"a":1,"k":[{"i":{"x":[0.042,0.042,0.833],"y":[1.006,1.006,-26.778]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,16.667]},"n":["0p042_1p006_0p167_0p167","0p042_1p006_0p167_0p167","0p833_-26p778_0p167_16p667"],"t":3,"s":[0,0,100],"e":[100,100,100]},{"t":23}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0.411,0.258],[0,0],[0,0],[0.34,-0.276],[0,0],[0,0],[-0.184,-0.446],[0,0],[0,0],[-0.483,0.027],[0,0],[0,0],[-0.116,0.463],[0,0],[0,0]],"o":[[0,0],[0,0],[-0.022,-0.439],[0,0],[0,0],[-0.466,-0.133],[0,0],[0,0],[-0.265,0.392],[0,0],[0,0],[0.302,0.373],[0,0],[0,0],[0.454,-0.162]],"v":[[4.322,-0.152],[2.152,-1.51],[2.027,-4.017],[1.065,-4.447],[-0.882,-2.861],[-3.344,-3.565],[-4.038,-2.804],[-3.072,-0.465],[-4.468,1.607],[-3.935,2.505],[-1.392,2.366],[0.207,4.35],[1.231,4.145],[1.837,1.72],[4.222,0.874]],"c":true}},"nm":"Pfad 1","mn":"ADBE Vector Shape - Group"},{"ty":"fl","c":{"a":0,"k":[1,0.729,0.031,1]},"o":{"a":0,"k":100},"r":1,"nm":"Fläche 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":0,"k":[252.32,213.932],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transformieren"}],"nm":"Gruppe 1","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group"}],"ip":0,"op":150,"st":0,"bm":0},{"ddd":0,"ind":17,"ty":4,"nm":"Ebene 22 Konturen","sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":13,"s":[-266],"e":[0]},{"t":33}]},"p":{"a":1,"k":[{"i":{"x":0,"y":0.337},"o":{"x":0.167,"y":0.167},"n":"0_0p337_0p167_0p167","t":13,"s":[157.5,140,0],"e":[133.395,26.515,0],"to":[0,0,0],"ti":[0,0,0]},{"t":33}]},"a":{"a":0,"k":[133.395,26.515,0]},"s":{"a":1,"k":[{"i":{"x":[0.042,0.042,0.833],"y":[1.006,1.006,-26.778]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,16.667]},"n":["0p042_1p006_0p167_0p167","0p042_1p006_0p167_0p167","0p833_-26p778_0p167_16p667"],"t":13,"s":[0,0,100],"e":[100,100,100]},{"t":33}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0.411,0.258],[0,0],[0,0],[0.34,-0.277],[0,0],[0,0],[-0.183,-0.446],[0,0],[0,0],[-0.484,0.026],[0,0],[0,0],[-0.116,0.462],[0,0],[0,0]],"o":[[0,0],[0,0],[-0.022,-0.438],[0,0],[0,0],[-0.466,-0.133],[0,0],[0,0],[-0.264,0.392],[0,0],[0,0],[0.302,0.373],[0,0],[0,0],[0.454,-0.162]],"v":[[4.322,-0.152],[2.152,-1.511],[2.027,-4.018],[1.065,-4.446],[-0.882,-2.861],[-3.344,-3.565],[-4.039,-2.804],[-3.072,-0.466],[-4.469,1.607],[-3.935,2.505],[-1.392,2.366],[0.207,4.35],[1.231,4.145],[1.837,1.72],[4.222,0.874]],"c":true}},"nm":"Pfad 1","mn":"ADBE Vector Shape - Group"},{"ty":"fl","c":{"a":0,"k":[1,0.729,0.031,1]},"o":{"a":0,"k":100},"r":1,"nm":"Fläche 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":0,"k":[133.378,26.508],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transformieren"}],"nm":"Gruppe 1","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group"}],"ip":0,"op":150,"st":0,"bm":0},{"ddd":0,"ind":18,"ty":4,"nm":"Ebene 23 Konturen","sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":5,"s":[399],"e":[0]},{"t":25}]},"p":{"a":1,"k":[{"i":{"x":0,"y":0.478},"o":{"x":0.167,"y":0.167},"n":"0_0p478_0p167_0p167","t":5,"s":[157.5,140,0],"e":[257.258,159.497,0],"to":[0,0,0],"ti":[0,0,0]},{"t":25}]},"a":{"a":0,"k":[257.258,159.497,0]},"s":{"a":1,"k":[{"i":{"x":[0.042,0.042,0.833],"y":[1.006,1.006,-26.778]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,16.667]},"n":["0p042_1p006_0p167_0p167","0p042_1p006_0p167_0p167","0p833_-26p778_0p167_16p667"],"t":5,"s":[0,0,100],"e":[100,100,100]},{"t":25}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0.721,-0.604],[0,0],[0,0],[-0.306,-0.794],[0,0],[0,0],[-0.932,0.071],[0,0],[0,0],[-0.241,0.908],[0,0],[0,0],[0.783,0.491],[0,0],[0,0]],"o":[[0,0],[0,0],[-0.821,-0.221],[0,0],[0,0],[-0.524,0.78],[0,0],[0,0],[0.566,0.723],[0,0],[0,0],[0.869,-0.333],[0,0],[0,0],[-0.027,-0.935]],"v":[[2.281,-8.697],[-1.528,-5.509],[-6.23,-6.781],[-7.598,-5.261],[-5.84,-0.719],[-8.615,3.403],[-7.627,5.141],[-2.732,4.758],[0.255,8.578],[2.232,8.133],[3.5,3.356],[8.121,1.595],[8.357,-0.417],[4.245,-2.989],[4.113,-7.897]],"c":true}},"nm":"Pfad 1","mn":"ADBE Vector Shape - Group"},{"ty":"fl","c":{"a":0,"k":[1,0.729,0.031,1]},"o":{"a":0,"k":100},"r":1,"nm":"Fläche 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":0,"k":[257.231,159.483],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transformieren"}],"nm":"Gruppe 1","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group"}],"ip":0,"op":150,"st":0,"bm":0},{"ddd":0,"ind":19,"ty":4,"nm":"Ebene 24 Konturen","sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":11,"s":[-212],"e":[0]},{"t":31}]},"p":{"a":1,"k":[{"i":{"x":0,"y":0.748},"o":{"x":0.167,"y":0.167},"n":"0_0p748_0p167_0p167","t":11,"s":[157.5,140,0],"e":[97.064,84.204,0],"to":[0,0,0],"ti":[0,0,0]},{"t":31}]},"a":{"a":0,"k":[97.064,84.204,0]},"s":{"a":1,"k":[{"i":{"x":[0.042,0.042,0.833],"y":[1.006,1.006,-26.778]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,16.667]},"n":["0p042_1p006_0p167_0p167","0p042_1p006_0p167_0p167","0p833_-26p778_0p167_16p667"],"t":11,"s":[0,0,100],"e":[100,100,100]},{"t":31}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0.675,-0.565],[0,0],[0,0],[-0.287,-0.743],[0,0],[0,0],[-0.872,0.067],[0,0],[0,0],[-0.226,0.849],[0,0],[0,0],[0.734,0.459],[0,0],[0,0]],"o":[[0,0],[0,0],[-0.77,-0.208],[0,0],[0,0],[-0.491,0.73],[0,0],[0,0],[0.53,0.677],[0,0],[0,0],[0.814,-0.312],[0,0],[0,0],[-0.026,-0.875]],"v":[[2.135,-8.142],[-1.43,-5.157],[-5.831,-6.348],[-7.113,-4.926],[-5.467,-0.674],[-8.064,3.186],[-7.141,4.812],[-2.557,4.454],[0.239,8.029],[2.09,7.613],[3.277,3.141],[7.602,1.493],[7.822,-0.391],[3.974,-2.799],[3.851,-7.393]],"c":true}},"nm":"Pfad 1","mn":"ADBE Vector Shape - Group"},{"ty":"fl","c":{"a":0,"k":[1,0.729,0.031,1]},"o":{"a":0,"k":100},"r":1,"nm":"Fläche 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":0,"k":[97.039,84.191],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transformieren"}],"nm":"Gruppe 1","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group"}],"ip":0,"op":150,"st":0,"bm":0},{"ddd":0,"ind":20,"ty":4,"nm":"Ebene 25 Konturen","sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":3,"s":[-256],"e":[0]},{"t":23}]},"p":{"a":1,"k":[{"i":{"x":0,"y":0.718},"o":{"x":0.167,"y":0.167},"n":"0_0p718_0p167_0p167","t":3,"s":[157.5,140,0],"e":[78.559,168.874,0],"to":[0,0,0],"ti":[0,0,0]},{"t":23}]},"a":{"a":0,"k":[78.559,168.874,0]},"s":{"a":1,"k":[{"i":{"x":[0.042,0.042,0.833],"y":[1.006,1.006,-26.778]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,16.667]},"n":["0p042_1p006_0p167_0p167","0p042_1p006_0p167_0p167","0p833_-26p778_0p167_16p667"],"t":3,"s":[0,0,100],"e":[100,100,100]},{"t":23}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0.516,-0.432],[0,0],[0,0],[-0.219,-0.569],[0,0],[0,0],[-0.668,0.051],[0,0],[0,0],[-0.173,0.65],[0,0],[0,0],[0.562,0.351],[0,0],[0,0]],"o":[[0,0],[0,0],[-0.588,-0.159],[0,0],[0,0],[-0.376,0.559],[0,0],[0,0],[0.405,0.518],[0,0],[0,0],[0.623,-0.239],[0,0],[0,0],[-0.02,-0.669]],"v":[[1.633,-6.229],[-1.096,-3.945],[-4.463,-4.856],[-5.442,-3.768],[-4.183,-0.516],[-6.17,2.436],[-5.463,3.681],[-1.958,3.407],[0.182,6.143],[1.598,5.824],[2.507,2.403],[5.814,1.142],[5.984,-0.299],[3.04,-2.141],[2.945,-5.656]],"c":true}},"nm":"Pfad 1","mn":"ADBE Vector Shape - Group"},{"ty":"fl","c":{"a":0,"k":[1,0.729,0.031,1]},"o":{"a":0,"k":100},"r":1,"nm":"Fläche 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":0,"k":[78.54,168.865],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transformieren"}],"nm":"Gruppe 1","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group"}],"ip":0,"op":150,"st":0,"bm":0},{"ddd":0,"ind":21,"ty":4,"nm":"Ebene 26 Konturen","sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":17,"s":[50],"e":[18]},{"t":37}]},"p":{"a":1,"k":[{"i":{"x":0,"y":0.897},"o":{"x":0.167,"y":0.167},"n":"0_0p897_0p167_0p167","t":17,"s":[157.5,140,0],"e":[155.771,214.44,0],"to":[0,0,0],"ti":[0,0,0]},{"t":37}]},"a":{"a":0,"k":[155.771,214.44,0]},"s":{"a":1,"k":[{"i":{"x":[0.042,0.042,0.833],"y":[1.008,1.008,-26.778]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,15.952]},"n":["0p042_1p008_0p167_0p167","0p042_1p008_0p167_0p167","0p833_-26p778_0p167_15p952"],"t":17,"s":[0,0,100],"e":[67,67,100]},{"t":37}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[1.312,-0.183],[0,0],[0,0],[0.227,-1.177],[0,0],[0,0],[-1.168,-0.61],[0,0],[0,0],[-0.967,0.904],[0,0],[0,0],[0.57,1.171],[0,0],[0,0]],"o":[[0,0],[0,0],[-0.816,-0.879],[0,0],[0,0],[-1.21,0.541],[0,0],[0,0],[0.137,1.287],[0,0],[0,0],[1.289,0.251],[0,0],[0,0],[0.665,-1.137]],"v":[[10.542,-8.02],[3.609,-7.053],[-1.06,-12.084],[-3.829,-11.291],[-5.121,-4.55],[-11.514,-1.696],[-11.632,1.119],[-5.496,4.318],[-4.779,11.114],[-2.084,12.058],[2.999,7.295],[9.835,8.642],[11.62,6.414],[8.627,0.269],[12.136,-5.695]],"c":true}},"nm":"Pfad 1","mn":"ADBE Vector Shape - Group"},{"ty":"fl","c":{"a":0,"k":[1,0.729,0.031,1]},"o":{"a":0,"k":100},"r":1,"nm":"Fläche 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":0,"k":[155.828,214.455],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transformieren"}],"nm":"Gruppe 1","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group"}],"ip":0,"op":150,"st":0,"bm":0},{"ddd":0,"ind":22,"ty":4,"nm":"Ebene 27 Konturen","sr":1,"ks":{"o":{"a":0,"k":100},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":11,"s":[-239],"e":[0]},{"t":31}]},"p":{"a":1,"k":[{"i":{"x":0,"y":0.5},"o":{"x":0.167,"y":0.167},"n":"0_0p5_0p167_0p167","t":11,"s":[157.5,140,0],"e":[219.606,61.933,0],"to":[0,0,0],"ti":[0,0,0]},{"t":31}]},"a":{"a":0,"k":[219.606,61.933,0]},"s":{"a":1,"k":[{"i":{"x":[0.042,0.042,0.833],"y":[1.006,1.006,-26.778]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,16.667]},"n":["0p042_1p006_0p167_0p167","0p042_1p006_0p167_0p167","0p833_-26p778_0p167_16p667"],"t":11,"s":[0,0,100],"e":[100,100,100]},{"t":31}]}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0.946,-0.131],[0,0],[0,0],[0.163,-0.849],[0,0],[0,0],[-0.842,-0.44],[0,0],[0,0],[-0.697,0.652],[0,0],[0,0],[0.411,0.845],[0,0],[0,0]],"o":[[0,0],[0,0],[-0.588,-0.633],[0,0],[0,0],[-0.872,0.39],[0,0],[0,0],[0.099,0.928],[0,0],[0,0],[0.929,0.181],[0,0],[0,0],[0.479,-0.819]],"v":[[7.601,-5.783],[2.602,-5.086],[-0.764,-8.713],[-2.76,-8.141],[-3.693,-3.281],[-8.301,-1.223],[-8.387,0.807],[-3.962,3.114],[-3.445,8.013],[-1.503,8.694],[2.163,5.259],[7.09,6.23],[8.378,4.624],[6.219,0.195],[8.749,-4.107]],"c":true}},"nm":"Pfad 1","mn":"ADBE Vector Shape - Group"},{"ty":"fl","c":{"a":0,"k":[1,0.729,0.031,1]},"o":{"a":0,"k":100},"r":1,"nm":"Fläche 1","mn":"ADBE Vector Graphic - Fill"},{"ty":"tr","p":{"a":0,"k":[219.647,61.944],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transformieren"}],"nm":"Gruppe 1","np":2,"cix":2,"ix":1,"mn":"ADBE Vector Group"}],"ip":0,"op":150,"st":0,"bm":0}]} -------------------------------------------------------------------------------- /src/Blazor.Lottie.Player/wwwroot/loading.json: -------------------------------------------------------------------------------- 1 | {"v":"5.5.7","meta":{"g":"LottieFiles AE 0.1.21","a":"","k":"","d":"","tc":""},"fr":60,"ip":0,"op":43,"w":512,"h":512,"nm":"Loading Animation Bored Hand","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":2,"ty":4,"nm":"LOADING Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[255.892,367,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[-33.44,0],[-33.44,-3.04],[-39.767,-3.04],[-39.767,-13.566],[-43.301,-13.566],[-43.301,0]],"c":true},"ix":2},"nm":"L","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.266666666667,0.266666666667,0.266666666667,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":1,"k":[{"i":{"x":0,"y":1},"o":{"x":1,"y":0},"t":0,"s":[0,0],"to":[0,-0.569],"ti":[0,1.578]},{"i":{"x":0,"y":1},"o":{"x":1,"y":0},"t":5,"s":[0,-3.686],"to":[0,-2.122],"ti":[0,-0.614]},{"t":9.34765625,"s":[0,0]}],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"L","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-1.166,-1.304],[-2.078,0],[-1.216,1.368],[0,2.04],[1.165,1.305],[2.077,0],[1.216,-1.368],[0,-2.039]],"o":[[1.216,1.368],[2.077,0],[1.165,-1.304],[0,-2.039],[-1.216,-1.368],[-2.078,0],[-1.166,1.305],[0,2.04]],"v":[[-30.457,-1.767],[-25.517,0.285],[-20.577,-1.767],[-18.829,-6.783],[-20.577,-11.799],[-25.517,-13.851],[-30.457,-11.799],[-32.205,-6.783]],"c":true},"ix":2},"nm":"O","mn":"ADBE Vector Shape - Group","hd":false},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[-0.482,0.722],[-1.064,0],[-0.558,-0.836],[0,-1.127],[0.481,-0.722],[1.064,0],[0.557,0.836],[0,1.128]],"o":[[0.557,-0.836],[1.064,0],[0.481,0.722],[0,1.128],[-0.558,0.836],[-1.064,0],[-0.482,-0.722],[0,-1.127]],"v":[[-27.949,-9.557],[-25.517,-10.811],[-23.085,-9.557],[-22.363,-6.783],[-23.085,-4.009],[-25.517,-2.755],[-27.949,-4.009],[-28.671,-6.783]],"c":true},"ix":2},"nm":"O","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.266666666667,0.266666666667,0.266666666667,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":1,"k":[{"i":{"x":0,"y":1},"o":{"x":1,"y":0},"t":5,"s":[0,0],"to":[0,-0.525],"ti":[0,1.447]},{"i":{"x":0,"y":1},"o":{"x":1,"y":0},"t":11,"s":[0,-3.326],"to":[0,-2.226],"ti":[0,-0.554]},{"t":14.95703125,"s":[0,0]}],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"O","np":4,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[-11.419,-9.804],[-9.918,-5.054],[-12.996,-5.054],[-11.457,-9.804]],"c":true},"ix":2},"nm":"A","mn":"ADBE Vector Shape - Group","hd":false},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[-14.668,0],[-13.813,-2.432],[-9.082,-2.432],[-8.246,0],[-4.56,0],[-9.633,-13.566],[-13.224,-13.566],[-18.297,0]],"c":true},"ix":2},"nm":"A","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.266666666667,0.266666666667,0.266666666667,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":1,"k":[{"i":{"x":0,"y":1},"o":{"x":1,"y":0},"t":11,"s":[0,0],"to":[0,-0.552],"ti":[0,1.53]},{"i":{"x":0,"y":1},"o":{"x":1,"y":0},"t":16,"s":[0,-3.55],"to":[0,-2.163],"ti":[0,-0.592]},{"t":20.564453125,"s":[0,0]}],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"A","np":4,"cix":2,"bm":0,"ix":3,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[-1.172,1.178],[0,2.204],[1.178,1.191],[2.077,0],[0,0],[0,0]],"o":[[2.09,0],[1.171,-1.178],[0,-2.102],[-1.178,-1.19],[0,0],[0,0],[0,0]],"v":[[2.299,0],[7.192,-1.767],[8.949,-6.84],[7.182,-11.78],[2.299,-13.566],[-3.534,-13.566],[-3.534,0]],"c":true},"ix":2},"nm":"D","mn":"ADBE Vector Shape - Group","hd":false},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[0,0],[0,-2.444],[0.576,-0.595],[1.342,0],[0,0],[0,0]],"o":[[2.495,0],[0,1.356],[-0.577,0.596],[0,0],[0,0],[0,0]],"v":[[1.672,-10.526],[5.415,-6.859],[4.551,-3.933],[1.672,-3.04],[0,-3.04],[0,-10.526]],"c":true},"ix":2},"nm":"D","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.266666666667,0.266666666667,0.266666666667,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":1,"k":[{"i":{"x":0,"y":1},"o":{"x":1,"y":0},"t":16,"s":[0,0],"to":[0,-0.512],"ti":[0,1.404]},{"i":{"x":0,"y":1},"o":{"x":1,"y":0},"t":22,"s":[0,-3.212],"to":[0,-2.255],"ti":[0,-0.535]},{"t":26.173828125,"s":[0,0]}],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"D","np":4,"cix":2,"bm":0,"ix":4,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[14.421,0],[14.421,-13.566],[10.887,-13.566],[10.887,0]],"c":true},"ix":2},"nm":"I","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.266666666667,0.266666666667,0.266666666667,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":1,"k":[{"i":{"x":0,"y":1},"o":{"x":1,"y":0},"t":22,"s":[0,0],"to":[0,-0.537],"ti":[0,1.483]},{"i":{"x":0,"y":1},"o":{"x":1,"y":0},"t":28,"s":[0,-3.423],"to":[0,-2.199],"ti":[0,-0.57]},{"t":31.783203125,"s":[0,0]}],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"I","np":3,"cix":2,"bm":0,"ix":5,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[20.159,0],[20.159,-8.455],[24.892,0],[28.538,0],[28.538,-13.566],[25.213,-13.566],[25.213,-5.206],[20.479,-13.566],[16.834,-13.566],[16.834,0]],"c":true},"ix":2},"nm":"N","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.266666666667,0.266666666667,0.266666666667,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":1,"k":[{"i":{"x":0,"y":1},"o":{"x":1,"y":0},"t":28,"s":[0,0],"to":[0,-0.565],"ti":[0,1.569]},{"i":{"x":0,"y":1},"o":{"x":1,"y":0},"t":33,"s":[0,-3.659],"to":[0,-2.13],"ti":[0,-0.61]},{"t":37.390625,"s":[0,0]}],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"N","np":3,"cix":2,"bm":0,"ix":6,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0.557,-0.373],[0.861,0],[0.557,0.836],[0,1.128],[-0.482,0.722],[-1.064,0],[-0.507,-0.335],[-0.051,-0.57],[0,0],[1.266,0.887],[1.545,0],[1.247,-1.349],[0,-2.014],[-1.229,-1.33],[-2.014,0],[-0.836,1.178],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[-0.102,0.621],[-0.558,0.374],[-1.064,0],[-0.482,-0.722],[0,-1.127],[0.557,-0.836],[0.722,0],[0.506,0.336],[0,0],[-0.152,-1.596],[-1.128,-0.785],[-2.014,0],[-1.248,1.349],[0,2.014],[1.266,1.368],[1.684,0],[0,0],[0,0],[0,0],[0,0]],"v":[[37.772,-7.429],[37.772,-4.807],[40.242,-4.807],[39.254,-3.316],[37.126,-2.755],[34.694,-4.009],[33.972,-6.783],[34.694,-9.557],[37.126,-10.811],[38.969,-10.307],[39.805,-8.949],[43.339,-8.949],[41.211,-12.673],[37.202,-13.851],[32.309,-11.827],[30.438,-6.783],[32.281,-1.767],[37.202,0.285],[40.983,-1.482],[41.192,0],[43.472,0],[43.472,-7.429]],"c":true},"ix":2},"nm":"G","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.266666666667,0.266666666667,0.266666666667,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":1,"k":[{"i":{"x":0,"y":1},"o":{"x":1,"y":0},"t":33,"s":[0,0],"to":[0,-0.522],"ti":[0,1.438]},{"i":{"x":0,"y":1},"o":{"x":1,"y":0},"t":39,"s":[0,-3.302],"to":[0,-2.232],"ti":[0,-0.55]},{"t":43,"s":[0,0]}],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"G","np":3,"cix":2,"bm":0,"ix":7,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":80,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Index_finger","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[256,256,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":0,"s":[{"i":[[9.888,1.745],[0,0],[1.5,-10.5],[-3.25,-6.75],[-10.75,-1],[-2.25,4],[0.25,0.25]],"o":[[-8.5,-1.5],[0,0],[-1.5,10.5],[3.25,6.75],[10.75,1],[2.25,-4],[-0.25,-0.25]],"v":[[30,-130.75],[17,-130.25],[6.75,-118],[8,-67.75],[22.25,-57.75],[38.75,-68],[40.5,-116.25]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":6,"s":[{"i":[[9.888,1.745],[0,0],[1.5,-10.5],[-3.25,-6.75],[-10.75,-1],[-2.25,4],[0.25,0.25]],"o":[[-8.5,-1.5],[0,0],[-1.5,10.5],[3.25,6.75],[10.75,1],[2.25,-4],[-0.25,-0.25]],"v":[[30,-133.122],[17,-132.622],[6.75,-120.372],[8.279,-69.564],[22.529,-59.564],[39.029,-69.814],[40.5,-118.622]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":11,"s":[{"i":[[9.888,1.745],[0,0],[1.5,-10.5],[-3.25,-6.75],[-10.75,-1],[-2.25,4],[0.25,0.25]],"o":[[-8.5,-1.5],[0,0],[-1.5,10.5],[3.25,6.75],[10.75,1],[2.25,-4],[-0.25,-0.25]],"v":[[30,-129.599],[17,-129.099],[6.75,-116.849],[8.512,-65.576],[22.762,-55.576],[39.262,-65.826],[40.5,-115.099]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":22,"s":[{"i":[[9.5,3.948],[0,0],[1.5,-10.5],[-3.25,-6.75],[-10.75,-1],[-1.278,4.408],[0.25,0.25]],"o":[[-7.971,-3.312],[0,0],[-1.5,10.5],[3.25,6.75],[10.75,1],[3.727,-12.849],[-0.25,-0.25]],"v":[[30,-72.948],[15.5,-73.948],[5.25,-61.698],[30.523,35.599],[44.773,45.599],[61.273,35.349],[45.5,-45.948]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":30,"s":[{"i":[[9.5,3.948],[0,0],[1.5,-10.5],[-3.25,-6.75],[-10.75,-1],[-1.278,4.408],[0.25,0.25]],"o":[[-7.971,-3.312],[0,0],[-1.5,10.5],[3.25,6.75],[10.75,1],[3.727,-12.849],[-0.25,-0.25]],"v":[[30,-72.948],[15.5,-73.948],[5.25,-61.698],[30.523,35.599],[44.773,45.599],[61.273,35.349],[45.5,-45.948]],"c":true}]},{"t":43,"s":[{"i":[[9.888,1.745],[0,0],[1.5,-10.5],[-3.25,-6.75],[-10.75,-1],[-2.25,4],[0.25,0.25]],"o":[[-8.5,-1.5],[0,0],[-1.5,10.5],[3.25,6.75],[10.75,1],[2.25,-4],[-0.25,-0.25]],"v":[[30,-130.75],[17,-130.25],[6.75,-118],[8,-67.75],[22.25,-57.75],[38.75,-68],[40.5,-116.25]],"c":true}]}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.419607877731,0,0.454901993275,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 3","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":0,"s":[{"i":[[9.888,1.745],[0,0],[-3.25,-11.25],[1.637,-12.477],[-1.239,-0.169],[-2.25,4],[0.25,0.25]],"o":[[-8.5,-1.5],[0,0],[3.492,12.089],[-0.826,6.293],[5.5,0.75],[2.25,-4],[-0.25,-0.25]],"v":[[30,-130.75],[17,-130.25],[29,-118.25],[29.75,-75.25],[26.75,-58.5],[38.75,-68],[40.5,-116.25]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":6,"s":[{"i":[[9.888,1.745],[0,0],[-3.25,-11.25],[1.637,-12.477],[-1.239,-0.169],[-2.25,4],[0.25,0.25]],"o":[[-8.5,-1.5],[0,0],[3.492,12.089],[-0.826,6.293],[5.5,0.75],[2.25,-4],[-0.25,-0.25]],"v":[[29.75,-133],[16.75,-132.5],[28.75,-120.5],[29.5,-77.5],[26.5,-60.75],[38.5,-70.25],[40.25,-118.5]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":11,"s":[{"i":[[9.888,1.745],[0,0],[-3.25,-11.25],[1.637,-12.477],[-1.239,-0.169],[-2.25,4],[0.25,0.25]],"o":[[-8.5,-1.5],[0,0],[3.492,12.089],[-0.826,6.293],[5.5,0.75],[2.25,-4],[-0.25,-0.25]],"v":[[30,-128.75],[17,-128.25],[29,-116.25],[29.75,-73.25],[26.75,-56.5],[38.75,-66],[40.5,-114.25]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":22,"s":[{"i":[[9.888,1.745],[0,0],[-3.25,-11.25],[-0.75,-13.25],[-1.235,-0.19],[-0.744,4.529],[0.25,0.25]],"o":[[-8.5,-1.5],[0,0],[3.492,12.089],[0.359,6.336],[3.25,0.5],[2.75,-16.75],[-0.25,-0.25]],"v":[[28,-73.75],[13,-73.25],[29.5,-59.75],[52.75,28],[52.25,44],[61.75,35.25],[43.75,-52.25]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":30,"s":[{"i":[[9.888,1.745],[0,0],[-3.25,-11.25],[-0.75,-13.25],[-1.235,-0.19],[-0.744,4.529],[0.25,0.25]],"o":[[-8.5,-1.5],[0,0],[3.492,12.089],[0.359,6.336],[3.25,0.5],[2.75,-16.75],[-0.25,-0.25]],"v":[[28,-73.75],[13,-73.25],[29.5,-59.75],[52.75,28],[52.25,44],[61.75,35.25],[43.75,-52.25]],"c":true}]},{"t":43,"s":[{"i":[[9.888,1.745],[0,0],[-3.25,-11.25],[1.637,-12.477],[-1.239,-0.169],[-2.25,4],[0.25,0.25]],"o":[[-8.5,-1.5],[0,0],[3.492,12.089],[-0.826,6.293],[5.5,0.75],[2.25,-4],[-0.25,-0.25]],"v":[[30,-130.75],[17,-130.25],[29,-118.25],[29.75,-75.25],[26.75,-58.5],[38.75,-68],[40.5,-116.25]],"c":true}]}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.050980392156862744,0.4627450980392157,0.9450980392156862,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 2","np":3,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":0,"s":[{"i":[[9.888,1.745],[0,0],[1.5,-10.5],[-3.25,-6.75],[-10.75,-1],[-2.25,4],[0.25,0.25]],"o":[[-8.5,-1.5],[0,0],[-1.5,10.5],[3.25,6.75],[10.75,1],[2.25,-4],[-0.25,-0.25]],"v":[[30,-130.75],[17,-130.25],[6.75,-118],[8,-67.75],[22.25,-57.75],[38.75,-68],[40.5,-116.25]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":6,"s":[{"i":[[9.888,1.745],[0,0],[1.5,-10.5],[-3.25,-6.75],[-10.75,-1],[-2.25,4],[0.25,0.25]],"o":[[-8.5,-1.5],[0,0],[-1.5,10.5],[3.25,6.75],[10.75,1],[2.25,-4],[-0.25,-0.25]],"v":[[30,-133.122],[17,-132.622],[6.75,-120.372],[8.279,-69.564],[22.529,-59.564],[39.029,-69.814],[40.5,-118.622]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":11,"s":[{"i":[[9.888,1.745],[0,0],[1.5,-10.5],[-3.25,-6.75],[-10.75,-1],[-2.25,4],[0.25,0.25]],"o":[[-8.5,-1.5],[0,0],[-1.5,10.5],[3.25,6.75],[10.75,1],[2.25,-4],[-0.25,-0.25]],"v":[[30,-129.599],[17,-129.099],[6.75,-116.849],[8.512,-65.576],[22.762,-55.576],[39.262,-65.826],[40.5,-115.099]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":22,"s":[{"i":[[9.5,3.948],[0,0],[1.5,-10.5],[-3.25,-6.75],[-10.75,-1],[-1.278,4.408],[0.25,0.25]],"o":[[-7.971,-3.312],[0,0],[-1.5,10.5],[3.25,6.75],[10.75,1],[3.727,-12.849],[-0.25,-0.25]],"v":[[30,-72.948],[15.5,-73.948],[5.25,-61.698],[30.523,35.599],[44.773,45.599],[61.273,35.349],[45.5,-45.948]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":30,"s":[{"i":[[9.5,3.948],[0,0],[1.5,-10.5],[-3.25,-6.75],[-10.75,-1],[-1.278,4.408],[0.25,0.25]],"o":[[-7.971,-3.312],[0,0],[-1.5,10.5],[3.25,6.75],[10.75,1],[3.727,-12.849],[-0.25,-0.25]],"v":[[30,-72.948],[15.5,-73.948],[5.25,-61.698],[30.523,35.599],[44.773,45.599],[61.273,35.349],[45.5,-45.948]],"c":true}]},{"t":43,"s":[{"i":[[9.888,1.745],[0,0],[1.5,-10.5],[-3.25,-6.75],[-10.75,-1],[-2.25,4],[0.25,0.25]],"o":[[-8.5,-1.5],[0,0],[-1.5,10.5],[3.25,6.75],[10.75,1],[2.25,-4],[-0.25,-0.25]],"v":[[30,-130.75],[17,-130.25],[6.75,-118],[8,-67.75],[22.25,-57.75],[38.75,-68],[40.5,-116.25]],"c":true}]}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.2901960784313726,0.5647058823529412,0.8862745098039215,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"bm":0,"ix":3,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":80,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"Middle_finger","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[256,256,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":0,"s":[{"i":[[9.375,-1.616],[0,0],[-1.75,-10.75],[-1.25,-4.25],[-8.75,-0.5],[1,13],[3,5]],"o":[[-7.25,1.25],[0,0],[1.75,10.75],[1.25,4.25],[8.75,0.5],[-1,-13],[-3,-5]],"v":[[-24.5,-140.75],[-36,-130.75],[-35.5,-117.5],[-28,-74.5],[-15,-61],[5.5,-75.25],[-5.25,-132.25]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":11,"s":[{"i":[[9.375,-1.616],[0,0],[-1.75,-10.75],[-1.25,-4.25],[-8.75,-0.5],[1,13],[3,5]],"o":[[-7.25,1.25],[0,0],[1.75,10.75],[1.25,4.25],[8.75,0.5],[-1,-13],[-3,-5]],"v":[[-23.25,-115.75],[-34.75,-105.75],[-34.25,-92.5],[-20.5,-34.5],[-7.5,-21],[13,-35.25],[-4,-107.25]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":22,"s":[{"i":[[11.347,-1.939],[0,0],[-1.576,-9.505],[-1.513,-5.149],[-10.587,-0.606],[4.501,20.379],[3.63,6.058]],"o":[[-14.136,2.416],[0,0],[2.159,13.018],[1.512,5.149],[10.587,0.606],[-3.407,-15.426],[-3.63,-6.058]],"v":[[-19.572,-73.033],[-33.863,-59.542],[-32.383,-43.737],[-11.62,23.537],[5.985,48.019],[25.79,24.003],[1.47,-60.859]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":28,"s":[{"i":[[11.347,-1.939],[0,0],[-1.576,-9.505],[-1.513,-5.149],[-10.587,-0.606],[4.501,20.379],[3.63,6.058]],"o":[[-14.136,2.416],[0,0],[2.159,13.018],[1.512,5.149],[10.587,0.606],[-3.407,-15.426],[-3.63,-6.058]],"v":[[-19.572,-73.033],[-33.863,-59.542],[-32.383,-43.737],[-11.62,23.537],[5.985,48.019],[25.79,24.003],[1.47,-60.859]],"c":true}]},{"t":43,"s":[{"i":[[9.375,-1.616],[0,0],[-1.75,-10.75],[-1.25,-4.25],[-8.75,-0.5],[1,13],[3,5]],"o":[[-7.25,1.25],[0,0],[1.75,10.75],[1.25,4.25],[8.75,0.5],[-1,-13],[-3,-5]],"v":[[-24.5,-140.75],[-36,-130.75],[-35.5,-117.5],[-28,-74.5],[-15,-61],[5.5,-75.25],[-5.25,-132.25]],"c":true}]}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.419607877731,0,0.454901993275,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[-0.916,-1.008],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 3","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":0,"s":[{"i":[[6.983,-0.66],[-3.834,-11.242],[-1.839,-8.422],[-0.584,-7.242],[-3.51,0.965],[0.266,4.988],[8.051,17.579]],"o":[[-9.334,0.883],[3.796,11.131],[2.338,10.709],[1.03,12.774],[4.816,-1.324],[-1.031,-19.307],[-2.921,-6.377]],"v":[[-24.5,-140.75],[-14.25,-125.75],[-8.75,-101.375],[-4,-74.5],[-1.875,-62.75],[5.5,-75.25],[-5.25,-132.25]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":11,"s":[{"i":[[-2.412,-1.507],[-2.855,-11.53],[-1.839,-8.422],[-0.584,-7.242],[-3.612,0.453],[0.266,4.988],[6.572,18.184]],"o":[[6.416,4.008],[2.416,9.758],[2.338,10.709],[1.03,12.774],[6.416,-0.805],[-1.031,-19.307],[-4.334,-11.992]],"v":[[-23,-114.75],[-6.25,-84.5],[-0.75,-60.125],[4,-33.25],[2.375,-21.25],[13.5,-34],[-3.75,-106.25]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":22,"s":[{"i":[[-2.412,-1.507],[-2.855,-11.53],[-1.839,-8.422],[-0.584,-7.242],[-3.612,0.453],[0.266,4.988],[6.572,18.184]],"o":[[6.416,4.008],[2.416,9.758],[2.338,10.709],[1.03,12.774],[6.416,-0.805],[-1.031,-19.307],[-4.334,-11.992]],"v":[[-22,-72.5],[-2.75,-41.75],[5,-15.125],[16,34],[14.375,46],[25.5,33.25],[-0.25,-63.5]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":28,"s":[{"i":[[-2.412,-1.507],[-2.855,-11.53],[-1.839,-8.422],[-0.584,-7.242],[-3.612,0.453],[0.266,4.988],[6.572,18.184]],"o":[[6.416,4.008],[2.416,9.758],[2.338,10.709],[1.03,12.774],[6.416,-0.805],[-1.031,-19.307],[-4.334,-11.992]],"v":[[-22,-72.5],[-2.75,-41.75],[5,-15.125],[16,34],[14.375,46],[25.5,33.25],[-0.25,-63.5]],"c":true}]},{"t":43,"s":[{"i":[[6.983,-0.66],[-3.834,-11.242],[-1.839,-8.422],[-0.584,-7.242],[-3.51,0.965],[0.266,4.988],[8.051,17.579]],"o":[[-9.334,0.883],[3.796,11.131],[2.338,10.709],[1.03,12.774],[4.816,-1.324],[-1.031,-19.307],[-2.921,-6.377]],"v":[[-24.5,-140.75],[-14.25,-125.75],[-8.75,-101.375],[-4,-74.5],[-1.875,-62.75],[5.5,-75.25],[-5.25,-132.25]],"c":true}]}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.050980392156862744,0.4627450980392157,0.9450980392156862,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-0.916,-1.008],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 2","np":3,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":0,"s":[{"i":[[9.375,-1.616],[0,0],[-1.75,-10.75],[-1.25,-4.25],[-8.75,-0.5],[1,13],[3,5]],"o":[[-7.25,1.25],[0,0],[1.75,10.75],[1.25,4.25],[8.75,0.5],[-1,-13],[-3,-5]],"v":[[-24.5,-140.75],[-36,-130.75],[-35.5,-117.5],[-28,-74.5],[-15,-61],[5.5,-75.25],[-5.25,-132.25]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":11,"s":[{"i":[[9.375,-1.616],[0,0],[-1.75,-10.75],[-1.25,-4.25],[-8.75,-0.5],[1,13],[3,5]],"o":[[-7.25,1.25],[0,0],[1.75,10.75],[1.25,4.25],[8.75,0.5],[-1,-13],[-3,-5]],"v":[[-23.25,-115.75],[-34.75,-105.75],[-34.25,-92.5],[-20.5,-34.5],[-7.5,-21],[13,-35.25],[-4,-107.25]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":22,"s":[{"i":[[11.347,-1.939],[0,0],[-1.576,-9.505],[-1.513,-5.149],[-10.587,-0.606],[4.501,20.379],[3.63,6.058]],"o":[[-14.136,2.416],[0,0],[2.159,13.018],[1.512,5.149],[10.587,0.606],[-3.407,-15.426],[-3.63,-6.058]],"v":[[-19.572,-73.033],[-33.863,-59.542],[-32.383,-43.737],[-11.62,23.537],[5.985,48.019],[25.79,24.003],[1.47,-60.859]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":28,"s":[{"i":[[11.347,-1.939],[0,0],[-1.576,-9.505],[-1.513,-5.149],[-10.587,-0.606],[4.501,20.379],[3.63,6.058]],"o":[[-14.136,2.416],[0,0],[2.159,13.018],[1.512,5.149],[10.587,0.606],[-3.407,-15.426],[-3.63,-6.058]],"v":[[-19.572,-73.033],[-33.863,-59.542],[-32.383,-43.737],[-11.62,23.537],[5.985,48.019],[25.79,24.003],[1.47,-60.859]],"c":true}]},{"t":43,"s":[{"i":[[9.375,-1.616],[0,0],[-1.75,-10.75],[-1.25,-4.25],[-8.75,-0.5],[1,13],[3,5]],"o":[[-7.25,1.25],[0,0],[1.75,10.75],[1.25,4.25],[8.75,0.5],[-1,-13],[-3,-5]],"v":[[-24.5,-140.75],[-36,-130.75],[-35.5,-117.5],[-28,-74.5],[-15,-61],[5.5,-75.25],[-5.25,-132.25]],"c":true}]}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.2901960784313726,0.5647058823529412,0.8862745098039215,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[-0.916,-1.008],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"bm":0,"ix":3,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":80,"st":0,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"Ring_finger","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[256,256,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":0,"s":[{"i":[[10,1],[0.392,-5.492],[-3.5,-9.25],[-7.75,-2.75],[4.636,19.412],[1,3.5]],"o":[[-10,-1],[-0.5,7],[6.128,16.195],[7.75,2.75],[-4,-16.75],[-1,-3.5]],"v":[[-55.5,-105],[-75.5,-93],[-71.5,-73.5],[-50,-28.5],[-26.75,-48],[-39.75,-87]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":11,"s":[{"i":[[11.181,1.09],[0.439,-5.987],[-3.913,-10.085],[-12.321,-5.496],[6.183,21.764],[1.118,3.816]],"o":[[-11.181,-1.09],[-0.559,7.632],[6.851,17.656],[9.694,4.324],[-5.138,-18.086],[-1.118,-3.816]],"v":[[-51.579,-63.91],[-73.941,-50.826],[-69.469,-29.566],[-34.429,44.746],[-12.683,21.736],[-33.969,-44.285]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":25,"s":[{"i":[[11.181,1.09],[0.439,-5.987],[-3.913,-10.085],[-12.321,-5.496],[6.183,21.764],[1.118,3.816]],"o":[[-11.181,-1.09],[-0.559,7.632],[6.851,17.656],[9.694,4.324],[-5.138,-18.086],[-1.118,-3.816]],"v":[[-51.579,-63.91],[-73.941,-50.826],[-69.469,-29.566],[-34.429,44.746],[-12.683,21.736],[-33.969,-44.285]],"c":true}]},{"t":36,"s":[{"i":[[10,1],[0.392,-5.492],[-3.5,-9.25],[-7.75,-2.75],[4.636,19.412],[1,3.5]],"o":[[-10,-1],[-0.5,7],[6.128,16.195],[7.75,2.75],[-4,-16.75],[-1,-3.5]],"v":[[-55.5,-105],[-75.5,-93],[-71.5,-73.5],[-50,-28.5],[-26.75,-48],[-39.75,-87]],"c":true}]}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.419607877731,0,0.454901993275,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 3","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":0,"s":[{"i":[[10.047,0.251],[-3.5,-2.25],[-3.5,-9.25],[5.75,-8.625],[4,14.875],[1,3.5]],"o":[[-5,-0.125],[10.073,6.476],[6.128,16.195],[-1.746,2.619],[-4.472,-16.63],[-1,-3.5]],"v":[[-55.5,-105],[-63.375,-102.125],[-47,-75.5],[-39.25,-28.625],[-26.75,-48],[-39.75,-87]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":11,"s":[{"i":[[10.047,0.251],[-3.811,-1.67],[-4.52,-8.796],[5.75,-8.625],[1.619,9.628],[1,3.5]],"o":[[-5,-0.125],[11.125,4.875],[9.25,18],[-1.746,2.619],[-4.75,-28.25],[-1,-3.5]],"v":[[-52.5,-63.75],[-60.375,-60.875],[-43.25,-40.25],[-22.75,43.625],[-11.5,30.25],[-36,-51.75]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":25,"s":[{"i":[[10.047,0.251],[-3.811,-1.67],[-4.52,-8.796],[5.75,-8.625],[1.619,9.628],[1,3.5]],"o":[[-5,-0.125],[11.125,4.875],[9.25,18],[-1.746,2.619],[-4.75,-28.25],[-1,-3.5]],"v":[[-52.5,-63.75],[-60.375,-60.875],[-43.25,-40.25],[-22.75,43.625],[-11.5,30.25],[-36,-51.75]],"c":true}]},{"t":36,"s":[{"i":[[10.047,0.251],[-3.5,-2.25],[-3.5,-9.25],[5.75,-8.625],[4,14.875],[1,3.5]],"o":[[-5,-0.125],[10.073,6.476],[6.128,16.195],[-1.746,2.619],[-4.472,-16.63],[-1,-3.5]],"v":[[-55.5,-105],[-63.375,-102.125],[-47,-75.5],[-39.25,-28.625],[-26.75,-48],[-39.75,-87]],"c":true}]}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.050980392156862744,0.4627450980392157,0.9450980392156862,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 2","np":3,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":0,"s":[{"i":[[10,1],[0.392,-5.492],[-3.5,-9.25],[-7.75,-2.75],[4.636,19.412],[1,3.5]],"o":[[-10,-1],[-0.5,7],[6.128,16.195],[7.75,2.75],[-4,-16.75],[-1,-3.5]],"v":[[-55.5,-105],[-75.5,-93],[-71.5,-73.5],[-50,-28.5],[-26.75,-48],[-39.75,-87]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":11,"s":[{"i":[[11.181,1.09],[0.439,-5.987],[-3.913,-10.085],[-12.321,-5.496],[6.183,21.764],[1.118,3.816]],"o":[[-11.181,-1.09],[-0.559,7.632],[6.851,17.656],[9.694,4.324],[-5.138,-18.086],[-1.118,-3.816]],"v":[[-51.579,-63.91],[-73.941,-50.826],[-69.469,-29.566],[-34.429,44.746],[-12.683,21.736],[-33.969,-44.285]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":25,"s":[{"i":[[11.181,1.09],[0.439,-5.987],[-3.913,-10.085],[-12.321,-5.496],[6.183,21.764],[1.118,3.816]],"o":[[-11.181,-1.09],[-0.559,7.632],[6.851,17.656],[9.694,4.324],[-5.138,-18.086],[-1.118,-3.816]],"v":[[-51.579,-63.91],[-73.941,-50.826],[-69.469,-29.566],[-34.429,44.746],[-12.683,21.736],[-33.969,-44.285]],"c":true}]},{"t":36,"s":[{"i":[[10,1],[0.392,-5.492],[-3.5,-9.25],[-7.75,-2.75],[4.636,19.412],[1,3.5]],"o":[[-10,-1],[-0.5,7],[6.128,16.195],[7.75,2.75],[-4,-16.75],[-1,-3.5]],"v":[[-55.5,-105],[-75.5,-93],[-71.5,-73.5],[-50,-28.5],[-26.75,-48],[-39.75,-87]],"c":true}]}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.2901960784313726,0.5647058823529412,0.8862745098039215,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"bm":0,"ix":3,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":80,"st":0,"bm":0},{"ddd":0,"ind":6,"ty":4,"nm":"little_finger","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[256,256,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":0,"s":[{"i":[[0,0],[8.75,-4.25],[1.75,-2.75],[-1.75,-7],[-5.439,-6.744],[-6.59,4.43],[-0.318,6.593],[4.5,12.75]],"o":[[0,0],[-8.75,4.25],[-1.75,2.75],[1.75,7],[4.264,5.288],[3.069,-2.063],[0,-0.5],[0.25,0.5]],"v":[[-67.375,-49.125],[-86.75,-54.75],[-98.25,-44.5],[-99.25,-25],[-83.5,9.5],[-62.097,14.598],[-56.5,2],[-66.75,-32.5]],"c":false}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":11,"s":[{"i":[[0,0],[7.796,-3.39],[1.75,-2.75],[-1.35,-7.088],[-2.25,-5],[-14.172,1.542],[1.375,10.625],[14.25,29.75]],"o":[[0,0],[-8.625,3.75],[-1.75,2.75],[3,15.75],[6.765,15.033],[4.691,-0.51],[0,-0.5],[0.25,0.5]],"v":[[-70.375,-33.875],[-85.5,-37.25],[-96.75,-27],[-97.75,-7.5],[-86.75,21.75],[-56.328,49.583],[-48.875,31.5],[-63.75,-12.75]],"c":false}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":25,"s":[{"i":[[0,0],[7.796,-3.39],[1.75,-2.75],[-1.35,-7.088],[-2.25,-5],[-14.172,1.542],[1.375,10.625],[14.25,29.75]],"o":[[0,0],[-8.625,3.75],[-1.75,2.75],[3,15.75],[6.765,15.033],[4.691,-0.51],[0,-0.5],[0.25,0.5]],"v":[[-70.375,-33.875],[-85.5,-37.25],[-96.75,-27],[-97.75,-7.5],[-86.75,21.75],[-56.328,49.583],[-48.875,31.5],[-63.75,-12.75]],"c":false}]},{"t":43,"s":[{"i":[[0,0],[8.75,-4.25],[1.75,-2.75],[-1.75,-7],[-5.439,-6.744],[-6.59,4.43],[-0.318,6.593],[4.5,12.75]],"o":[[0,0],[-8.75,4.25],[-1.75,2.75],[1.75,7],[4.264,5.288],[3.069,-2.063],[0,-0.5],[0.25,0.5]],"v":[[-67.375,-49.125],[-86.75,-54.75],[-98.25,-44.5],[-99.25,-25],[-83.5,9.5],[-62.097,14.598],[-56.5,2],[-66.75,-32.5]],"c":false}]}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.419607877731,0,0.454901993275,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 3","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":0,"s":[{"i":[[0,0],[4,1.5],[1.75,-2.75],[-1.75,-7],[-5.439,-6.744],[-1.028,3.652],[0.778,4.964],[2.806,7.435]],"o":[[0,0],[-3.511,-1.317],[-1.75,2.75],[1.75,7],[4.264,5.288],[1.126,-4.002],[-1.832,-11.695],[0,0]],"v":[[-66.375,-48.625],[-75.25,-53.5],[-82.75,-46.5],[-83.75,-26.75],[-66.125,7.375],[-57.472,10.348],[-57.125,-1.625],[-65.625,-35.625]],"c":false}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":11,"s":[{"i":[[0,0],[4,1.5],[1.75,-2.75],[-1.75,-7],[-5.439,-6.744],[-1.028,3.652],[0.778,4.964],[2.806,7.435]],"o":[[0,0],[-3.511,-1.317],[-1.75,2.75],[1.75,7],[4.264,5.288],[1.126,-4.002],[-1.832,-11.695],[0,0]],"v":[[-66.375,-30.125],[-73.5,-35],[-81,-28],[-82,-8.25],[-58.875,40.875],[-50.222,43.848],[-49.875,31.875],[-65.625,-17.125]],"c":false}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":25,"s":[{"i":[[0,0],[4,1.5],[1.75,-2.75],[-1.75,-7],[-5.439,-6.744],[-1.028,3.652],[0.778,4.964],[2.806,7.435]],"o":[[0,0],[-3.511,-1.317],[-1.75,2.75],[1.75,7],[4.264,5.288],[1.126,-4.002],[-1.832,-11.695],[0,0]],"v":[[-66.375,-30.125],[-73.5,-35],[-81,-28],[-82,-8.25],[-58.875,40.875],[-50.222,43.848],[-49.875,31.875],[-65.625,-17.125]],"c":false}]},{"t":43,"s":[{"i":[[0,0],[4,1.5],[1.75,-2.75],[-1.75,-7],[-5.439,-6.744],[-1.028,3.652],[0.778,4.964],[2.806,7.435]],"o":[[0,0],[-3.511,-1.317],[-1.75,2.75],[1.75,7],[4.264,5.288],[1.126,-4.002],[-1.832,-11.695],[0,0]],"v":[[-66.375,-48.625],[-75.25,-53.5],[-82.75,-46.5],[-83.75,-26.75],[-66.125,7.375],[-57.472,10.348],[-57.125,-1.625],[-65.625,-35.625]],"c":false}]}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.050980392156862744,0.4627450980392157,0.9450980392156862,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 2","np":3,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":0,"s":[{"i":[[0,0],[8.75,-4.25],[1.75,-2.75],[-1.75,-7],[-5.439,-6.744],[-6.59,4.43],[-0.318,6.593],[4.5,12.75]],"o":[[0,0],[-8.75,4.25],[-1.75,2.75],[1.75,7],[4.264,5.288],[3.069,-2.063],[0,-0.5],[0.25,0.5]],"v":[[-67.375,-49.125],[-86.75,-54.75],[-98.25,-44.5],[-99.25,-25],[-83.5,9.5],[-62.097,14.598],[-56.5,2],[-66.75,-32.5]],"c":false}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":11,"s":[{"i":[[0,0],[7.796,-3.39],[1.75,-2.75],[-1.35,-7.088],[-2.25,-5],[-14.172,1.542],[1.375,10.625],[14.25,29.75]],"o":[[0,0],[-8.625,3.75],[-1.75,2.75],[3,15.75],[6.765,15.033],[4.691,-0.51],[0,-0.5],[0.25,0.5]],"v":[[-70.375,-33.875],[-85.5,-37.25],[-96.75,-27],[-97.75,-7.5],[-86.75,21.75],[-56.328,49.583],[-48.875,31.5],[-63.75,-12.75]],"c":false}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":25,"s":[{"i":[[0,0],[7.796,-3.39],[1.75,-2.75],[-1.35,-7.088],[-2.25,-5],[-14.172,1.542],[1.375,10.625],[14.25,29.75]],"o":[[0,0],[-8.625,3.75],[-1.75,2.75],[3,15.75],[6.765,15.033],[4.691,-0.51],[0,-0.5],[0.25,0.5]],"v":[[-70.375,-33.875],[-85.5,-37.25],[-96.75,-27],[-97.75,-7.5],[-86.75,21.75],[-56.328,49.583],[-48.875,31.5],[-63.75,-12.75]],"c":false}]},{"t":43,"s":[{"i":[[0,0],[8.75,-4.25],[1.75,-2.75],[-1.75,-7],[-5.439,-6.744],[-6.59,4.43],[-0.318,6.593],[4.5,12.75]],"o":[[0,0],[-8.75,4.25],[-1.75,2.75],[1.75,7],[4.264,5.288],[3.069,-2.063],[0,-0.5],[0.25,0.5]],"v":[[-67.375,-49.125],[-86.75,-54.75],[-98.25,-44.5],[-99.25,-25],[-83.5,9.5],[-62.097,14.598],[-56.5,2],[-66.75,-32.5]],"c":false}]}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.2901960784313726,0.5647058823529412,0.8862745098039215,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"bm":0,"ix":3,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":80,"st":0,"bm":0},{"ddd":0,"ind":7,"ty":4,"nm":"Hand/Thump","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[256,256,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":0,"s":[{"i":[[0,0],[-6.5,-9.5],[-9,-0.75],[-1.75,14.5],[8.75,3.5],[6.25,2.25],[0,0],[0.75,5],[3.75,5.5],[26,-13.5],[0.5,-1],[-23.5,-54.5],[-12,-3],[-16,10],[-12.25,3.5],[0,0],[0,0],[0,0]],"o":[[0,0],[6.5,9.5],[9,0.75],[1.75,-14.5],[-8.75,-3.5],[-6.25,-2.25],[0,0],[-0.75,-5],[-3.75,-5.5],[-26,13.5],[-0.25,-0.25],[1,1.5],[12,3],[0.75,-0.5],[12.25,-3.5],[0,0],[0,0],[0,0]],"v":[[68.75,-1],[62.75,22],[90,37.75],[112.75,24.25],[96.25,-1.5],[59.5,-13.25],[42.5,-20],[35.25,-32],[28.875,-57.125],[-33.5,-72.5],[-68.5,-50.25],[-74.5,22],[-55,41],[-5,34],[39.25,32.5],[55.625,20.812],[52.375,20.812],[62.188,21.062]],"c":false}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":11,"s":[{"i":[[0,0],[-6.859,-11.174],[-9,-0.75],[-1.75,14.5],[8.75,3.5],[6.005,2.775],[0,0],[1.826,5.12],[4.682,4.515],[26.076,-10.152],[0.5,-1],[-23.5,-54.5],[-12,-3],[-16,10],[-12.25,3.5],[0,0],[0,0],[0,0]],"o":[[0,0],[6.073,9.765],[9,0.75],[1.75,-14.5],[-8.75,-3.5],[-4.696,-2.011],[0,0],[-1.591,-4.708],[-8.592,-6.875],[-29.924,14.848],[-0.25,-0.25],[1,1.5],[12,3],[0.75,-0.5],[12.25,-3.5],[0,0],[0,0],[0,0]],"v":[[68.511,-1.239],[61.315,22.837],[89.761,39.902],[110.478,25.565],[96.37,0.772],[55.315,-16.239],[44.533,-22.63],[39.12,-33.315],[28.538,-57.049],[-23.076,-62.848],[-67.957,-41.033],[-74.5,22],[-55,41],[-2.13,31.37],[39.25,32.5],[55.266,20.932],[52.375,20.812],[60.035,20.823]],"c":false}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":23,"s":[{"i":[[0,0],[-7.25,-13],[-9,-0.75],[-1.75,14.5],[8.75,3.5],[5.738,3.347],[0,0],[3,5.25],[5.699,3.44],[22.088,-10.756],[0.5,-1],[-18.5,-44.5],[-12,-3],[-16,10],[-12.25,3.5],[0,0],[0,0],[0,0]],"o":[[0,0],[5.607,10.053],[9,0.75],[1.75,-14.5],[-8.75,-3.5],[-3,-1.75],[0,0],[-2.508,-4.39],[-13.875,-8.375],[-28.75,14],[-0.25,-0.25],[1,1.5],[12,3],[0.75,-0.5],[12.25,-3.5],[0,0],[0,0],[0,0]],"v":[[68.25,-1.5],[59.75,23.75],[89.5,42.25],[108,27],[96.5,3.25],[50.75,-19.5],[46.75,-25.5],[41.25,-34.75],[27.125,-54.875],[-24.25,-56.5],[-70,-32.75],[-74.5,22],[-55,41],[1,28.5],[39.25,32.5],[54.875,21.062],[52.375,20.812],[57.688,20.562]],"c":false}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":25,"s":[{"i":[[0,0],[-7.25,-13],[-9,-0.75],[-1.75,14.5],[8.75,3.5],[5.738,3.347],[0,0],[3,5.25],[5.699,3.44],[22.088,-10.756],[0.5,-1],[-18.5,-44.5],[-12,-3],[-16,10],[-12.25,3.5],[0,0],[0,0],[0,0]],"o":[[0,0],[5.607,10.053],[9,0.75],[1.75,-14.5],[-8.75,-3.5],[-3,-1.75],[0,0],[-2.508,-4.39],[-13.875,-8.375],[-28.75,14],[-0.25,-0.25],[1,1.5],[12,3],[0.75,-0.5],[12.25,-3.5],[0,0],[0,0],[0,0]],"v":[[68.25,-1.5],[59.75,23.75],[89.5,42.25],[108,27],[96.5,3.25],[50.75,-19.5],[46.75,-25.5],[41.25,-34.75],[27.125,-54.875],[-24.25,-56.5],[-70,-32.75],[-74.5,22],[-55,41],[1,28.5],[39.25,32.5],[54.875,21.062],[52.375,20.812],[57.688,20.562]],"c":false}]},{"t":43,"s":[{"i":[[0,0],[-6.5,-9.5],[-9,-0.75],[-1.75,14.5],[8.75,3.5],[6.25,2.25],[0,0],[0.75,5],[3.75,5.5],[26,-13.5],[0.5,-1],[-23.5,-54.5],[-12,-3],[-16,10],[-12.25,3.5],[0,0],[0,0],[0,0]],"o":[[0,0],[6.5,9.5],[9,0.75],[1.75,-14.5],[-8.75,-3.5],[-6.25,-2.25],[0,0],[-0.75,-5],[-3.75,-5.5],[-26,13.5],[-0.25,-0.25],[1,1.5],[12,3],[0.75,-0.5],[12.25,-3.5],[0,0],[0,0],[0,0]],"v":[[68.75,-1],[62.75,22],[90,37.75],[112.75,24.25],[96.25,-1.5],[59.5,-13.25],[42.5,-20],[35.25,-32],[28.875,-57.125],[-33.5,-72.5],[-68.5,-50.25],[-74.5,22],[-55,41],[-5,34],[39.25,32.5],[55.625,20.812],[52.375,20.812],[62.188,21.062]],"c":false}]}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.419607877731,0,0.454901993275,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 3","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":0,"s":[{"i":[[26,-13.5],[0.5,-1],[-9.671,-39.373],[0,0],[-1.542,-3.576],[-12,-3],[-16,10],[-12.328,3.216],[0,0],[-2,0.312],[0,0],[0,0],[-7.625,-15.875],[-3,0.5],[-0.375,9.125],[8.75,3.5],[6.25,2.25],[0,0],[0.75,5],[3.75,5.5]],"o":[[-26,13.5],[-0.217,-0.217],[0.722,2.939],[0,0],[1,1.5],[12,3],[0.75,-0.5],[5.75,-1.5],[0,0],[-1.5,-11.562],[0,0],[0,0],[6.658,13.861],[4.378,-0.73],[0.6,-14.593],[-8.75,-3.5],[-6.25,-2.25],[0,0],[-0.75,-5],[-3.75,-5.5]],"v":[[-33.5,-72.5],[-60.25,-56.75],[-72.938,-4.015],[-35.467,-18.261],[-66.25,15.5],[-46.75,34.5],[3.5,28],[47.75,26.5],[55.625,20.812],[61.125,20.812],[67.062,0.562],[69.25,-1.5],[102.5,16],[99.5,38.25],[112.75,24.25],[96.25,-1.5],[59.5,-13.25],[42.5,-20],[35.25,-32],[28.875,-57.125]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":11,"s":[{"i":[[31,-14.75],[7.25,-6.25],[-2.812,-16.485],[0,0],[-1.542,-3.576],[-12,-3],[-16,10],[-14,1.75],[0,0],[-2,0.312],[0,0],[0,0],[-7.625,-15.875],[-3,0.5],[-0.375,9.125],[8.75,3.5],[6.25,2.25],[0,0],[2.5,6],[3.75,5.5]],"o":[[-31.818,15.139],[-3,5.25],[0.501,2.985],[0,0],[1,1.5],[12,3],[0.75,-0.5],[5.897,-0.737],[0,0],[-2.375,-12.312],[0,0],[0,0],[6.658,13.861],[4.378,-0.73],[0.6,-14.593],[-8.75,-3.5],[-6.25,-2.25],[0,0],[-1.945,-4.667],[-3.75,-5.5]],"v":[[-29.25,-60.25],[-71.375,-37.625],[-72.938,-4.015],[-35.467,-18.261],[-66.25,15.5],[-46.75,34.5],[7.75,24.25],[42.5,27],[52.125,20.312],[59.125,19.812],[67.062,0.562],[69.25,-1.5],[99.25,15.25],[98.5,40.5],[110.25,26.5],[97.75,2.75],[61.75,-12.75],[47.25,-20.25],[38.75,-35],[28.875,-57.125]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":23,"s":[{"i":[[31.75,-16.75],[5.25,-7.25],[-2.812,-16.485],[0,0],[-1.542,-3.576],[-12,-3],[-16,10],[-14,1.75],[0,0],[-2,0.312],[0,0],[0,0],[-2.979,-7.172],[-2.964,0.684],[-0.375,9.125],[8.75,3.5],[6.375,3.75],[0,0],[2.375,4.125],[3.75,5.5]],"o":[[-31.165,16.441],[-3,5.25],[0.501,2.985],[0,0],[1,1.5],[12,3],[0.75,-0.5],[5.897,-0.737],[0,0],[-2.375,-12.312],[0,0],[0,0],[6.75,16.25],[6.5,-1.5],[0.6,-14.593],[-8.75,-3.5],[-5.726,-3.368],[0,0],[-2.523,-4.382],[-3.75,-5.5]],"v":[[-22.75,-57.25],[-64,-28.75],[-65.938,4.485],[-28.467,-9.761],[-59.25,24],[-46.75,34.5],[7.75,24.25],[42.5,27],[52.125,20.312],[59.125,19.812],[67.062,0.562],[69.25,-1.5],[96.25,15],[98.5,40.5],[108.5,23.25],[88.25,-1.25],[58.75,-15.125],[51.75,-18.625],[45.75,-26.5],[34.125,-47.375]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":25,"s":[{"i":[[31.75,-16.75],[5.25,-7.25],[-2.812,-16.485],[0,0],[-1.542,-3.576],[-12,-3],[-16,10],[-14,1.75],[0,0],[-2,0.312],[0,0],[0,0],[-2.979,-7.172],[-2.964,0.684],[-0.375,9.125],[8.75,3.5],[6.375,3.75],[0,0],[2.375,4.125],[3.75,5.5]],"o":[[-31.165,16.441],[-3,5.25],[0.501,2.985],[0,0],[1,1.5],[12,3],[0.75,-0.5],[5.897,-0.737],[0,0],[-2.375,-12.312],[0,0],[0,0],[6.75,16.25],[6.5,-1.5],[0.6,-14.593],[-8.75,-3.5],[-5.726,-3.368],[0,0],[-2.523,-4.382],[-3.75,-5.5]],"v":[[-22.75,-57.25],[-64,-28.75],[-65.938,4.485],[-28.467,-9.761],[-59.25,24],[-46.75,34.5],[7.75,24.25],[42.5,27],[52.125,20.312],[59.125,19.812],[67.062,0.562],[69.25,-1.5],[96.25,15],[98.5,40.5],[108.5,23.25],[88.25,-1.25],[58.75,-15.125],[51.75,-18.625],[45.75,-26.5],[34.125,-47.375]],"c":true}]},{"t":43,"s":[{"i":[[26,-13.5],[0.5,-1],[-25.062,-31.735],[0,0],[-1.542,-3.576],[-12,-3],[-16,10],[-12.328,3.216],[0,0],[-2,0.312],[0,0],[0,0],[-7.625,-15.875],[-3,0.5],[-0.375,9.125],[8.75,3.5],[6.25,2.25],[0,0],[0.75,5],[3.75,5.5]],"o":[[-26,13.5],[-0.217,-0.217],[1.876,2.375],[0,0],[1,1.5],[12,3],[0.75,-0.5],[5.75,-1.5],[0,0],[-1.5,-11.562],[0,0],[0,0],[6.658,13.861],[4.378,-0.73],[0.6,-14.593],[-8.75,-3.5],[-6.25,-2.25],[0,0],[-0.75,-5],[-3.75,-5.5]],"v":[[-33.5,-72.5],[-59,-57.5],[-72.938,-4.015],[-35.467,-18.261],[-66.25,15.5],[-46.75,34.5],[3.5,28],[47.75,26.5],[55.625,20.812],[61.125,20.812],[67.062,0.562],[69.25,-1.5],[102.5,16],[99.5,38.25],[112.75,24.25],[96.25,-1.5],[59.5,-13.25],[42.5,-20],[35.25,-32],[28.875,-57.125]],"c":true}]}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.050980392156862744,0.4627450980392157,0.9450980392156862,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 2","np":3,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":0,"s":[{"i":[[0,0],[-6.5,-9.5],[-9,-0.75],[-1.75,14.5],[8.75,3.5],[6.25,2.25],[0,0],[0.75,5],[3.75,5.5],[26,-13.5],[0.5,-1],[-23.5,-54.5],[-12,-3],[-16,10],[-12.25,3.5],[0,0],[0,0],[0,0]],"o":[[0,0],[6.5,9.5],[9,0.75],[1.75,-14.5],[-8.75,-3.5],[-6.25,-2.25],[0,0],[-0.75,-5],[-3.75,-5.5],[-26,13.5],[-0.25,-0.25],[1,1.5],[12,3],[0.75,-0.5],[12.25,-3.5],[0,0],[0,0],[0,0]],"v":[[68.75,-1],[62.75,22],[90,37.75],[112.75,24.25],[96.25,-1.5],[59.5,-13.25],[42.5,-20],[35.25,-32],[28.875,-57.125],[-33.5,-72.5],[-68.5,-50.25],[-74.5,22],[-55,41],[-5,34],[39.25,32.5],[55.625,20.812],[52.375,20.812],[62.188,21.062]],"c":false}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":11,"s":[{"i":[[0,0],[-6.859,-11.174],[-9,-0.75],[-1.75,14.5],[8.75,3.5],[6.005,2.775],[0,0],[1.826,5.12],[4.682,4.515],[26.076,-10.152],[0.5,-1],[-23.5,-54.5],[-12,-3],[-16,10],[-12.25,3.5],[0,0],[0,0],[0,0]],"o":[[0,0],[6.073,9.765],[9,0.75],[1.75,-14.5],[-8.75,-3.5],[-4.696,-2.011],[0,0],[-1.591,-4.708],[-8.592,-6.875],[-29.924,14.848],[-0.25,-0.25],[1,1.5],[12,3],[0.75,-0.5],[12.25,-3.5],[0,0],[0,0],[0,0]],"v":[[68.511,-1.239],[61.315,22.837],[89.761,39.902],[110.478,25.565],[96.37,0.772],[55.315,-16.239],[44.533,-22.63],[39.12,-33.315],[28.538,-57.049],[-23.076,-62.848],[-67.957,-41.033],[-74.5,22],[-55,41],[-2.13,31.37],[39.25,32.5],[55.266,20.932],[52.375,20.812],[60.035,20.823]],"c":false}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":23,"s":[{"i":[[0,0],[-7.25,-13],[-9,-0.75],[-1.75,14.5],[8.75,3.5],[5.738,3.347],[0,0],[3,5.25],[5.699,3.44],[22.088,-10.756],[0.5,-1],[-18.5,-44.5],[-12,-3],[-16,10],[-12.25,3.5],[0,0],[0,0],[0,0]],"o":[[0,0],[5.607,10.053],[9,0.75],[1.75,-14.5],[-8.75,-3.5],[-3,-1.75],[0,0],[-2.508,-4.39],[-13.875,-8.375],[-28.75,14],[-0.25,-0.25],[1,1.5],[12,3],[0.75,-0.5],[12.25,-3.5],[0,0],[0,0],[0,0]],"v":[[68.25,-1.5],[59.75,23.75],[89.5,42.25],[108,27],[96.5,3.25],[50.75,-19.5],[46.75,-25.5],[41.25,-34.75],[27.125,-54.875],[-24.25,-56.5],[-70,-32.75],[-74.5,22],[-55,41],[1,28.5],[39.25,32.5],[54.875,21.062],[52.375,20.812],[57.688,20.562]],"c":false}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":25,"s":[{"i":[[0,0],[-7.25,-13],[-9,-0.75],[-1.75,14.5],[8.75,3.5],[5.738,3.347],[0,0],[3,5.25],[5.699,3.44],[22.088,-10.756],[0.5,-1],[-18.5,-44.5],[-12,-3],[-16,10],[-12.25,3.5],[0,0],[0,0],[0,0]],"o":[[0,0],[5.607,10.053],[9,0.75],[1.75,-14.5],[-8.75,-3.5],[-3,-1.75],[0,0],[-2.508,-4.39],[-13.875,-8.375],[-28.75,14],[-0.25,-0.25],[1,1.5],[12,3],[0.75,-0.5],[12.25,-3.5],[0,0],[0,0],[0,0]],"v":[[68.25,-1.5],[59.75,23.75],[89.5,42.25],[108,27],[96.5,3.25],[50.75,-19.5],[46.75,-25.5],[41.25,-34.75],[27.125,-54.875],[-24.25,-56.5],[-70,-32.75],[-74.5,22],[-55,41],[1,28.5],[39.25,32.5],[54.875,21.062],[52.375,20.812],[57.688,20.562]],"c":false}]},{"t":43,"s":[{"i":[[0,0],[-6.5,-9.5],[-9,-0.75],[-1.75,14.5],[8.75,3.5],[6.25,2.25],[0,0],[0.75,5],[3.75,5.5],[26,-13.5],[0.5,-1],[-23.5,-54.5],[-12,-3],[-16,10],[-12.25,3.5],[0,0],[0,0],[0,0]],"o":[[0,0],[6.5,9.5],[9,0.75],[1.75,-14.5],[-8.75,-3.5],[-6.25,-2.25],[0,0],[-0.75,-5],[-3.75,-5.5],[-26,13.5],[-0.25,-0.25],[1,1.5],[12,3],[0.75,-0.5],[12.25,-3.5],[0,0],[0,0],[0,0]],"v":[[68.75,-1],[62.75,22],[90,37.75],[112.75,24.25],[96.25,-1.5],[59.5,-13.25],[42.5,-20],[35.25,-32],[28.875,-57.125],[-33.5,-72.5],[-68.5,-50.25],[-74.5,22],[-55,41],[-5,34],[39.25,32.5],[55.625,20.812],[52.375,20.812],[62.188,21.062]],"c":false}]}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.2901960784313726,0.5647058823529412,0.8862745098039215,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"bm":0,"ix":3,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":80,"st":0,"bm":0},{"ddd":0,"ind":8,"ty":4,"nm":"shadow","sr":1,"ks":{"o":{"a":0,"k":50,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[256,256,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":0,"s":[{"i":[[95.5,4],[0,0],[-23.75,-2.25],[-23.5,1.25],[-5.25,3.25],[-5.36,-0.133],[-5.702,-0.129],[-6.5,-0.112],[-4.237,-0.051],[-11.143,5.65]],"o":[[-95.5,-4],[0,0],[0,-0.25],[0.25,0],[3.873,0.082],[4.819,0.119],[5.886,0.133],[4.1,0.07],[41.645,0.503],[0,-0.25]],"v":[[34.75,34.5],[-64,36.5],[-74,42.25],[-53.5,48.5],[-43.5,45.25],[-29.547,45.582],[-13.689,45.962],[4.972,46.338],[17.498,46.522],[116.5,40.75]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":11,"s":[{"i":[[75.5,3],[0,0],[-23.75,-2.25],[-23.5,1.25],[-0.75,5.25],[-6.787,-0.863],[-3.249,1.461],[-5.611,-0.094],[-3.459,-0.044],[-11.254,5.706]],"o":[[-95.508,-3.795],[0,0],[0,-0.25],[0.25,0],[4.708,0.099],[8.492,1.08],[4.732,-2.128],[3.368,0.057],[41.965,0.53],[0,-0.25]],"v":[[51.5,35.25],[-64,36.5],[-74,42.25],[-52.25,51],[-43.5,45.25],[-25.492,50.17],[-10.251,46.039],[5.998,46.855],[16.25,46.507],[116.5,40.75]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":23,"s":[{"i":[[75.5,3],[0,0],[-23.75,-2.25],[-23.5,1.25],[-0.75,5.25],[-6.787,-0.863],[-3.249,1.461],[-5.577,-0.624],[-3.75,1.243],[-11.254,5.706]],"o":[[-95.508,-3.795],[0,0],[0,-0.25],[0.25,0],[4.708,0.099],[8.492,1.08],[4.732,-2.128],[8.002,0.895],[42.25,1.493],[0,-0.25]],"v":[[51.5,35.25],[-64,36.5],[-74,42.25],[-52.25,51],[-43.5,45.25],[-25.492,50.17],[-10.251,46.039],[0.748,49.855],[18.75,46.757],[116.5,40.75]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"t":25,"s":[{"i":[[75.5,3],[0,0],[-23.75,-2.25],[-23.5,1.25],[-0.75,5.25],[-6.787,-0.863],[-3.249,1.461],[-5.577,-0.624],[-3.75,1.243],[-11.254,5.706]],"o":[[-95.508,-3.795],[0,0],[0,-0.25],[0.25,0],[4.708,0.099],[8.492,1.08],[4.732,-2.128],[8.002,0.895],[42.25,1.493],[0,-0.25]],"v":[[51.5,35.25],[-64,36.5],[-74,42.25],[-52.25,51],[-43.5,45.25],[-25.492,50.17],[-10.251,46.039],[0.748,49.855],[18.75,46.757],[116.5,40.75]],"c":true}]},{"t":43,"s":[{"i":[[95.5,4],[0,0],[-23.75,-2.25],[-23.5,1.25],[-5.25,3.25],[-5.36,-0.133],[-5.702,-0.129],[-6.5,-0.112],[-4.237,-0.051],[-11.143,5.65]],"o":[[-95.5,-4],[0,0],[0,-0.25],[0.25,0],[3.873,0.082],[4.819,0.119],[5.886,0.133],[4.1,0.07],[41.645,0.503],[0,-0.25]],"v":[[34.75,34.5],[-64,36.5],[-74,42.25],[-53.5,48.5],[-43.5,45.25],[-29.547,45.582],[-13.689,45.962],[4.972,46.338],[17.498,46.522],[116.5,40.75]],"c":true}]}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.266666680574,0.266666680574,0.266666680574,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":80,"st":0,"bm":0}],"markers":[]} --------------------------------------------------------------------------------