Looping preview · motionprompts.dev
The build prompt
From motionprompts.dev117,952 chars
# Larevoltosa Scroll Animation — Pinned "Zoom Into The Glasses" Spotlight
## Goal
Build a three-section scroll page whose middle **`.spotlight` section pins and, over three viewport-heights of scrubbed scroll, a giant inline SVG doodle character zooms up toward its glasses**. As it zooms, three things happen inside the two lens shapes: **white glare bands sweep across each lens**, a **full-bleed photo fades in clipped to the lens silhouettes**, and a **word-by-word headline reveals** in the centre. Everything is driven by a single pinned `ScrollTrigger` (`scrub: true`) reading `self.progress`, with Lenis smooth scroll. The lenses and their glare/photo layers are **generated at runtime** by cloning shapes out of the doodle SVG into `clipPath`s.
## Tech
Vanilla HTML/CSS/JS with ES module imports. Use `gsap` (npm) plus the GSAP plugins **`ScrollTrigger`** and **`SplitText`**, and **`lenis`** for smooth scroll. Register with `gsap.registerPlugin(ScrollTrigger, SplitText)`. The big character is an inline SVG string imported from a local module `./doodle.js` that exports `doodleSVG`. **`./doodle.js` is a REQUIRED, provided fixture — its full verbatim contents are in the Appendix at the very bottom of this prompt. Create the file exactly from that block; do NOT invent, redraw, or simplify a substitute doodle.** The whole visual payoff — and 100% of the peak-zoom frame — IS this artwork, so a hand-authored blob cannot be faithful; treat `doodle.js` exactly like an image fixture. No framework; runs in a fresh Vite project with `gsap` and `lenis` installed. Wrap all JS in a `DOMContentLoaded` listener.
## Layout / HTML
Three stacked full-viewport `<section>`s:
```html
<section class="intro">
<h1>Scrolling May Cause Joy</h1>
</section>
<section class="spotlight">
<div class="svg-container"></div> <!-- doodle SVG injected here at runtime -->
<div class="spotlight-header">
<h1>Insert Something Wildly Impressive Right Here</h1>
</div>
</section>
<section class="outro">
<h1>Thanks For Scrolling</h1>
</section>
<script type="module" src="./script.js"></script>
```
Load-bearing classes: `.spotlight` (the pinned ScrollTrigger trigger), `.svg-container` (JS sets its `innerHTML = doodleSVG`), `.spotlight-header h1` (the SplitText target). `.intro` and `.outro` are static filler screens (no animation). Copy is neutral demo text — no brands.
## Styling
**Font** — Google Fonts **Barlow Condensed** (load the full weight range 100–900 + italics). `body { font-family: "Barlow Condensed", sans-serif; }`.
**Reset** — `* { margin:0; padding:0; box-sizing:border-box; }`. `img { width:100%; height:100%; object-fit:cover; }`.
**Headings** — `h1 { text-transform:uppercase; font-size:clamp(3rem, 5vw, 7rem); font-weight:900; line-height:0.9; }`.
**Color tokens (exact hex)**
- `.intro`, `.outro` background `#252627` (near-black charcoal), text `#fff`.
- `.spotlight` background `#eb5e55` (coral red) — this is the hero backdrop the doodle sits on.
- **Lens interior fill `#eb5e55` (opaque)** — the two lens bodies are recoloured to this coral (see "Lens recolour" below). Because the camera zooms 43× into the lenses (origin `47% 21%`), the entire final frame IS lens interior, so this coral is the single most load-bearing colour in the component. The money shot must read coral/warm — never lavender, never charcoal.
- All sections: `color:#fff`.
**Sections** — `section { position:relative; width:100%; height:100svh; color:#fff; overflow:hidden; }`. `.intro`/`.outro` are `display:flex; justify-content:center; align-items:center; text-align:center;`.
**Doodle container** — `.svg-container { position:absolute; top:0; left:0; width:100%; height:100%; }`. The injected svg: `.svg-container svg { position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:50%; min-width:700px; }` — so the character is **anchored bottom-centre, half the viewport wide (min 700px)**, its head/glasses reaching up into the section.
**Lens recolour (the "empty coral glass" trick)** — the two **lens-body** paths (each filled with a coral→magenta `linearGradient`) are force-overridden to `fill:#eb5e55 !important`, the **exact same hex as the `.spotlight` background**. So before the photo reveals, each lens interior reads as coral "empty glass" that blends into the backdrop — only the thin dark rims and the white glare highlight show. This target hex MUST be the `.spotlight` coral **`#eb5e55`**, NOT the charcoal `#252627` of the intro/outro (which would leave dark holes punched over the coral). In the shipped fixture these two paths carry an inline `style` of `fill:url(#SVGID_…_)` with two specific gradient IDs, so the original selects them by attribute-substring — keep these selectors verbatim, they match the provided `doodle.js`:
```css
path[style*="00000165916812323603747700000005172204528299523731"],
path[style*="00000155118913244152270350000004269844240891065749"] {
fill: #eb5e55 !important;
}
```
For extra robustness you may instead recolour those two lens-body paths in JS to the live section colour rather than a hardcoded hex: `const coral = getComputedStyle(document.querySelector(".spotlight")).backgroundColor;` then set each lens-body path's `fill` to `coral`. Either way the target is the `.spotlight` coral — never another section's colour.
**Headline** — `.spotlight-header { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center; width:40%; z-index:2; }` (sits centred, above the doodle).
**Responsive** — `@media (max-width:1000px)`: `.intro h1, .outro h1 { width:75%; }` and `.spotlight-header { width:90%; }`.
## GSAP effect (be exhaustive)
### 1. Lenis smooth scroll wiring
```js
const lenis = new Lenis();
lenis.on("scroll", ScrollTrigger.update);
gsap.ticker.add((time) => lenis.raf(time * 1000));
gsap.ticker.lagSmoothing(0);
```
### 2. Config constants
```js
const settings = {
lensImageURL: "/c/larevoltosa-scroll-animation/img.jpg",
glaresPerLens: 2,
finalZoomScale: 22,
zoomFocusPoint: "47% 21%", // transform-origin over the glasses
};
```
### 3. Inject the doodle and build the lens machinery at runtime
`document.querySelector(".svg-container").innerHTML = doodleSVG;` then `const svg = document.querySelector("svg");`. Create a `<defs>` element (SVG namespace) and add it to the svg root with **`svg.insertBefore(defs, svg.firstChild)`**. Calling `insertBefore` **on `svg` is correct here** because `defs` is being inserted before `svg.firstChild` — a *direct* child of the `<svg>` element. **Do NOT reuse this `svg.insertBefore(...)` pattern for the lens group below** — the glare paths are NOT direct children of `<svg>` (see the explicit warning at the end of the per-glare loop).
Find the **glare paths** = every `<path>` in the svg whose computed `opacity === 0.6`. In this doodle there are **exactly two** (one highlight per lens). For **each** glare path (index `lensIndex`):
- `lensShape = glarePath.previousElementSibling` (the actual lens silhouette immediately before the glare). Skip if none.
- `const lensBounds = lensShape.getBBox();`
- **Build a clipPath**: `<clipPath id="lens-clip-{lensIndex}">` containing a `cloneNode(true)` of the lens shape; append to `defs`.
- **Build a clipped group**: `<g clip-path="url(#lens-clip-{lensIndex})">`.
- **Add the photo `<image>`** into that group: set both `href` and `xlink:href` (namespace `http://www.w3.org/1999/xlink`) to `settings.lensImageURL`; `x/y/width/height` = the lens bbox `x/y/width/height`; `preserveAspectRatio="xMidYMid slice"`; `opacity="0"`. Push it into a `lensImages[]` array.
- **Add the glare bands**: `bandWidth = lensBounds.width * 0.22`; `sweepDistance = lensBounds.width + bandWidth * 2` (= `1.44 × width`); `spacingBetweenBands = sweepDistance / glaresPerLens`. Loop `i` from `0` to `glaresPerLens-1`, creating a `<rect>` with:
- `x = lensBounds.x + lensBounds.width * 0.3 - i * spacingBetweenBands`
- `y = lensBounds.y - lensBounds.height * 0.25`
- `width = bandWidth`, `height = lensBounds.height * 1.5`
- `fill="#ffffff"`, `opacity="0.6"`
- Append to the group and push `{ band, sweepDistance }` into a `glareBands[]` array.
- Finally insert the group **in the glare's place, calling `insertBefore` on the glare's OWN parent — not on the `<svg>` root**:
```js
glarePath.parentNode.insertBefore(lensGroup, glarePath);
glarePath.remove();
```
The clipped group takes the glare's place in the z-order (photo + bands stacked, all clipped to the lens outline).
**CRITICAL — this is the single most bug-prone line in the whole component. Use `glarePath.parentNode.insertBefore(lensGroup, glarePath)`, NEVER `svg.insertBefore(lensGroup, glarePath)`.** The glare `<path>` is buried several `<g>` levels deep inside the fixture (`<svg><g id="OBJECTS"><g><g style="clip-path:…">…`), so it is **not** a child of the `<svg>` root. `insertBefore(newNode, referenceNode)` requires `referenceNode` to be a direct child of the node you call it on; calling `svg.insertBefore(lensGroup, glarePath)` therefore throws **`NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.`** Always insert relative to `glarePath.parentNode`, which is guaranteed to be the glare's real parent.
**Why this line is load-bearing for the entire effect:** this insert runs *synchronously inside the `glarePaths.forEach(...)` setup loop*. If it throws `NotFoundError`, the exception propagates out of the loop and **aborts the whole `DOMContentLoaded` handler**. Everything after it never runs: no `SplitText.create`, no `gsap.set` of `transformOrigin`/`transformBox`, and critically **no `ScrollTrigger.create`**. The result is a dead page — no pin, no 1→43 zoom into the glasses, no glare sweep, no photo reveal in the lenses, no word-by-word headline. The scroll just falls through the static sections. Getting this one line right is precisely what lets the `ScrollTrigger` (and the entire star effect) come into existence, so treat it as a hard blocker, not a detail.
### 4. SplitText the headline
```js
const spotlightHeader = document.querySelector(".spotlight-header h1");
const headerSplit = SplitText.create(spotlightHeader, { type: "words", wordsClass: "spotlight-word" });
gsap.set(headerSplit.words, { opacity: 0 });
```
### 5. Prime the zoom transform
```js
gsap.set(svg, { transformOrigin: settings.zoomFocusPoint, transformBox: "fill-box" });
```
`transformBox:"fill-box"` makes the `47% 21%` origin relative to the doodle's own geometry (i.e. locked onto the glasses), so the zoom homes into the lenses regardless of layout.
### 6. The pinned, scrubbed ScrollTrigger (the star)
```js
ScrollTrigger.create({
trigger: ".spotlight",
start: "top top",
end: () => "+=" + window.innerHeight * 3, // 3 viewport-heights of scroll
pin: true,
pinSpacing: true,
scrub: true,
onUpdate: (self) => { /* progress-driven, see below */ },
});
```
No timeline, no tweens with duration/ease — **every frame is a direct `gsap.set` keyed off `self.progress` (0→1)**. Inside `onUpdate`:
**a) Glare sweep** (`0 → 0.75` of progress):
```js
const glareProgress = Math.min(progress / 0.75, 1);
glareBands.forEach(({ band, sweepDistance }) => gsap.set(band, { x: glareProgress * sweepDistance }));
```
Each white band translates horizontally from `x:0` to `x:sweepDistance` (its full `1.44×width` traverse), completing at **progress 0.75**. Because bands are clipped to the lens, they read as light streaks wiping across the glass.
**b) Zoom into the glasses** (whole scroll):
```js
const scale = 1 + progress * 2 * (settings.finalZoomScale - 1); // 1 → 43 at progress 1
gsap.set(svg, { scale });
```
Note the literal formula: `1 + progress * 2 * (22 - 1)`, so scale runs **1 → 43** across the scroll, ballooning the doodle so the camera dives into the lenses (origin `47% 21%`).
**c) Photo fade-in inside the lenses** (`0.5 → 1`):
```js
if (progress >= 0.5) {
const fadeProgress = (progress - 0.5) / 0.5; // 0 → 1
lensImages.forEach((image) => gsap.set(image, { opacity: fadeProgress }));
} else {
lensImages.forEach((image) => gsap.set(image, { opacity: 0 }));
}
```
The clipped photo is invisible for the first half, then fades to fully opaque over the back half — so by the time you're deep in the zoom, each lens is a window onto the courtyard photo.
**d) Word-by-word headline reveal** (`0.65 → 0.85`):
```js
if (progress >= 0.65 && progress <= 0.85) {
const textProgress = (progress - 0.65) / 0.2; // 0 → 1 across the 20% window
const totalWords = headerSplit.words.length;
headerSplit.words.forEach((word, index) => {
const wordRevealProgress = index / totalWords;
gsap.set(word, { opacity: textProgress >= wordRevealProgress ? 1 : 0 });
});
} else if (progress < 0.65) {
gsap.set(headerSplit.words, { opacity: 0 });
} else if (progress > 0.85) {
gsap.set(headerSplit.words, { opacity: 1 });
}
```
Words pop from `opacity:0` to `1` **one at a time, left to right**, spread across progress 0.65→0.85; all hidden before 0.65, all shown after 0.85. It's a hard per-word opacity flip (no fade/stagger tween) — the sequencing comes purely from comparing `textProgress` against each word's normalized index.
### Timeline of the single scrub (progress → what's happening)
- `0.00–0.75` glare bands sweep across the lenses (finish at 0.75).
- `0.00–1.00` doodle scales 1 → 43, zooming into the glasses.
- `0.50–1.00` lens photo fades 0 → 1.
- `0.65–0.85` headline reveals word by word.
## Assets / images
- **One character doodle SVG** — provided **verbatim** as `./doodle.js` (see Appendix at the bottom); **do not substitute or redraw it.** It exports the string `doodleSVG`: a playful flat-illustration mascot, viewBox `0 0 500 500` (**1:1 square**), built from many gradient-filled `<path>`s, anchored bottom-centre of `.spotlight` and half-viewport wide (min 700px). Anatomy the camera actually lands on (all baked into the fixture — listed here only as context so you know what the final frame should look like):
- **Hair / body**: purple→cyan `linearGradient` (`#c779fc` → `#00e4f0`).
- **Skin**: peach `#f4c2ad` with an `#e39076` shadow tone.
- **Glasses**: two large round lenses filling most of the face with a nose-bridge between them; thin dark rims (`fill:none; stroke:#1f1f1f; stroke-width:2`).
- **Lens bodies**: originally a coral→magenta `linearGradient` (`#ff5766` → `#cc00f0`), but **overridden to solid coral `#eb5e55`** by the lens-recolour CSS above.
- **Lens glare**: exactly one `<path>` per lens at `style="opacity:0.6; fill:#ffffff"`.
Structural contract the runtime code depends on (already satisfied by the fixture): exactly **two lens-body shapes, each immediately followed by its sibling glare `<path>` at `opacity:0.6`** — the JS finds each lens via that glare's `previousElementSibling`, clones the lens outline into a `clipPath`, and inserts the photo+bands group in the glare's place. **Z-order matters for the payoff:** the clipped photo group sits above the lens fill, and the rims / dark bridge details drawn after it are thin (2 px stroke) relative to the lens diameter — so at full zoom the lens interior (photo + glare) remains the dominant, unobstructed element. A reinvented doodle with thick rims or the wrong lens colour will hide the payoff and fail fidelity; that is why the fixture is shipped, not described.
- **One photo** (`/c/larevoltosa-scroll-animation/img.jpg`, landscape ~16:9) revealed inside the lens clip shapes: a warm **terracotta/peach Moorish courtyard** — a symmetrical row of pointed horseshoe arches on slender salmon-pink columns, framing a leafy grey-green olive tree at the centre, with cascades of magenta/fuchsia bougainvillea spilling in from both side edges, all lit by a bright white overhead skylight. Dominant colours are warm terracotta/salmon-pink (walls and arches) with green (olive foliage) and vivid magenta (flowers) accents. Any lush, warm-toned architectural/garden image reads correctly; it's shown `slice`-cropped and centred inside each lens.
## Behavior notes
- Only the middle section animates; intro/outro are static. The whole effect is scroll-scrubbed — nothing runs on load, hover, or click.
- `pinSpacing:true` reserves the extra `window.innerHeight * 3` of scroll so the sections after the pin don't jump.
- `finalZoomScale` is `22` but the scale formula doubles the `(scale-1)` term, so peak scale is `43×` — keep the literal formula, not a `22×` cap.
- No reduced-motion guard in the original. Lens shapes, clipPaths, glare bands and the photo `<image>` are all created in JS at runtime — none of them exist in the static HTML.
## Acceptance criteria (verify before declaring done)
- **Console is clean.** No exceptions during setup — in particular **no `NotFoundError` from `insertBefore`**. If you see that error, you called `insertBefore` on the wrong node (see step 3): switch to `glarePath.parentNode.insertBefore(...)`.
- **The `ScrollTrigger` actually exists after setup.** The lens machinery is built *before* `ScrollTrigger.create`; if the lens loop throws, the trigger is never created and there is no real effect. Sanity-check that a pinned trigger exists (e.g. `ScrollTrigger.getAll().length > 0`, or observe that `.spotlight` pins).
- **The star effect is observable, not just "some scrolling happened."** Scrolling through `.spotlight` must **pin** the section and **zoom the doodle into the glasses** (scale climbing toward 43×), with the peak frame reading as **coral lens interior filling the screen** (the courtyard photo faded in inside the lens clip). A validator reporting `reproAnimated:true` is a **false positive** if all you have is ordinary scrolling between static intro/outro sections — the pass condition is the pinned zoom-into-lens, the glare sweep, and the word-by-word headline, all driven by the single scrubbed `ScrollTrigger`.
## Appendix — `./doodle.js` (REQUIRED verbatim fixture)
Create `./doodle.js` with **exactly** the content below (a ~92 KB ES module exporting `doodleSVG`, viewBox `0 0 500 500`). Do not redraw, simplify, re-minify, or substitute it — the entire peak-zoom frame is this artwork. The two lens-body paths carry the gradient IDs referenced by the lens-recolour CSS, and each lens body is immediately followed by its `opacity:0.6` white glare sibling, exactly as the runtime code requires.
~~~js
export const doodleSVG = `
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
x="0px"
y="0px"
viewBox="0 0 500 500"
style="enable-background: new 0 0 500 500"
xml:space="preserve"
>
<g id="OBJECTS">
<g>
<defs>
<rect
id="SVGID_00000096047778527669984780000011793510740351694481_"
y="39.002"
width="500"
height="460.998"
/>
</defs>
<clipPath
id="SVGID_00000093153939579634936360000016450208163738171783_"
>
<use
xlink:href="#SVGID_00000096047778527669984780000011793510740351694481_"
style="overflow: visible"
/>
</clipPath>
<g
style="
clip-path: url(#SVGID_00000093153939579634936360000016450208163738171783_);
"
>
<g>
<linearGradient
id="SVGID_00000170279579684690805840000012784778096686606746_"
gradientUnits="userSpaceOnUse"
x1="209.7526"
y1="103.0204"
x2="228.7526"
y2="211.6877"
>
<stop offset="0" style="stop-color: #c779fc" />
<stop offset="0.1258" style="stop-color: #c379fc" />
<stop offset="0.2475" style="stop-color: #b77afb" />
<stop offset="0.3675" style="stop-color: #a47cfb" />
<stop offset="0.4859" style="stop-color: #897efa" />
<stop offset="0.5562" style="stop-color: #757ff9" />
<stop offset="0.6281" style="stop-color: #6989f8" />
<stop offset="0.7575" style="stop-color: #4aa4f6" />
<stop offset="0.9284" style="stop-color: #17d0f2" />
<stop offset="1" style="stop-color: #00e4f0" />
</linearGradient>
<path
style="
fill: url(#SVGID_00000170279579684690805840000012784778096686606746_);
"
d="M159.256,117.426 c0,0-0.279,11.034-0.613,18.387c-3.667,10.604-8.499,18.434-5.833,28.436c2.666,10.001,5.095,14.252,2.839,19.335 c-2.256,5.083-7.339,13.165-7.006,19.124c9.917,2.126,24.499,1.959,24.499,1.959s-2.334-12,0-19.834 c0.751,3.167,4.585,17.583,8.001,20.917c13.833,1.25,72.583,11.153,114.75-7.715c2-11.368,5.834-24.831,3.167-32.35 c-2.667-7.519-4.325-10.171-4-15.019c0.833-12.407-2.336-17.966-6.418-22.066s-3.25-11.829-4.416-16.631 c-1.166-4.802-7.666-14.968-13.333-18.635c-5.667-3.667-9.126-5.271-12.938-13.334c-3.813-8.063-15.225-18.664-19.737-21.52 c-4.513-2.855-14.951-7.742-27.575-7.433C198.018,51.356,159.954,74.685,159.256,117.426z"
/>
<path
style="
fill: none;
stroke: #1f1f1f;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
"
d=" M159.256,117.426c0,0-0.279,11.034-0.613,18.387c-3.667,10.604-8.499,18.434-5.833,28.436 c2.666,10.001,5.095,14.252,2.839,19.335c-2.256,5.083-7.339,13.165-7.006,19.124c9.917,2.126,24.499,1.959,24.499,1.959 s-2.334-12,0-19.834c0.751,3.167,4.585,17.583,8.001,20.917c13.833,1.25,72.583,11.153,114.75-7.715 c2-11.368,5.834-24.831,3.167-32.35c-2.667-7.519-4.325-10.171-4-15.019c0.833-12.407-2.336-17.966-6.418-22.066 s-3.25-11.829-4.416-16.631c-1.166-4.802-7.666-14.968-13.333-18.635c-5.667-3.667-9.126-5.271-12.938-13.334 c-3.813-8.063-15.225-18.664-19.737-21.52c-4.513-2.855-14.951-7.742-27.575-7.433 C198.018,51.356,159.954,74.685,159.256,117.426z"
/>
</g>
<g>
<path
style="
fill: #f4c2ad;
stroke: #1f1f1f;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
"
d=" M416.975,449.262c0,0,3.349,9.632,3.758,12.144c0.409,2.512,0.491,14.678,2.325,19.428c1.834,4.75,3.009,6.917,4.005,12 c0.996,5.083-0.097,8.917,3.241,8.417c3.338-0.5,6.505-2.583,6.005-9.25s-1-6.583-1-7.75s1.052-4,1.052-4 s8.948,11.249,9.448,12.166c0.5,0.917,5.582,9.834,6.916,12.084c1.334,2.25,2.25,9.084,5.417,13.25 c3.167,4.166,6.001,3.749,6.167,2.916c0.166-0.833,0-4.833,0-4.833s2.416-6.251,2.833-7.917c0.417-1.666,0.417-15.832,0-19.166 c-0.417-3.334,0.25-10.75-0.5-12.167c-0.75-1.417-17.333-35.544-17.333-35.544L416.975,449.262z"
/>
<path
style="
fill: none;
stroke: #1f1f1f;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
"
d=" M464.309,515.833c-1.25-7.417-3.083-13.584-3.75-15.167c-0.667-1.583-4.001-13.749-4.834-16.416"
/>
<path
style="
fill: none;
stroke: #1f1f1f;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
"
d=" M467.454,500.08c-0.48-2.164-2.729-11.162-3.396-13.579s-2.042-7.084-2.042-7.084"
/>
<path
style="
fill: none;
stroke: #1f1f1f;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
"
d=" M466.995,485.835c-0.521-1.418-3.396-8.418-3.396-8.418"
/>
</g>
<g>
<path
style="
fill: #ffc800;
stroke: #1f1f1f;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
"
d=" M318.221,405.231H153.726c0,0-22.001,55.103-28.667,109.103h230.583C355.642,514.334,334.888,454.129,318.221,405.231z"
/>
<path
style="
fill: none;
stroke: #1f1f1f;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
"
d=" M221.392,405.231c0,0,1,55.269,2.25,70.269s8.75,24.5,8.75,24.5l2,14.334"
/>
<g>
<path
style="fill: #1f1f1f"
d="M177.429,452.784c1.262,0.949,2.458,1.95,3.605,2.988l1.713,1.563l1.7,1.48 c1.152,0.964,2.172,2.023,3.273,3.015c1.151,0.969,2.205,2.022,3.309,3.027c1.086,1.021,2.181,2.033,3.288,3.033 c1.086,1.023,2.168,2.044,3.217,3.11c1.056,1.059,1.985,2.261,2.883,3.517c0.883,1.272,1.791,2.535,2.718,3.786 c0.471,0.617,0.939,1.242,1.443,1.823c0.517,0.567,1.056,1.109,1.611,1.631c1.129,1.02,2.3,1.991,3.504,2.92 c1.204,0.927,2.383,1.891,3.609,2.79l3.715,2.65c1.258,0.855,2.542,1.673,3.813,2.507c1.288,0.81,2.59,1.597,3.907,2.357 c1.309,0.773,2.662,1.473,4.01,2.171c1.341,0.704,2.716,1.379,4.093,1.954l-0.74-0.064h0.001 c1.231-0.239,2.468-0.644,3.656-1.115c1.197-0.458,2.359-1.018,3.506-1.601c0.577-0.284,1.129-0.626,1.693-0.936 c0.565-0.309,1.12-0.64,1.655-1.015c0.539-0.364,1.044-0.801,1.56-1.21c0.501-0.44,0.979-0.929,1.465-1.39 c0.965-0.939,1.926-1.861,2.95-2.642c1.03-0.77,2.15-1.346,3.313-1.852c1.172-0.485,2.434-0.806,3.737-1.072 c1.282-0.303,2.597-0.57,3.819-1.008c1.257-0.38,2.352-1.045,3.498-1.623c1.134-0.599,2.289-1.168,3.399-1.812 c1.125-0.621,2.223-1.287,3.337-1.93c1.106-0.653,2.19-1.345,3.267-2.048c1.071-0.71,2.171-1.382,3.21-2.139l3.121-2.269 c1.044-0.751,2.013-1.6,3.012-2.409c1-0.809,1.984-1.636,2.945-2.489c0.413-0.367,1.046-0.329,1.412,0.084 c0.367,0.413,0.329,1.046-0.084,1.412c-0.011,0.01-0.021,0.019-0.031,0.026l-0.008,0.007l-3.03,2.457 c-1.014,0.813-2.006,1.655-3.058,2.419l-3.118,2.344c-1.026,0.798-2.114,1.513-3.174,2.266 c-1.07,0.736-2.119,1.506-3.208,2.216l-3.268,2.128c-1.079,0.725-2.205,1.376-3.311,2.058c-1.115,0.668-2.211,1.369-3.35,1.996 l-3.39,1.929l-3.44,1.835c-1.142,0.624-2.32,1.175-3.478,1.766c-1.157,0.594-2.339,1.136-3.516,1.69 c-1.171,0.564-2.364,1.083-3.555,1.608c-1.184,0.538-2.395,1.018-3.595,1.523c-1.21,0.48-2.416,0.972-3.643,1.416 c-1.225,0.459-2.444,0.886-3.721,1.292h-0.001c-0.253,0.081-0.521,0.048-0.741-0.064c-2.752-1.441-5.393-2.969-8.019-4.565 c-1.313-0.792-2.602-1.623-3.903-2.434l-3.842-2.526l-3.781-2.617l-3.717-2.707c-1.25-0.888-2.434-1.864-3.653-2.793 l-1.817-1.409l-1.772-1.466c-1.173-0.987-2.383-1.933-3.526-2.955l-3.443-3.054c-1.15-1.015-2.229-2.109-3.347-3.16 c-1.112-1.057-2.224-2.115-3.27-3.241l-3.189-3.323l-3.049-3.482l-1.52-1.743l-1.414-1.8l-2.824-3.6 c-0.335-0.428-0.26-1.045,0.167-1.38c0.357-0.28,0.849-0.273,1.196-0.014L177.429,452.784z"
/>
</g>
<g>
<path
style="fill: #1f1f1f"
d="M249.857,465.759c0.001-0.001-0.627,2.365-1.744,5.824c-0.564,1.732-1.245,3.744-2.04,5.878 c-0.795,2.134-1.679,4.4-2.667,6.625c-0.469,1.123-1.007,2.218-1.516,3.305c-0.497,1.091-1.082,2.125-1.597,3.147 c-0.534,1.014-1.119,1.962-1.638,2.878c-0.545,0.902-1.119,1.727-1.619,2.502c-0.508,0.771-1.065,1.426-1.511,2.033 c-0.439,0.613-0.895,1.099-1.27,1.499c-0.742,0.807-1.166,1.267-1.166,1.267c-0.374,0.406-1.007,0.433-1.413,0.059 c-0.407-0.374-0.433-1.007-0.058-1.414c0.008-0.009,0.017-0.019,0.026-0.027l0.049-0.049c0,0,0.411-0.41,1.13-1.129 c0.355-0.364,0.79-0.805,1.218-1.383c0.433-0.571,0.978-1.171,1.472-1.909c0.472-0.753,1.015-1.546,1.533-2.425 c0.493-0.895,1.05-1.816,1.56-2.809c0.505-0.998,0.999-2.039,1.452-3.124c0.453-1.085,0.935-2.174,1.349-3.296 c0.435-1.111,0.858-2.227,1.236-3.341c0.36-1.12,0.637-2.254,0.782-3.39c0.171-1.126,0.275-2.232,0.421-3.259 c0.146-1.027,0.333-1.978,0.582-2.829c0.237-0.855,0.484-1.63,0.837-2.274c0.346-0.648,0.735-1.188,1.138-1.61 c0.381-0.432,0.764-0.738,1.049-0.947c0.288-0.209,0.475-0.318,0.475-0.318l0.711-0.414c0.396-0.23,0.905-0.097,1.136,0.3 C249.888,465.325,249.912,465.553,249.857,465.759z"
/>
</g>
<path
style="
fill: none;
stroke: #1f1f1f;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
"
d=" M238.267,405.231c0,0,0,61.421-0.5,71.47c-0.5,10.049-1.915,15.031-3.375,21.1"
/>
</g>
<g>
<g>
<path
style="fill: #ffffff"
d="M150.392,408l-11,21.822c0,0,12.834,30.011,51.833,48.511c4.85,2.301,6.542,0.542,8.042-1.708 s29.125-49.25,29.125-49.25h6.375c0,0,12.035,31.25,27.125,52.038c1.458,2.008,2.5,3.212,5.75,2.462s52.125-18.352,68.5-32.613 l-9.875-33.512L150.392,408z"
/>
<path
style="fill: #dbdbff"
d="M333.073,438.848l-6.807-23.098L150.392,408l-10.362,20.558 c7.198,2.961,29.425,10.48,79.456,13.954c4.975-8.449,8.906-15.137,8.906-15.137h6.375c0,0,2.645,6.869,7.012,16.31 C288.452,445.374,318.858,441.422,333.073,438.848z"
/>
<path
style="
fill: none;
stroke: #1f1f1f;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
"
d=" M150.392,408l-11,21.822c0,0,12.834,30.011,51.833,48.511c4.85,2.301,6.542,0.542,8.042-1.708s29.125-49.25,29.125-49.25h6.375 c0,0,12.035,31.25,27.125,52.038c1.458,2.008,2.5,3.212,5.75,2.462s52.125-18.352,68.5-32.613l-9.875-33.512L150.392,408z"
/>
</g>
<g>
<path
style="fill: #f4c2ad"
d="M258.892,120.853c0,0,1.991,18.922,6.334,32.647c6.333,20.016,13,32,30.667,37.5v49.333h-78.834 v-52.166c0,0,10.448-7.591,9.184-16.334c-0.796-5.5-20.578-40.556-20.578-40.556L258.892,120.853z"
/>
<path
style="fill: #1f1f1f"
d="M225.636,177.296c3.604,1.859,9.957,5.112,14.09,7.079c6.041,2.875,9.041,1.625,11.666-2.5 c2.261-3.552,9.027-19.836,10.652-40.986c-2.145-10.465-3.152-20.036-3.152-20.036l-53.228,10.425 c0,0,19.782,35.056,20.578,40.556C226.517,173.73,226.238,175.573,225.636,177.296z"
/>
<path
style="
fill: none;
stroke: #1f1f1f;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
"
d=" M258.892,120.853c0,0,1.991,18.922,6.334,32.647c6.333,20.016,13,32,30.667,37.5v49.333h-78.834v-52.166 c0,0,10.448-7.591,9.184-16.334c-0.796-5.5-20.578-40.556-20.578-40.556L258.892,120.853z"
/>
</g>
<path
style="
fill: #ffffff;
stroke: #1f1f1f;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
"
d=" M244.309,194.75c0,0,5.083,8.399,9.333,11.762v38.863h-35.875V196L244.309,194.75z"
/>
<polygon
style="
fill: #ffffff;
stroke: #1f1f1f;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
"
points=" 257.567,193.626 253.642,206.512 245.017,210.673 245.017,250 288.642,250 288.642,201.75 "
/>
<g>
<g>
<path
style="fill: #575dff"
d="M250.778,219c0,0,27.114-17.333,33.78-37.333c0,0,3.5-1.75,6.25,0s2.15,3.842,2.65,4.342 s38.849,19.325,44.599,21.908c5.75,2.583,6.666,4.5,8.5,7.583c1.834,3.083,97.084,169.75,100.084,180.25s1.5,28,1.5,28 s7.625,21.125,7.875,22.5s0,2.75-1,3.625s-8.125,5.625-22.875,9.125s-19.75,3.625-20.25,2.5s-6.875-21.875-6.875-21.875 s-21.29-3.958-28.957-14.291c-7.667-10.333-41.334-84.834-41.334-84.834s-1.667,4.333-1.5,5.5s4.833,35.834,4.333,40.167 c-0.5,4.333-7.833,11.333-7.833,11.333s1.001,22.167,0.667,24c-0.334,1.833-1.334,3.333-1.334,3.333s-31.832,10-95.666,6.5 s-83.666-15.333-85-16c-1.334-0.667-2.667-3-2.167-6.5s6-21,6-21s-3.166-16-2.666-19.5s15.666-17.667,15.666-17.667 s-12.209-42.791-13.709-45.166s-3.25-9.25-3.25-11.25s6.375-11,6.375-11s-3.625-39.375-3.875-46.75s-1.875-16.25,7-21.625 s54.5-26.875,54.5-26.875s2.375-4,6.75-3.5C227.598,200.339,236.79,212.625,250.778,219z"
/>
<path
style="fill: #61fcff"
d="M333.226,346c-0.114-0.798,0.629-3.076,1.11-4.438c0.235-0.917,0.421-1.728,0.438-2.068 c0.048-0.997,4.368-61.076,3.118-71.16c0,0-9.25,72.416-11,79.166c3.5,15,4.668,32.75,2.834,37 c-1.834,4.25-2.834,6.5-2.834,6.5s-33.514,8.331-69.507,11.281c0,0,45.356,0.495,72.429-4.866 c0.824-0.802,7.277-7.192,7.745-11.248C338.059,381.834,333.393,347.167,333.226,346z"
/>
<path
style="fill: #61fcff"
d="M446.642,395.75c-2.755-9.644-83.316-151.001-97.866-176.395 c0.033,0.077,33.869,77.65,39.366,88.395C393.642,318.5,446.642,395.75,446.642,395.75z"
/>
<path
style="fill: #61fcff"
d="M157.226,230.56c-0.407-2.878,0.642-6.608,3.154-8.917 c2.513-2.309,24.794-20.686,24.795-20.686c-11.569,5.612-23.344,11.457-27.408,13.919c-8.875,5.375-7.25,14.25-7,21.625 s3.875,46.75,3.875,46.75S157.633,233.438,157.226,230.56z"
/>
<path
style="fill: #393ecc"
d="M250.778,219c-10.976-5.002-18.994-13.655-26.087-24.797 c-10.116-2.439-18.011-2.333-19.031,0.635l-6.287,18.274l-11.896,34.582c-0.789,2.294,2.717,5.768,8.727,9.213 c-2.265,0.253-4.747,0.416-7.469,0.457c0,0-0.817,1.751-0.897,2.541c-0.081,0.79-16.185,9.198-17.964,11.027 c-1.778,1.828-1.196,9.26,0.922,15.591c-4.551,6.823-12.129,14.593-13.824,16.849c-0.691,0.919-1.882,4.624-3.075,8.927 c3.999,12.672,11.33,38.367,11.33,38.367s-0.502,0.47-1.32,1.252c0.919,1.032,1.805,1.922,2.627,2.607 c6.407,5.344,9.211,4.959,11.84,4.643c2.63-0.317,23.395-9.257,31.46-16.056c8.065-6.799,10.507-12.666,10.488-15.766 c-0.018-3.102,0.215-19.328,0.24-19.577c1.025-2.659,2.853-12.442,3.098-12.751c4.094-4.357,6.638-12.055,6.368-13.507 c-0.233-1.253-1.516-11.143-2.326-14.317c5.561,0.521,9.415-0.175,10.107-2.186l11.896-34.583l4.819-14.013 C252.227,218.071,250.778,219,250.778,219z"
/>
<path
style="
fill: none;
stroke: #1f1f1f;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
"
d=" M250.778,219c0,0,27.114-17.333,33.78-37.333c0,0,3.5-1.75,6.25,0s2.15,3.842,2.65,4.342s38.849,19.325,44.599,21.908 c5.75,2.583,6.666,4.5,8.5,7.583c1.834,3.083,97.084,169.75,100.084,180.25s1.5,28,1.5,28s7.625,21.125,7.875,22.5 s0,2.75-1,3.625s-8.125,5.625-22.875,9.125s-19.75,3.625-20.25,2.5s-6.875-21.875-6.875-21.875s-21.29-3.958-28.957-14.291 c-7.667-10.333-41.334-84.834-41.334-84.834s-1.667,4.333-1.5,5.5s4.833,35.834,4.333,40.167 c-0.5,4.333-7.833,11.333-7.833,11.333s1.001,22.167,0.667,24c-0.334,1.833-1.334,3.333-1.334,3.333s-31.832,10-95.666,6.5 s-83.666-15.333-85-16c-1.334-0.667-2.667-3-2.167-6.5s6-21,6-21s-3.166-16-2.666-19.5s15.666-17.667,15.666-17.667 s-12.209-42.791-13.709-45.166s-3.25-9.25-3.25-11.25s6.375-11,6.375-11s-3.625-39.375-3.875-46.75s-1.875-16.25,7-21.625 s54.5-26.875,54.5-26.875s2.375-4,6.75-3.5C227.598,200.339,236.79,212.625,250.778,219z"
/>
</g>
<path
style="
fill: none;
stroke: #1f1f1f;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
"
d=" M405.017,439.625c0,0,27-5.938,43.125-15.875"
/>
<g>
<path
style="
fill: none;
stroke: #1f1f1f;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
"
d=" M445.599,425.236c0,0,5.82,13.906,9.213,24.804"
/>
<path
style="
fill: none;
stroke: #1f1f1f;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
"
d=" M442.439,426.899c0,0,5.981,14.344,9.3,25.051"
/>
<path
style="
fill: none;
stroke: #1f1f1f;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
"
d=" M439.747,428.676c0,0,5.854,14.208,9.099,24.726"
/>
<path
style="
fill: none;
stroke: #1f1f1f;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
"
d=" M436.727,429.822c0,0,5.511,14.731,8.68,25.06"
/>
<path
style="
fill: none;
stroke: #1f1f1f;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
"
d=" M433.375,430.915c0,0,5.742,15.022,8.837,25.161"
/>
<path
style="
fill: none;
stroke: #1f1f1f;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
"
d=" M430.304,432.315c0,0,5.596,14.896,8.617,24.844"
/>
<path
style="
fill: none;
stroke: #1f1f1f;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
"
d=" M427.063,433.262c0,0,5.761,15.053,8.707,24.813"
/>
<path
style="
fill: none;
stroke: #1f1f1f;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
"
d=" M423.869,434.346c0,0,5.401,15.086,8.273,24.654"
/>
<path
style="
fill: none;
stroke: #1f1f1f;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
"
d=" M420.732,435.555c0,0,5.329,14.826,8.127,24.205"
/>
<path
style="
fill: none;
stroke: #1f1f1f;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
"
d=" M417.563,436.701c0,0,5.096,14.624,7.819,23.813"
/>
<path
style="
fill: none;
stroke: #1f1f1f;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
"
d=" M414.192,437.283c0,0,4.828,14.958,7.477,23.957"
/>
<path
style="
fill: none;
stroke: #1f1f1f;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
"
d="M410.846,438.19 c0,0,4.967,14.773,7.54,23.583"
/>
<path
style="
fill: none;
stroke: #1f1f1f;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
"
d=" M407.686,438.994c0,0,4.518,14.517,7.018,23.137"
/>
</g>
<path
style="
fill: none;
stroke: #1f1f1f;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
"
d=" M342.832,210.673c1.94,9.673-0.607,39.494-4.94,57.661c0.167,2.667-1.5,37.166-3.166,72.166c0,0,11.5-21.666,14.833-38.5 c8.5-21,7.833-30,7.833-30"
/>
<path
style="
fill: none;
stroke: #1f1f1f;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
"
d=" M334.726,340.5c0,0,14.916-11.5,24.041-26.375"
/>
<path
style="
fill: none;
stroke: #1f1f1f;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
"
d="M346.064,214.669 c2.202,15.831-2.128,44.712-8.213,56.834"
/>
<g>
<path
style="fill: #1f1f1f"
d="M311.723,264.055c-0.083,1.185-0.252,2.303-0.442,3.434c-0.208,1.123-0.441,2.239-0.723,3.343 c-0.15,0.549-0.273,1.105-0.445,1.648l-0.496,1.633c-0.359,1.079-0.734,2.152-1.163,3.206 c-0.196,0.534-0.428,1.054-0.659,1.573c-0.235,0.517-0.443,1.047-0.703,1.553l-0.761,1.526 c-0.242,0.515-0.548,0.996-0.818,1.496c-0.287,0.49-0.54,1.001-0.855,1.475l-0.915,1.439c-0.608,0.96-1.311,1.856-1.963,2.787 l0.053-0.079l-1.362,1.823l-1.45,1.609c-0.95,1.096-1.98,2.084-2.983,3.109c-0.996,1.032-2.025,2.025-3.07,3 c-1.041,0.979-2.065,1.979-3.122,2.939c-2.142,1.89-4.22,3.854-6.414,5.682c-2.185,1.837-4.323,3.733-6.568,5.498 c-2.237,1.772-4.412,3.626-6.707,5.326c-2.281,1.716-4.521,3.49-6.837,5.159l-6.965,4.987l-7.118,4.77l-1.781,1.19 l-1.824,1.125l-3.649,2.247l-3.649,2.246l-3.734,2.105l-3.737,2.102c-1.244,0.703-2.484,1.414-3.772,2.036l-7.656,3.867 c-2.575,1.242-5.22,2.341-7.827,3.519c-1.315,0.562-2.599,1.198-3.941,1.697l-4.021,1.509l-4.021,1.508 c-0.673,0.242-1.334,0.522-2.018,0.733l-2.059,0.619l-8.234,2.472c-0.514,0.154-1.057-0.138-1.211-0.651 c-0.129-0.432,0.055-0.882,0.42-1.107l0.287-0.177c2.516-1.552,5.084-2.756,7.654-3.912l1.945-0.8 c0.647-0.267,1.265-0.628,1.914-0.891c1.287-0.56,2.557-1.162,3.854-1.684c2.595-1.042,5.213-2.018,7.784-3.143 c2.564-1.132,5.221-2.058,7.817-3.144l7.816-3.263c1.317-0.523,2.599-1.123,3.881-1.724l3.859-1.79 c1.288-0.598,2.583-1.188,3.848-1.832l3.741-2.031l3.699-2.112c0.615-0.355,1.239-0.696,1.846-1.063l1.791-1.153l7.162-4.619 l7.017-4.843c2.336-1.621,4.595-3.348,6.898-5.018c1.153-0.834,2.291-1.687,3.405-2.57c1.119-0.877,2.256-1.733,3.352-2.641 c2.23-1.766,4.352-3.662,6.522-5.5c1.089-0.915,2.151-1.86,3.2-2.819c1.059-0.948,2.109-1.906,3.142-2.883 c1.031-0.979,2.028-1.991,3.043-2.984c1.018-0.99,2.018-1.997,2.981-3.036c0.969-1.032,1.975-2.038,2.871-3.118l1.379-1.594 l1.165-1.622l0.008-0.01l0.046-0.07c0.285-0.472,0.603-0.919,0.859-1.407c0.274-0.476,0.538-0.958,0.738-1.478 c0.207-0.515,0.411-1.029,0.576-1.56c0.177-0.524,0.29-1.082,0.435-1.615c0.112-0.551,0.251-1.082,0.328-1.639l0.262-1.638 c0.148-1.092,0.324-2.149,0.494-3.194c0.076-0.526,0.217-1.023,0.318-1.534c0.12-0.505,0.225-1.012,0.383-1.5 c0.128-0.498,0.277-0.989,0.442-1.477c0.193-0.479,0.332-0.972,0.562-1.445c0.211-0.48,0.425-0.956,0.688-1.43 c0.262-0.475,0.517-0.949,0.845-1.423c0.285-0.476,0.663-0.949,1.037-1.428c0.376-0.49,0.802-0.95,1.314-1.45l0.564-0.553 c0.333-0.326,0.867-0.32,1.193,0.013C311.659,263.584,311.738,263.824,311.723,264.055z"
/>
</g>
<g>
<path
style="fill: #1f1f1f"
d="M319.183,309.167c-0.117,0.418-0.284,0.872-0.436,1.314c-0.146,0.453-0.333,0.861-0.503,1.289 c-0.181,0.42-0.333,0.853-0.537,1.262l-0.597,1.23c-0.208,0.405-0.378,0.831-0.618,1.219l-0.683,1.183l-0.683,1.182 c-0.239,0.388-0.513,0.752-0.768,1.129l-0.778,1.121c-0.269,0.367-0.498,0.763-0.8,1.104l-1.761,2.086 c-0.305,0.337-0.561,0.717-0.905,1.019l-0.986,0.943l-1.974,1.883l0.068-0.066l-1.388,1.213l-1.403,1.015 c-0.927,0.699-1.895,1.297-2.849,1.93c-0.95,0.64-1.919,1.242-2.897,1.828c-0.976,0.59-1.941,1.198-2.926,1.771 c-1.984,1.115-3.934,2.301-5.949,3.359c-2.011,1.067-3.994,2.189-6.039,3.19c-2.04,1.009-4.045,2.091-6.118,3.032 c-2.065,0.958-4.106,1.968-6.191,2.882l-6.263,2.727l-6.346,2.53l-1.587,0.632l-1.61,0.571l-3.222,1.141l-3.221,1.142 l-3.264,1.017c-2.185,0.649-4.336,1.408-6.548,1.969c-2.205,0.582-4.424,1.11-6.634,1.667 c-2.222,0.511-4.474,0.897-6.708,1.35c-1.122,0.203-2.23,0.473-3.363,0.619l-3.393,0.45l-3.39,0.448 c-0.566,0.068-1.127,0.166-1.696,0.208l-1.708,0.111l-6.824,0.441c-0.294,0.019-0.547-0.204-0.566-0.498 c-0.018-0.281,0.186-0.526,0.462-0.563l0.059-0.008l6.721-0.868l1.674-0.216c0.558-0.076,1.109-0.21,1.663-0.313l3.317-0.657 l3.31-0.655c1.105-0.204,2.18-0.579,3.267-0.868c2.172-0.601,4.314-1.3,6.464-1.939c2.124-0.756,4.287-1.328,6.478-1.816 l3.28-0.772c1.094-0.262,2.208-0.461,3.314-0.694l3.329-0.681c1.096-0.276,2.205-0.521,3.295-0.825 c1.091-0.299,2.182-0.607,3.256-0.959c0.538-0.173,1.081-0.332,1.616-0.516l1.587-0.598l6.349-2.395l6.273-2.597 c2.081-0.891,4.12-1.876,6.183-2.809c2.067-0.924,4.079-1.965,6.107-2.973c2.03-1.001,3.998-2.123,5.993-3.19 c1.998-1.064,3.939-2.228,5.892-3.368c0.97-0.581,1.918-1.196,2.878-1.792c0.962-0.594,1.912-1.202,2.838-1.843 c0.929-0.635,1.885-1.242,2.764-1.924l1.342-0.997l1.166-1.04l0.012-0.01l0.057-0.057c0.591-0.645,1.217-1.249,1.769-1.925 c0.278-0.334,0.574-0.649,0.836-0.995c0.28-0.328,0.475-0.735,0.715-1.096l1.361-2.204c0.234-0.356,0.396-0.767,0.596-1.145 c0.189-0.386,0.375-0.772,0.591-1.136c0.426-0.732,0.814-1.482,1.201-2.231c0.186-0.379,0.405-0.739,0.625-1.1 c0.235-0.353,0.376-0.751,0.611-1.104c0.221-0.361,0.416-0.734,0.66-1.088c0.253-0.351,0.422-0.732,0.679-1.085 c0.233-0.358,0.499-0.725,0.736-1.064c0.238-0.352,0.524-0.684,0.816-1.078l0.215-0.289c0.318-0.429,0.924-0.519,1.353-0.2 C319.158,308.374,319.286,308.792,319.183,309.167z"
/>
</g>
<path
style="
fill: none;
stroke: #1f1f1f;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
"
d=" M152.226,387.833c0,0,86.834,24.833,177.5,9.667"
/>
<path
style="
fill: none;
stroke: #1f1f1f;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
"
d=" M152.226,220.661c0,0,16.916,22.589,26.916,61.339"
/>
<path
style="
fill: none;
stroke: #1f1f1f;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
"
d="M154.547,217.411 c0,0,15.345,17.02,23.72,61.305"
/>
<path
style="
fill: none;
stroke: #1f1f1f;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
"
d=" M212.267,188c0,0,10.231,29.667,38.512,39.5c22.28-6.667,42.28-41.976,42.28-41.976"
/>
</g>
<path
style="
fill: #ffffff;
stroke: #1f1f1f;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
"
d=" M257.567,193.626c0,0,13.825,16.457,17.158,21.042c1.882,2.588,4.167,2.002,5.417,0c1.25-2.002,7.25-18.558,6.75-33.78 c0,0-12.584-9.722-12.917-9.972s-1.713,0.353-1.713,0.353S270.017,180.889,257.567,193.626z"
/>
<path
style="
fill: #ffffff;
stroke: #1f1f1f;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
"
d=" M226.266,174.644c0,0,8.127,12.35,18.043,20.106c0,0-14.665,19.96-16.499,21.647c-1.834,1.686-3.752,1.27-4.751-0.48 c-0.999-1.75-5.69-16.643-7.262-30.946l8.429-9.804L226.266,174.644z"
/>
</g>
<path
style="
fill: #f4c2ad;
stroke: #1f1f1f;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
"
d=" M183.388,60.613c37.979-17.978,65.9,17.498,74.455,48.445c5.709,20.651,2.707,39.186-1.742,48.291 c-4.447,9.104-10.982,13.952-10.983,13.952c0,0-7.56,3.012-17.643,2.012s-27.43-8.186-41.999-23.895 C163.642,125.875,148.134,83.476,183.388,60.613z"
/>
<path
style="fill: #e39076"
d="M254.886,106.267c-0.5-2.108-1.998-7.199-6.728-8.897c-5.489-1.972-11.744-1.832-19.136,3.667 c-6.145,4.571-8.56,10.979-8.096,14.942l-0.826-1.773c-0.152,1.42-1.518,2.872-3.943,4.338c-1.959,1.184-4.555,1.751-5.759,1.206 l1.108,1.612c-3.179-2.412-9.926-3.585-16.983-0.612c-8.491,3.577-11.787,8.894-12.875,14.625 c-0.938,4.938,2.688,8.813,4.25,10.313c3.302,3.17,12.438,7.625,22.063,2.25c9.219-5.148,9.816-14.958,6.619-22.108l0.568,0.827 c-0.583-2.471,0.799-5.227,2.191-6.022s4.468-0.587,6.301,1.17l-0.423-0.908c4.536,6.383,13.291,10.849,22.406,5.521 C255.14,120.853,255.94,110.721,254.886,106.267z"
/>
<g>
<g>
<linearGradient
id="SVGID_00000165916812323603747700000005172204528299523731_"
gradientUnits="userSpaceOnUse"
x1="191.406"
y1="121.0214"
x2="203.4062"
y2="143.8966"
>
<stop offset="0" style="stop-color: #ff5766" />
<stop offset="0.1756" style="stop-color: #fe556a" />
<stop offset="0.3456" style="stop-color: #f94d76" />
<stop offset="0.5133" style="stop-color: #f24189" />
<stop offset="0.6797" style="stop-color: #e830a4" />
<stop offset="0.8435" style="stop-color: #db1ac7" />
<stop offset="1" style="stop-color: #cc00f0" />
</linearGradient>
<path
style="
fill: url(#SVGID_00000165916812323603747700000005172204528299523731_);
"
d="M209.857,118.225 c-2.239-3.187-10.041-5.333-18.25-1.875c-8.491,3.577-11.787,8.894-12.875,14.625c-0.938,4.938,2.688,8.813,4.25,10.313 c3.302,3.17,12.438,7.625,22.063,2.25C215.741,137.564,214.836,125.311,209.857,118.225z"
/>
<path
style="opacity: 0.6; fill: #ffffff"
d="M210.627,138.618c-1.321,1.874-3.148,3.561-5.582,4.919 c-0.727,0.406-1.45,0.749-2.169,1.048v-29.801c3.302,0.491,5.851,1.832,6.981,3.44c0.27,0.384,0.524,0.786,0.77,1.198V138.618z M192.293,116.089c-0.229,0.088-0.456,0.165-0.686,0.261c-5.03,2.119-8.227,4.851-10.231,7.915v15.284 c0.6,0.737,1.18,1.329,1.606,1.738c1.741,1.672,5.107,3.7,9.311,4.456V116.089z"
/>
<path
style="fill: #1f1f1f"
d="M178.389,128.6c-0.563,1.781-2.594,5.281-3,5.969c-0.406,0.688-0.875,1.5-0.25,2.781 c0.625,1.281,1.531,2.5,2.281,3.219c0.75,0.719,1.25,0.906,2.313,0.688c1.063-0.219,2.271-0.386,3.48,0.245 c0,0-4.198-5.213-4.323-8.87C178.764,128.975,178.389,128.6,178.389,128.6z"
/>
<path
style="
fill: none;
stroke: #1f1f1f;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
"
d=" M209.857,118.225c-2.239-3.187-10.041-5.333-18.25-1.875c-8.491,3.577-11.787,8.894-12.875,14.625 c-0.938,4.938,2.688,8.813,4.25,10.313c3.302,3.17,12.438,7.625,22.063,2.25C215.741,137.564,214.836,125.311,209.857,118.225z "
/>
</g>
<g>
<linearGradient
id="SVGID_00000155118913244152270350000004269844240891065749_"
gradientUnits="userSpaceOnUse"
x1="2591.2512"
y1="-1210.1075"
x2="2603.2517"
y2="-1187.2313"
gradientTransform="matrix(-0.5077 0.8615 0.8615 0.5077 2588.3188 -1519.1564)"
>
<stop offset="0" style="stop-color: #ff5766" />
<stop offset="0.1756" style="stop-color: #fe556a" />
<stop offset="0.3456" style="stop-color: #f94d76" />
<stop offset="0.5133" style="stop-color: #f24189" />
<stop offset="0.6797" style="stop-color: #e830a4" />
<stop offset="0.8435" style="stop-color: #db1ac7" />
<stop offset="1" style="stop-color: #cc00f0" />
</linearGradient>
<path
style="
fill: url(#SVGID_00000155118913244152270350000004269844240891065749_);
"
d="M218.456,113.312 c-1.609-3.547,0.503-11.358,7.65-16.675c7.392-5.5,13.646-5.64,19.136-3.668c4.73,1.699,6.228,6.789,6.728,8.897 c1.055,4.454,0.254,14.586-9.263,20.15C232.13,128.199,222.033,121.198,218.456,113.312z"
/>
<path
style="opacity: 0.6; fill: #ffffff"
d="M220.511,102.681c1.318-2.126,3.157-4.23,5.596-6.044 c1.843-1.371,3.614-2.408,5.321-3.163v30.603c-4.477-0.914-8.335-3.787-10.917-7.287V102.681z M249.762,96.586 c-1.018-1.497-2.463-2.878-4.52-3.617c-1.048-0.376-2.125-0.674-3.231-0.874v30.303c0.232-0.124,0.464-0.245,0.696-0.381 c3.323-1.943,5.565-4.445,7.055-7.066V96.586z"
/>
<path
style="fill: #1f1f1f"
d="M243.371,91.467c1.819,0.42,5.866,0.447,6.665,0.445c0.799,0,1.736,0.008,2.524,1.197 c0.786,1.188,1.377,2.588,1.615,3.599c0.238,1.011,0.146,1.537-0.582,2.341c-0.729,0.805-1.486,1.761-1.556,3.122 c0,0-2.36-6.264-5.446-8.228C243.504,91.981,243.371,91.467,243.371,91.467z"
/>
<path
style="fill: #1f1f1f"
d="M217.185,109.806c-0.152,1.42-1.518,2.872-3.943,4.338c-1.959,1.184-4.555,1.751-5.759,1.206 l4.75,6.906c-0.583-2.471,0.799-5.227,2.191-6.022s4.468-0.587,6.301,1.17L217.185,109.806z"
/>
<path
style="
fill: none;
stroke: #1f1f1f;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
"
d=" M218.456,113.312c-1.609-3.547,0.503-11.358,7.65-16.675c7.392-5.5,13.646-5.64,19.136-3.668 c4.73,1.699,6.228,6.789,6.728,8.897c1.055,4.454,0.254,14.586-9.263,20.15C232.13,128.199,222.033,121.198,218.456,113.312z"
/>
</g>
</g>
<g>
<g>
<path
style="fill: #ff5766"
d="M236.827,156.101c-3.03,1.757-8.594,1.784-12.856,0.715c-0.835-0.209-1.304-0.205-1.304-0.205 s0.709-4.635,1.592-6.882c0.88-2.247,2.263-3.812,2.779-4.058c0.514-0.246,2.014-0.457,3.111-1.092v-0.002 c1.098-0.635,2.026-1.831,2.496-2.155c0.469-0.325,2.514-0.748,4.901-0.395c2.388,0.353,6.762,2.042,6.762,2.042 s-0.236,0.405-0.47,1.232c-1.193,4.23-3.982,9.043-7.014,10.799L236.827,156.101z"
/>
<path
style="fill: #1f1f1f"
d="M232.568,148.755c-0.901,0.522-2.488,0.942-2.876,1.272c-0.388,0.329-4.449,4.762-5.689,5.665 c-1.24,0.902-2.204,0.83-2.436,0.701c-0.232-0.129-1.253-0.8-1.407-0.658c-0.154,0.142-0.562,0.984-0.275,1.208 c0.289,0.224,1.533,0.51,2.35,0.194c0.818-0.316,4.938-3.466,6.158-4.674c1.221-1.207,2.014-1.747,2.643-1.795 c0.63-0.049,2.331-0.536,2.331-0.536l-0.001,0.001c0,0,1.268-1.234,1.623-1.756c0.357-0.522,1.218-0.942,2.872-1.401 c1.654-0.458,6.438-2.467,7.117-3.019c0.681-0.552,1.051-1.773,0.999-2.135c-0.051-0.361-0.983-0.426-1.184-0.363 c-0.2,0.063-0.125,1.282-0.13,1.548c-0.004,0.265-0.419,1.138-1.818,1.765c-1.399,0.627-7.265,1.947-7.743,2.119 c-0.479,0.173-1.634,1.341-2.533,1.863L232.568,148.755z"
/>
<path
style="fill: #1f1f1f"
d="M231.3,157.495c0,0,0.181-0.038,0.487-0.117c0.308-0.077,0.741-0.192,1.246-0.347 c0.255-0.073,0.523-0.17,0.807-0.263c0.286-0.091,0.573-0.225,0.879-0.328c0.294-0.135,0.606-0.251,0.904-0.409 c0.303-0.146,0.611-0.295,0.901-0.473c0.306-0.154,0.583-0.35,0.866-0.53c0.291-0.173,0.544-0.384,0.805-0.573 c0.266-0.184,0.483-0.407,0.718-0.593c0.232-0.186,0.429-0.389,0.618-0.573c0.18-0.19,0.377-0.345,0.517-0.509 c0.14-0.164,0.273-0.303,0.382-0.418c0.219-0.23,0.355-0.361,0.355-0.361s-0.056,0.173-0.171,0.476 c-0.06,0.15-0.129,0.335-0.223,0.541c-0.086,0.211-0.227,0.422-0.369,0.663c-0.145,0.24-0.301,0.505-0.517,0.743 c-0.211,0.242-0.403,0.533-0.677,0.757c-0.265,0.231-0.511,0.511-0.824,0.713c-0.299,0.222-0.609,0.44-0.943,0.617 c-0.324,0.192-0.667,0.352-1.012,0.49c-0.336,0.161-0.695,0.236-1.027,0.352c-0.681,0.173-1.325,0.283-1.885,0.297 c-0.555,0.033-1.02-0.008-1.34-0.052C231.477,157.549,231.3,157.495,231.3,157.495z"
/>
<path
style="fill: #1f1f1f"
d="M227.038,145.672c0,0,0.09-0.051,0.249-0.142c0.159-0.09,0.393-0.201,0.689-0.312 c0.287-0.113,0.623-0.245,0.982-0.386c0.183-0.057,0.351-0.152,0.524-0.237c0.175-0.084,0.353-0.169,0.529-0.253 c0.164-0.113,0.327-0.227,0.489-0.337c0.168-0.116,0.34-0.219,0.473-0.345c0.283-0.235,0.563-0.444,0.807-0.645 c0.237-0.197,0.455-0.351,0.618-0.446c0.156-0.097,0.247-0.146,0.247-0.146s-0.066,0.083-0.178,0.23 c-0.117,0.136-0.271,0.339-0.468,0.587c-0.188,0.245-0.445,0.517-0.734,0.804c-0.142,0.15-0.296,0.28-0.463,0.395 c-0.17,0.124-0.344,0.251-0.517,0.377c-0.397,0.165-0.783,0.384-1.171,0.471c-0.19,0.054-0.378,0.097-0.554,0.139 c-0.177,0.048-0.336,0.065-0.49,0.091c-0.305,0.046-0.564,0.082-0.746,0.116C227.143,145.657,227.038,145.672,227.038,145.672z "
/>
<path
style="fill: #ffffff"
d="M238.42,147.571c0.595,0.304,0.646,1.394,0.114,2.436c-0.531,1.042-1.444,1.639-2.039,1.335 c-0.596-0.304-0.646-1.394-0.115-2.435C236.911,147.865,237.825,147.267,238.42,147.571z"
/>
<path
style="fill: #ffffff"
d="M241.151,146.492c0.352,0.18,0.381,0.825,0.066,1.441c-0.314,0.617-0.854,0.971-1.207,0.791 c-0.353-0.18-0.383-0.825-0.067-1.441C240.258,146.665,240.799,146.312,241.151,146.492z"
/>
</g>
<g>
<path
style="fill: #1f1f1f"
d="M229.755,138.259c0,0-0.318-1.397,0.67-2.133c0.98-0.729,1.824-0.023,1.649,0.468 c-0.175,0.491-0.799,0.531-1.142,0.708C230.589,137.479,229.755,138.259,229.755,138.259z"
/>
<path
style="fill: #1f1f1f"
d="M224.792,141.136c0,0-1.054-0.972-2.184-0.479c-1.119,0.487-0.927,1.571-0.414,1.663 c0.514,0.093,0.858-0.429,1.182-0.639C223.7,141.47,224.792,141.136,224.792,141.136z"
/>
<path
style="fill: #1f1f1f"
d="M226.242,141.076c0,0,0.23-0.112,0.497-0.229c0.124-0.058,0.269-0.124,0.424-0.195 c0.142-0.07,0.283-0.132,0.409-0.21c0.136-0.066,0.256-0.149,0.382-0.229c0.067-0.036,0.119-0.089,0.185-0.129 c0.066-0.039,0.118-0.09,0.179-0.132c0.052-0.047,0.119-0.083,0.164-0.126c0.045-0.043,0.096-0.078,0.134-0.108 c0.081-0.061,0.138-0.097,0.138-0.097s0.021,0.058,0.041,0.161c0.018,0.103,0.043,0.256,0.006,0.429 c-0.017,0.088-0.025,0.189-0.071,0.283c-0.044,0.094-0.081,0.203-0.153,0.294c-0.071,0.091-0.139,0.197-0.238,0.272 c-0.092,0.085-0.194,0.159-0.307,0.218c-0.448,0.25-0.961,0.237-1.287,0.112C226.409,141.281,226.242,141.076,226.242,141.076z "
/>
<path
style="fill: #1f1f1f"
d="M222.893,138.86c0,0-0.148,0.003-0.416-0.042c-0.259-0.052-0.632-0.149-1.048-0.358 c-0.2-0.112-0.435-0.226-0.646-0.395c-0.203-0.177-0.457-0.338-0.64-0.583c-0.194-0.234-0.379-0.494-0.46-0.811 c-0.052-0.151-0.105-0.302-0.156-0.455l-0.045-0.133l-0.021-0.102l-0.045-0.206c-0.125-0.548-0.208-1.107-0.284-1.633 c-0.072-0.527-0.152-1.013-0.194-1.441c-0.041-0.43-0.071-0.785-0.089-1.035c-0.018-0.248-0.029-0.39-0.029-0.39 s0.061,0.129,0.164,0.355c0.106,0.225,0.252,0.547,0.421,0.931c0.082,0.191,0.191,0.398,0.292,0.619 c0.103,0.22,0.212,0.452,0.324,0.692c0.224,0.481,0.461,0.994,0.656,1.521l0.076,0.196l0.037,0.098 c0.004-0.011,0.027,0.042,0.04,0.06l0.176,0.308c0.105,0.208,0.249,0.384,0.339,0.591c0.077,0.217,0.205,0.4,0.309,0.594 c0.093,0.205,0.239,0.353,0.34,0.532c0.112,0.167,0.237,0.304,0.337,0.446c0.111,0.132,0.208,0.247,0.288,0.342 C222.782,138.747,222.893,138.86,222.893,138.86z"
/>
</g>
</g>
<g id="XMLID_6_">
<g>
<path
style="fill: #c779fc"
d="M203.901,70.12c0.19,7.82,1.67,26.83,11.24,37.38c0,0-3.94,0.81-7.66,0 c-5.33-2.18-9.91-6.27-13.399-12.48c0,0,0.81,17.86,5.81,24.23c0,0-3.79,1.79-6.29,2.17c-1.71-0.96-3.79-2.88-3.79-2.88 s1.25,3.71,2.21,4.79c-1.729-0.55-7.97-4.64-12.22-16.07h-0.01c0,0-2.551,27.07,3.189,34.03c-3.34,0.61-6.45-0.21-8.149-1.67 c0,0-1.141-1.55-2.57-4.27c0,0-10.29-2.35-12.95-17.6c-2.67-15.25-2.5-32.42,7.25-47.75s23.91-20.17,37.66-18.25 c6.17-2.17,23.31,0.25,34.68,11.37c11.37,11.13,14.79,22.93,14.58,31.66l-4.649-2.69c0,0-11.33,0.53-20.011-5.34 c0,0,2.261,6,4.67,8.25c-2.06,0.75-5.13,0.1-5.13,0.1S209.781,89.5,203.901,70.12z"
/>
</g>
<g>
<g>
<path
style="fill: #1f1f1f"
d="M193.197,95.486c0,0-0.159-0.32-0.438-0.88c-0.139-0.28-0.308-0.62-0.503-1.01 c-0.202-0.379-0.385-0.871-0.608-1.372c-0.209-0.51-0.471-1.056-0.682-1.645c-0.213-0.587-0.439-1.207-0.672-1.848 c-0.237-0.639-0.416-1.32-0.634-1.999c-0.219-0.68-0.417-1.376-0.585-2.08c-0.174-0.703-0.369-1.399-0.522-2.094 c-0.145-0.695-0.287-1.38-0.425-2.043c-0.279-1.323-0.443-2.575-0.632-3.638c-0.153-1.069-0.253-1.962-0.336-2.586 c-0.079-0.624-0.123-0.981-0.123-0.981c-0.033-0.262,0.152-0.5,0.414-0.534c0.254-0.032,0.486,0.142,0.53,0.392l0.003,0.018 c0,0,0.061,0.351,0.167,0.964c0.11,0.613,0.248,1.491,0.448,2.537c0.234,1.039,0.452,2.264,0.785,3.55 c0.165,0.643,0.335,1.308,0.508,1.983c0.181,0.673,0.403,1.345,0.604,2.022c0.194,0.68,0.419,1.349,0.662,1.999 c0.242,0.65,0.445,1.304,0.703,1.911c0.253,0.608,0.498,1.196,0.73,1.754c0.229,0.559,0.496,1.05,0.714,1.523 c0.235,0.468,0.409,0.895,0.635,1.276c0.212,0.381,0.396,0.713,0.548,0.986c0.304,0.547,0.478,0.859,0.478,0.859 c0.269,0.483,0.096,1.092-0.387,1.361c-0.482,0.269-1.092,0.096-1.36-0.387C193.212,95.515,193.204,95.498,193.197,95.486z"
/>
</g>
<path
style="
fill: none;
stroke: #1f1f1f;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
"
d=" M203.892,66.62c0,0-0.05,1.31,0.01,3.5c0.19,7.82,1.67,26.83,11.24,37.38c0,0-3.94,0.81-7.66,0 c-5.33-2.18-9.91-6.27-13.399-12.48"
/>
<g>
<path
style="fill: #1f1f1f"
d="M178.854,107.58c0,0-0.282-0.934-0.705-2.335c-0.228-0.688-0.431-1.538-0.639-2.452 c-0.196-0.912-0.482-1.874-0.627-2.85c-0.167-0.971-0.333-1.943-0.489-2.854c-0.163-0.908-0.216-1.771-0.312-2.501 c-0.164-1.464-0.274-2.439-0.274-2.439c-0.031-0.278,0.169-0.528,0.446-0.56c0.267-0.03,0.508,0.153,0.555,0.413l0.005,0.029 c0,0,0.169,0.954,0.423,2.386c0.14,0.712,0.245,1.555,0.461,2.435c0.209,0.881,0.432,1.82,0.655,2.76 c0.202,0.946,0.534,1.84,0.776,2.703c0.129,0.427,0.253,0.841,0.372,1.233c0.118,0.392,0.276,0.764,0.397,1.106 c0.511,1.372,0.851,2.286,0.851,2.286c0.193,0.518-0.069,1.094-0.587,1.288c-0.518,0.193-1.094-0.069-1.287-0.587 C178.868,107.622,178.86,107.599,178.854,107.58z"
/>
</g>
<path
style="
fill: none;
stroke: #1f1f1f;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
"
d=" M192.021,123.33c-1.729-0.55-7.97-4.64-12.22-16.07"
/>
<g>
<path
style="fill: #1f1f1f"
d="M191.988,121.612c0,0-0.127-0.123-0.35-0.337c-0.111-0.107-0.247-0.237-0.402-0.387 c-0.153-0.161-0.333-0.293-0.518-0.527c-0.184-0.22-0.385-0.459-0.597-0.71c-0.202-0.253-0.449-0.516-0.638-0.793 c-0.387-0.557-0.833-1.131-1.215-1.738c-0.387-0.605-0.785-1.201-1.119-1.782c-0.347-0.573-0.66-1.112-0.917-1.581 c-0.524-0.93-0.848-1.57-0.848-1.57c-0.109-0.216-0.023-0.48,0.193-0.589c0.202-0.102,0.448-0.031,0.567,0.156 c0,0,0.374,0.586,0.979,1.447c0.297,0.433,0.655,0.929,1.049,1.453c0.381,0.533,0.824,1.071,1.254,1.616 c0.428,0.549,0.903,1.047,1.321,1.538c0.21,0.251,0.428,0.432,0.624,0.636c0.197,0.196,0.383,0.381,0.555,0.552 c0.155,0.174,0.384,0.317,0.541,0.452c0.169,0.133,0.316,0.249,0.438,0.345c0.243,0.191,0.381,0.3,0.381,0.3l0.015,0.012 c0.434,0.342,0.509,0.972,0.167,1.407c-0.342,0.434-0.972,0.509-1.407,0.166C192.038,121.657,192.012,121.635,191.988,121.612 z"
/>
</g>
<path
style="
fill: none;
stroke: #1f1f1f;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
"
d=" M194.082,95.02c0,0,0.81,17.86,5.81,24.23c0,0-3.79,1.79-6.29,2.17c-0.311-0.132-0.633-0.325-0.963-0.567"
/>
<g>
<path
style="fill: #1f1f1f"
d="M171.368,135.799c0,0-0.145-0.307-0.4-0.843c-0.261-0.525-0.617-1.307-1.018-2.281 c-0.21-0.479-0.425-1.001-0.623-1.559c-0.205-0.557-0.42-1.143-0.644-1.75c-0.195-0.617-0.396-1.254-0.601-1.901 c-0.222-0.642-0.362-1.32-0.542-1.984c-0.164-0.67-0.362-1.33-0.473-2.001c-0.128-0.665-0.254-1.321-0.376-1.955 c-0.135-0.631-0.172-1.258-0.257-1.842c-0.073-0.587-0.141-1.141-0.205-1.653c-0.121-2.062-0.182-3.432-0.182-3.432 c-0.013-0.284,0.207-0.524,0.49-0.537c0.274-0.012,0.507,0.192,0.535,0.462l0.003,0.039c0,0,0.131,1.334,0.327,3.335 c0.084,0.495,0.175,1.032,0.271,1.599c0.109,0.565,0.17,1.169,0.33,1.778c0.146,0.61,0.296,1.24,0.45,1.88 c0.134,0.644,0.357,1.277,0.545,1.919c0.204,0.637,0.367,1.285,0.61,1.897c0.226,0.617,0.448,1.225,0.664,1.813 c0.242,0.577,0.476,1.135,0.698,1.664c0.216,0.533,0.443,1.021,0.663,1.465c0.214,0.447,0.41,0.856,0.584,1.219 c0.193,0.366,0.362,0.684,0.501,0.946c0.278,0.525,0.438,0.824,0.438,0.824c0.259,0.488,0.074,1.094-0.415,1.353 c-0.488,0.259-1.093,0.074-1.352-0.414C171.382,135.827,171.374,135.811,171.368,135.799z"
/>
</g>
<path
style="
fill: none;
stroke: #1f1f1f;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
"
d=" M179.792,107.26c0,0-2.551,27.07,3.189,34.03c-3.34,0.61-6.45-0.21-8.149-1.67c0,0-1.141-1.55-2.57-4.27"
/>
<path
style="
fill: none;
stroke: #1f1f1f;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
"
d=" M233.491,95c-2.06,0.75-5.13,0.1-5.13,0.1s-18.58-5.6-24.46-24.98"
/>
<g>
<path
style="fill: #1f1f1f"
d="M228.15,87.725c0,0-0.189-0.121-0.521-0.333c-0.332-0.217-0.803-0.491-1.381-0.932 c-0.285-0.211-0.595-0.439-0.921-0.68c-0.306-0.257-0.628-0.528-0.962-0.808c-0.341-0.271-0.659-0.59-0.988-0.906 c-0.323-0.323-0.677-0.623-0.977-0.979c-0.309-0.344-0.619-0.688-0.923-1.027c-0.294-0.348-0.557-0.713-0.824-1.054 c-0.553-0.668-0.946-1.385-1.333-1.957c-0.198-0.284-0.33-0.577-0.463-0.824c-0.13-0.249-0.244-0.467-0.337-0.646 c-0.186-0.358-0.292-0.563-0.292-0.563c-0.134-0.256-0.034-0.573,0.223-0.707c0.246-0.127,0.546-0.042,0.688,0.19l0.028,0.045 c0,0,0.114,0.187,0.314,0.515c0.1,0.163,0.22,0.362,0.359,0.589c0.142,0.225,0.281,0.491,0.488,0.748 c0.404,0.518,0.812,1.166,1.378,1.762c0.274,0.304,0.542,0.631,0.84,0.94c0.308,0.3,0.621,0.604,0.933,0.909 c0.301,0.315,0.656,0.575,0.977,0.857c0.329,0.276,0.643,0.555,0.981,0.787c0.329,0.241,0.646,0.474,0.948,0.695 c0.308,0.197,0.6,0.384,0.869,0.557c0.516,0.349,1.036,0.611,1.376,0.802c0.345,0.189,0.542,0.298,0.542,0.298 c0.484,0.266,0.662,0.874,0.396,1.358c-0.266,0.484-0.873,0.662-1.358,0.396C228.189,87.748,228.168,87.736,228.15,87.725z"
/>
</g>
<path
style="
fill: none;
stroke: #1f1f1f;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
"
d=" M253.481,94.78l-4.649-2.69c0,0-9.726,0.503-20.172-5.225"
/>
<path
style="
fill: none;
stroke: #1f1f1f;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
"
d=" M159.119,122.375c0,0,0.086-2.458,0.192-4.625c-2.67-15.25-2.5-32.42,7.25-47.75s23.91-20.17,37.66-18.25 c6.17-2.17,25.795-0.313,36.85,8.813"
/>
</g>
</g>
<g>
<path
style="fill: #1f1f1f"
d="M247.832,92.093c0,0,0-0.077,0.001-0.222c0.002-0.148-0.022-0.311-0.036-0.547 c-0.005-0.222-0.054-0.526-0.115-0.879c-0.068-0.349-0.094-0.746-0.225-1.176c-0.111-0.431-0.231-0.898-0.359-1.392 c-0.135-0.493-0.346-0.999-0.527-1.53c-0.201-0.526-0.354-1.09-0.628-1.622c-0.249-0.541-0.503-1.09-0.756-1.64l-0.379-0.825 c-0.14-0.268-0.297-0.526-0.442-0.788c-0.297-0.521-0.588-1.034-0.871-1.53c-0.29-0.492-0.538-0.987-0.831-1.423 c-0.296-0.434-0.576-0.844-0.835-1.223c-1.035-1.517-1.725-2.529-1.725-2.529l-0.024-0.036c-0.178-0.262-0.111-0.618,0.15-0.796 c0.254-0.173,0.599-0.113,0.782,0.13c0,0,0.747,1,1.868,2.499c0.281,0.376,0.585,0.783,0.906,1.213 c0.318,0.433,0.597,0.93,0.917,1.423c0.313,0.498,0.636,1.013,0.964,1.537c0.162,0.263,0.335,0.523,0.491,0.794l0.433,0.839 c0.289,0.562,0.577,1.123,0.861,1.676c0.307,0.541,0.499,1.132,0.735,1.679c0.216,0.556,0.46,1.079,0.629,1.603 c0.161,0.529,0.313,1.028,0.454,1.49c0.158,0.455,0.215,0.909,0.306,1.295c0.083,0.387,0.153,0.729,0.179,1.048 c0.032,0.302,0.066,0.562,0.07,0.703c0.006,0.145,0.009,0.222,0.009,0.222c0.021,0.552-0.409,1.017-0.961,1.038 c-0.552,0.021-1.017-0.409-1.038-0.961c0-0.013,0-0.026,0-0.04V92.093z"
/>
</g>
<g>
<rect
x="178.701"
y="184.734"
transform="matrix(0.3475 -0.9377 0.9377 0.3475 -35.8618 324.6976)"
style="fill: #ffffff"
width="73.353"
height="6.766"
/>
<polygon
style="fill: #ff5766"
points="229.127,160.751 220.616,164.249 222.784,158.4 231.295,154.901 "
/>
<polygon
style="fill: #ff5766"
points="225.13,171.534 216.62,175.032 218.787,169.183 227.299,165.685 "
/>
<polygon
style="fill: #ff5766"
points="221.134,182.317 212.625,185.815 214.791,179.966 223.302,176.468 "
/>
<polygon
style="fill: #ff5766"
points="217.139,193.101 208.628,196.598 210.795,190.75 219.306,187.251 "
/>
<polygon
style="fill: #ff5766"
points="213.143,203.884 204.632,207.382 206.799,201.533 215.31,198.035 "
/>
<polygon
style="fill: #ff5766"
points="209.146,214.667 200.635,218.165 202.803,212.316 211.314,208.818 "
/>
<polygon
style="fill: #ff5766"
points="205.805,223.684 207.317,219.601 201.379,222.042 "
/>
<rect
x="178.701"
y="184.734"
transform="matrix(0.3475 -0.9377 0.9377 0.3475 -35.8618 324.6976)"
style="
fill: none;
stroke: #1f1f1f;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
"
width="73.353"
height="6.766"
/>
</g>
<g>
<path
style="
fill: #f4c2ad;
stroke: #1f1f1f;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
"
d=" M165.398,223.067c0,0,5.021-9.244,6.708-11.494s5.25-5.125,8.469-3.438c3.219,1.688,7.219,3.813,9.406,5.063 s4.625,3.125,4.875,4.188s-2.625,4.223-5.75,4.643C185.981,222.449,165.398,223.067,165.398,223.067z"
/>
<path
style="
fill: #f4c2ad;
stroke: #1f1f1f;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
"
d=" M164.517,230.875c-1.088-0.957-2.313-3.605-2.063-5.302c0.25-1.698,0.75-2.454,2.313-3.951c1.563-1.497,8.75-5.061,10.875-6.31 s4.84-0.938,6.326,0c1.486,0.938,7.457,4.751,9.378,5.751c1.921,1,1.046,4.53-1.767,5.515c-2.813,0.985-8.75,0-8.75,0 L164.517,230.875z"
/>
<path
style="
fill: #f4c2ad;
stroke: #1f1f1f;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
"
d=" M164.079,239.813c-1.088-0.957-2.313-3.605-2.063-5.302c0.25-1.698,0.75-2.454,2.313-3.951c1.563-1.497,8.75-5.061,10.875-6.31 s4.84-0.938,6.326,0c1.486,0.938,7.457,4.751,9.378,5.751c1.921,1,1.046,4.53-1.767,5.515c-2.813,0.985-8.75,0-8.75,0 L164.079,239.813z"
/>
<path
style="
fill: #f4c2ad;
stroke: #1f1f1f;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
"
d=" M185.931,259.625c0,0-16.508-6.84-19.523-8.295c-3.016-1.455-4.391-4.096-4.391-5.9s0.875-6.117,1.563-6.93 s9-5.448,10.688-6.349c1.688-0.901,5.563-1.46,8.125-0.118s5.938,3.185,6.75,3.482c0.813,0.297,1.063,3.047-1.563,4.235 c0,0,4.193,1.198,6.253,4.537C195.892,247.625,195.657,257.125,185.931,259.625z"
/>
<path
style="
fill: none;
stroke: #1f1f1f;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
"
d=" M187.579,239.75c0,0-1.313,1.357-4.313,1.429c-3,0.071-5.869-0.714-5.869-0.714l-4.256,3.341"
/>
</g>
<g>
<g>
<path
style="fill: #575dff"
d="M178.444,256.504c0,0-0.636,1.825-0.636,2.619c0,0.794-15.166,10.794-16.75,12.794 s-0.25,9.334,2.5,15.417c-3.834,7.25-10.584,15.749-12.042,18.166c-1.458,2.417-4.208,21.833-4.208,25.333 s11.999,19.918,18.916,24.584c6.917,4.666,9.666,3.999,12.25,3.416c2.584-0.583,22.334-11.584,29.667-19.167 c7.333-7.583,9.166-13.667,8.833-16.75c-0.333-3.083-1.75-19.25-1.75-19.5c0.75-2.75,1.574-12.667,1.787-13 c3.63-4.75,5.379-12.666,4.963-14.083c-0.416-1.417-3.416-14.251-4.208-14.917c-0.792-0.666-3.375-0.583-3.375-0.583 s-5.88-10.725-6.917-12.417s-1.811-2.986-1.811-2.986S199.809,254,178.444,256.504z"
/>
<g>
<path
style="fill: #61fcff"
d="M183.949,315.109c-2.183-3.422-2.808-5.609-3.745-7.734s-11.688-27.625-12.5-30.438 s-0.25-4.313,1.125-5.688s6.938-10.34,6.938-10.34h-0.001c-4.191,3.167-13.486,9.465-14.708,11.007 c-1.584,2-0.25,9.334,2.5,15.417c-0.113,0.215-0.237,0.434-0.356,0.65l1.124,0.558c0,0,9.37,14.678,12.468,18.933 C179.892,311.729,181.948,314.681,183.949,315.109z"
/>
<path
style="fill: #61fcff"
d="M162.406,289.403l-0.001-0.004c-3.904,6.725-9.567,13.91-10.889,16.101 c-1.458,2.417-4.208,21.833-4.208,25.333c0,2.611,6.679,12.411,12.943,19.158c-0.023-0.058-7.942-19.495-8.026-22.366 c-0.084-2.875,2.666-20.25,3.291-22.125S162.406,289.403,162.406,289.403z"
/>
</g>
<path
style="
fill: none;
stroke: #1f1f1f;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
"
d=" M178.444,256.504c0,0-0.636,1.825-0.636,2.619c0,0.794-15.166,10.794-16.75,12.794s-0.25,9.334,2.5,15.417 c-3.834,7.25-10.584,15.749-12.042,18.166c-1.458,2.417-4.208,21.833-4.208,25.333s11.999,19.918,18.916,24.584 c6.917,4.666,9.666,3.999,12.25,3.416c2.584-0.583,22.334-11.584,29.667-19.167c7.333-7.583,9.166-13.667,8.833-16.75 c-0.333-3.083-1.75-19.25-1.75-19.5c0.75-2.75,1.574-12.667,1.787-13c3.63-4.75,5.379-12.666,4.963-14.083 c-0.416-1.417-3.416-14.251-4.208-14.917c-0.792-0.666-3.375-0.583-3.375-0.583s-5.88-10.725-6.917-12.417 s-1.811-2.986-1.811-2.986S199.809,254,178.444,256.504z"
/>
</g>
<g>
<path
style="fill: #1f1f1f"
d="M164.403,286.799c0,0,0.518,0.865,1.423,2.379c0.912,1.509,2.199,3.678,3.791,6.248 c1.609,2.56,3.491,5.545,5.565,8.7c1.026,1.588,2.148,3.18,3.283,4.801c0.554,0.826,1.171,1.593,1.77,2.388l0.452,0.593 l0.213,0.277l0.255,0.278l0.512,0.554l0.526,0.465c1.431,1.229,3.362,1.921,5.19,1.454c0.908-0.208,1.725-0.697,2.462-1.235 c0.371-0.27,0.722-0.564,1.058-0.872l0.126-0.113l0.016-0.015c-0.021,0.016,0.069-0.055-0.043,0.031l0.03-0.033l0.061-0.067 l0.241-0.27l0.48-0.536c1.236-1.442,2.173-2.807,3.193-4.275c0.992-1.415,1.936-2.764,2.875-3.938 c0.928-1.186,1.824-2.238,2.65-3.141c0.835-0.896,1.685-1.57,2.413-2.103c0.744-0.519,1.384-0.878,1.859-1.091 c0.23-0.111,0.421-0.186,0.554-0.231c0.13-0.048,0.198-0.073,0.198-0.073l0.481-0.179c0.483-0.179,1.021,0.067,1.201,0.551 c0.122,0.329,0.046,0.684-0.166,0.933c0,0-2.626,3.071-6.673,7.591c-1.021,1.124-2.108,2.354-3.305,3.623 c-1.159,1.25-2.499,2.684-3.907,3.979l-0.534,0.472l-0.269,0.236l-0.067,0.06l-0.034,0.03l-0.098,0.072l-0.158,0.108 c-0.418,0.291-0.856,0.568-1.319,0.819c-0.921,0.506-1.94,0.927-3.05,1.136c-1.105,0.213-2.309,0.185-3.429-0.147 c-1.128-0.329-2.118-0.922-2.997-1.645l-0.65-0.577l-0.518-0.555l-0.257-0.276c-0.146-0.169-0.176-0.223-0.27-0.339 l-0.472-0.611c-0.622-0.814-1.273-1.619-1.83-2.44c-1.159-1.63-2.289-3.238-3.34-4.815c-2.134-3.137-4.066-6.096-5.72-8.635 c-3.276-5.097-5.46-8.495-5.46-8.495l-0.011-0.017c-0.299-0.465-0.164-1.084,0.301-1.382c0.464-0.299,1.084-0.165,1.382,0.3 C164.391,286.778,164.398,286.79,164.403,286.799z"
/>
</g>
<path
style="
fill: none;
stroke: #1f1f1f;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
"
d=" M177.809,259.123l-0.25,15.044c0,0,19.5,1.582,36.833-13.334"
/>
<g>
<path
style="fill: #1f1f1f"
d="M177.583,275.167c0.001,0-0.75-0.001-1.86-0.049c-0.558-0.025-1.207-0.061-1.91-0.125 c-0.706-0.071-1.45-0.149-2.259-0.354c-0.219-0.069-0.406-0.108-0.67-0.242l-0.192-0.104l-0.095-0.056l-0.136-0.121 c-0.088-0.085-0.169-0.181-0.238-0.277l-0.025-0.036c0.053,0.127-0.079-0.185-0.065-0.153l-0.001-0.004l-0.002-0.009 l-0.009-0.032l-0.017-0.065c-0.019-0.029-0.059-0.313-0.044-0.521l0.014-0.161l0.022-0.092l0.047-0.181 c0.067-0.236,0.152-0.421,0.238-0.602c0.351-0.699,0.739-1.232,1.077-1.691c0.682-0.904,1.189-1.459,1.189-1.459 c0.225-0.246,0.605-0.264,0.851-0.039c0.153,0.14,0.217,0.34,0.19,0.531l-0.052,0.344c0,0.001-0.03,0.198-0.121,0.52 c-0.082,0.325-0.233,0.765-0.408,1.264c-0.087,0.239-0.183,0.498-0.283,0.771c-0.098,0.257-0.208,0.524-0.255,0.75 c-0.028,0.103-0.063,0.212-0.054,0.238l0.002,0.016l-0.001,0.005c0.01-0.043,0.018-0.09,0.02-0.138 c0.029-0.173-0.118-0.495-0.041-0.291l0.023,0.064l0.011,0.031l0.003,0.008l0.001,0.004c0.03,0.072-0.252-0.599-0.135-0.32 l-0.018-0.039c-0.052-0.106-0.129-0.208-0.221-0.287c-0.046-0.04-0.095-0.074-0.145-0.103l-0.016-0.017 c-0.01-0.009-0.021-0.016-0.034-0.02c-0.054-0.009,0.008,0.003,0.045,0.025c0.044,0.022,0.061,0.049,0.129,0.072 c0.241,0.093,0.535,0.229,0.848,0.36c0.311,0.131,0.637,0.257,0.957,0.372c0.643,0.221,1.27,0.338,1.806,0.372 c0.537,0.039,0.987-0.012,1.299-0.048c0.313-0.053,0.487-0.111,0.487-0.111c0.537-0.182,1.12,0.105,1.302,0.643 c0.182,0.537-0.105,1.121-0.643,1.303c-0.108,0.037-0.218,0.055-0.326,0.055H177.583z"
/>
</g>
<g>
<path
style="
fill: none;
stroke: #1f1f1f;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
"
d="M180.36,256.258 c0,0-0.281,12.225,0,17.921"
/>
<path
style="
fill: none;
stroke: #1f1f1f;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
"
d="M182.723,255.365 c0,0,0.314,12.117,0.818,17.68"
/>
<path
style="
fill: none;
stroke: #1f1f1f;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
"
d="M185.175,255.43 c0,0,1.157,12.684,1.883,18.112"
/>
<path
style="
fill: none;
stroke: #1f1f1f;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
"
d="M187.686,255.081 c0,0,1.967,12.47,2.914,17.765"
/>
<path
style="
fill: none;
stroke: #1f1f1f;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
"
d="M189.811,254.472 c0,0,2.66,12.083,3.83,17.243"
/>
<path
style="
fill: none;
stroke: #1f1f1f;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
"
d="M192.643,253.578 c0,0,3.217,12.272,4.608,17.3"
/>
<path
style="
fill: none;
stroke: #1f1f1f;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
"
d="M194.872,252.569 c0,0,3.655,11.786,5.27,16.681"
/>
<path
style="
fill: none;
stroke: #1f1f1f;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
"
d="M197.413,251.448 c0,0,4.252,11.947,6.088,16.707"
/>
<path
style="
fill: none;
stroke: #1f1f1f;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
"
d="M199.262,250.49 c0,0,5.294,11.319,7.353,15.945"
/>
<path
style="
fill: none;
stroke: #1f1f1f;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
"
d="M202.125,249.113 c0,0,5.063,11.009,7.344,15.5"
/>
<path
style="
fill: none;
stroke: #1f1f1f;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
"
d="M203.987,247.328 c0,0,5.673,11.149,8.176,15.507"
/>
</g>
</g>
<g>
<path
style="
fill: #ffffff;
stroke: #1f1f1f;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
"
d=" M240.689,192.702c0.809-3.464-8.917-8.698-21.725-11.691c-12.809-2.993-23.847-2.612-24.657,0.852l-1.466,6.271l46.383,10.839 L240.689,192.702z"
/>
<path
style="
fill: #ffe3d6;
stroke: #1f1f1f;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
"
d=" M239.225,198.973c-0.811,3.464-11.849,3.846-24.657,0.852c-12.809-2.993-22.535-8.227-21.726-11.691 c0.811-3.463,11.849-3.845,24.656-0.852C230.307,190.275,240.033,195.509,239.225,198.973z"
/>
<g>
<g>
<path
style="fill: #ffe4d6"
d="M216.483,191.629c-14.312-3.345-26.648-2.918-27.552,0.952l-4.398,18.819 c0.904-3.871,13.24-4.297,27.552-0.953c14.312,3.345,25.181,9.194,24.276,13.064l4.397-18.819 C241.664,200.823,230.795,194.974,216.483,191.629z"
/>
<path
style="fill: #ffd4c2"
d="M212.085,210.448c-14.312-3.345-26.648-2.918-27.552,0.953l-8.322,35.611l51.828,12.112 l8.322-35.612C237.266,219.642,226.397,213.792,212.085,210.448z"
/>
<path
style="
fill: none;
stroke: #1f1f1f;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
"
d=" M236.361,223.512c0.904-3.87-9.964-9.72-24.276-13.064c-14.312-3.345-26.648-2.918-27.552,0.953"
/>
</g>
<path
style="
fill: none;
stroke: #1f1f1f;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
"
d=" M240.759,204.693c0.905-3.871-9.964-9.719-24.275-13.064c-14.312-3.345-26.648-2.918-27.552,0.952l-12.721,54.43l51.828,12.112 L240.759,204.693z"
/>
</g>
<g>
<path
style="fill: #1f1f1f"
d="M225.394,250.279c-0.496,2.125-2.621,3.443-4.745,2.947c-2.123-0.496-3.443-2.621-2.947-4.744 c0.497-2.124,2.621-3.444,4.745-2.948C224.571,246.03,225.89,248.155,225.394,250.279z"
/>
<path
style="fill: #1f1f1f"
d="M219.96,238.818c-0.496,2.124-2.621,3.443-4.745,2.947c-2.125-0.497-3.443-2.621-2.947-4.745 c0.496-2.124,2.621-3.443,4.744-2.947C219.137,234.569,220.456,236.693,219.96,238.818z"
/>
<path
style="fill: #1f1f1f"
d="M204.593,240.365c-0.496,2.124-2.621,3.443-4.744,2.947c-2.124-0.496-3.444-2.621-2.948-4.745 c0.497-2.124,2.621-3.444,4.745-2.947C203.77,236.116,205.09,238.24,204.593,240.365z"
/>
<path
style="fill: #1f1f1f"
d="M193.727,231.459c-0.497,2.123-2.621,3.443-4.745,2.947c-2.125-0.497-3.443-2.621-2.947-4.745 c0.496-2.124,2.62-3.444,4.744-2.948C192.904,227.21,194.224,229.335,193.727,231.459z"
/>
<path
style="fill: #1f1f1f"
d="M230.845,229.265c-0.468,1.999-2.434,3.249-4.392,2.791c-1.958-0.457-3.166-2.45-2.698-4.449 c0.467-1.999,2.433-3.249,4.39-2.792C230.104,225.274,231.311,227.266,230.845,229.265z"
/>
<path
style="fill: #1f1f1f"
d="M202.88,220.182c-0.468,1.998-2.434,3.249-4.392,2.791c-1.958-0.458-3.166-2.449-2.699-4.448 c0.468-1.999,2.434-3.249,4.391-2.792C202.139,216.19,203.347,218.182,202.88,220.182z"
/>
<path
style="fill: #1f1f1f"
d="M211.66,229.624c-0.497,2.123-2.621,3.443-4.745,2.946c-2.124-0.496-3.443-2.621-2.947-4.744 c0.496-2.124,2.621-3.444,4.744-2.948C210.836,225.375,212.156,227.499,211.66,229.624z"
/>
<path
style="fill: #1f1f1f"
d="M188.657,244.276c-0.497,2.124-2.621,3.443-4.745,2.947c-2.124-0.497-3.443-2.621-2.947-4.745 c0.496-2.124,2.621-3.444,4.745-2.948C187.834,240.027,189.153,242.152,188.657,244.276z"
/>
</g>
<path
style="
fill: #ffb191;
stroke: #1f1f1f;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
"
d=" M228.039,259.124c-0.904,3.869-13.239,4.295-27.552,0.951c-14.311-3.346-25.181-9.193-24.276-13.063 c0.904-3.871,13.239-4.297,27.552-0.952C218.074,249.404,228.943,255.253,228.039,259.124z"
/>
<path
style="opacity: 0.7; fill: #ffffff"
d="M193.471,216.85c-0.442,1.895-2.392,3.698-4.353,4.029l0,0 c-1.96,0.331-3.192-0.936-2.75-2.831l4.572-19.562c0.442-1.895,2.393-3.699,4.353-4.029l0,0c1.962-0.331,3.193,0.937,2.75,2.831 L193.471,216.85z M191.128,226.873c0.443-1.895-0.788-3.162-2.75-2.831l0,0c-1.96,0.33-3.909,2.134-4.353,4.029l-0.251,1.079 c-0.443,1.896,0.789,3.162,2.748,2.831l0,0c1.962-0.331,3.911-2.134,4.355-4.029L191.128,226.873z"
/>
</g>
<g>
<g>
<path
style="fill: #c779fc"
d="M265.589,131.385c-1.002-2.14-1.998-3.951-2.941-5.346L265.589,131.385z"
/>
<linearGradient
id="SVGID_00000103224296979602190410000013781275687185474208_"
gradientUnits="userSpaceOnUse"
x1="261.3019"
y1="94.0076"
x2="280.3019"
y2="202.6743"
>
<stop offset="0" style="stop-color: #c779fc" />
<stop offset="0.1258" style="stop-color: #c379fc" />
<stop offset="0.2475" style="stop-color: #b77afb" />
<stop offset="0.3675" style="stop-color: #a47cfb" />
<stop offset="0.4859" style="stop-color: #897efa" />
<stop offset="0.5562" style="stop-color: #757ff9" />
<stop offset="0.6281" style="stop-color: #6989f8" />
<stop offset="0.7575" style="stop-color: #4aa4f6" />
<stop offset="0.9284" style="stop-color: #17d0f2" />
<stop offset="1" style="stop-color: #00e4f0" />
</linearGradient>
<path
style="
fill: url(#SVGID_00000103224296979602190410000013781275687185474208_);
"
d="M265.589,131.385 c7.079,15.117,14.441,46.751,5.545,65.681l3.65,0.968c0,0,10.159-12.862,6.1-38.859L265.589,131.385z"
/>
</g>
<path
style="
fill: none;
stroke: #1f1f1f;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
"
d=" M271.646,148.879c3.992,15.641,5.686,34.998-0.512,48.188l3.65,0.968c0,0,10.159-12.862,6.1-38.859"
/>
</g>
<g>
<g>
<path
style="fill: #c779fc"
d="M265.199,115.683c-0.485-2.313-1.04-4.303-1.64-5.877L265.199,115.683z"
/>
<linearGradient
id="SVGID_00000031928197097390866490000005101108255667282091_"
gradientUnits="userSpaceOnUse"
x1="252.7428"
y1="95.5038"
x2="271.743"
y2="204.1717"
>
<stop offset="0" style="stop-color: #c779fc" />
<stop offset="0.1258" style="stop-color: #c379fc" />
<stop offset="0.2475" style="stop-color: #b77afb" />
<stop offset="0.3675" style="stop-color: #a47cfb" />
<stop offset="0.4859" style="stop-color: #897efa" />
<stop offset="0.5562" style="stop-color: #757ff9" />
<stop offset="0.6281" style="stop-color: #6989f8" />
<stop offset="0.7575" style="stop-color: #4aa4f6" />
<stop offset="0.9284" style="stop-color: #17d0f2" />
<stop offset="1" style="stop-color: #00e4f0" />
</linearGradient>
<path
style="
fill: url(#SVGID_00000031928197097390866490000005101108255667282091_);
"
d="M265.199,115.683 c3.431,16.336,3.354,48.816-9.64,65.206l3.332,1.778c0,0,12.834-10.194,14.834-36.431L265.199,115.683z"
/>
</g>
<path
style="
fill: none;
stroke: #1f1f1f;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
"
d=" M265.669,154.881c-1.635,9.891-4.79,19.297-10.109,26.007l3.332,1.778c0,0,12.834-10.194,14.834-36.431"
/>
<g>
<path
style="fill: #1f1f1f"
d="M264.003,109.665c0,0,0.219,0.676,0.601,1.86c0.174,0.6,0.464,1.293,0.65,2.153 c0.193,0.858,0.413,1.826,0.651,2.881c0.271,1.056,0.42,2.205,0.615,3.42c0.169,1.217,0.441,2.493,0.55,3.829 c0.135,1.334,0.273,2.713,0.414,4.114c0.15,1.401,0.161,2.833,0.249,4.26c0.064,1.429,0.168,2.858,0.132,4.267 c-0.004,1.409-0.008,2.795-0.012,4.137c0.028,1.344-0.123,2.637-0.17,3.866c-0.071,1.229-0.139,2.392-0.2,3.465 c-0.082,1.072-0.231,2.048-0.325,2.918c-0.104,0.869-0.194,1.625-0.269,2.249c-0.148,1.247-0.234,1.96-0.234,1.96 c-0.066,0.548-0.563,0.94-1.111,0.874c-0.548-0.066-0.939-0.563-0.874-1.111c0.001-0.006,0.002-0.012,0.002-0.018l0.011-0.071 c0,0,0.1-0.697,0.273-1.917c0.088-0.61,0.193-1.351,0.315-2.2c0.111-0.851,0.281-1.807,0.387-2.858 c0.086-1.055,0.179-2.197,0.277-3.405c0.074-1.21,0.255-2.482,0.257-3.807c0.035-1.324,0.071-2.692,0.108-4.082 c0.068-1.391-0.002-2.803-0.032-4.216c-0.054-1.412-0.03-2.83-0.146-4.215c-0.107-1.387-0.212-2.753-0.314-4.074 c-0.075-1.325-0.315-2.584-0.454-3.79c-0.164-1.202-0.285-2.35-0.522-3.368c-0.207-1.03-0.397-1.974-0.563-2.811 c-0.158-0.839-0.438-1.557-0.596-2.155c-0.354-1.193-0.557-1.875-0.557-1.875l-0.002-0.006 c-0.073-0.246,0.067-0.505,0.313-0.579C263.67,109.29,263.926,109.425,264.003,109.665z"
/>
</g>
</g>
<g>
<path
style="fill: #1f1f1f"
d="M172.146,184.739c0,0,0.046-0.561,0.128-1.541c0.047-0.493,0.074-1.08,0.162-1.774 c0.116-0.699,0.247-1.487,0.39-2.347c0.112-0.869,0.386-1.767,0.629-2.73c0.126-0.48,0.254-0.974,0.386-1.478 c0.128-0.505,0.356-0.994,0.535-1.506c0.192-0.508,0.387-1.025,0.584-1.548l0.298-0.789l0.296-0.731 c0.198-0.51,0.448-1.034,0.607-1.541l0.491-1.529c0.296-1.037,0.555-2.115,0.767-3.168c0.147-1.068,0.403-2.11,0.443-3.14 c0.071-1.025,0.203-2.018,0.154-2.961c-0.035-0.94,0.046-1.842-0.086-2.655c-0.08-0.82-0.154-1.571-0.219-2.238 c-0.108-0.659-0.252-1.225-0.344-1.697c-0.199-0.942-0.312-1.481-0.312-1.481l-0.015-0.069 c-0.067-0.319,0.137-0.631,0.456-0.698c0.308-0.065,0.61,0.125,0.691,0.425c0,0,0.147,0.556,0.405,1.527 c0.122,0.488,0.301,1.076,0.449,1.761c0.104,0.694,0.221,1.477,0.349,2.331c0.164,0.854,0.114,1.792,0.181,2.78 c0.08,0.991-0.02,2.03-0.061,3.109c-0.01,1.083-0.238,2.18-0.359,3.309c-0.188,1.12-0.418,2.244-0.703,3.376l-0.488,1.695 c-0.162,0.566-0.381,1.059-0.567,1.587c-0.38,1.027-0.753,2.038-1.115,3.016c-0.165,0.483-0.379,0.941-0.495,1.421 c-0.121,0.479-0.238,0.947-0.354,1.403c-0.223,0.913-0.48,1.768-0.575,2.578c-0.132,0.805-0.252,1.542-0.359,2.196 c-0.1,0.664-0.142,1.27-0.199,1.756c-0.102,0.979-0.161,1.538-0.161,1.538c-0.058,0.549-0.549,0.948-1.099,0.891 C172.497,185.762,172.102,185.279,172.146,184.739z"
/>
</g>
</g>
</g>
</g>
</svg>
`;
~~~
## Images
This component ships with 1 reference asset, served publicly.
Use them as-is to reproduce the demo faithfully, then swap in your own — the layout expects the
same aspect ratios.
```
https://motionprompts.dev/c/larevoltosa-scroll-animation/img.jpg
```
They are hotlinkable for prototyping. For anything you ship, replace them: they are licensed for
demonstration of this component, not for redistribution.
## Using this outside its demo page
This component is written as a complete page — that is how the demo is meant to look. If you are dropping it into an existing project, or combining it with other components, these are the things it declares at document level and that you need to move or reconcile first.
- **Palette on `:root`** — `--coral`, `--aubergine`, `--cream`, `--purple`, `--blue`. These names are not namespaced and they collide: `--ink` is defined by 164 of the 219 components in this catalogue, `--paper` by 94, `--muted` by 80, each with different values — and they will also collide with whatever your own project defines. Move them onto the component's wrapper (`.my-section { --ink: … }`) or rename them with a prefix.
- **Rules on `*`, `body`** — the demo owns the whole document, so these set the page background, typography and resets. Dropped into an existing project they restyle the entire page, not just this section. Re-target them at the component's wrapper before using it.
- **Smooth scroll (Lenis)** — this creates its own Lenis instance, and a page may only have one. If your project already runs Lenis, drop the setup shown above and reuse the existing instance, keeping the `lenis.on("scroll", ScrollTrigger.update)` wiring once. Two instances fight over the same scroll and stutter visibly, with no error in the console.
## Adapting this to React
Everything above describes a standalone document: a script that waits for `DOMContentLoaded`, injects the doodle's raw SVG markup into `.svg-container`, tears two of its paths apart at runtime to build the lens `clipPath`s, and only then wires the single pinned `ScrollTrigger` that drives the glare sweep, the 1→43 zoom, the lens photo fade and the word-by-word headline from one `onUpdate`. React withdraws the ready-made document, the free run of unscoped selectors and the license to never tear anything down — and it does it quietly: the first mount pins `.spotlight`, zooms into the glasses and looks correct, and the damage only shows up on a second mount or a real navigation away.
Under React 19 with StrictMode, every effect mounts, unmounts, and mounts again before anything reaches the screen. By the time the first mount's `DOMContentLoaded` body has run, it has live state hanging off of it: a `Lenis` instance, a `gsap.ticker` callback pumping it every frame, a pinned, scrub-driven `ScrollTrigger` whose `pinSpacing` has already reserved three viewport-heights of extra scroll under `.outro`, a `headerSplit` that has rewritten `.spotlight-header h1`'s children into `.spotlight-word` spans, and the freshly-built `lensImages`/`glareBands` arrays closed over by that trigger's `onUpdate`. A second, un-cleaned-up run of the same body does not just duplicate work — `.svg-container`'s `innerHTML` gets reassigned, so the first pass's `<svg>`, its clip groups, its lens `<image>`s and glare `<rect>`s are all detached from the document, but the *first* `ScrollTrigger` is still alive, still pinned, and its `onUpdate` keeps calling `gsap.set` against those now-orphaned nodes on every scroll frame. Meanwhile the second pass's `ScrollTrigger.create({ trigger: ".spotlight", pin: true, pinSpacing: true, ... })` pins the same section a second time, so the page now reserves six viewport-heights of scroll instead of three, with two pin-spacers stacked and two zoom progressions disagreeing about where you are. And because `.spotlight-header h1` is a real, static element that survives the remount untouched, the second `SplitText.create(spotlightHeader, { type: "words", wordsClass: "spotlight-word" })` runs on a node that is already full of `.spotlight-word` spans from the first split — it splits the split, and `headerSplit.words` in the live trigger no longer lines up one-to-one with the words a reader actually sees.
*(1) The entry point* — delete the `DOMContentLoaded` listener and move its entire body — the Lenis/ticker wiring, the `settings` object, the `.svg-container` injection and lens-building loop, the `SplitText.create` call, the `gsap.set` that primes `transformOrigin`/`transformBox` on the doodle, and the `ScrollTrigger.create` — into a `useEffect` with an empty dependency array. `gsap.registerPlugin(ScrollTrigger, SplitText)` can stay at module scope; re-registering per mount is harmless but pointless.
*(2) Element lookups* — this component's riskiest lookup is not the class selectors, it's `const svg = document.querySelector("svg")` right after the `innerHTML` injection: a bare tag selector that matches the *first* `<svg>` anywhere in the document, not necessarily the one this effect just wrote. Scope every lookup to a root ref instead: `root.querySelector(".svg-container")` to find the container, then `.querySelector("svg")` on *that* node — never on `document`. Do the same for `.spotlight-header h1` and `.spotlight` (the pin trigger). During the StrictMode remount, two copies of the injected doodle briefly coexist; an unscoped `document.querySelector("svg")` has no way to prefer the one this effect actually owns over the stale one still waiting to be torn down.
*(3) Cleanup* — wrap the whole body in a `gsap.context` scoped to the root ref, and use its teardown to unwind the pieces `ctx.revert()` does not reach on its own:
```jsx
useEffect(() => {
const root = rootRef.current;
const lenis = new Lenis();
lenis.on("scroll", ScrollTrigger.update);
const onTick = (time) => lenis.raf(time * 1000);
gsap.ticker.add(onTick);
gsap.ticker.lagSmoothing(0);
const ctx = gsap.context(() => {
// svg injection, clip/lens/glare construction, SplitText.create,
// the priming gsap.set, and ScrollTrigger.create — exactly as above,
// all lookups scoped to `root` instead of `document`
}, root);
return () => {
ctx.revert();
gsap.ticker.remove(onTick);
lenis.destroy();
};
}, []);
```
`ctx.revert()` covers the `ScrollTrigger` (removing the pin-spacer it wrapped around `.spotlight` and restoring the section's own inline styles, so the extra reserved scroll height collapses back to zero) and the `gsap.set` calls the plugin tracked on the `<svg>`, the glare bands and the lens images. It does **not** cover `gsap.ticker.add(onTick)` — a ticker subscription is neither a tween nor a trigger — so that callback has to be removed by the same function reference you passed in, and it has to happen before `lenis.destroy()`: a ticker frame that lands between reverting the context and destroying Lenis would still call `.raf()` on a live instance, which is harmless, but one that lands *after* destroy and *before* `gsap.ticker.remove` calls `.raf()` on an instance with nothing left to drive.
The split needs the same explicit treatment: call `headerSplit.revert()` inside the same cleanup (or let it happen as part of the context if your GSAP version reverts context-created splits automatically — check before relying on it) before the next mount's `SplitText.create` runs against `.spotlight-header h1` again. Skipping this is exactly what produces the nested-span bug described above: the second split's `wordsClass: "spotlight-word"` wraps spans that are already wrapped, and `headerSplit.words.length` — the denominator the word-reveal math in `onUpdate` divides by — stops matching the number of words a reader can actually see.More like this
01:00History of the Las Vegas Sphere in GSAP
GSAPOpus 5.5
1
00:30What It Feels Like To Be Claude
GSAPOpus 5.5
0
Zoom-Out Mark Preloader
GSAPWeb motion
1
Zajno Landing Page Reveal
GSAPWeb motion
1
YARD Hover Menu
GSAPWeb motion
1
Karim Saab Fashion Carousel
GSAPWeb motion
1