├── .editorconfig
├── .gitignore
├── README.md
├── article.txt
├── babel.config.js
├── gh-pages-deploy.js
├── package-lock.json
├── package.json
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── App.vue
    ├── assets
    │   └── main.sass
    ├── components
    │   ├── HeavyItem.vue
    │   ├── Item.vue
    │   ├── ItemWithRename.vue
    │   ├── ItemWithRenameById1.vue
    │   ├── ItemWithRenameById2.vue
    │   └── Tiger.vue
    ├── directives
    │   ├── NodeIntersect.js
    │   └── NodeIntersect.ts
    ├── main.js
    ├── router
    │   ├── index.js
    │   └── routes.js
    ├── store
    │   ├── example1.js
    │   ├── example2.js
    │   ├── example3.js
    │   ├── example4.js
    │   └── index.js
    └── views
    │   ├── Example1.vue
    │   ├── Example2.vue
    │   ├── Example3.vue
    │   ├── Example4p1.vue
    │   ├── Example4p2.vue
    │   ├── Example4p3.vue
    │   ├── Example5.vue
    │   ├── Examples.vue
    │   └── Home.vue
└── vue.config.js


/.editorconfig:
--------------------------------------------------------------------------------
1 | [*.{js,jsx,ts,tsx,vue}]
2 | indent_style = space
3 | indent_size = 2
4 | trim_trailing_whitespace = true
5 | insert_final_newline = true
6 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # rerendering-article-vue2
 2 | 
 3 | ## Project setup
 4 | ```
 5 | npm install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | npm run serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | npm run build
16 | ```
17 | 
18 | ### Lints and fixes files
19 | ```
20 | npm run lint
21 | ```
22 | 
23 | ### Customize configuration
24 | See [Configuration Reference](https://cli.vuejs.org/config/).
25 | 


--------------------------------------------------------------------------------
/article.txt:
--------------------------------------------------------------------------------
  1 | Улучшение производительности vue приложения
  2 | 
  3 | У нас в TeamHood есть wiki. 
  4 | Там собралась коллекция рекоммендаций, в том числе, по улучшению производительности тяжелого фронтенда на vue.js.
  5 | Улучшать производительность понадобилось, потому что в силу специфики наши основные экраны не имеют пагинации.
  6 | Есть клиенты, у которых на одной kanban/gantt-доске больше тысячи вот таких вот карточек, все это должно работать без лагов.
  7 | 
  8 | [img]
  9 | - 2 rows
 10 | - development board
 11 | - subtasks + in progress, for pairtest
 12 | -- resort rows;
 13 | -- move task with 3 children to parent-child column
 14 | -- assign first child 
 15 | -- resort children
 16 | -- trigger submenu, assign a tag
 17 | -- mark third child completed
 18 | 
 19 | В статье разобрано несколько редко упоминаемых техник из нашей wiki, которые помогут сократить излишний рендеринг компонентов и улучшить производительность.
 20 | 
 21 | https://kasheftin.github.io/vue-rerendering-optimization/
 22 | https://github.com/Kasheftin/vue-rerendering-optimization
 23 | 
 24 | Все примеры собраны в отдельном репозитории [link]. Это vue2 приложение, хотя все проверено и продолжает быть актуальным для vue3.
 25 | По моему мнению, vue3 еще не production-ready. В vuex4 утекает память, исследовать соответствующие оптимизации там пока бессмысленно (что обнадеживает, затраты памяти там в разы меньше чем в vue2+vuex3). 
 26 | Примеры написаны на минимальном простейшем javascript, было искушение воткнуть vue-class-component, typescript, typed-vuex и остальную кухню реального проекта, но удержался.
 27 | 
 28 | 1. (Deep) Object Watchers.
 29 | Не использовать deep модификатор; использовать watch только для примитивных типов. 
 30 | Начнем с простого примера. 
 31 | Некий массив items приходит с сервера, сохраняется в vuex store, отрисовывается, возле каждого item есть чекбокс.
 32 | Свойство isChecked относится к интерфейсу, хранится отдельно от item, однако есть getter, который собирает их вместе:
 33 | 
 34 | ````
 35 | export const state = () => ({
 36 |   items: [{ id: 1, name: 'First' }, { id: 2, name: 'Second' }],
 37 |   checkedItemIds: [1, 2]
 38 | })
 39 | 
 40 | export const getters = {
 41 |   extendedItems (state) {
 42 |     return state.items.map(item => ({
 43 |       ...item,
 44 |       isChecked: state.checkedItemIds.includes(item.id)
 45 |     }))
 46 |   }
 47 | }
 48 | ````
 49 | 
 50 | Допустим, items могут быть отсортированы пользователем, и мы хотим сохранять порядок. Что-то вроде: 
 51 | 
 52 | ````
 53 | export default class ItemList extends Vue {
 54 |   computed: {
 55 |     extendedItems () { return this.$store.getters.extendedItems },
 56 |     itemIds () { return this.extendedItems.map(item => item.id) }
 57 |   },
 58 |   watch: {
 59 |     itemIds () {
 60 |       console.log('Saving new items order...', this.itemIds) 
 61 |     }
 62 |   }
 63 | }
 64 | ````
 65 | 
 66 | В этом случае переключение чекбокса у любого item вызывается излишнее срабатывание сохранение порядка. 
 67 | Конструирование новых объектов - настолько естественный процесс, что даже в этом тривиальном примере мы делаем это дважды. 
 68 | Изменение checkedItemIds вызвает пересоздание массива extendedItems (и пересоздание каждого элемента этого массива), затем
 69 | идет пересоздание объекта itemIds. Это может казаться контра-интуитивным, ведь создается массив, состоящий из тех же самых элементов в том же самом порядке.
 70 | Однако, это природа javascript, [1,2,3] != [1,2,3]. 
 71 | 
 72 | Решение - полный отказ от использования watcher для объектов и массивов. 
 73 | Для каждого сложного watcher создается отдельный computed примитивного типа. 
 74 | Например, если требуется отслеживать свойства {id, title, userId} в массиве items, можно сделать строку,
 75 | 
 76 | ````
 77 | computed: {
 78 |   itemsTrigger () { return JSON.stringify(items.map(item => ({ id: item.id, title: item.title, userId: item.userId }))) }
 79 | },
 80 | watch: {
 81 |   itemsTrigger () {
 82 |     // Здесь не нужен JSON.parse - дешевле пользоваться исходным this.items; 
 83 |   }
 84 | }
 85 | ````
 86 | 
 87 | Очевидно, чем точнее условие для срабатывания watcher, тем лучше, тем точнее он срабатывает. 
 88 | Объектный watcher - плохо, deep watcher - еще хуже. 
 89 | Использование deep в коде - частый признак неграмотности разработчика. 
 90 | Типа я не понимаю что делает этот код, какими объектами он оперирует, но что-то иногда не срабатывает, навешу-ка я deep - о вроде работает.
 91 | Это что-то уровня.. (был у меня и такой проект).. в компоненте не срабатывала реактивность, и вместо того, чтобы найти ошибку, был повешен $emit('reinit'), 
 92 | по которому родительский компонент убивал данный и создавал его заново в $nextTick. 
 93 | Все это забавно мигало.
 94 | 
 95 | 2. Ограничение реактивности (freeze).
 96 | Использование Object.freeze на проекте TeamHood внезапно сократило потребление памяти в 2 раза.
 97 | 
 98 | [Image before - after]
 99 | 
100 | Однако оно даже больше относится к моему второму основному проекту, StarBright, где используется nuxt и серверный рендеринг.
101 | Nuxt подразумевает, что некоторые запросы будут отрабатываться на сервере заранее. 
102 | Ответы сохраняются в vuex store (и потом используются на клиенте). 
103 | Таким образом, всю логику работы с запросами и кешированием данных удобнее держать в vuex. 
104 | Компонент делает this.$store.dispatch('fetch', ...), а vuex отдает кеш или делает запрос.
105 | Следовательно, в vuex может содержаться большой объем данных. 
106 | Например, пользователь вводил адрес, autocomplete загрузил массив городов, который был закеширован в store с целью избежать повторной загрузки. 
107 | Данные статичны, однако vue по умолчанию делает реактивным каждое свойство каждого объекта (рекурсивно). 
108 | Во многих случаях это приводит к высокому расходу памяти, и лучше пожертвовать реактивностью отдельных свойств. 
109 | Вместо:
110 | 
111 | ````
112 | state: () => ({
113 |   items: []
114 | }),
115 | mutations: {
116 |   setItems (state, items) {
117 |     state.items = items
118 |   },
119 |   markItemCompleted (state, itemId) {
120 |     const item = state.items.find(item => item.id === itemId)
121 |     if (item) {
122 |       item.completed = true
123 |     }
124 |   }
125 | }
126 | ````
127 | 
128 | Делаем
129 | 
130 | ````
131 | state: () => ({
132 |   items: []
133 | }),
134 | mutations: {
135 |   setItems (state, items) {
136 |     state.items = items.map(item => Object.freeze(item))
137 |   },
138 |   markItemCompleted (state, itemId) {
139 |     const itemIndex = state.items.find(item => item.id === itemId)
140 |     if (itemIndex !== -1) {
141 |       // Не получится делать item.completed = true (объект заморожен), нужно пересоздать весь объект;
142 |       const newItem = {
143 |         ...state.items[itemIndex],
144 |         completed: true
145 |       }
146 |       state.items.splice(itemIndex, 1, Object.freeze(newItem))
147 |     }
148 |   }
149 | }
150 | 
151 | Замечу, что замерять расход памяти нужно на build-версии (не в development).
152 | 
153 | 3. Функциональные геттеры.
154 | Иногда это пропускают в документации (https://vuex.vuejs.org/guide/getters.html#method-style-access).
155 | Функциональные геттеры не кешируются. Вот это:
156 | ````
157 | // Vuex: 
158 | getters: {
159 |   itemById: (state) => (itemId) => state.items.find(item => item.id === itemId)
160 | }
161 | ...
162 | // Some <Item :item-id="itemId" /> component:
163 | computed: {
164 |   item () { return this.$store.getters.itemById(this.itemId) }
165 | }
166 | ````
167 | будет делать items.find для каждого компонента <Item>.
168 | Вот это:
169 | ````
170 | getters: {
171 |   itemByIds: (state) => state.items.reduce((out, item) => {
172 |     out[item.id] = item
173 |     return out
174 |   }, {})
175 | }
176 | // Some <Item :item-id="itemId" /> component:
177 | computed: {
178 |   item () { return this.$store.getters.itemsByIds[this.itemId] }
179 | }
180 | ````
181 | выполнит itemsByIds при первом обращении и закеширует результат. Таким образом, функциональные геттеры не имеют никаких преимуществ перед обычными методами/функциями.
182 | 
183 | 4. Грамотное распределение на компоненты.
184 | Компоненты - ключевая часть экосистемы vue.
185 | Понимание жизненного цикла и критериев обновления (shouldComponentUpdate) необходимо для строительства эффективного приложения.
186 | Первое знакомство с компонентами проходит на интуитивно-логическом уровне: есть какие-то однотипные контейнеры, тогда наверное для контейнера лучше сделать отдельный компонент.
187 | Однако, кроме смыслового значения, компоненты - это мощный механизм, дающий контроль над гранулярностью обновлений, это штука, напрямую влияющая на производительность. 
188 | Для примера возьмем itemByIds getter из предыдущего пункта и рассмотрим такой код:
189 | ````
190 | // App.vue
191 | <ItemById for="id in $store.state.ids" :key="id" :item-id="id />
192 | 
193 | // Item.vue:
194 | <template>
195 |   <div>{{ item.title }}</div>
196 | </template>
197 | 
198 | <script>
199 | export default {
200 |   props: ['itemId'],
201 |   computed: {
202 |     item () { return this.$store.getters.itemsByIds[this.itemId] }
203 |   },
204 |   updated () {
205 |     console.count('Item updated')
206 |   }
207 | }
208 | </script>
209 | ````
210 | 
211 | Здесь обновление любого свойства одного item вызывает обновление всех компонентов <Item>. 
212 | Причина в том, что технически <Item> зависит от всего объекта itemsByIds, то есть от каждого item, а не только от "своего".
213 | Для исправления начнем с перенеса itemsByIds в родительский компонент:
214 | 
215 | // App.vue
216 | <Item v-for="id in $store.state.checkedItemIds" :key="id" :item="$store.getters.itemsByIds[id]" />
217 | 
218 | Но это не поможет. vue вызывает обновление компонента, если его зависимости меняются. При изменении любого свойства любого item пересоздается
219 | объект itemsByIds, каждый элемент которого - это новый объект { ...item, isChecked: .. }, а поскольку {...item} !== {...item}, идет ререндеринг.
220 | 
221 | Каждый vue компонент - это функция, которая отдает virtual DOM и кеширует его (memoization).
222 | Входные аргументы функции - зависимости - отлеживаются на этапе dry run и состоят из ссылок на переменные в props и $store.
223 | Если входной аргумент - поэлементно равный предыдущему новый объект, кеширование не срабатывает.
224 | 
225 | Есть два варианта, как это победить - глупый и умный. Очевидно, если сделать <Item :item-json="JSON.stringify(любой объект)> то проблема уйдет.
226 | В умном варианте нужно отслеживать, где создаются объекты. 
227 | Первоначальная структура данных в store не совсем удачная: мы начали применять normalizr подход, но не доделали.
228 | Удобнее хранить сортировку в отдельном массиве ids.
229 | Так же, вместо копирования всех свойств объекта в getter лучше просто хранить ссылку на весь объект. 
230 | Например, так:
231 | 
232 | export const state = () => ({
233 |   ids: [],
234 |   itemsByIds: {},
235 |   checkedIds: []
236 | })
237 | 
238 | export const getters = {
239 |   extendedItems (state, getters) {
240 |     return state.ids.map(id => ({
241 |       id,
242 |       item: state.itemsByIds[id],
243 |       isChecked: state.checkedIds.includes(id)
244 |     }))
245 |   }
246 | }
247 | 
248 | Теперь в компонент <Item> можно передать отдельно объект extendedItem.item и булевое свойство isChecked:
249 | 
250 | <Item
251 |   v-for="extendedItem in extendedItems"
252 |   :key="extendedItem.id"
253 |   :item="extendedItem.item"
254 |   :is-checked="extendedItem.isChecked"
255 | />
256 | 
257 | Демонстрация правильной работы: пример 1, пример 2.
258 | 
259 | 5. Применение Intersection Observer.
260 | Отрисовка большого DOM-дерева тормозит сама по себе. Мы применяем несколько техник для оптимизации. 
261 | Например, на gantt схемах размеры и положения блоков заранее расчитаны, поэтому известно, что попадает в viewport. Невидимые элементы не отрисовываются.
262 | В других случаях размеры заранее неизвестны, тогда можно применить этот простой прием с intersection observer.
263 | В vuetify есть v-intersect директива, которая работает из коробки, однако она создает отдельный IntersectionObserver на каждый свой биндинг, поэтому не подходит для случая, когда объектов много.
264 | Вот пример, который будем оптимизировать. Там 100 элементов (на экране помещается 10), в каждом мигает тяжелая картинка, замеряется задержка между реальным миганием и расчетным.
265 | Создадим один экземпляр IntersectionObserver и пробросим его через директиву во все узлы, которые он будет отслеживать.
266 | Все, что нужно от директивы - добавиться в IntersectionObserver и запомнить это:
267 | 
268 | export default {
269 |   inserted (el, { value: observer }) {
270 |     if (observer instanceof IntersectionObserver) {
271 |       observer.observe(el)
272 |     }
273 |     el._intersectionObserver = observer
274 |   },
275 |   update (el, { value: newObserver }) {
276 |     const oldObserver = el._intersectionObserver
277 |     const isOldObserver = oldObserver instanceof IntersectionObserver
278 |     const isNewObserver = newObserver instanceof IntersectionObserver
279 |     if (!isOldObserver && !isNewObserver) || (isOldObserver && (oldObserver === newObserver)) {
280 |       return false
281 |     }
282 |     if (isOldObserver) {
283 |       oldObserver.unobserve(el)
284 |       el._intersectionObserver = undefined
285 |     }
286 |     if (isNewObserver) {
287 |       newObserver.observe(el)
288 |       el._intersectionObserver = newObserver
289 |     }
290 |   },
291 |   unbind (el) {
292 |     if (el._intersectionObserver instanceof IntersectionObserver) {
293 |       el._intersectionObserver.unobserve(el)
294 |     }
295 |     el._intersectionObserver = undefined
296 |   }
297 | }
298 | 
299 | Теперь известно, какие элементы списка не видны, вопрос, как их облегчать. 
300 | Можно, например, менять тяжелый компонент на легкую заглушку или убирать какие-то части. 
301 | Однако важно понимать, что сложный компонент сложно отрисовывать. 
302 | При быстром скролинге список затупит из-за большого количества инициализаций и деинициализаций.
303 | Практика показывает, что хорошо работает скрытие на уровне css:
304 | 
305 | <template>
306 |   <div 
307 |     v-for="i in 100" 
308 |     :key="i" 
309 |     v-node-intersect="intersectionObserver"
310 |     class="rr-intersectionable"
311 |   >
312 |     <Heavy />
313 |   </div>
314 | </template>
315 | 
316 | <script>
317 | export default {
318 |   data () {
319 |     return {
320 |       intersectionObserver: new IntersectionObserver(this.handleIntersections)
321 |     }
322 |   },
323 |   methods: {
324 |     handleIntersections (entries) {
325 |       entries.forEach((entry) => {
326 |         const className = 'rr-intersectionable--invisible'
327 |         if (entry.isIntersecting) {
328 |           entry.target.classList.remove(className)
329 |         } else {
330 |           entry.target.classList.add(className)
331 |         }
332 |       })
333 |     }
334 |   }
335 | }
336 | </script>
337 | 
338 | <style>
339 | .rr-intersectionable--invisible .rr-heavy-part
340 |   display: none
341 | </style>
342 | 
343 | Рабочий пример: example5.
344 | 
345 | Ссылки:
346 | - Исходный код примеров;
347 | - Демо;
348 | - Caution using watchers for objects in Vue https://codeburst.io/caution-using-watchers-for-objects-in-vue-ecafb0af6493;
349 | - Vuex4 memory leak issue;


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/gh-pages-deploy.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable no-console */
 2 | const execa = require("execa");
 3 | const fs = require("fs");
 4 | (async () => {
 5 |   try {
 6 |     await execa("git", ["checkout", "--orphan", "gh-pages"]);
 7 |     // eslint-disable-next-line no-console
 8 |     console.log("Building started...");
 9 |     await execa("npm", ["run", "build"]);
10 |     // Understand if it's dist or build folder
11 |     const folderName = fs.existsSync("dist") ? "dist" : "build";
12 |     await execa("git", ["--work-tree", folderName, "add", "--all"]);
13 |     await execa("git", ["--work-tree", folderName, "commit", "-m", "gh-pages"]);
14 |     console.log("Pushing to gh-pages...");
15 |     await execa("git", ["push", "origin", "HEAD:gh-pages", "--force"]);
16 |     await execa("rm", ["-r", folderName]);
17 |     await execa("git", ["checkout", "-f", "master"]);
18 |     await execa("git", ["branch", "-D", "gh-pages"]);
19 |     console.log("Successfully deployed, check your settings");
20 |   } catch (e) {
21 |     // eslint-disable-next-line no-console
22 |     console.log(e.message);
23 |     process.exit(1);
24 |   }
25 | })();


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "rerendering-article-vue2",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "core-js": "^3.6.5",
12 |     "uniqid": "^5.2.0",
13 |     "vue": "^2.6.11",
14 |     "vue-dragscroll": "^2.1.3",
15 |     "vue-router": "^3.2.0",
16 |     "vuedraggable": "^2.24.3",
17 |     "vuex": "^3.4.0"
18 |   },
19 |   "devDependencies": {
20 |     "@vue/cli-plugin-babel": "~4.5.0",
21 |     "@vue/cli-plugin-eslint": "~4.5.0",
22 |     "@vue/cli-plugin-router": "~4.5.0",
23 |     "@vue/cli-plugin-vuex": "~4.5.0",
24 |     "@vue/cli-service": "~4.5.0",
25 |     "@vue/eslint-config-standard": "^5.1.2",
26 |     "babel-eslint": "^10.1.0",
27 |     "eslint": "^6.7.2",
28 |     "eslint-plugin-import": "^2.20.2",
29 |     "eslint-plugin-node": "^11.1.0",
30 |     "eslint-plugin-promise": "^4.2.1",
31 |     "eslint-plugin-standard": "^4.0.0",
32 |     "eslint-plugin-vue": "^6.2.2",
33 |     "sass": "^1.26.5",
34 |     "sass-loader": "^8.0.2",
35 |     "vue-template-compiler": "^2.6.11"
36 |   },
37 |   "eslintConfig": {
38 |     "root": true,
39 |     "env": {
40 |       "node": true
41 |     },
42 |     "extends": [
43 |       "plugin:vue/essential",
44 |       "@vue/standard"
45 |     ],
46 |     "parserOptions": {
47 |       "parser": "babel-eslint"
48 |     },
49 |     "rules": {}
50 |   },
51 |   "browserslist": [
52 |     "> 1%",
53 |     "last 2 versions",
54 |     "not dead"
55 |   ]
56 | }
57 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Kasheftin/vue-rerendering-optimization/3e937c52cdb140fdc9978251af43ffb02fa3f4fd/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div class="rr-dragscroll-container" v-dragscroll:nochilddrag>
3 |     <router-view class="rr-app" />
4 |   </div>
5 | </template>
6 | 


--------------------------------------------------------------------------------
/src/assets/main.sass:
--------------------------------------------------------------------------------
 1 | h1
 2 |   text-align: center
 3 |   line-height: 2rem
 4 | 
 5 | h3
 6 |   margin: 20px 0 5px 0
 7 | 
 8 | a
 9 |   color: #42b983
10 | 
11 | @keyframes highlight
12 |   0%
13 |     background-color: #ee39
14 |   100%
15 |     background-color: none
16 | 
17 | body
18 |   overflow: hidden
19 | 
20 | .rr-dragscroll-container
21 |   position: fixed
22 |   top: 0
23 |   right: 0
24 |   bottom: 0
25 |   left: 0
26 |   overflow: auto
27 |   
28 | .rr-app
29 |   font-family: Avenir, Helvetica, Arial, sans-serif
30 |   -webkit-font-smoothing: antialiased
31 |   -moz-osx-font-smoothing: grayscale
32 |   color: #2c3e50
33 |   margin: 60px auto 0
34 |   max-width: 600px
35 |   line-height: 1.5em
36 | 
37 | .rr-item
38 |   border: 1px solid #dedede
39 |   padding: 10px
40 |   margin: 0 10px
41 |   display: flex
42 |   align-items: center
43 |   &--multiline
44 |     display: block
45 |   &--highlight
46 |     animation: highlight 1s
47 |   &__check
48 |     margin: 0 10px 0 0
49 |     display: flex
50 |     align-items: center
51 |   &__image
52 |     flex: 0 0 100px
53 |   &__text
54 |     flex: 1 1 auto   
55 | 
56 | .rr-intersectionable.rr-intersectionable--invisible .rr-item__svg
57 |   display: none
58 | 
59 | 


--------------------------------------------------------------------------------
/src/components/HeavyItem.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="rr-item">
 3 |     <div class="rr-item__image">
 4 |       <div :style="style">
 5 |         <Tiger v-if="isActive" :style="style" class="rr-item__svg" />
 6 |       </div>
 7 |     </div>
 8 |     <div class="rr-item__text">
 9 |       <div>Lateness: <strong>{{ lateness }}</strong> ms</div>
10 |       <div>
11 |         {{ text }}
12 |       </div>
13 |     </div>
14 |   </div>
15 | </template>
16 | 
17 | <script>
18 | import Tiger from './Tiger'
19 | 
20 | export default {
21 |   components: {
22 |     Tiger
23 |   },
24 |   props: {
25 |     size: {
26 |       type: Number,
27 |       default: 64
28 |     },
29 |     interval: {
30 |       type: Number,
31 |       default: 500
32 |     }
33 |   },
34 |   data () {
35 |     return {
36 |       isActive: false,
37 |       text: Array(Math.ceil(Math.random() * 10)).fill('Lorem ipsum dolor sit amet.').join(' '),
38 |       runsCount: -1,
39 |       startedAt: 0,
40 |       currentTimestamp: 0
41 |     }
42 |   },
43 |   computed: {
44 |     style () {
45 |       return { width: this.size + 'px', height: this.size + 'px' }
46 |     },
47 |     lateness () {
48 |       return this.currentTimestamp - this.startedAt - this.runsCount * this.interval
49 |     }
50 |   },
51 |   mounted () {
52 |     this.startedAt = (new Date()).getTime()
53 |     const run = () => {
54 |       this.currentTimestamp = (new Date()).getTime()
55 |       this.isActive = !this.isActive
56 |       this.runsCount++
57 |       this._timeout = setTimeout(run, 500)
58 |     }
59 |     run()
60 |   },
61 |   beforeDestroy () {
62 |     this._timeout && clearTimeout(this._timeout)
63 |   }
64 | }
65 | </script>
66 | 


--------------------------------------------------------------------------------
/src/components/Item.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div v-if="item" class="rr-item">
 3 |     <div class="rr-item__check">
 4 |       <input
 5 |         v-model="itemIsChecked"
 6 |         :true-value="true"
 7 |         :false-value="false"
 8 |         type="checkbox"
 9 |       >
10 |     </div>
11 |     <div class="rr-item__title">
12 |       {{ item.title }}
13 |     </div>
14 |   </div>
15 | </template>
16 | 
17 | <script>
18 | export default {
19 |   props: {
20 |     item: {
21 |       type: Object,
22 |       required: true
23 |     }
24 |   },
25 |   computed: {
26 |     itemIsChecked: {
27 |       get () {
28 |         return this.item.isChecked
29 |       },
30 |       set (value) {
31 |         this.$emit('set-checked', value)
32 |       }
33 |     }
34 |   }
35 | }
36 | </script>
37 | 


--------------------------------------------------------------------------------
/src/components/ItemWithRename.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div v-if="item" class="rr-item">
 3 |     <div class="rr-item__check">
 4 |       <input
 5 |         :checked="isChecked"
 6 |         type="checkbox"
 7 |         @change="$emit('set-checked', $event.target.checked)"
 8 |       >
 9 |     </div>
10 |     <div class="rr-item__title">
11 |       <input
12 |         :value="item.title"
13 |         @change="$emit('rename', $event.target.value)"
14 |       >
15 |     </div>
16 |   </div>
17 | </template>
18 | 
19 | <script>
20 | export default {
21 |   props: {
22 |     item: {
23 |       type: Object,
24 |       required: true
25 |     },
26 |     isChecked: {
27 |       type: Boolean,
28 |       required: true
29 |     }
30 |   },
31 |   updated () {
32 |     console.log('ItemWithRename')
33 |     this.$emit('updated')
34 |   }
35 | }
36 | </script>
37 | 


--------------------------------------------------------------------------------
/src/components/ItemWithRenameById1.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div v-if="item" class="rr-item">
 3 |     <div class="rr-item__check">
 4 |       <input
 5 |         :checked="item.isChecked"
 6 |         type="checkbox"
 7 |         @change="$emit('set-checked', $event.target.checked)"
 8 |       >
 9 |     </div>
10 |     <div class="rr-item__title">
11 |       <input
12 |         :value="item.title"
13 |         @change="$emit('rename', $event.target.value)"
14 |       >
15 |     </div>
16 |   </div>
17 | </template>
18 | 
19 | <script>
20 | export default {
21 |   props: {
22 |     itemId: {
23 |       type: String,
24 |       required: true
25 |     }
26 |   },
27 |   computed: {
28 |     item () {
29 |       return this.$store.getters['example4/extendedItemsByIds'][this.itemId]
30 |     }
31 |   },
32 |   updated () {
33 |     console.log('ItemWithRenameById1')
34 |     this.$emit('updated')
35 |   }
36 | }
37 | </script>
38 | 


--------------------------------------------------------------------------------
/src/components/ItemWithRenameById2.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div v-if="item" class="rr-item">
 3 |     <div class="rr-item__check">
 4 |       <input
 5 |         :checked="isChecked"
 6 |         type="checkbox"
 7 |         @change="$emit('set-checked', $event.target.checked)"
 8 |       >
 9 |     </div>
10 |     <div class="rr-item__title">
11 |       <input
12 |         :value="item.title"
13 |         @change="$emit('rename', $event.target.value)"
14 |       >
15 |     </div>
16 |   </div>
17 | </template>
18 | 
19 | <script>
20 | export default {
21 |   props: {
22 |     itemId: {
23 |       type: String,
24 |       required: true
25 |     }
26 |   },
27 |   computed: {
28 |     item () {
29 |       return this.$store.state.example4.itemsByIds[this.itemId]
30 |     },
31 |     isChecked () {
32 |       return this.$store.state.example4.checkedIds.includes(this.itemId)
33 |     }
34 |   },
35 |   updated () {
36 |     console.log('ItemWithRenameById2')
37 |     this.$emit('updated')
38 |   }
39 | }
40 | </script>
41 | 


--------------------------------------------------------------------------------
/src/components/Tiger.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <svg id="svg2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 900" version="1.1">
  3 |   <g id="g4" fill="none" transform="matrix(1.7656463,0,0,1.7656463,324.90716,255.00942)">
  4 |     <g id="g6" stroke-width="0.17200001" stroke="#000" fill="#FFF">
  5 |     <path id="path8" d="m-122.3,84.285s0.1,1.894-0.73,1.875c-0.82-0.019-17.27-48.094-37.8-45.851,0,0,17.78-7.353,38.53,43.976z"/>
  6 |     </g>
  7 |     <g id="g10" stroke-width="0.17200001" stroke="#000" fill="#FFF">
  8 |     <path id="path12" d="m-118.77,81.262s-0.55,1.816-1.32,1.517c-0.77-0.298,0.11-51.104-19.95-55.978,0,0,19.22-0.864,21.27,54.461z"/>
  9 |     </g>
 10 |     <g id="g14" stroke-width="0.17200001" stroke="#000" fill="#FFF">
 11 |     <path id="path16" d="m-91.284,123.59s1.636,0.96,1.166,1.64c-0.471,0.67-49.642-12.13-59.102,6.23,0,0,3.68-18.89,57.936-7.87z"/>
 12 |     </g>
 13 |     <g id="g18" stroke-width="0.17200001" stroke="#000" fill="#FFF">
 14 |     <path id="path20" d="m-94.093,133.8s1.856,0.4,1.622,1.19c-0.233,0.79-50.939,4.13-54.129,24.53,0,0-2.46-19.08,52.507-25.72z"/>
 15 |     </g>
 16 |     <g id="g22" stroke-width="0.17200001" stroke="#000" fill="#FFF">
 17 |     <path id="path24" d="m-98.304,128.28s1.778,0.66,1.432,1.41-50.998-3.34-57.128,16.37c0,0,0.35-19.24,55.696-17.78z"/>
 18 |     </g>
 19 |     <g id="g26" stroke-width="0.17200001" stroke="#000" fill="#FFF">
 20 |     <path id="path28" d="m-109.01,110.07s1.31,1.38,0.67,1.9-44.38-25.336-58.53-10.29c0,0,8.74-17.147,57.86,8.39z"/>
 21 |     </g>
 22 |     <g id="g30" stroke-width="0.17200001" stroke="#000" fill="#FFF">
 23 |     <path id="path32" d="m-116.55,114.26s1.45,1.22,0.88,1.81c-0.58,0.59-46.97-20.148-59.32-3.6,0,0,6.74-18.023,58.44,1.79z"/>
 24 |     </g>
 25 |     <g id="g34" stroke-width="0.17200001" stroke="#000" fill="#FFF">
 26 |     <path id="path36" d="m-119.15,118.34s1.6,1,1.11,1.67c-0.49,0.66-49.27-13.56-59.25,4.51,0,0,4.22-18.77,58.14-6.18z"/>
 27 |     </g>
 28 |     <g id="g38" stroke-width="0.17200001" stroke="#000" fill="#FFF">
 29 |     <path id="path40" d="m-108.42,118.95s1.12,1.53,0.42,1.97c-0.7,0.43-40.77-30.818-56.73-17.71,0,0,10.87-15.884,56.31,15.74z"/>
 30 |     </g>
 31 |     <g id="g42" stroke-width="0.17200001" stroke="#000" fill="#FFF">
 32 |     <path id="path44" d="m-128.2,90s0.6,1.8-0.2,2-29.4-41.8-48.6-34.2c0,0,15.2-11.8,48.8,32.2z"/>
 33 |     </g>
 34 |     <g id="g46" stroke-width="0.17200001" stroke="#000" fill="#FFF">
 35 |     <path id="path48" d="m-127.5,96.979s0.97,1.629,0.23,1.996c-0.74,0.368-37.72-34.476-54.83-22.914,0,0,12.3-14.8,54.6,20.918z"/>
 36 |     </g>
 37 |     <g id="g50" stroke-width="0.17200001" stroke="#000" fill="#FFF">
 38 |     <path id="path52" d="m-127.62,101.35s1.12,1.53,0.42,1.97c-0.7,0.43-40.77-30.818-56.73-17.713,0,0,10.87-15.881,56.31,15.743z"/>
 39 |     </g>
 40 |     <g id="g54" stroke="#000" fill="#FFF">
 41 |     <path id="path56" d="m-129.83,103.06c0.5,6.05,1.49,12.62,3.23,15.74,0,0-3.6,12.4,5.2,25.6,0,0-0.4,7.2,1.2,10.4,0,0,4,8.4,8.8,9.2,3.88,0.65,12.607,3.72,22.468,5.12,0,0,17.132,14.08,13.932,26.88,0,0-0.4,16.4-4,18,0,0,11.6-11.2,2,5.6l-4.4,18.8s25.6-21.6,10-3.2l-10,26s19.6-18.4,12.4-10l-3.2,8.8s43.2-27.2,12.4,2.4c0,0,8-3.6,12.4-0.8,0,0,6.8-1.2,6,0.4,0,0-20.8,10.4-24.4,28.8,0,0,8.4-10,5.2,0.8l0.4,11.6s4-21.6,3.6,16c0,0,19.2-18,7.6,2.8v16.8s15.2-16.4,8.8-3.6c0,0,10-8.8,6,6.4,0,0-0.8,10.4,3.6-0.8,0,0,16-30.6,10-4.4,0,0-0.8,19.2,4,4.4,0,0,0.4,10.4,9.6,17.6,0,0-1.2-50.8,11.6-14.8l4,16.4s2.8-9.2,2.4-14.4l8,8s15.2-22.8,12-9.6c0,0-7.6,16-6,20.8,0,0,16.8-34.8,18-36.4,0,0-2,42.4,8.8,6.4,0,0,5.6,12,2.8,16.4,0,0,8-8,7.2-11.2,0,0,4.6-8.2,7.4,5.4,0,0,1.8,9.4,3.4,6.2,0,0,4,24,5.2,1.2,0,0,1.6-13.6-5.6-25.2,0,0,0.8-3.2-2-7.2,0,0,13.6,21.6,6.4-7.2,0,0,11.201,8,12.401,8,0,0-13.601-23.2-4.801-18.4,0,0-5.2-10.4,12.801,1.6,0,0-16.001-16,1.6-6.4,0,0,7.999,6.4,0.4-3.6,0,0-14.401-16,7.599,2,0,0,11.6,16.4,12.4,19.2,0,0-10-29.2-14.4-32,0,0,8.4-36.4,49.6-20.8,0,0,6.8,17.2,11.2-1.2,0,0,12.8-6.4,24,21.2,0,0,4-13.6,3.2-16.4,0,0,6.8,1.2,6,0,0,0,13.2,4.4,14.4,3.6,0,0,6.8,6.8,7.2,3.2,0,0,9.2,2.8,7.2-0.8,0,0,8.8,15.6,9.2,19.2l2.4-14,2,2.8s1.6-7.6,0.8-8.8,20,6.8,24.8,27.6l2,8.4s6-14.8,4.4-18.8c0,0,5.2,0.8,5.6,5.2,0,0,4-23.2-0.8-29.2,0,0,4.4-0.8,5.6,2.8v-7.2s7.2,0.8,7.2-1.6c0,0,4.4-4,6.4,0.8,0,0-12.4-35.2,6-16,0,0,7.2,10.8,3.6-8s-7.6-20.4-2.8-20.8c0,0,0.8-3.6-1.2-5.2s1.2,0,1.2,0,4.8,4-0.4-18c0,0,6.4,1.6-5.6-27.6,0,0,2.8-2.4-1.2-10.8,0,0,8,4.4,10.8,2.8,0,0-0.4-1.6-3.6-5.6,0,0-21.6-54.8-1.2-32.8,0,0,11.85,13.55,5.45-9.25,0,0-9.11-24.009-8.33-28.305l-429.55,23.015z"/>
 42 |     </g>
 43 |     <g id="g58" stroke="#000" fill="#cc7226">
 44 |     <path id="path60" d="m299.72,80.245c0.62,0.181,2.83,1.305,4.08,2.955,0,0,6.8,10.8,1.6-7.6,0,0-9.2-28.8-0.4-17.6,0,0,6,7.2,2.8-6.4-3.86-16.427-6.4-22.8-6.4-22.8s11.6,4.8-15.2-34.8l8.8,3.6s-19.6-39.6-41.2-44.8l-8-6s38.4-38,25.6-74.8c0,0-6.8-5.2-16.4,4,0,0-6.4,4.8-12.4,3.2,0,0-30.8,1.2-32.8,1.2s-36.8-37.2-102.4-19.6c0,0-5.2,2-9.599,0.8,0,0-18.401-16-67.201,6.8,0,0-10,2-11.6,2s-4.4,0-12.4,6.4-8.4,7.2-10.4,8.8c0,0-16.4,11.2-21.2,12,0,0-11.6,6.4-16,16.4l-3.6,1.2s-1.6,7.2-2,8.4c0,0-4.8,3.6-5.6,9.2,0,0-8.8,6-8.4,10.4,0,0-1.6,5.2-2.4,10,0,0-7.2,4.8-6.4,7.6,0,0-7.6,14-6.4,20.8,0,0-6.4-0.4-9.2,2,0,0-0.8,4.8-2.4,5.2,0,0-2.8,1.2-0.4,5.2,0,0-1.6,2.8-2,4.4,0,0,0.8,2.8-3.6,8.4,0,0-6.4,18.8-4.4,24,0,0,0.4,4.8-2.4,6.4,0,0-3.6-0.4,4.8,11.6,0,0,0.8,1.2-2.4,3.6,0,0-17.2,3.6-19.6,20,0,0-13.6,14.8-13.6,20,0,2.305,0.27,5.452,0.97,10.06,0,0-0.57,8.34,27.03,9.14s402.72-31.355,402.72-31.355z"/>
 45 |     </g>
 46 |     <g id="g62" fill="#cc7226">
 47 |     <path id="path64" d="m-115.6,102.6c-25-39.4-10.6,17-10.6,17,8.8,34.4,138.4-3.2,138.4-3.2s168.8-30.4,180-34.4,106.4,2.4,106.4,2.4l-5.6-16.8c-64.8-46.4-84-23.2-97.6-27.2s-11.2,5.6-14.4,6.4-42.4-24-48.8-23.2-31.74-22.951-16.8,8.8c16,34-58.4,39.2-75.2,28s7.2,18.4,7.2,18.4c18.4,20-16,3.2-16,3.2-34.4-12.8-58.4,12.8-61.6,13.6s-8,4-8.8-2.4-8.31-23.101-40,3.2c-20,16.6-33.8-5.4-33.8-5.4l-2.8,11.6z"/>
 48 |     </g>
 49 |     <g id="g66" fill="#e87f3a">
 50 |     <path id="path68" d="m133.51,25.346c-6.4,0.8-31.77-22.939-16.8,8.8,16.6,35.2-58.4,39.2-75.2,28-16.801-11.2,7.2,18.4,7.2,18.4,18.4,20.004-16.001,3.2-16.001,3.2-34.4-12.8-58.4,12.8-61.6,13.6s-8,4.004-8.8-2.4c-0.8-6.4-8.179-22.934-40,3.2-21.236,17.344-34.729-4.109-34.729-4.109l-3.2,10.113c-25-39.804-9.93,18.51-9.93,18.51,8.81,34.4,139.06-4.51,139.06-4.51s168.8-30.404,180-34.404,105.53,2.327,105.53,2.327l-5.53-17.309c-64.8-46.4-83.2-22.618-96.8-26.618s-11.2,5.6-14.4,6.4-42.4-24-48.8-23.2z"/>
 51 |     </g>
 52 |     <g id="g70" fill="#ea8c4d">
 53 |     <path id="path72" d="m134.82,27.091c-6.4,0.8-31.14-23.229-16.8,8.8,16.2,36.201-58.401,39.201-75.201,28.001s7.2,18.4,7.2,18.4c18.4,19.998-16,3.2-16,3.2-34.4-12.8-58.401,12.8-61.601,13.6s-8,3.998-8.8-2.4c-0.8-6.4-8.048-22.767-40,3.2-22.473,18.088-35.658-2.818-35.658-2.818l-3.6,8.616c-23.8-38.998-9.25,20.02-9.25,20.02,8.8,34.4,139.71-5.82,139.71-5.82s168.8-30.398,180-34.398,104.65,2.254,104.65,2.254l-5.45-17.818c-64.8-46.4-82.4-22.037-96-26.037s-11.2,5.6-14.4,6.401c-3.2,0.8-42.4-24.001-48.8-23.201z"/>
 54 |     </g>
 55 |     <g id="g74" fill="#ec9961">
 56 |     <path id="path76" d="m136.13,28.837c-6.4,0.8-31.13-23.232-16.8,8.8,16.8,37.556-58.936,38.845-75.202,28-16.8-11.2,7.2,18.4,7.2,18.4,18.4,20.003-16,3.2-16,3.2-34.4-12.8-58.4,12.803-61.6,13.603s-8,4-8.8-2.403c-0.8-6.4-7.917-22.598-40.001,3.203-23.709,18.83-36.587-1.53-36.587-1.53l-4,7.13c-21.8-36.803-8.58,21.52-8.58,21.52,8.8,34.4,140.37-7.12,140.37-7.12s168.8-30.403,180-34.403,103.78,2.182,103.78,2.182l-5.38-18.327c-64.8-46.401-81.6-21.455-95.2-25.455s-11.2,5.6-14.4,6.4-42.4-24-48.8-23.2z"/>
 57 |     </g>
 58 |     <g id="g78" fill="#eea575">
 59 |     <path id="path80" d="m137.44,30.583c-6.4,0.8-30.63-23.454-16.8,8.8,16.8,39.2-58.403,39.2-75.203,28s7.2,18.4,7.2,18.4c18.4,19.997-16,3.2-16,3.2-34.4-12.8-58.4,12.797-61.6,13.597s-8,4-8.8-2.4c-0.8-6.397-7.785-22.428-40,3.2-24.946,19.58-37.507-0.23-37.507-0.23l-4.4,5.63c-19.8-34.798-7.91,23.04-7.91,23.04,8.8,34.4,141.02-8.44,141.02-8.44s168.8-30.397,180-34.397,102.91,2.109,102.91,2.109l-5.31-18.837c-64.8-46.4-80.8-20.872-94.4-24.872s-11.2,5.6-14.4,6.4-42.4-24-48.8-23.2z"/>
 60 |     </g>
 61 |     <g id="g82" fill="#f1b288">
 62 |     <path id="path84" d="m138.75,32.328c-6.4,0.8-32.37-22.651-16.8,8.8,19.2,38.8-58.404,39.2-75.204,28s7.2,18.4,7.2,18.4c18.4,20.002-16,3.2-16,3.2-34.4-12.8-58.4,12.802-61.6,13.602s-8,4-8.8-2.4c-0.8-6.402-7.654-22.265-40,3.2-26.182,20.33-38.436,1.05-38.436,1.05l-4.8,4.15c-18-33.202-7.24,24.54-7.24,24.54,8.8,34.4,141.68-9.74,141.68-9.74s168.8-30.402,180-34.402,102.03,2.036,102.03,2.036l-5.23-19.345c-64.8-46.4-80-20.291-93.6-24.291s-11.2,5.6-14.4,6.4-42.4-24-48.8-23.2z"/>
 63 |     </g>
 64 |     <g id="g86" fill="#f3bf9c">
 65 |     <path id="path88" d="m140.06,34.073c-6.4,0.8-32.75-22.46-16.8,8.8,20.4,40.001-58.405,39.201-75.205,28.001s7.2,18.4,7.2,18.4c18.4,19.996-16,3.2-16,3.2-34.4-12.8-58.4,12.796-61.6,13.596s-8,4-8.8-2.4c-0.8-6.396-7.523-22.092-40,3.2-27.419,21.08-39.365,2.35-39.365,2.35l-5.2,2.65c-16-30.196-6.56,26.06-6.56,26.06,8.8,34.4,142.32-11.06,142.32-11.06s168.8-30.396,180-34.396,101.16,1.963,101.16,1.963l-5.16-19.854c-64.8-46.4-79.2-19.709-92.8-23.709-13.6-4.001-11.2,5.6-14.4,6.4s-42.4-24.001-48.8-23.201z"/>
 66 |     </g>
 67 |     <g id="g90" fill="#f5ccb0">
 68 |     <path id="path92" d="m141.36,35.819c-6.4,0.8-33.84-21.875-16.8,8.8,22,39.6-58.396,39.2-75.196,28s7.2,18.4,7.2,18.4c18.4,20.001-16,3.2-16,3.2-34.4-12.8-58.4,12.801-61.6,13.601s-8,4-8.8-2.4c-0.8-6.401-7.391-21.928-40,3.2-28.655,21.82-40.294,3.64-40.294,3.64l-5.6,1.16c-14.4-28.401-5.89,27.56-5.89,27.56,8.8,34.4,142.98-12.36,142.98-12.36s168.8-30.401,180-34.401,100.3,1.891,100.3,1.891l-5.1-20.364c-64.8-46.4-78.4-19.127-92-23.127s-11.2,5.6-14.4,6.4-42.4-24-48.8-23.2z"/>
 69 |     </g>
 70 |     <g id="g94" fill="#f8d8c4">
 71 |     <path id="path96" d="m142.67,37.565c-6.4,0.8-33.84-21.876-16.8,8.8,22,39.6-58.396,39.2-75.196,28s7.2,18.4,7.2,18.4c18.4,19.995-16,3.2-16,3.2-34.401-12.8-58.401,12.795-61.601,13.595s-8,4-8.8-2.4-7.259-21.755-40,3.2c-29.891,22.57-41.213,4.93-41.213,4.93l-6-0.33c-13.61-26.396-5.22,29.08-5.22,29.08,8.8,34.4,143.63-13.68,143.63-13.68s168.8-30.395,180-34.395,99.42,1.818,99.42,1.818l-5.01-20.873c-64.81-46.4-77.61-18.545-91.21-22.545s-11.2,5.6-14.4,6.4-42.4-24-48.8-23.2z"/>
 72 |     </g>
 73 |     <g id="g98" fill="#fae5d7">
 74 |     <path id="path100" d="m143.98,39.31c-6.4,0.8-33.45-22.087-16.8,8.8,22,40.8-58.397,39.2-75.197,28s7.2,18.4,7.2,18.4c18.4,20-16,3.2-16,3.2-34.4-12.8-58.4,12.8-61.6,13.6-3.201,0.8-8.001,4-8.801-2.4s-7.128-21.592-40,3.2c-31.127,23.31-42.142,6.22-42.142,6.22l-6.4-1.82c-13-24-4.55,30.58-4.55,30.58,8.8,34.4,144.29-14.98,144.29-14.98s168.8-30.4,180-34.4,98.55,1.746,98.55,1.746l-4.95-21.382c-64.8-46.401-76.8-17.964-90.4-21.964s-11.2,5.6-14.4,6.4-42.4-24-48.8-23.2z"/>
 75 |     </g>
 76 |     <g id="g102" fill="#fcf2eb">
 77 |     <path id="path104" d="m145.29,41.055c-6.4,0.8-32.37-22.644-16.8,8.8,21.2,42.801-58.398,39.201-75.198,28.001s7.2,18.4,7.2,18.4c18.4,20.004-16,3.2-16,3.2-34.4-12.8-58.4,12.804-61.6,13.604s-8,4-8.8-2.4-6.997-21.428-40,3.2c-32.365,24.05-43.072,7.5-43.072,7.5l-6.8-3.3c-12.8-23.204-3.87,32.09-3.87,32.09,8.8,34.4,144.94-16.29,144.94-16.29s168.8-30.4,180-34.404c11.2-4,97.67,1.674,97.67,1.674l-4.87-21.893c-64.8-46.4-76-17.381-89.6-21.381-13.6-4.001-11.2,5.6-14.4,6.4s-42.4-24.001-48.8-23.201z"/>
 78 |     </g>
 79 |     <g id="g106" fill="#FFF">
 80 |     <path id="path108" d="m-115.8,119.6c-12.8-22-3.2,33.6-3.2,33.6,8.8,34.4,145.6-17.6,145.6-17.6s168.8-30.4,180-34.4,96.8,1.6,96.8,1.6l-4.8-22.4c-64.8-46.4-75.2-16.8-88.8-20.8s-11.2,5.6-14.4,6.4-42.4-24-48.8-23.2-31.62-23.007-16.8,8.8c22.23,47.707-60.759,37.627-75.2,28-16.8-11.2,7.2,18.4,7.2,18.4,18.4,20-16,3.2-16,3.2-34.4-12.8-58.4,12.8-61.6,13.6s-8,4-8.8-2.4-6.865-21.256-40,3.2c-33.6,24.8-44,8.8-44,8.8l-7.2-4.8z"/>
 81 |     </g>
 82 |     <g id="g110" fill="#000">
 83 |     <path id="path112" d="m-74.2,149.6s-7.2,11.6,13.6,24.8c0,0,1.4,1.4-16.6-2.8,0,0-6.2-2-7.8-12.4,0,0-4.8-4.4-9.6-10s20.4,0.4,20.4,0.4z"/>
 84 |     </g>
 85 |     <g id="g114" fill="#CCC">
 86 |     <path id="path116" d="m65.8,102s17.698,26.82,17.1,31.6c-1.3,10.4-1.5,20,1.7,24,3.201,4,12.001,37.2,12.001,37.2s-0.4,1.2,11.999-36.8c0,0,11.6-16-8.4-34.4,0,0-35.2-28.8-34.4-21.6z"/>
 87 |     </g>
 88 |     <g id="g118" fill="#000">
 89 |     <path id="path120" d="m-54.2,176.4s11.2,7.2-3.2,38.4l6.4-2.4s-0.8,11.2-4,13.6l7.2-3.2s4.8,8,0.8,12.8c0,0,16.8,8,16,14.4,0,0,6.4-8,2.4-14.4s-11.2-2.4-10.4-20.8l-8.8,3.2s5.6-8.8,5.6-15.2l-8,2.4s15.469-26.58,4.8-28c-6-0.8-8.8-0.8-8.8-0.8z"/>
 90 |     </g>
 91 |     <g id="g122" fill="#CCC">
 92 |     <path id="path124" d="m-21.8,193.2s2.8-4.4,0-3.6-34,15.6-40,25.2c0,0,34.4-24.4,40-21.6z"/>
 93 |     </g>
 94 |     <g id="g126" fill="#CCC">
 95 |     <path id="path128" d="m-11.4,201.2s2.8-4.4,0-3.6-34,15.6-40,25.2c0,0,34.4-24.4,40-21.6z"/>
 96 |     </g>
 97 |     <g id="g130" fill="#CCC">
 98 |     <path id="path132" d="m1.8,186s2.8-4.4,0-3.6-34,15.6-40,25.2c0,0,34.4-24.4,40-21.6z"/>
 99 |     </g>
100 |     <g id="g134" fill="#CCC">
101 |     <path id="path136" d="m-21.4,229.6s0-6-2.8-5.2-38.8,18.4-44.8,28c0,0,42-25.6,47.6-22.8z"/>
102 |     </g>
103 |     <g id="g138" fill="#CCC">
104 |     <path id="path140" d="m-20.2,218.8s1.2-4.8-1.6-4c-2,0-28.4,11.6-34.4,21.2,0,0,29.6-21.6,36-17.2z"/>
105 |     </g>
106 |     <g id="g142" fill="#CCC">
107 |     <path id="path144" d="m-34.6,266.4-10,7.6s10.4-7.6,14-6.4c0,0-6.8,11.2-7.6,16.4,0,0,10.4-12.8,16-12.4,0,0,7.6,0.4,7.6,11.2,0,0,5.6-10.4,8.8-10,0,0,1.2,6.4,0,13.2,0,0,4-7.6,8-6,0,0,6.4-2,5.6,9.6,0,0,0,10.4-0.8,13.2,0,0,5.6-26.4,8-26.8,0,0,8-1.2,12.8,7.6,0,0-4-7.6,0.8-5.6,0,0,10.8,1.6,14,8.4,0,0-6.8-12-1.2-8.8l8,6.4s8.4,21.2,10.4,22.8c0,0-7.6-21.6-6-21.6,0,0-2-12,3.2,2.8,0,0-3.2-14,2.4-13.2s10,10.8,18.4,8.4c0,0,9.601,5.6,11.601-63.6l-124,46.8z"/>
108 |     </g>
109 |     <g id="g146" fill="#000">
110 |     <path id="path148" d="m-29.8,173.6s14.8-6,54.8,0c0,0,7.2,0.4,14-8.4s33.6-16,40-14l9.601,6.4,0.8,1.2s12.399,10.4,12.799,18-14.399,55.6-24,71.6c-9.6,16-19.2,28.4-38.4,26,0,0-20.8-4-46.4,0,0,0-29.2-1.6-32-9.6s11.2-23.2,11.2-23.2,4.4-8.4,3.2-22.8-0.8-42.4-5.6-45.2z"/>
111 |     </g>
112 |     <g id="g150" fill="#e5668c">
113 |     <path id="path152" d="M-7.8,175.6c8.4,18.4-21.2,83.6-21.2,83.6-2,1.6,12.66,7.65,22.8,5.2,10.946-2.64,51.2,1.6,51.2,1.6,23.6-15.6,36.4-60,36.4-60s10.401-24-7.2-27.2c-17.6-3.2-82-3.2-82-3.2z"/>
114 |     </g>
115 |     <g id="g154" fill="#b23259">
116 |     <path id="path156" d="m-9.831,206.5c3.326-12.79,4.91-24.59,2.031-30.9,0,0,62.4,6.4,73.6-14.4,4.241-7.87,19.001,22.8,18.6,32.4,0,0-63,14.4-77.8,3.2l-16.431,9.7z"/>
117 |     </g>
118 |     <g id="g158" fill="#a5264c">
119 |     <path id="path160" d="m-5.4,222.8s2,7.2-0.4,11.2c0,0-1.6,0.8-2.8,1.2,0,0,1.2,3.6,7.2,5.2,0,0,2,4.4,4.4,4.8s7.2,6,11.2,4.8,15.2-5.2,15.2-5.2,5.6-3.2,14.4,0.4c0,0,2.375-0.8,2.8-4.8,0.5-4.7,3.6-8.4,5.6-10.4s11.6-14.8,10.4-15.2-68,8-68,8z"/>
120 |     </g>
121 |     <g id="g162" stroke="#000" fill="#ff727f">
122 |     <path id="path164" d="m-9.8,174.4s-2.8,22.4,0.4,30.8,2.4,10.4,1.6,14.4,3.6,14,9.2,20l12,1.6s15.2-3.6,24.4-0.8c0,0,8.994,1.34,12.4-13.6,0,0,4.8-6.4,12-9.2s14.4-44.4,10.4-52.4-18.4-12.4-34.4,3.2-18-1.2-48,6z"/>
123 |     </g>
124 |     <g id="g166" stroke-width="0.5" stroke="#000" fill="#FFC">
125 |     <path id="path168" d="m-8.2,249.2s-0.8-2-5.2-2.4c0,0-22.4-3.6-30.8-16,0,0-6.8-5.6-2.4,6,0,0,10.4,20.4,17.2,23.2,0,0,16.4,4,21.2-10.8z"/>
126 |     </g>
127 |     <g id="g170" fill="#cc3f4c">
128 |     <path id="path172" d="m71.742,185.23c0.659-7.91,2.612-16.52,0.858-20.03-6.446-12.89-23.419-7.5-34.4,3.2-16,15.6-18-1.2-48,6,0,0-1.745,13.96-0.905,23.98,0,0,37.305-11.58,38.105-5.98,0,0,1.6-3.2,10.8-3.2s31.942-1.17,33.542-3.97z"/>
129 |     </g>
130 |     <g id="g174" stroke-width="2" stroke="#a51926">
131 |     <path id="path176" d="m28.6,175.2s4.8,4.8,1.2,14.4c0,0-14.4,16-12.4,30"/>
132 |     </g>
133 |     <g id="g178" stroke-width="0.5" stroke="#000" fill="#FFC">
134 |     <path id="path180" d="m-19.4,260s-4.4-12.8,4.4-6l3.6,3.6c-1.2,1.6-6.8,5.6-8,2.4z"/>
135 |     </g>
136 |     <g id="g182" stroke-width="0.5" stroke="#000" fill="#FFC">
137 |     <path id="path184" d="m-14.36,261.2s-3.52-10.24,3.52-4.8l2.88,2.88c-4.56,1.28,0,3.84-6.4,1.92z"/>
138 |     </g>
139 |     <g id="g186" stroke-width="0.5" stroke="#000" fill="#FFC">
140 |     <path id="path188" d="m-9.56,261.2s-3.52-10.24,3.52-4.8l2.88,2.88c-3.36,1.28,0,3.84-6.4,1.92z"/>
141 |     </g>
142 |     <g id="g190" stroke-width="0.5" stroke="#000" fill="#FFC">
143 |     <path id="path192" d="m-2.96,261.4s-3.52-10.24,3.52-4.8c0,0,4.383,2.33,2.881,2.88-2.961,1.08,0,3.84-6.401,1.92z"/>
144 |     </g>
145 |     <g id="g194" stroke-width="0.5" stroke="#000" fill="#FFC">
146 |     <path id="path196" d="m3.52,261.32s-3.52-10.24,3.521-4.8l2.88,2.88c-0.96,1.28,0,3.84-6.401,1.92z"/>
147 |     </g>
148 |     <g id="g198" stroke-width="0.5" stroke="#000" fill="#FFC">
149 |     <path id="path200" d="m10.2,262s-4.8-12.4,4.4-6l3.6,3.6c-1.2,1.6,0,4.8-8,2.4z"/>
150 |     </g>
151 |     <g id="g202" stroke-width="2" stroke="#a5264c">
152 |     <path id="path204" d="m-18.2,244.8s13.2-2.8,19.2,0.4c0,0,6,1.2,7.2,0.8s4.4-0.8,4.4-0.8"/>
153 |     </g>
154 |     <g id="g206" stroke-width="2" stroke="#a5264c">
155 |     <path id="path208" d="m15.8,253.6s12-13.6,24-9.2c7.016,2.57,6-0.8,6.8-3.6s1-7,6-10"/>
156 |     </g>
157 |     <g id="g210" stroke-width="0.5" stroke="#000" fill="#FFC">
158 |     <path id="path212" d="m33,237.6s-4-10.8-6.8,2-6,16.4-7.6,19.2c0,0,0,5.2,8.4,4.8,0,0,10.8-0.4,11.2-3.2s-1.2-14.4-5.2-22.8z"/>
159 |     </g>
160 |     <g id="g214" stroke-width="2" stroke="#a5264c">
161 |     <path id="path216" d="m47,244.8s3.6-2.4,6-1.2"/>
162 |     </g>
163 |     <g id="g218" stroke-width="2" stroke="#a5264c">
164 |     <path id="path220" d="m53.5,228.4s2.9-4.9,7.7-5.7"/>
165 |     </g>
166 |     <g id="g222" fill="#b2b2b2">
167 |     <path id="path224" d="m-25.8,265.2s18,3.2,22.4,1.6l0.4,2-20.8-1.2s-11.6-5.6-2-2.4z"/>
168 |     </g>
169 |     <g id="g226" stroke-width="0.5" stroke="#000" fill="#FFC">
170 |     <path id="path228" d="m-11.8,172,19.6,0.8s7.2,30.8,3.6,38.4c0,0-1.2,2.8-4-2.8,0,0-18.4-32.8-21.6-34.8s1.2-1.6,2.4-1.6z"/>
171 |     </g>
172 |     <g id="g230" stroke-width="0.5" stroke="#000" fill="#FFC">
173 |     <path id="path232" d="m-88.9,169.3s8.9,1.7,21.5,4.3c0,0,4.8,22.4,8,27.2s-0.4,4.8-4,2-18.4-16.8-20.4-21.2-5.1-12.3-5.1-12.3z"/>
174 |     </g>
175 |     <g id="g234" stroke-width="0.5" stroke="#000" fill="#FFC">
176 |     <path id="path236" d="m-67.039,173.82s5.8,1.55,6.809,3.76c1.008,2.22-1.202,5.51-1.202,5.51s-1,3.31-2.202,1.15c-1.202-2.17-4.074-9.83-3.405-10.42z"/>
177 |     </g>
178 |     <g id="g238" fill="#000">
179 |     <path id="path240" d="m-67,173.6s3.6,5.2,7.2,5.2,3.982-0.41,6.8,0.2c4.6,1,4.2-1,10.8,0.2,2.64,0.48,5.2-0.4,8,0.8s6,0.4,7.2-1.6,6-6.2,6-6.2-12.8,1.8-15.6,2.6c0,0-22.4,1.2-30.4-1.2z"/>
180 |     </g>
181 |     <g id="g242" stroke-width="0.5" stroke="#000" fill="#FFC">
182 |     <path id="path244" d="m-22.4,173.8s-6.45,3.5-6.85,5.9,5.25,6.1,5.25,6.1,2.75,4.6,3.35,2.2-0.95-13.8-1.75-14.2z"/>
183 |     </g>
184 |     <g id="g246" stroke-width="0.5" stroke="#000" fill="#FFC">
185 |     <path id="path248" d="m-59.885,179.26s7.007,11.19,7.224-0.02c0,0,0.557-1.26-1.203-1.28-6.075-0.07-4.554-4.18-6.021,1.3z"/>
186 |     </g>
187 |     <g id="g250" stroke-width="0.5" stroke="#000" fill="#FFC">
188 |     <path id="path252" d="m-52.707,179.51s7.921,11.19,7.285-0.09c0,0,0.007-0.33-1.746-0.48-4.747-0.42-4.402-4.94-5.539,0.57z"/>
189 |     </g>
190 |     <g id="g254" stroke-width="0.5" stroke="#000" fill="#FFC">
191 |     <path id="path256" d="m-45.494,179.52s7.96,10.63,7.291,0.96c0,0,0.119-1.23-1.535-1.53-3.892-0.71-4.103-3.95-5.756,0.57z"/>
192 |     </g>
193 |     <g id="g258" stroke-width="0.5" stroke="#000" fill="#FFC">
194 |     <path id="path260" d="m-38.618,179.6s7.9,11.56,8.248,1.78c0,0,1.644-1.38-0.102-1.6-5.818-0.74-5.02-5.19-8.146-0.18z"/>
195 |     </g>
196 |     <g id="g262" fill="#e5e5b2">
197 |     <path id="path264" d="m-74.792,183.13-7.658-1.53c-2.6-5-4.7-11.15-4.7-11.15s6.35,1,18.85,3.8c0,0,0.876,3.32,2.348,9.11l-8.84-0.23z"/>
198 |     </g>
199 |     <g id="g266" fill="#e5e5b2">
200 |     <path id="path268" d="m-9.724,178.47c-1.666-2.51-2.983-4.26-3.633-4.67-3.013-1.88,1.13-1.51,2.259-1.51l18.454,0.76s0.524,2.24,1.208,5.63c0,0-10.088-2.01-18.288-0.21z"/>
201 |     </g>
202 |     <g id="g270" fill="#cc7226">
203 |     <path id="path272" d="m43.88,40.321c27.721,3.96,53.241-31.68,55.001-41.361,1.759-9.68-8.36-21.56-8.36-21.56,1.32-3.08-3.52-17.16-8.8-26.4s-21.181-8.266-38.721-9.24c-15.84-0.88-34.32,22.44-35.64,24.2s4.84,40.041,6.16,45.761-1.32,32.12-1.32,32.12c34.24-9.1,3.96-7.48,31.68-3.52z"/>
204 |     </g>
205 |     <g id="g274" fill="#ea8e51">
206 |     <path id="path276" d="m8.088-33.392c-1.296,1.728,4.752,39.313,6.048,44.929s-1.296,31.536-1.296,31.536c32.672-8.88,3.888-7.344,31.104-3.456,27.217,3.888,52.273-31.104,54.001-40.609,1.728-9.504-8.208-21.168-8.208-21.168,1.296-3.024-3.456-16.848-8.64-25.92s-20.795-8.115-38.017-9.072c-15.552-0.864-33.696,22.032-34.992,23.76z"/>
207 |     </g>
208 |     <g id="g278" fill="#efaa7c">
209 |     <path id="path280" d="m8.816-32.744c-1.272,1.696,4.664,38.585,5.936,44.097s-1.272,30.952-1.272,30.952c31.404-9.16,3.816-7.208,30.528-3.392,26.713,3.816,51.305-30.528,53.001-39.857,1.696-9.328-8.056-20.776-8.056-20.776,1.272-2.968-3.392-16.536-8.48-25.44s-20.41-7.965-37.313-8.904c-15.264-0.848-33.072,21.624-34.344,23.32z"/>
210 |     </g>
211 |     <g id="g282" fill="#f4c6a8">
212 |     <path id="path284" d="m9.544-32.096c-1.248,1.664,4.576,37.857,5.824,43.265s-1.248,30.368-1.248,30.368c29.436-9.04,3.744-7.072,29.952-3.328,26.209,3.744,50.337-29.952,52.001-39.104,1.664-9.153-7.904-20.385-7.904-20.385,1.248-2.912-3.328-16.224-8.32-24.96s-20.025-7.815-36.609-8.736c-14.976-0.832-32.448,21.216-33.696,22.88z"/>
213 |     </g>
214 |     <g id="g286" fill="#f9e2d3">
215 |     <path id="path288" d="m10.272-31.448c-1.224,1.632,4.488,37.129,5.712,42.433s-1.224,29.784-1.224,29.784c27.868-8.92,3.672-6.936,29.376-3.264,25.705,3.672,49.369-29.376,51.001-38.353,1.632-8.976-7.752-19.992-7.752-19.992,1.224-2.856-3.264-15.912-8.16-24.48s-19.64-7.665-35.905-8.568c-14.688-0.816-31.824,20.808-33.048,22.44z"/>
216 |     </g>
217 |     <g id="g290" fill="#FFF">
218 |     <path id="path292" d="M44.2,36.8c25.2,3.6,48.401-28.8,50.001-37.6s-7.6-19.6-7.6-19.6c1.2-2.8-3.201-15.6-8.001-24s-19.254-7.514-35.2-8.4c-14.4-0.8-31.2,20.4-32.4,22s4.4,36.4,5.6,41.6-1.2,29.2-1.2,29.2c25.5-8.6,3.6-6.8,28.8-3.2z"/>
219 |     </g>
220 |     <g id="g294" fill="#CCC">
221 |     <path id="path296" d="m90.601,2.8s-27.801,7.6-39.401,6c0,0-15.8-6.6-24.6,15.2,0,0-3.6,7.2-5.6,9.2s69.601-30.4,69.601-30.4z"/>
222 |     </g>
223 |     <g id="g298" fill="#000">
224 |     <path id="path300" d="m94.401,0.6s-29.001,12.2-39.001,11.8c0,0-16.4-4.6-24.8,10,0,0-8.4,9.2-11.6,10.8,0,0-0.4,1.6,6-2.4l10.4,5.2s14.8,9.6,24.4-6.4c0,0,4-11.2,4-13.2s21.2-7.6,22.801-8c1.6-0.4,8.2-4.6,7.8-7.8z"/>
225 |     </g>
226 |     <g id="g302" fill="#99cc32">
227 |     <path id="path304" d="m47,36.514c-6.872,0-15.245-3.865-15.245-10.114,0-6.248,8.373-12.513,15.245-12.513,6.874,0,12.446,5.065,12.446,11.313,0,6.249-5.572,11.314-12.446,11.314z"/>
228 |     </g>
229 |     <g id="g306" fill="#659900">
230 |     <path id="path308" d="m43.377,19.83c-4.846,0.722-9.935,2.225-9.863,2.009,1.54-4.619,7.901-7.952,13.486-7.952,4.296,0,8.084,1.978,10.32,4.988,0,0-5.316-0.33-13.943,0.955z"/>
231 |     </g>
232 |     <g id="g310" fill="#FFF">
233 |     <path id="path312" d="m55.4,19.6s-4.4-3.2-4.4-1c0,0,3.6,4.4,4.4,1z"/>
234 |     </g>
235 |     <g id="g314" fill="#000">
236 |     <path id="path316" d="m45.4,27.726c-2.499,0-4.525-2.026-4.525-4.526,0-2.499,2.026-4.525,4.525-4.525,2.5,0,4.526,2.026,4.526,4.525,0,2.5-2.026,4.526-4.526,4.526z"/>
237 |     </g>
238 |     <g id="g318" fill="#cc7226">
239 |     <path id="path320" d="m-58.6,14.4s-3.2-21.2-0.8-25.6c0,0,10.8-10,10.4-13.6,0,0-0.4-18-1.6-18.8s-8.8-6.8-14.8-0.4c0,0-10.4,18-9.6,24.4v2s-7.6-0.4-9.2,1.6c0,0-1.2,5.2-2.4,5.6,0,0-2.8,2.4-0.8,5.2,0,0-2,2.4-1.6,6.4l7.6,4s2,14.4,12.8,19.6c4.836,2.329,8-4.4,10-10.4z"/>
240 |     </g>
241 |     <g id="g322" fill="#FFF">
242 |     <path id="path324" d="m-59.6,12.56s-2.88-19.08-0.72-23.04c0,0,9.72-9,9.36-12.24,0,0-0.36-16.2-1.44-16.92s-7.92-6.12-13.32-0.36c0,0-9.36,16.2-8.64,21.96v1.8s-6.84-0.36-8.28,1.44c0,0-1.08,4.68-2.16,5.04,0,0-2.52,2.16-0.72,4.68,0,0-1.8,2.16-1.44,5.76l6.84,3.6s1.8,12.96,11.52,17.64c4.352,2.095,7.2-3.96,9-9.36z"/>
243 |     </g>
244 |     <g id="g326" fill="#eb955c">
245 |     <path id="path328" d="m-51.05-42.61c-1.09-0.86-8.58-6.63-14.43-0.39,0,0-10.14,17.55-9.36,23.79v1.95s-7.41-0.39-8.97,1.56c0,0-1.17,5.07-2.34,5.46,0,0-2.73,2.34-0.78,5.07,0,0-1.95,2.34-1.56,6.24l7.41,3.9s1.95,14.04,12.48,19.11c4.714,2.27,7.8-4.29,9.75-10.14,0,0-3.12-20.67-0.78-24.96,0,0,10.53-9.75,10.14-13.26,0,0-0.39-17.55-1.56-18.33z"/>
246 |     </g>
247 |     <g id="g330" fill="#f2b892">
248 |     <path id="path332" d="m-51.5-41.62c-0.98-0.92-8.36-6.46-14.06-0.38,0,0-9.88,17.1-9.12,23.18v1.9s-7.22-0.38-8.74,1.52c0,0-1.14,4.94-2.28,5.32,0,0-2.66,2.28-0.76,4.94,0,0-1.9,2.28-1.52,6.08l7.22,3.8s1.9,13.68,12.16,18.62c4.594,2.212,7.6-4.18,9.5-9.88,0,0-3.04-20.14-0.76-24.32,0,0,10.26-9.5,9.88-12.92,0,0-0.38-17.1-1.52-17.86z"/>
249 |     </g>
250 |     <g id="g334" fill="#f8dcc8">
251 |     <path id="path336" d="m-51.95-40.63c-0.87-0.98-8.14-6.29-13.69-0.37,0,0-9.62,16.65-8.88,22.57v1.85s-7.03-0.37-8.51,1.48c0,0-1.11,4.81-2.22,5.18,0,0-2.59,2.22-0.74,4.81,0,0-1.85,2.22-1.48,5.92l7.03,3.7s1.85,13.32,11.84,18.13c4.473,2.154,7.4-4.07,9.25-9.62,0,0-2.96-19.61-0.74-23.68,0,0,9.99-9.25,9.62-12.58,0,0-0.37-16.65-1.48-17.39z"/>
252 |     </g>
253 |     <g id="g338" fill="#FFF">
254 |     <path id="path340" d="m-59.6,12.46s-2.88-18.98-0.72-22.94c0,0,9.72-9,9.36-12.24,0,0-0.36-16.2-1.44-16.92-0.76-1.04-7.92-6.12-13.32-0.36,0,0-9.36,16.2-8.64,21.96v1.8s-6.84-0.36-8.28,1.44c0,0-1.08,4.68-2.16,5.04,0,0-2.52,2.16-0.72,4.68,0,0-1.8,2.16-1.44,5.76l6.84,3.6s1.8,12.96,11.52,17.64c4.352,2.095,7.2-4.06,9-9.46z"/>
255 |     </g>
256 |     <g id="g342" fill="#CCC">
257 |     <path id="path344" d="m-62.7,6.2s-21.6-10.2-22.5-11c0,0,9.1,8.2,9.9,8.2s12.6,2.8,12.6,2.8z"/>
258 |     </g>
259 |     <g id="g346" fill="#000">
260 |     <path id="path348" d="m-79.8,0s18.4,3.6,18.4,8c0,2.912-0.243,16.331-5.6,14.8-8.4-2.4-4.8-16.8-12.8-22.8z"/>
261 |     </g>
262 |     <g id="g350" fill="#99cc32">
263 |     <path id="path352" d="m-71.4,3.8s8.978,1.474,10,4.2c0.6,1.6,1.263,9.908-4.2,11-4.552,0.911-6.782-9.31-5.8-15.2z"/>
264 |     </g>
265 |     <g id="g354" fill="#000">
266 |     <path id="path356" d="m14.595,46.349c-0.497-1.742,0.814-1.611,2.605-2.149,2-0.6,14.2-4.4,15-7s14,1.8,14,1.8c1.8,0.8,6.2,3.4,6.2,3.4,4.8,1.2,11.4,1.6,11.4,1.6,2.4,1,5.8,3.8,5.8,3.8,14.6,10.2,27.001,3,27.001,3,19.999-6.6,13.999-23.8,13.999-23.8-3-9,0.2-12.4,0.2-12.4,0.2-3.8,7.4,2.6,7.4,2.6,2.6,4.2,3.4,9.2,3.4,9.2,8,11.2,4.6-6.6,4.6-6.6,0.2-1-2.6-4.6-2.6-5.8s-1.8-4.6-1.8-4.6c-3-3.4-0.6-10.4-0.6-10.4,1.8-13.8-0.4-12-0.4-12-1.2-1.8-10.4,8.2-10.4,8.2-2.2,3.4-8.2,5-8.2,5-2.799,1.8-6.199,0.4-6.199,0.4-2.6-0.4-8.2,6.6-8.2,6.6,2.8-0.2,5.2,4.2,7.6,4.4s4.2-2.4,5.799-3c1.6-0.6,4.4,5.2,4.4,5.2,0.4,2.6-5.2,7.4-5.2,7.4-0.4,4.6-1.999,3-1.999,3-3-0.6-4.2,3.2-5.2,7.8s-5.2,5-5.2,5c-1.6,7.4-2.801,4.4-2.801,4.4-0.2-5.6-6.2,0.2-6.2,0.2-1.2,2-5.8-0.2-5.8-0.2-6.8-2-4.4-4-4.4-4,1.8-2.2,13,0,13,0,2.2-1.6-5.8-5.6-5.8-5.6-0.6-1.8,0.4-6.2,0.4-6.2,1.2-3.2,8-8.8,8-8.8,9.401-1.2,6.601-2.8,6.601-2.8-6.2-5.2-12.001,2.4-12.001,2.4-2.2,6.2-19.6,21.2-19.6,21.2-4.8,3.4-2.2-3.4-6.2,0s-24.6-5.6-24.6-5.6c-11.562-1.193-14.294,14.549-17.823,11.429,0,0,5.418,8.52,3.818,2.92z"/>
267 |     </g>
268 |     <g id="g358" fill="#000">
269 |     <path id="path360" d="m209.4-120s-25.6,8-28.4,26.8c0,0-2.4,22.8,18,40.4,0,0,0.4,6.4,2.4,9.6,0,0-1.6,4.8,17.2-2.8l27.2-8.4s6.4-2.4,11.6-11.2,20.4-27.6,16.8-52.8c0,0,1.2-11.2-4.8-11.6,0,0-8.4-1.6-15.6,6,0,0-6.8,3.2-9.2,2.8l-35.2,1.2z"/>
270 |     </g>
271 |     <g id="g362" fill="#000">
272 |     <path id="path364" d="m264.02-120.99s2.1-8.93-2.74-4.09c0,0-7.04,5.72-14.52,5.72,0,0-14.52,2.2-18.92,15.4,0,0-3.96,26.84,3.96,32.56,0,0,4.84,7.48,11.88,0.88s22.54-36.83,20.34-50.47z"/>
273 |     </g>
274 |     <g id="g366" fill="#323232">
275 |     <path id="path368" d="m263.65-120.63s2.09-8.75-2.66-3.99c0,0-6.92,5.61-14.26,5.61,0,0-14.26,2.16-18.58,15.12,0,0-3.89,26.354,3.89,31.97,0,0,4.75,7.344,11.66,0.864,6.92-6.48,22.11-36.184,19.95-49.574z"/>
276 |     </g>
277 |     <g id="g370" fill="#666">
278 |     <path id="path372" d="m263.27-120.27s2.08-8.56-2.58-3.9c0,0-6.78,5.51-13.99,5.51,0,0-14,2.12-18.24,14.84,0,0-3.81,25.868,3.82,31.38,0,0,4.66,7.208,11.45,0.848,6.78-6.36,21.66-35.538,19.54-48.678z"/>
279 |     </g>
280 |     <g id="g374" fill="#999">
281 |     <path id="path376" d="m262.9-119.92s2.07-8.37-2.51-3.79c0,0-6.65,5.41-13.73,5.41,0,0-13.72,2.08-17.88,14.56,0,0-3.75,25.372,3.74,30.78,0,0,4.58,7.072,11.23,0.832,6.66-6.24,21.23-34.892,19.15-47.792z"/>
282 |     </g>
283 |     <g id="g378" fill="#CCC">
284 |     <path id="path380" d="m262.53-119.56s2.06-8.18-2.43-3.7c0,0-6.53,5.31-13.47,5.31,0,0-13.46,2.04-17.54,14.28,0,0-3.67,24.886,3.67,30.19,0,0,4.49,6.936,11.02,0.816,6.52-6.12,20.79-34.246,18.75-46.896z"/>
285 |     </g>
286 |     <g id="g382" fill="#FFF">
287 |     <path id="path384" d="m262.15-119.2s2.05-8-2.35-3.6c0,0-6.4,5.2-13.2,5.2,0,0-13.2,2-17.2,14,0,0-3.6,24.4,3.6,29.6,0,0,4.4,6.8,10.8,0.8s20.35-33.6,18.35-46z"/>
288 |     </g>
289 |     <g id="g386" fill="#992600">
290 |     <path id="path388" d="m50.6,84s-20.4-19.2-28.4-20c0,0-34.4-4-49.2,14,0,0,17.6-20.4,45.2-14.8,0,0-21.6-4.4-34-1.2l-26.4,14-2.8,4.8s4-14.8,22.4-20.8c0,0,22.8-4.8,33.6,0,0,0-21.6-6.8-31.6-4.8,0,0-30.4-2.4-43.2,24,0,0,4-14.4,18.8-21.6,0,0,13.6-8.8,34-6,0,0,14.4,3.2,19.6,5.6s4-0.4-4.4-5.2c0,0-5.6-10-19.6-9.6,0,0-42.8,3.6-53.2,15.6,0,0,13.6-11.2,24-14,0,0,22.4-8,30.8-7.2,0,0,24.8,1,32.4-3,0,0-11.2,5-8,8.2s10,10.8,10,12,24.2,23.3,27.8,27.7l2.2,2.3z"/>
291 |     </g>
292 |     <g id="g390" fill="#CCC">
293 |     <path id="path392" d="m189,278s-15.5-36.5-28-46c0,0,26,16,29.5,34,0,0,0,10-1.5,12z"/>
294 |     </g>
295 |     <g id="g394" fill="#CCC">
296 |     <path id="path396" d="m236,285.5s-26.5-55-45-79c0,0,43.5,37.5,48.5,64l0.5,5.5-3-2.5s-0.5,9-1,12z"/>
297 |     </g>
298 |     <g id="g398" fill="#CCC">
299 |     <path id="path400" d="m292.5,237s-62.5-59.5-64-62c0,0,60.5,66,63.5,73.5,0,0-2-9,0.5-11.5z"/>
300 |     </g>
301 |     <g id="g402" fill="#CCC">
302 |     <path id="path404" d="m104,280.5s19.5-52,38.5-29.5c0,0,15,10,14.5,13,0,0-4-6.5-22-6,0,0-19-3-31,22.5z"/>
303 |     </g>
304 |     <g id="g406" fill="#CCC">
305 |     <path id="path408" d="m294.5,153s-45-28.5-52.5-30c-11.81-2.36,49.5,29,54.5,39.5,0,0,2-2.5-2-9.5z"/>
306 |     </g>
307 |     <g id="g410" fill="#000">
308 |     <path id="path412" d="m143.8,259.6s20.4-2,27.2-8.8l4.4,3.6,17.6-38.4,3.6,5.2s14.4-14.8,13.6-22.8,12.8,6,12.8,6-0.8-11.6,6.4-4.8c0,0-2.4-15.6,6-7.6,0,0-10.54-30.16,12-4.4,5.6,6.4,1.2-0.4,1.2-0.4s-26-48-4.4-33.6c0,0,2-22.8,0.8-27.2s-3.2-26.8-8-32,0.4-6.8,6-1.6c0,0-11.2-24,2-12,0,0-3.6-15.2-8-18,0,0-5.6-17.2,9.6-6.4,0,0-4.4-12.4-7.6-15.6,0,0-11.6-27.6-4.4-22.8l4.4,3.6s-6.8-14-0.4-9.6,6.4,4,6.4,4-21.2-33.2-0.8-15.6c0,0-8.16-13.918-11.6-20.8,0,0-18.8-20.4-4.4-14l4.8,1.6s-8.8-10-16.8-11.6,2.4-8,8.8-6,22,9.6,22,9.6,12.8,18.8,16.8,19.2c0,0-20-7.6-14,0.4,0,0,14.4,14,7.2,13.6,0,0-6,7.2-1.2,16,0,0-18.46-18.391-3.6,7.2l6.8,16.4s-24.4-24.8-13.2-2.8c0,0,17.2,23.6,19.2,24s6.4,9.2,6.4,9.2l-4.4-2,5.2,8.8s-11.2-12-5.2,1.2l5.6,14.4s-20.4-22-6.8,7.6c0,0-16.4-5.2-7.6,12,0,0-1.6,16-1.2,21.2s1.6,33.6-2.8,41.6,6,27.2,8,31.2,5.6,14.8-3.2,5.6-4.4-3.6-2.4,5.2,8,24.4,7.2,30c0,0-1.2,1.2-4.4-2.4,0,0-14.8-22.8-13.2-8.4,0,0-1.2,8-4.4,16.8,0,0-3.2,10.8-3.2,2,0,0-3.2-16.8-6-9.2s-6.4,13.6-9.2,16-8-20.4-9.2-10c0,0-12-12.4-16.8,4l-11.6,16.4s-0.4-12.4-1.6-6.4c0,0-30,6-40.4,1.6z"/>
309 |     </g>
310 |     <g id="g414" fill="#000">
311 |     <path id="path416" d="m109.4-97.2s-11.599-8-15.599-7.6,27.599-8.8,68.799,18.8c0,0,4.8,2.8,8.4,2.4,0,0,3.2,2.4,0.4,6,0,0-8.8,9.6,2.4,20.8,0,0,18.4,6.8,12.8-2,0,0,10.8,4,13.2,8s1.2,0,1.2,0l-12.4-12.4s-5.2-2-8-10.4-5.2-18.4-0.8-21.6c0,0-4,4.4-3.2,0.4s4.4-7.6,6-8,18-16.2,24.8-16.6c0,0-9.2,1.4-12.2,0.4s-29.6-12.4-35.6-13.6c0,0-16.8-6.6-4.8-4.6,0,0,35.8,3.8,54,17,0,0-7.2-8.4-25.6-15.4,0,0-22.2-12.6-57.4-7.6,0,0-17.8,3.2-25.6,5,0,0-2.599-0.6-3.199-1s-12.401-9.4-40.001-2.4c0,0-17,4.6-25.6,9.4,0,0-15.2,1.2-18.8,4.4,0,0-18.6,14.6-20.6,15.4s-13.4,8.4-14.2,8.8c0,0,24.6-6.6,27-9s19.8-5,22.2-3.6,10.8,0.8,1.2,1.4c0,0,75.6,14.8,76.4,16.8s4.8,0.8,4.8,0.8z"/>
312 |     </g>
313 |     <g id="g418" fill="#cc7226">
314 |     <path id="path420" d="m180.8-106.4s-10.2-7.4-12.2-7.4-14.4-10.2-18.6-9.8-16.4-9.6-43.8-1.4c0,0-0.6-2,3-2.8,0,0,6.4-2.2,6.8-2.8,0,0,20.2-4.2,27.4-0.6,0,0,9.2,2.6,15.4,8.8,0,0,11.2,3.2,14.4,2.2,0,0,8.8,2.2,9.2,4,0,0,5.8,3,4,5.6,0,0,0.4,1.6-5.6,4.2z"/>
315 |     </g>
316 |     <g id="g422" fill="#cc7226">
317 |     <path id="path424" d="m168.33-108.51c0.81,0.63,1.83,0.73,2.43,1.54,0.24,0.31-0.05,0.64-0.37,0.74-1.04,0.31-2.1-0.26-3.24,0.33-0.4,0.21-1.04,0.03-1.6-0.12-1.63-0.44-3.46-0.47-5.15,0.22-1.98-1.13-4.34-0.54-6.42-1.55-0.06-0.02-0.28,0.32-0.36,0.3-3.04-1.15-6.79-0.87-9.22-3.15-2.43-0.41-4.78-0.87-7.21-1.55-1.82-0.51-3.23-1.5-4.85-2.33-1.38-0.71-2.83-1.23-4.37-1.61-1.86-0.45-3.69-0.34-5.58-0.86-0.1-0.02-0.29,0.32-0.37,0.3-0.32-0.11-0.62-0.69-0.79-0.64-1.68,0.52-3.17-0.45-4.83-0.11-1.18-1.22-2.9-0.98-4.45-1.42-2.97-0.85-6.12,0.42-9.15-0.58,4.11-1.84,8.8-0.61,12.86-2.68,2.33-1.18,4.99-0.08,7.56-0.84,0.49-0.15,1.18-0.35,1.58,0.32,0.14-0.14,0.32-0.37,0.38-0.35,2.44,1.16,4.76,2.43,7.24,3.5,0.34,0.15,0.88-0.09,1.13,0.12,1.52,1.21,3.46,1.11,4.85,2.33,1.7-0.5,3.49-0.12,5.22-0.75,0.08-0.02,0.31,0.32,0.34,0.3,1.14-0.75,2.29-0.48,3.18-0.18,0.34,0.12,1,0.37,1.31,0.44,1.12,0.27,1.98,0.75,3.16,0.94,0.11,0.02,0.3-0.32,0.37-0.3,1.12,0.44,2.16,0.39,2.82,1.55,0.14-0.14,0.3-0.37,0.38-0.35,1.03,0.34,1.68,1.1,2.78,1.34,0.48,0.1,1.1,0.73,1.67,0.91,2.39,0.73,4.24,2.26,6.43,3.15,0.76,0.31,1.64,0.55,2.27,1.04z"/>
318 |     </g>
319 |     <g id="g426" fill="#cc7226">
320 |     <path id="path428" d="m91.696-122.74c-2.518-1.72-4.886-2.83-7.328-4.62-0.181-0.13-0.541,0.04-0.743-0.08-1.007-0.61-1.895-1.19-2.877-1.89-0.539-0.38-1.36-0.37-1.868-0.63-2.544-1.29-5.173-1.85-7.68-3.04,0.682-0.64,1.804-0.39,2.4-1.2,0.195,0.28,0.433,0.56,0.786,0.37,1.678-0.9,3.528-1.05,5.204-0.96,1.704,0.09,3.424,0.39,5.199,0.67,0.307,0.04,0.506,0.56,0.829,0.66,2.228,0.66,4.617,0.14,6.736,0.98,1.591,0.63,3.161,1.45,4.4,2.72,0.252,0.26-0.073,0.57-0.353,0.76,0.388-0.11,0.661,0.1,0.772,0.41,0.084,0.24,0.084,0.54,0,0.78-0.112,0.31-0.391,0.41-0.765,0.46-1.407,0.19,0.365-1.19-0.335-0.74-1.273,0.82-0.527,2.22-1.272,3.49-0.28-0.19-0.51-0.41-0.4-0.8,0.234,0.52-0.368,0.81-0.536,1.13-0.385,0.72-1.284,2.14-2.169,1.53z"/>
321 |     </g>
322 |     <g id="g430" fill="#cc7226">
323 |     <path id="path432" d="m59.198-115.39c-3.154-0.79-6.204-0.68-9.22-1.96-0.067-0.02-0.29,0.32-0.354,0.3-1.366-0.6-2.284-1.56-3.36-2.61-0.913-0.89-2.571-0.5-3.845-0.99-0.324-0.12-0.527-0.63-0.828-0.67-1.219-0.16-2.146-1.11-3.191-1.68,2.336-0.8,4.747-0.76,7.209-1.15,0.113-0.02,0.258,0.31,0.391,0.31,0.136,0,0.266-0.23,0.4-0.36,0.195,0.28,0.497,0.61,0.754,0.35,0.548-0.54,1.104-0.35,1.644-0.31,0.144,0.01,0.269,0.32,0.402,0.32,0.136,0,0.267-0.32,0.4-0.32,0.136,0,0.267,0.32,0.4,0.32,0.136,0,0.266-0.23,0.4-0.36,0.692,0.78,1.577,0.23,2.399,0.41,1.038,0.22,1.305,1.37,2.379,1.67,4.715,1.3,8.852,3.45,13.215,5.54,0.307,0.14,0.517,0.39,0.407,0.78,0.267,0,0.58-0.09,0.77,0.04,1.058,0.74,2.099,1.28,2.796,2.38,0.216,0.34-0.113,0.75-0.346,0.7-4.429-1-8.435-1.61-12.822-2.71z"/>
324 |     </g>
325 |     <g id="g434" fill="#cc7226">
326 |     <path id="path436" d="m45.338-71.179c-1.592-1.219-2.176-3.25-3.304-5.042-0.214-0.34,0.06-0.654,0.377-0.743,0.56-0.159,1.103,0.319,1.512,0.521,1.745,0.862,3.28,2.104,5.277,2.243,1.99,2.234,6.25,2.619,6.257,6,0.001,0.859-1.427-0.059-1.857,0.8-2.451-1.003-4.84-0.9-7.22-2.367-0.617-0.381-0.287-0.834-1.042-1.412z"/>
327 |     </g>
328 |     <g id="g438" fill="#cc7226">
329 |     <path id="path440" d="m17.8-123.76c0.135,0,7.166,0.24,7.149,0.35-0.045,0.31-7.775,1.36-8.139,1.19-0.164-0.08-7.676,2.35-7.81,2.22,0.268-0.14,8.534-3.76,8.8-3.76z"/>
330 |     </g>
331 |     <g id="g442" fill="#000">
332 |     <path id="path444" d="m33.2-114s-14.8,1.8-19.2,3-23,8.8-26,10.8c0,0-13.4,5.4-30.4,25.4,0,0,7.6-3.4,9.8-6.2,0,0,13.6-12.6,13.4-10,0,0,12.2-8.6,11.6-6.4,0,0,24.4-11.2,22.4-8,0,0,21.6-4.6,20.6-2.6,0,0,18.8,4.4,16,4.6,0,0-5.8,1.2,0.6,4.8,0,0-3.4,4.4-8.8,0.4s-2.4-1.8-7.4-0.8c0,0-2.6,0.8-7.2-3.2,0,0-5.6-4.6-14.4-1,0,0-30.6,12.6-32.6,13.2,0,0-3.6,2.8-6,6.4,0,0-5.8,4.4-8.8,5.8,0,0-12.8,11.6-14,13,0,0-3.4,5.2-4.2,5.6,0,0,6.4-3.8,8.4-5.8,0,0,14-10,19.4-10.8,0,0,4.4-3,5.2-4.4,0,0,14.4-9.2,18.6-9.2,0,0,9.2,5.2,11.6-1.8,0,0,5.8-1.8,11.4-0.6,0,0,3.2-2.6,2.4-4.8,0,0,1.6-1.8,2.6,2,0,0,3.4,3.6,8.2,1.6,0,0,4-0.2,2,2.2,0,0-4.4,3.8-16.2,4,0,0-12.4,0.6-28.8,8.2,0,0-29.8,10.4-39,20.8,0,0-6.4,8.8-11.8,10,0,0-5.8,0.8-11.8,8.2,0,0,9.8-5.8,18.8-5.8,0,0,4-2.4,0.2,1.2,0,0-3.6,7.6-2,13,0,0-0.6,5.2-1.4,6.8,0,0-7.8,12.8-7.8,15.2s1.2,12.2,1.6,12.8-1-1.6,2.8,0.8,6.6,4,7.4,6.8-2-5.4-2.2-7.2-4.4-9-3.6-11.4c0,0,1,1,1.8,2.4,0,0-0.6-0.6,0-4.2,0,0,0.8-5.2,2.2-8.4s3.4-7,3.8-7.8,0.4-6.6,1.8-4l3.4,2.6s-2.8-2.6-0.6-4.8c0,0-1-5.6,0.8-8.2,0,0,7-8.4,8.6-9.4s0.2-0.6,0.2-0.6,6-4.2,0.2-2.6c0,0-4,1.6-7,1.6,0,0-7.6,2-3.6-2.2s14-9.6,17.8-9.4l0.8,1.6,11.2-2.4-1.2,0.8s-0.2-0.2,4-0.6,10,1,11.4-0.8,4.8-2.8,4.4-1.4-0.6,3.4-0.6,3.4,5-5.8,4.4-3.6-8.8,7.4-10.2,13.6l10.4-8.2,3.6-3s3.6,2.2,3.8,0.6,4.8-7.4,6-7.2,3.2-2.6,3,0,7.4,8,7.4,8,3.2-1.8,4.6-0.4,5.6-19.8,5.6-19.8l25-10.6,43.6-3.4-16.999-6.8-61.001-11.4z"/>
333 |     </g>
334 |     <g id="g446" stroke-width="2" stroke="#4c0000">
335 |     <path id="path448" d="m51.4,85s-15-16.8-23.4-19.4c0,0-13.4-6.8-38,1"/>
336 |     </g>
337 |     <g id="g450" stroke-width="2" stroke="#4c0000">
338 |     <path id="path452" d="m24.8,64.2s-25.2-8-40.6-3.8c0,0-18.4,2-26.8,15.8"/>
339 |     </g>
340 |     <g id="g454" stroke-width="2" stroke="#4c0000">
341 |     <path id="path456" d="m21.2,63s-17-7.2-31.8-9.4c0,0-16.6-2.6-33.2,4.6,0,0-12.2,6-17.6,16.2"/>
342 |     </g>
343 |     <g id="g458" stroke-width="2" stroke="#4c0000">
344 |     <path id="path460" d="m22.2,63.4s-15.4-11-16.4-12.4c0,0-7-11-20-11.4,0,0-21.4,0.8-38.6,8.8"/>
345 |     </g>
346 |     <g id="g462" fill="#000">
347 |     <path id="path464" d="M20.895,54.407c1.542,1.463,28.505,30.393,28.505,30.393,35.2,36.6,7.2,2.4,7.2,2.4-7.6-4.8-16.8-23.6-16.8-23.6-1.2-2.8,14,7.2,14,7.2,4,0.8,17.6,20,17.6,20-6.8-2.4-2,4.8-2,4.8,2.8,2,23.201,17.6,23.201,17.6,3.6,4,7.599,5.6,7.599,5.6,14-5.2,7.6,8,7.6,8,2.4,6.8,8-4.8,8-4.8,11.2-16.8-5.2-14.4-5.2-14.4-30,2.8-36.8-13.2-36.8-13.2-2.4-2.4,6.4,0,6.4,0,8.401,2-7.2-12.4-7.2-12.4,2.4,0,11.6,6.8,11.6,6.8,10.401,9.2,12.401,7.2,12.401,7.2,17.999-8.8,28.399-1.2,28.399-1.2,2,1.6-3.6,8.4-2,13.6s6.4,17.6,6.4,17.6c-2.4,1.6-2,12.4-2,12.4,16.8,23.2,7.2,21.2,7.2,21.2-15.6-0.4-0.8,7.2-0.8,7.2,3.2,2,12,9.2,12,9.2-2.8-1.2-4.4,4-4.4,4,4.8,4,2,8.8,2,8.8-6,1.2-7.2,5.2-7.2,5.2,6.8,8-3.2,8.4-3.2,8.4,3.6,4.4-1.2,16.4-1.2,16.4-4.8,0-11.2,5.6-11.2,5.6,2.4,4.8-8,10.4-8,10.4-8.4,1.6-5.6,8.4-5.6,8.4-7.999,6-10.399,22-10.399,22-0.8,10.4-3.2,13.6,2,11.6,5.199-2,4.399-14.4,4.399-14.4-4.799-15.6,38-31.6,38-31.6,4-1.6,4.8-6.8,4.8-6.8,2,0.4,10.8,8,10.8,8,7.6,11.2,8,2,8,2,1.2-3.6-0.4-9.6-0.4-9.6,6-21.6-8-28-8-28-10-33.6,4-25.2,4-25.2,2.8,5.6,13.6,10.8,13.6,10.8l3.6-2.4c-1.6-4.8,6.8-10.8,6.8-10.8,2.8,6.4,8.8-1.6,8.8-1.6,3.6-24.4,16-10,16-10,4,1.2,5.2-5.6,5.2-5.6,3.6-10.4,0-24,0-24,3.6-0.4,13.2,5.6,13.2,5.6,2.8-3.6-6.4-20.4-2.4-18s8.4,4,8.4,4c0.8-2-9.2-14.4-9.2-14.4-4.4-2.8-9.6-23.2-9.6-23.2,7.2,3.6-2.8-11.6-2.8-11.6,0-3.2,6-14.4,6-14.4-0.8-6.8,0-6.4,0-6.4,2.8,1.2,10.8,2.8,4-3.6s0.8-11.2,0.8-11.2c4.4-2.8-9.2-2.4-9.2-2.4-5.2-4.4-4.8-8.4-4.8-8.4,8,2-6.4-12.4-8.8-16s7.2-8.8,7.2-8.8c13.2-3.6,1.6-6.8,1.6-6.8-19.6,0.4-8.8-10.4-8.8-10.4,6,0.4,4.4-2,4.4-2-5.2-1.2-14.8-7.6-14.8-7.6-4-3.6-0.4-2.8-0.4-2.8,16.8,1.2-12-10-12-10,8,0-10-10.4-10-10.4-2-1.6-5.2-9.2-5.2-9.2-6-5.2-10.8-12-10.8-12-0.4-4.4-5.2-9.2-5.2-9.2-11.6-13.6-17.2-13.2-17.2-13.2-14.8-3.6-20-2.8-20-2.8l-52.8,4.4c-26.4,12.8-18.6,33.8-18.6,33.8,6.4,8.4,15.6,4.6,15.6,4.6,4.6-6.2,16.2-4,16.2-4,20.401,3.2,17.801-0.4,17.801-0.4-2.4-4.6-18.601-10.8-18.801-11.4s-9-4-9-4c-3-1.2-7.4-10.4-7.4-10.4-3.2-3.4,12.6,2.4,12.6,2.4-1.2,1,6.2,5,6.2,5,17.401-1,28.001,9.8,28.001,9.8,10.799,16.6,10.999,8.4,10.999,8.4,2.8-9.4-9-30.6-9-30.6,0.4-2,8.6,4.6,8.6,4.6,1.4-2,2.2,3.8,2.2,3.8,0.2,2.4,4,10.4,4,10.4,2.8,13,6.4,5.6,6.4,5.6l4.6,9.4c1.4,2.6-4.6,10.2-4.6,10.2-0.2,2.8,0.6,2.6-5,10.2s-2.2,12-2.2,12c-1.4,6.6,7.4,6.2,7.4,6.2,2.6,2.2,6,2.2,6,2.2,1.8,2,4.2,1.4,4.2,1.4,1.6-3.8,7.8-1.8,7.8-1.8,1.4-2.4,9.6-2.8,9.6-2.8,1-2.6,1.4-4.2,4.8-4.8s-21.2-43.6-21.2-43.6c6.4-0.8-1.8-13.2-1.8-13.2-2.2-6.6,9.2,8,11.4,9.4s3.2,3.6,1.6,3.4-3.4,2-2,2.2,14.4,15.2,17.8,25.4,9.4,14.2,15.6,20.2,5.4,30.2,5.4,30.2c-0.4,8.8,5.6,19.4,5.6,19.4,2,3.8-2.2,22-2.2,22-2,2.2-0.6,3-0.6,3,1,1.2,7.8,14.4,7.8,14.4-1.8-0.2,1.8,3.4,1.8,3.4,5.2,6-1.2,3-1.2,3-6-1.6,1,8.2,1,8.2,1.2,1.8-7.8-2.8-7.8-2.8-9.2-0.6,2.4,6.6,2.4,6.6,8.6,7.2-2.8,2.8-2.8,2.8-4.6-1.8-1.4,5-1.4,5,3.2,1.6,20.4,8.6,20.4,8.6,0.4,3.8-2.6,8.8-2.6,8.8,0.4,4-1.8,7.4-1.8,7.4-1.2,8.2-1.8,9-1.8,9-4.2,0.2-11.6,14-11.6,14-1.8,2.6-12,14.6-12,14.6-2,7-20-0.2-20-0.2-6.6,3.4-4.6,0-4.6,0-0.4-2.2,4.4-8.2,4.4-8.2,7-2.6,4.4-13.4,4.4-13.4,4-1.4-7.2-4.2-7-5.4s6-2.6,6-2.6c8-2,3.6-4.4,3.6-4.4-0.6-4,2.4-9.6,2.4-9.6,11.6-0.8,0-17,0-17-10.8-7.6-11.8-13.4-11.8-13.4,12.6-8.2,4.4-20.6,4.6-24.2s1.4-25.2,1.4-25.2c-2-6.2-5-19.8-5-19.8,2.2-5.2,9.6-17.8,9.6-17.8,2.8-4.2,11.6-9,9.4-12s-10-1.2-10-1.2c-7.8-1.4-7.2,3.8-7.2,3.8-1.6,1-2.4,6-2.4,6-0.72,7.933-9.6,14.2-9.6,14.2-11.2,6.2-2,10.2-2,10.2,6,6.6-3.8,6.8-3.8,6.8-11-1.8-2.8,8.4-2.8,8.4,10.8,12.8,7.8,15.6,7.8,15.6-10.2,1,2.4,10.2,2.4,10.2s-0.8-2-0.6-0.2,3.2,6,4,8-3.2,2.2-3.2,2.2c0.6,9.6-14.8,5.4-14.8,5.4l-1.6,0.2c-1.6,0.2-12.8-0.6-18.6-2.8s-12.599-2.2-12.599-2.2-4,1.8-11.601,1.6c-7.6-0.2-15.6,2.6-15.6,2.6-4.4-0.4,4.2-4.8,4.4-4.6s5.8-5.4-2.2-4.8c-21.797,1.635-32.6-8.6-32.6-8.6-2-1.4-4.6-4.2-4.6-4.2-10-2,1.4,12.4,1.4,12.4,1.2,1.4-0.2,2.4-0.2,2.4-0.8-1.6-8.6-7-8.6-7-2.811-0.973-4.174-2.307-6.505-4.793z"/>
348 |     </g>
349 |     <g id="g466" fill="#4c0000">
350 |     <path id="path468" d="m-3,42.8s11.6,5.6,14.2,8.4,16.6,14.2,16.6,14.2-5.4-2-8-3.8-13.4-10-13.4-10-3.8-6-9.4-8.8z"/>
351 |     </g>
352 |     <g id="g470" fill="#99cc32">
353 |     <path id="path472" d="M-61.009,11.603c0.337-0.148-0.187-2.86-0.391-3.403-1.022-2.726-10-4.2-10-4.2-0.227,1.365-0.282,2.961-0.176,4.599,0,0,4.868,5.519,10.567,3.004z"/>
354 |     </g>
355 |     <g id="g474" fill="#659900">
356 |     <path id="path476" d="M-61.009,11.403c-0.449,0.158-0.015-2.734-0.191-3.203-1.022-2.726-10.2-4.3-10.2-4.3-0.227,1.365-0.282,2.961-0.176,4.599,0,0,4.268,5.119,10.567,2.904z"/>
357 |     </g>
358 |     <g id="g478" fill="#000">
359 |     <path id="path480" d="m-65.4,11.546c-0.625,0-1.131-1.14-1.131-2.546,0-1.405,0.506-2.545,1.131-2.545s1.132,1.14,1.132,2.545c0,1.406-0.507,2.546-1.132,2.546z"/>
360 |     </g>
361 |     <g id="g482" fill="#000">
362 |     <path id="path484" d="M-65.4,9z"/>
363 |     </g>
364 |     <g id="g486" fill="#000">
365 |     <path id="path488" d="m-111,109.6s-5.6,10,19.2,4c0,0,14-1.2,16.4-3.6,1.2,0.8,9.566,3.73,12.4,4.4,6.8,1.6,15.2-8.4,15.2-8.4s4.6-10.5,7.4-10.5-0.4,1.6-0.4,1.6-6.6,10.1-6.2,11.7c0,0-5.2,20-21.2,20.8,0,0-16.15,0.95-14.8,6.8,0,0,8.8-2.4,11.2,0,0,0,10.8-0.4,2.8,6l-6.8,11.6s0.14,3.92-10,0.4c-9.8-3.4-20.1-16.3-20.1-16.3s-15.95-14.55-5.1-28.5z"/>
366 |     </g>
367 |     <g id="g490" fill="#e59999">
368 |     <path id="path492" d="m-112.2,113.6s-2,9.6,34.8-0.8l6.8,0.8c2.4,0.8,14.4,3.6,16.4,2.4,0,0-7.2,13.6-18.8,12,0,0-13.2,1.6-12.8,6.4,0,0,4,7.2,8.8,9.6,0,0,2.8,2.4,2.4,5.6s-3.2,4.8-5.2,5.6-5.2-2.4-6.8-2.4-10-6.4-14.4-11.2-12.8-16.8-12.4-19.6,1.2-8.4,1.2-8.4z"/>
369 |     </g>
370 |     <g id="g494" fill="#b26565">
371 |     <path id="path496" d="m-109,131.05c2.6,3.95,5.8,8.15,8,10.55,4.4,4.8,12.8,11.2,14.4,11.2s4.8,3.2,6.8,2.4,4.8-2.4,5.2-5.6-2.4-5.6-2.4-5.6c-3.066-1.53-5.806-5.02-7.385-7.35,0,0,0.185,2.55-5.015,1.75s-10.4-3.6-12-6.8-4-5.6-2.4-2,4,7.2,5.6,7.6,1.2,1.6-1.2,1.2-5.2-0.8-9.6-6z"/>
372 |     </g>
373 |     <g id="g498" fill="#992600">
374 |     <path id="path500" d="m-111.6,110s1.8-13.6,3-17.6c0,0-0.8-6.8,1.6-11s4.4-10.4,7.4-15.8,3.2-9.4,7.2-11,10-10.2,12.8-11.2,2.6-0.2,2.6-0.2,6.8-14.8,20.4-10.8c0,0-16.2-2.8-0.4-12.2,0,0-4.8,1.1-1.5-5.9,2.201-4.668,1.7,2.1-9.3,13.9,0,0-5,8.6-10.2,11.6s-17.2,10-18.4,13.8-4.4,9.6-6.4,11.2-4.8,5.8-5.2,9.2c0,0-1.2,4-2.6,5.2s-1.6,4.4-1.6,6.4-2,4.8-1.8,7.2c0,0,0.8,19,0.4,21l2-3.8z"/>
375 |     </g>
376 |     <g id="g502" fill="#FFF">
377 |     <path id="path504" d="m-120.2,114.6s-2-1.4-6.4,4.6c0,0,7.3,33,7.3,34.4,0,0,1.1-2.1-0.2-9.3s-2.2-19.9-2.2-19.9l1.5-9.8z"/>
378 |     </g>
379 |     <g id="g506" fill="#992600">
380 |     <path id="path508" d="m-98.6,54s-17.6,3.2-17.2,32.4l-0.8,24.8s-1.2-25.6-2.4-27.2,2.8-12.8-0.4-6.8c0,0-14,14-6,35.2,0,0,1.5,3.3-1.5-1.3,0,0-4.6-12.6-3.5-19,0,0,0.2-2.2,2.1-5,0,0,8.6-11.7,11.3-14,0,0,1.8-14.4,17.2-19.6,0,0,5.7-2.3,1.2,0.5z"/>
381 |     </g>
382 |     <g id="g510" fill="#000">
383 |     <path id="path512" d="m40.8-12.2c0.66-0.354,0.651-1.324,1.231-1.497,1.149-0.344,1.313-1.411,1.831-2.195,0.873-1.319,1.066-2.852,1.648-4.343,0.272-0.7,0.299-1.655-0.014-2.315-1.174-2.481-1.876-4.93-3.318-7.356-0.268-0.45-0.53-1.244-0.731-1.842-0.463-1.384-1.72-2.375-2.58-3.695-0.288-0.441,0.237-1.366-0.479-1.45-0.897-0.105-2.346-0.685-2.579,0.341-0.588,2.587,0.423,5.11,1.391,7.552-0.782,0.692-0.448,1.613-0.296,2.38,0.71,3.606-0.488,6.958-1.249,10.432-0.023,0.104,0.319,0.302,0.291,0.364-1.222,2.686-2.674,5.131-4.493,7.512-0.758,0.992-1.63,1.908-2.127,2.971-0.368,0.787-0.776,1.753-0.526,2.741-3.435,2.78-5.685,6.625-8.296,10.471-0.462,0.68-0.171,1.889,0.38,2.158,0.813,0.398,1.769-0.626,2.239-1.472,0.389-0.698,0.742-1.348,1.233-1.991,0.133-0.175-0.046-0.594,0.089-0.715,2.633-2.347,4.302-5.283,6.755-7.651,1.95-0.329,3.487-1.327,5.235-2.34,0.308-0.179,0.832,0.07,1.122-0.125,1.753-1.177,1.751-3.213,1.857-5.123,0.05-0.884,0.246-2.201,1.386-2.812z"/>
384 |     </g>
385 |     <g id="g514" fill="#000">
386 |     <path id="path516" d="m31.959-16.666c0.124-0.077-0.031-0.5,0.078-0.716,0.162-0.324,0.565-0.512,0.727-0.836,0.109-0.216-0.054-0.596,0.082-0.738,2.333-2.447,2.59-5.471,1.554-8.444,1.024-0.62,1.085-1.882,0.66-2.729-0.853-1.7-1.046-3.626-2.021-5.169-0.802-1.269-2.38-2.513-3.751-1.21-0.421,0.4-0.742,1.187-0.464,1.899,0.064,0.163,0.349,0.309,0.322,0.391-0.107,0.324-0.653,0.548-0.659,0.82-0.03,1.496-0.984,3.007-0.354,4.336,0.772,1.629,1.591,3.486,2.267,5.262-1.234,2.116-0.201,4.565-1.954,6.442-0.136,0.146-0.127,0.532-0.005,0.734,0.292,0.486,0.698,0.892,1.184,1.184,0.202,0.121,0.55,0.123,0.75-0.001,0.578-0.362,0.976-0.849,1.584-1.225z"/>
387 |     </g>
388 |     <g id="g518" fill="#000">
389 |     <path id="path520" d="m94.771-26.977c1.389,1.792,1.679,4.587-0.37,5.977,0.55,3.309,3.901,1.33,5.999,0.8-0.11-0.388,0.12-0.732,0.4-0.737,1.06-0.015,1.74-1.047,2.8-0.863,0.44-1.557,2.07-2.259,2.72-3.639,1.72-3.695,1.13-7.968-1.45-11.214-0.2-0.254,0.01-0.771-0.11-1.133-0.76-2.211-2.82-2.526-4.76-3.214-1.176-3.875-1.837-7.906-3.599-11.6-1.614-0.25-2.312-1.989-3.649-2.709-1.333-0.719-1.901,0.86-1.86,1.906,0.007,0.205,0.459,0.429,0.289,0.794-0.076,0.164-0.336,0.275-0.336,0.409,0.001,0.135,0.222,0.266,0.356,0.4-0.918,0.82-2.341,1.297-2.636,2.442-0.954,3.71,1.619,6.835,3.287,10.036,0.591,1.135-0.145,2.406-0.905,3.614-0.438,0.695-0.33,1.822-0.054,2.678,0.752,2.331,2.343,4.07,3.878,6.053z"/>
390 |     </g>
391 |     <g id="g522" fill="#000">
392 |     <path id="path524" d="m57.611-8.591c-1.487,1.851-4.899,4.42-1.982,6.348,0.194,0.129,0.564,0.133,0.737-0.001,2.021-1.565,4.024-2.468,6.46-3.05,0.124-0.029,0.398,0.438,0.767,0.277,1.613-0.703,3.623-0.645,4.807-1.983,3.767,0.224,7.332-0.892,10.723-2.2,1.161-0.448,2.431-1.007,3.632-1.509,1.376-0.576,2.58-1.504,3.692-2.645,0.133-0.136,0.487-0.046,0.754-0.046-0.04-0.863,0.922-0.99,1.169-1.612,0.092-0.232-0.058-0.628,0.075-0.73,2.138-1.63,3.058-3.648,1.889-6.025-0.285-0.578-0.534-1.196-1.1-1.672-1.085-0.911-2.187-0.057-3.234-0.361-0.159,0.628-0.888,0.456-1.274,0.654-0.859,0.439-2.192-0.146-3.051,0.292-1.362,0.695-2.603,0.864-4.025,1.241-0.312,0.082-1.09-0.014-1.25,0.613-0.134-0.134-0.282-0.368-0.388-0.346-1.908,0.396-3.168,0.61-4.469,2.302-0.103,0.133-0.545-0.046-0.704,0.089-0.957,0.808-1.362,2.042-2.463,2.714-0.201,0.123-0.553-0.045-0.747,0.084-0.646,0.431-1.013,1.072-1.655,1.519-0.329,0.229-0.729-0.096-0.697-0.352,0.245-1.947,0.898-3.734,0.323-5.61,2.077-2.52,4.594-4.469,6.4-7.2,0.015-2.166,0.707-4.312,0.594-6.389-0.01-0.193-0.298-0.926-0.424-1.273-0.312-0.854,0.594-1.92-0.25-2.644-1.404-1.203-2.696-0.327-3.52,1.106-1.838,0.39-3.904,1.083-5.482-0.151-1.007-0.787-1.585-1.693-2.384-2.749-0.985-1.302-0.65-2.738-0.58-4.302,0.006-0.128-0.309-0.264-0.309-0.398,0.001-0.135,0.221-0.266,0.355-0.4-0.706-0.626-0.981-1.684-2-2,0.305-1.092-0.371-1.976-1.242-2.278-1.995-0.691-3.672,1.221-5.564,1.294-0.514,0.019-0.981-1.019-1.63-1.344-0.432-0.216-1.136-0.249-1.498,0.017-0.688,0.504-1.277,0.618-2.035,0.823-1.617,0.436-2.895,1.53-4.375,2.385-1.485,0.857-2.44,2.294-3.52,3.614-0.941,1.152-1.077,3.566,0.343,4.066,1.843,0.65,3.147-2.053,5.113-1.727,0.312,0.051,0.518,0.362,0.408,0.75,0.389,0.109,0.607-0.12,0.8-0.4,0.858,1.019,2.022,1.356,2.96,2.229,0.97,0.904,2.716,0.486,3.731,1.483,1.529,1.502,0.97,4.183,2.909,5.488-0.586,1.313-1.193,2.59-1.528,4.017-0.282,1.206,0.712,2.403,1.923,2.312,1.258-0.094,1.52-0.853,2.005-1.929,0.267,0.267,0.736,0.564,0.695,0.78-0.457,2.387-1.484,4.38-1.942,6.811-0.059,0.317-0.364,0.519-0.753,0.409-0.468,4.149-4.52,6.543-7.065,9.708-0.403,0.502-0.407,1.751,0.002,2.154,1.403,1.387,3.363-0.159,5.063-0.662,0.213-1.206,1.072-2.148,2.404-2.092,0.256,0.01,0.491-0.532,0.815-0.662,0.348-0.138,0.85,0.086,1.136-0.112,1.729-1.195,3.137-2.301,4.875-3.49,0.192-0.131,0.536,0.028,0.752-0.08,0.325-0.162,0.512-0.549,0.835-0.734,0.348-0.2,0.59,0.09,0.783,0.37-0.646,0.349-0.65,1.306-1.232,1.508-0.775,0.268-1.336,0.781-2.01,1.228-0.292,0.193-0.951-0.055-1.055,0.124-0.598,1.028-1.782,1.466-2.492,2.349z"/>
393 |     </g>
394 |     <g id="g526" fill="#000">
395 |     <path id="path528" d="m2.2-58s-9.238-2.872-20.4,22.8c0,0-2.4,5.2-4.8,7.2s-13.6,5.6-15.6,9.6l-10.4,16s14.8-16,18-18.4c0,0,8-8.4,4.8-1.6,0,0-14,10.8-12.8,20,0,0-5.6,14.4-6.4,16.4,0,0,16-32,18.4-33.2s3.6-1.2,2.4,2.4-1.6,20-4.4,22c0,0,8-20.4,7.2-23.6,0,0,3.2-3.6,5.6,1.6l-1.2,16,4.4,12s-2.4-11.2-0.8-26.8c0,0-2-10.4,2-4.8s13.6,11.6,13.6,16.4c0,0-5.2-17.6-14.4-22.4l-4,6-1.2-2s-3.6-0.8,0.8-7.6,4-7.6,4-7.6,6.4,7.2,8,7.2c0,0,13.2-7.6,14.4,16.8,0,0,6.8-14.4-2.4-21.2,0,0-14.8-2-13.6-7.2l7.2-12.4c3.6-5.2,2-2.4,2-2.4z"/>
396 |     </g>
397 |     <g id="g530" fill="#000">
398 |     <path id="path532" d="m-17.8-41.6-16,5.2-7.2,9.6s17.2-10,21.2-11.2,2-3.6,2-3.6z"/>
399 |     </g>
400 |     <g id="g534" fill="#000">
401 |     <path id="path536" d="m-57.8-35.2s-2,1.2-2.4,4-2.8,3.2-2,6,2.8,5.2,2.8,1.2,1.6-6,2.4-7.2,2.4-5.6-0.8-4z"/>
402 |     </g>
403 |     <g id="g538" fill="#000">
404 |     <path id="path540" d="m-66.6,26s-8.4-4-11.6-7.6-2.748,1.566-7.6,1.2c-5.847-0.441-4.8-16.4-4.8-16.4l-4,7.6s-1.2,14.4,6.8,12c3.907-1.172,5.2,0.4,3.6,1.2s5.6,1.2,2.8,2.8,11.6-3.6,9.2,6.8l5.6-7.6z"/>
405 |     </g>
406 |     <g id="g542" fill="#000">
407 |     <path id="path544" d="m-79.2,40.4s-15.4,4.4-19-5.2c0,0-4.8,2.4-2.6,5.4s3.4,3.4,3.4,3.4,5.4,1.2,4.8,2-3,4.2-3,4.2,10.2-6,16.4-9.8z"/>
408 |     </g>
409 |     <g id="g546" fill="#FFF">
410 |     <path id="path548" d="m149.2,118.6c-0.43,2.14-2.1,2.94-4,3.6-1.92-0.96-4.51-4.06-6.4-2-0.47-0.48-1.25-0.54-1.6-1.2-0.46-0.9-0.19-1.94-0.53-2.74-0.55-1.28-1.25-2.64-1.07-4.06,1.81-0.71,2.4-2.62,1.93-4.38-0.07-0.26-0.5-0.45-0.3-0.8,0.19-0.33,0.5-0.55,0.77-0.82-0.13,0.14-0.28,0.37-0.39,0.35-0.61-0.11-0.49-0.75-0.36-1.13,0.59-1.75,2.6-2.01,3.95-0.82,0.26-0.56,0.77-0.37,1.2-0.4-0.05-0.58,0.36-1.11,0.56-1.53,0.52-1.09,2.14,0.01,2.94-0.6,1.08-0.83,2.14-1.52,3.22-0.92,1.81,1.01,3.52,2.22,4.72,3.97,0.57,0.83,0.81,2.11,0.75,3.07-0.04,0.65-1.42,0.29-1.76,1.22-0.65,1.75,1.19,2.27,1.94,3.61,0.2,0.35-0.06,0.65-0.38,0.75-0.41,0.13-1.19-0.06-1.06,0.39,0.98,3.19-1.78,3.87-4.13,4.44z"/>
411 |     </g>
412 |     <g id="g550" fill="#FFF">
413 |     <path id="path552" d="m139.6,138.2c-0.01-1.74-1.61-3.49-0.4-5.2,0.14,0.14,0.27,0.36,0.4,0.36,0.14,0,0.27-0.22,0.4-0.36,1.5,2.22,5.15,3.14,5.01,5.99-0.03,0.45-1.11,1.37-0.21,2.01-1.81,1.35-1.87,3.72-2.8,5.6-1.24-0.28-2.45-0.65-3.6-1.2,0.35-1.48,0.24-3.17,1.06-4.49,0.43-0.7,0.14-1.78,0.14-2.71z"/>
414 |     </g>
415 |     <g id="g554" fill="#CCC">
416 |     <path id="path556" d="m-26.6,129.2s-16.858,10.14-2.8-5.2c8.8-9.6,18.8-15.2,18.8-15.2s10.4-4.4,14-5.6,18.8-6.4,22-6.8,12.8-4.4,19.6-0.4,14.8,8.4,14.8,8.4-16.4-8.4-20-6-10.8,2-16.8,5.2c0,0-14.8,4.4-18,6.4s-13.6,13.6-15.2,12.8,0.4-1.2,1.6-4-0.8-4.4-8.8,2-9.2,8.4-9.2,8.4z"/>
417 |     </g>
418 |     <g id="g558" fill="#000">
419 |     <path id="path560" d="m-19.195,123.23s1.41-13.04,9.888-11.37c0,0,8.226-4.17,10.948-6.14,0,0,8.139-1.7,9.449-2.32,18.479-8.698,33.198-4.179,33.745-5.299,0.546-1.119,20.171,5.999,23.78,10.079,0.391,0.45-10.231-5.59-19.929-7.48-8.273-1.617-29.875,0.24-40.781,5.78-2.973,1.51-11.918,7.29-14.449,7.18s-12.651,9.57-12.651,9.57z"/>
420 |     </g>
421 |     <g id="g562" fill="#CCC">
422 |     <path id="path564" d="m-23,148.8s-15.2-2.4,1.6-4c0,0,18-2,22-7.2,0,0,13.6-9.2,16.4-9.6s32.8-7.6,33.2-10,6-2.4,7.6-1.6,0.8,2-2,2.8-34,17.2-40.4,18.4-18,8.8-22.8,10-15.6,1.2-15.6,1.2z"/>
423 |     </g>
424 |     <g id="g566" fill="#000">
425 |     <path id="path568" d="m-3.48,141.4s-8.582-0.83,0.019-1.64c0,0,8.816-3.43,10.864-6.09,0,0,6.964-4.71,8.397-4.92,1.434-0.2,15.394-3.89,15.599-5.12s34.271-13.81,38.691-10.62c2.911,2.1-6.99,0.43-16.624,4.84-1.355,0.62-35.208,15.2-38.485,15.82-3.277,0.61-9.216,4.5-11.674,5.12-2.457,0.61-6.787,2.61-6.787,2.61z"/>
426 |     </g>
427 |     <g id="g570" fill="#000">
428 |     <path id="path572" d="m-11.4,143.6s5.2-0.4,4,1.2-3.6,0.8-3.6,0.8l-0.4-2z"/>
429 |     </g>
430 |     <g id="g574" fill="#000">
431 |     <path id="path576" d="m-18.6,145.2s5.2-0.4,4,1.2-3.6,0.8-3.6,0.8l-0.4-2z"/>
432 |     </g>
433 |     <g id="g578" fill="#000">
434 |     <path id="path580" d="m-29,146.8s5.2-0.4,4,1.2-3.6,0.8-3.6,0.8l-0.4-2z"/>
435 |     </g>
436 |     <g id="g582" fill="#000">
437 |     <path id="path584" d="m-36.6,147.6s5.2-0.4,4,1.2-3.6,0.8-3.6,0.8l-0.4-2z"/>
438 |     </g>
439 |     <g id="g586" fill="#000">
440 |     <path id="path588" d="m1.8,108,3.2,1.6c-1.2,1.6-4.4,1.2-4.4,1.2l1.2-2.8z"/>
441 |     </g>
442 |     <g id="g590" fill="#000">
443 |     <path id="path592" d="m-8.2,113.6s6.506-2.14,4,1.2c-1.2,1.6-3.6,0.8-3.6,0.8l-0.4-2z"/>
444 |     </g>
445 |     <g id="g594" fill="#000">
446 |     <path id="path596" d="m-19.4,118.4s5.2-0.4,4,1.2-3.6,0.8-3.6,0.8l-0.4-2z"/>
447 |     </g>
448 |     <g id="g598" fill="#000">
449 |     <path id="path600" d="m-27,124.4s5.2-0.4,4,1.2-3.6,0.8-3.6,0.8l-0.4-2z"/>
450 |     </g>
451 |     <g id="g602" fill="#000">
452 |     <path id="path604" d="m-33.8,129.2s5.2-0.4,4,1.2-3.6,0.8-3.6,0.8l-0.4-2z"/>
453 |     </g>
454 |     <g id="g606" fill="#000">
455 |     <path id="path608" d="m5.282,135.6s6.921-0.53,5.324,1.6c-1.597,2.12-4.792,1.06-4.792,1.06l-0.532-2.66z"/>
456 |     </g>
457 |     <g id="g610" fill="#000">
458 |     <path id="path612" d="m15.682,130.8s6.921-0.53,5.324,1.6c-1.597,2.12-4.792,1.06-4.792,1.06l-0.532-2.66z"/>
459 |     </g>
460 |     <g id="g614" fill="#000">
461 |     <path id="path616" d="m26.482,126.4s6.921-0.53,5.324,1.6c-1.597,2.12-4.792,1.06-4.792,1.06l-0.532-2.66z"/>
462 |     </g>
463 |     <g id="g618" fill="#000">
464 |     <path id="path620" d="m36.882,121.6s6.921-0.53,5.324,1.6c-1.597,2.12-4.792,1.06-4.792,1.06l-0.532-2.66z"/>
465 |     </g>
466 |     <g id="g622" fill="#000">
467 |     <path id="path624" d="m9.282,103.6s6.921-0.53,5.324,1.6c-1.597,2.12-5.592,1.86-5.592,1.86l0.268-3.46z"/>
468 |     </g>
469 |     <g id="g626" fill="#000">
470 |     <path id="path628" d="m19.282,100.4s6.921-0.534,5.324,1.6c-1.597,2.12-5.992,1.86-5.992,1.86l0.668-3.46z"/>
471 |     </g>
472 |     <g id="g630" fill="#000">
473 |     <path id="path632" d="m-3.4,140.4s5.2-0.4,4,1.2-3.6,0.8-3.6,0.8l-0.4-2z"/>
474 |     </g>
475 |     <g id="g634" fill="#992600">
476 |     <path id="path636" d="m-76.6,41.2s-4.4,8.8-4.8,12c0,0,0.8-8.8,2-10.8s2.8-1.2,2.8-1.2z"/>
477 |     </g>
478 |     <g id="g638" fill="#992600">
479 |     <path id="path640" d="m-95,55.2s-3.2,14.4-2.8,17.2c0,0-1.2-11.6-0.8-12.8s3.6-4.4,3.6-4.4z"/>
480 |     </g>
481 |     <g id="g642" fill="#CCC">
482 |     <path id="path644" d="m-74.2-19.4-0.2,3.2-2.2,0.2s14.2,12.6,14.8,20.2c0,0,0.8-8.2-12.4-23.6z"/>
483 |     </g>
484 |     <g id="g646" fill="#000">
485 |     <path id="path648" d="m-70.216-18.135c-0.431-0.416-0.212-1.161-0.62-1.421-0.809-0.516,1.298-0.573,1.07-1.289-0.383-1.206-0.196-1.227-0.318-2.503-0.057-0.598,0.531-2.138,0.916-2.578,1.446-1.652,0.122-4.584,1.762-6.135,0.304-0.289,0.68-0.841,0.965-1.259,0.659-0.963,1.843-1.451,2.793-2.279,0.318-0.276,0.117-1.103,0.686-1.011,0.714,0.115,1.955-0.015,1.91,0.826-0.113,2.12-1.442,3.84-2.722,5.508,0.451,0.704-0.007,1.339-0.291,1.896-1.335,2.62-1.146,5.461-1.32,8.301-0.005,0.085-0.312,0.163-0.304,0.216,0.353,2.335,0.937,4.534,1.816,6.763,0.366,0.93,0.837,1.825,0.987,2.752,0.111,0.686,0.214,1.519-0.194,2.224,2.035,2.89,0.726,5.541,1.895,9.072,0.207,0.625,1.899,2.539,1.436,2.378-2.513-0.871-2.625-1.269-2.802-2.022-0.146-0.623-0.476-2-0.713-2.602-0.064-0.164-0.235-2.048-0.313-2.17-1.513-2.382-0.155-2.206-1.525-4.564-1.428-0.68-2.394-1.784-3.517-2.946-0.198-0.204,0.945-0.928,0.764-1.141-1.092-1.289-2.245-2.056-1.909-3.549,0.155-0.69,0.292-1.747-0.452-2.467z"/>
486 |     </g>
487 |     <g id="g650" fill="#000">
488 |     <path id="path652" d="m-73.8-16.4s0.4,6.8,2.8,8.4,1.2,0.8-2-0.4-2-2-2-2-2.8,0.4-0.4,2.4,6,4.4,4.4,4.4-9.2-4-9.2-6.8-1-6.9-1-6.9,1.1-0.8,5.9-0.7c0,0,1.4,0.7,1.5,1.6z"/>
489 |     </g>
490 |     <g id="g654" stroke-width="0.1" stroke="#000" fill="#FFF">
491 |     <path id="path656" d="m-74.6,2.2s-8.52-2.791-27,0.6c0,0,9.031-2.078,27.8,0.2,10.3,1.25-0.8-0.8-0.8-0.8z"/>
492 |     </g>
493 |     <g id="g658" stroke-width="0.1" stroke="#000" fill="#FFF">
494 |     <path id="path660" d="m-72.502,2.129s-8.246-3.518-26.951-1.737c0,0,9.178-1.289,27.679,2.603,10.154,2.136-0.728-0.866-0.728-0.866z"/>
495 |     </g>
496 |     <g id="g662" stroke-width="0.1" stroke="#000" fill="#FFF">
497 |     <path id="path664" d="m-70.714,2.222s-7.962-4.121-26.747-3.736c0,0,9.248-0.604,27.409,4.654,9.966,2.885-0.662-0.918-0.662-0.918z"/>
498 |     </g>
499 |     <g id="g666" stroke-width="0.1" stroke="#000" fill="#FFF">
500 |     <path id="path668" d="m-69.444,2.445s-6.824-4.307-23.698-5.405c0,0,8.339,0.17,24.22,6.279,8.716,3.353-0.522-0.874-0.522-0.874z"/>
501 |     </g>
502 |     <g id="g670" stroke-width="0.1" stroke="#000" fill="#FFF">
503 |     <path id="path672" d="m45.84,12.961s-0.93,0.644-0.716-0.537c0.215-1.181,28.423-14.351,32.037-14.101,0,0-30.248,13.206-31.321,14.638z"/>
504 |     </g>
505 |     <g id="g674" stroke-width="0.1" stroke="#000" fill="#FFF">
506 |     <path id="path676" d="m42.446,13.6s-0.876,0.715-0.755-0.479,27.208-16.539,30.83-16.573c0,0-29.117,15.541-30.075,17.052z"/>
507 |     </g>
508 |     <g id="g678" stroke-width="0.1" stroke="#000" fill="#FFF">
509 |     <path id="path680" d="m39.16,14.975s-0.828,0.772-0.786-0.428c0.042-1.199,19.859-16.696,29.671-18.57,0,0-18.03,8.127-28.885,18.998z"/>
510 |     </g>
511 |     <g id="g682" stroke-width="0.1" stroke="#000" fill="#FFF">
512 |     <path id="path684" d="m36.284,16.838s-0.745,0.694-0.707-0.385c0.038-1.08,17.872-15.027,26.703-16.713,0,0-16.226,7.314-25.996,17.098z"/>
513 |     </g>
514 |     <g id="g686" fill="#CCC">
515 |     <path id="path688" d="m4.6,164.8s-15.2-2.4,1.6-4c0,0,18-2,22-7.2,0,0,13.6-9.2,16.4-9.6s19.2-4,19.6-6.4,6.4-4.8,8-4,1.6,10-1.2,10.8-21.6,8-28,9.2-18,8.8-22.8,10-15.6,1.2-15.6,1.2z"/>
516 |     </g>
517 |     <g id="g690" fill="#000">
518 |     <path id="path692" d="m77.6,127.4s-3,1.6-4.2,4.2c0,0-6.4,10.6-20.6,13.8,0,0-23,9-30.8,11,0,0-13.4,5-20.8,4.2,0,0-7,0.2-0.8,1.8,0,0,20.2-2,23.6-3.8,0,0,15.6-5.2,18.6-7.8s21.2-7.6,23.4-9.6,12-10.4,11.6-13.8z"/>
519 |     </g>
520 |     <g id="g694" fill="#000">
521 |     <path id="path696" d="m18.882,158.91s5.229-0.23,4.076,1.32-3.601,0.68-3.601,0.68l-0.475-2z"/>
522 |     </g>
523 |     <g id="g698" fill="#000">
524 |     <path id="path700" d="m11.68,160.26s5.228-0.22,4.076,1.33c-1.153,1.55-3.601,0.67-3.601,0.67l-0.475-2z"/>
525 |     </g>
526 |     <g id="g702" fill="#000">
527 |     <path id="path704" d="m1.251,161.51s5.229-0.23,4.076,1.32-3.601,0.68-3.601,0.68l-0.475-2z"/>
528 |     </g>
529 |     <g id="g706" fill="#000">
530 |     <path id="path708" d="m-6.383,162.06s5.229-0.23,4.076,1.32-3.601,0.67-3.601,0.67l-0.475-1.99z"/>
531 |     </g>
532 |     <g id="g710" fill="#000">
533 |     <path id="path712" d="m35.415,151.51s6.96-0.3,5.425,1.76c-1.534,2.07-4.793,0.9-4.793,0.9l-0.632-2.66z"/>
534 |     </g>
535 |     <g id="g714" fill="#000">
536 |     <path id="path716" d="m45.73,147.09s5.959-3.3,5.425,1.76c-0.27,2.55-4.793,0.9-4.793,0.9l-0.632-2.66z"/>
537 |     </g>
538 |     <g id="g718" fill="#000">
539 |     <path id="path720" d="m54.862,144.27s7.159-3.7,5.425,1.77c-0.778,2.44-4.794,0.9-4.794,0.9l-0.631-2.67z"/>
540 |     </g>
541 |     <g id="g722" fill="#000">
542 |     <path id="path724" d="m64.376,139.45s4.359-4.9,5.425,1.76c0.406,2.54-4.793,0.9-4.793,0.9l-0.632-2.66z"/>
543 |     </g>
544 |     <g id="g726" fill="#000">
545 |     <path id="path728" d="m26.834,156s5.228-0.23,4.076,1.32c-1.153,1.55-3.602,0.68-3.602,0.68l-0.474-2z"/>
546 |     </g>
547 |     <g id="g730" stroke-width="0.1" stroke="#000" fill="#FFF">
548 |     <path id="path732" d="m62.434,34.603s-0.726,0.665-0.727-0.406c0-1.07,17.484-14.334,26.327-15.718,0,0-16.099,6.729-25.6,16.124z"/>
549 |     </g>
550 |     <g id="g734" fill="#000">
551 |     <path id="path736" d="m65.4,98.4s22.001,22.4,31.201,26c0,0,9.199,11.2,5.199,37.2,0,0-3.199,7.6-6.399-13.2,0,0,3.2-25.2-8-9.2,0,0-8.401-9.9-2.001-9.6,0,0,3.201,2,3.601,0.4s-7.601-15.2-24.801-29.6,1.2-2,1.2-2z"/>
552 |     </g>
553 |     <g id="g738" stroke-width="0.1" stroke="#000" fill="#FFF">
554 |     <path id="path740" d="m7,137.2s-0.2-1.8,1.6-1,96,7,127.6,31c0,0-45.199-23.2-129.2-30z"/>
555 |     </g>
556 |     <g id="g742" stroke-width="0.1" stroke="#000" fill="#FFF">
557 |     <path id="path744" d="m17.4,132.8s-0.2-1.8,1.6-1,138.4-0.2,162,32.2c0,0-22-25.2-163.6-31.2z"/>
558 |     </g>
559 |     <g id="g746" stroke-width="0.1" stroke="#000" fill="#FFF">
560 |     <path id="path748" d="m29,128.8s-0.2-1.8,1.6-1,175.2-12.2,198.8,20.2c0,0-9.6-25.6-200.4-19.2z"/>
561 |     </g>
562 |     <g id="g750" stroke-width="0.1" stroke="#000" fill="#FFF">
563 |     <path id="path752" d="m39,124s-0.2-1.8,1.6-1,124-37.8,147.6-5.4c0,0-13.4-24.6-149.2,6.4z"/>
564 |     </g>
565 |     <g id="g754" stroke-width="0.1" stroke="#000" fill="#FFF">
566 |     <path id="path756" d="m-19,146.8s-0.2-1.8,1.6-1,19.6,3,21.6,41.8c0,0-7.2-42-23.2-40.8z"/>
567 |     </g>
568 |     <g id="g758" stroke-width="0.1" stroke="#000" fill="#FFF">
569 |     <path id="path760" d="m-27.8,148.4s-0.2-1.8,1.6-1,16-3.8,13.2,35c0,0,1.2-35.2-14.8-34z"/>
570 |     </g>
571 |     <g id="g762" stroke-width="0.1" stroke="#000" fill="#FFF">
572 |     <path id="path764" d="m-35.8,148.8s-0.2-1.8,1.6-1,17.2,1.4,4.8,23.8c0,0,9.6-24-6.4-22.8z"/>
573 |     </g>
574 |     <g id="g766" stroke-width="0.1" stroke="#000" fill="#FFF">
575 |     <path id="path768" d="m11.526,104.46s-0.444,2,1.105,0.79c16.068-12.628,48.51-71.53,104.2-77.164,0,0-38.312-12.11-105.3,76.374z"/>
576 |     </g>
577 |     <g id="g770" stroke-width="0.1" stroke="#000" fill="#FFF">
578 |     <path id="path772" d="m22.726,102.66s-1.363-1.19,0.505-1.81c1.868-0.63,114.31-73.13,153.6-65.164,0,0-27.11-7.51-154.1,66.974z"/>
579 |     </g>
580 |     <g id="g774" stroke-width="0.1" stroke="#000" fill="#FFF">
581 |     <path id="path776" d="m1.885,108.77s-0.509,1.6,1.202,0.62c8.975-5.12,12.59-62.331,56.167-63.586,0,0-32.411-14.714-57.369,62.966z"/>
582 |     </g>
583 |     <g id="g778" stroke-width="0.1" stroke="#000" fill="#FFF">
584 |     <path id="path780" d="m-18.038,119.79s-1.077,1.29,0.876,1.03c10.246-1.33,31.651-42.598,76.09-37.519,0,0-31.966-14.346-76.966,36.489z"/>
585 |     </g>
586 |     <g id="g782" stroke-width="0.1" stroke="#000" fill="#FFF">
587 |     <path id="path784" d="m-6.8,113.67s-0.811,1.47,1.058,0.84c9.799-3.27,22.883-47.885,67.471-51.432,0,0-34.126-7.943-68.529,50.592z"/>
588 |     </g>
589 |     <g id="g786" stroke-width="0.1" stroke="#000" fill="#FFF">
590 |     <path id="path788" d="m-25.078,124.91s-0.873,1.04,0.709,0.84c8.299-1.08,25.637-34.51,61.633-30.396,0,0-25.893-11.62-62.342,29.556z"/>
591 |     </g>
592 |     <g id="g790" stroke-width="0.1" stroke="#000" fill="#FFF">
593 |     <path id="path792" d="m-32.677,130.82s-1.005,1.05,0.586,0.93c4.168-0.31,34.806-33.39,53.274-17.89,0,0-12.015-18.721-53.86,16.96z"/>
594 |     </g>
595 |     <g id="g794" stroke-width="0.1" stroke="#000" fill="#FFF">
596 |     <path id="path796" d="m36.855,98.898s-1.201-1.355,0.731-1.74c1.932-0.384,122.63-58.097,160.59-45.231,0,0-25.94-10.874-161.32,46.971z"/>
597 |     </g>
598 |     <g id="g798" stroke-width="0.1" stroke="#000" fill="#FFF">
599 |     <path id="path800" d="m3.4,163.2s-0.2-1.8,1.6-1,17.2,1.4,4.8,23.8c0,0,9.6-24-6.4-22.8z"/>
600 |     </g>
601 |     <g id="g802" stroke-width="0.1" stroke="#000" fill="#FFF">
602 |     <path id="path804" d="m13.8,161.6s-0.2-1.8,1.6-1,19.6,3,21.6,41.8c0,0-7.2-42-23.2-40.8z"/>
603 |     </g>
604 |     <g id="g806" stroke-width="0.1" stroke="#000" fill="#FFF">
605 |     <path id="path808" d="m20.6,160s-0.2-1.8,1.6-1,26.4,4.2,50,36.6c0,0-35.6-36.8-51.6-35.6z"/>
606 |     </g>
607 |     <g id="g810" stroke-width="0.1" stroke="#000" fill="#FFF">
608 |     <path id="path812" d="m28.225,157.97s-0.437-1.76,1.453-1.2c1.89,0.55,22.324-1.35,60.421,32.83,0,0-46.175-34.94-61.874-31.63z"/>
609 |     </g>
610 |     <g id="g814" stroke-width="0.1" stroke="#000" fill="#FFF">
611 |     <path id="path816" d="m38.625,153.57s-0.437-1.76,1.453-1.2c1.89,0.55,36.724,5.05,88.422,40.03,0,0-74.176-42.14-89.875-38.83z"/>
612 |     </g>
613 |     <g id="g818" stroke-width="0.1" stroke="#000" fill="#FFF">
614 |     <path id="path820" d="m-1.8,142s-0.2-1.8,1.6-1,55.2,3.4,85.6,30.2c0,0-34.901-24.77-87.2-29.2z"/>
615 |     </g>
616 |     <g id="g822" stroke-width="0.1" stroke="#000" fill="#FFF">
617 |     <path id="path824" d="m-11.8,146s-0.2-1.8,1.6-1,26.4,4.2,50,36.6c0,0-35.6-36.8-51.6-35.6z"/>
618 |     </g>
619 |     <g id="g826" stroke-width="0.1" stroke="#000" fill="#FFF">
620 |     <path id="path828" d="m49.503,148.96s-0.565-1.72,1.361-1.3c1.926,0.41,36.996,2.34,91.116,33.44,0,0-77.663-34.4-92.477-32.14z"/>
621 |     </g>
622 |     <g id="g830" stroke-width="0.1" stroke="#000" fill="#FFF">
623 |     <path id="path832" d="m57.903,146.56s-0.565-1.72,1.361-1.3c1.926,0.41,36.996,2.34,91.116,33.44,0,0-77.063-34.8-92.477-32.14z"/>
624 |     </g>
625 |     <g id="g834" stroke-width="0.1" stroke="#000" fill="#FFF">
626 |     <path id="path836" d="m67.503,141.56s-0.565-1.72,1.361-1.3c1.926,0.41,44.996,4.74,134.72,39.04,0,0-120.66-40.4-136.08-37.74z"/>
627 |     </g>
628 |     <g id="g838" fill="#000">
629 |     <path id="path840" d="m-43.8,148.4s5.2-0.4,4,1.2-3.6,0.8-3.6,0.8l-0.4-2z"/>
630 |     </g>
631 |     <g id="g842" fill="#000">
632 |     <path id="path844" d="m-13,162.4s5.2-0.4,4,1.2-3.6,0.8-3.6,0.8l-0.4-2z"/>
633 |     </g>
634 |     <g id="g846" fill="#000">
635 |     <path id="path848" d="m-21.8,162s5.2-0.4,4,1.2-3.6,0.8-3.6,0.8l-0.4-2z"/>
636 |     </g>
637 |     <g id="g850" fill="#000">
638 |     <path id="path852" d="m-117.17,150.18s5.05,1.32,3.39,2.44-3.67-0.42-3.67-0.42l0.28-2.02z"/>
639 |     </g>
640 |     <g id="g854" fill="#000">
641 |     <path id="path856" d="m-115.17,140.58s5.05,1.32,3.39,2.44-3.67-0.42-3.67-0.42l0.28-2.02z"/>
642 |     </g>
643 |     <g id="g858" fill="#000">
644 |     <path id="path860" d="m-122.37,136.18s5.05,1.32,3.39,2.44-3.67-0.42-3.67-0.42l0.28-2.02z"/>
645 |     </g>
646 |     <g id="g862" fill="#CCC">
647 |     <path id="path864" d="m-42.6,211.2-5.6,2c-2,0-13.2,3.6-18.8,13.6,0,0,12.4-9.6,24.4-15.6z"/>
648 |     </g>
649 |     <g id="g866" fill="#CCC">
650 |     <path id="path868" d="m45.116,303.85c0.141,0.25,0.196,0.67,0.488,0.69,0.658,0.04,1.891,0.34,1.766-0.29-0.848-4.31-1.722-9.25-5.855-11.05-0.639-0.28-2.081,0.13-2.155,1.02-0.127,1.52-0.244,2.87,0.065,4.33,0.3,1.43,2.458,1.43,3.375,0.05,0.936,1.67,1.368,3.52,2.316,5.25z"/>
651 |     </g>
652 |     <g id="g870" fill="#CCC">
653 |     <path id="path872" d="m34.038,308.58c0.748,1.41,0.621,3.27,2.036,3.84,0.74,0.29,2.59-0.68,2.172-1.76-0.802-2.06-1.19-4.3-2.579-6.11-0.2-0.26,0.04-0.79-0.12-1.12-0.594-1.22-1.739-1.96-3.147-1.63-1.115,2.2,0.033,4.33,1.555,6.04,0.136,0.15-0.03,0.53,0.083,0.74z"/>
654 |     </g>
655 |     <g id="g874" fill="#CCC">
656 |     <path id="path876" d="m-5.564,303.39c-0.108-0.38-0.146-0.84,0.019-1.16,0.531-1.03,1.324-2.15,0.987-3.18-0.348-1.05-1.464-0.87-2.114-0.3-1.135,0.99-1.184,2.82-1.875,4.18-0.196,0.38-0.145,0.96-0.586,1.35-0.474,0.42-0.914,1.94-0.818,2.51,0.053,0.32-0.13,10.22,0.092,9.96,0.619-0.73,3.669-10.47,3.738-11.36,0.057-0.73,0.789-1.19,0.557-2z"/>
657 |     </g>
658 |     <g id="g878" fill="#CCC">
659 |     <path id="path880" d="m-31.202,296.6c2.634-2.5,5.424-5.46,4.982-9.17-0.116-0.98-1.891-0.45-2.078,0.39-0.802,3.63-2.841,6.29-5.409,8.68-2.196,2.05-4.058,8.39-4.293,8.9,3.697-5.26,5.954-8,6.798-8.8z"/>
660 |     </g>
661 |     <g id="g882" fill="#CCC">
662 |     <path id="path884" d="m-44.776,290.64c0.523-0.38,0.221-0.87,0.438-1.2,0.953-1.46,2.254-2.7,2.272-4.44,0.003-0.28-0.375-0.59-0.71-0.36-0.277,0.18-0.619,0.31-0.727,0.44-2.03,2.45-3.43,5.12-4.873,7.93-0.183,0.36-1.327,4.85-1.014,4.96,0.239,0.09,1.959-4.09,2.169-4.21,1.263-0.68,1.275-2.3,2.445-3.12z"/>
663 |     </g>
664 |     <g id="g886" fill="#CCC">
665 |     <path id="path888" d="m-28.043,310.18c0.444-0.87,2.02-2.07,1.907-2.96-0.118-0.93,0.35-2.37-0.562-1.68-1.257,0.94-4.706,2.29-4.976,8.1-0.026,0.57,2.948-2.12,3.631-3.46z"/>
666 |     </g>
667 |     <g id="g890" fill="#CCC">
668 |     <path id="path892" d="m-13.6,293c0.4-0.67,1.108-0.19,1.567-0.46,0.648-0.37,1.259-0.93,1.551-1.58,0.97-2.14,2.739-3.96,2.882-6.36-1.491-1.4-2.17,0.64-2.8,1.6-1.323-1.65-2.322,0.23-3.622,0.75-0.07,0.03-0.283-0.32-0.358-0.29-1.177,0.44-1.857,1.52-2.855,2.3-0.171,0.13-0.576-0.05-0.723,0.09-0.652,0.6-1.625,0.93-1.905,1.61-1.11,2.7-4.25,4.8-6.137,12.34,0.381,0.91,4.512-6.64,4.999-7.34,0.836-1.2,0.954,1.66,2.23,1,0.051-0.03,0.237,0.21,0.371,0.34,0.194-0.28,0.412-0.51,0.8-0.4,0-0.4-0.134-0.96,0.067-1.11,1.237-0.98,1.153-2.05,1.933-3.29,0.458,0.79,1.519,0.07,2,0.8z"/>
669 |     </g>
670 |     <g id="g894" fill="#CCC">
671 |     <path id="path896" d="m46.2,347.4s7.4-20.4,3-31.6c0,0,11.4,21.6,6.8,32.8,0,0-0.4-10.4-4.4-15.4,0,0-4,12.8-5.4,14.2z"/>
672 |     </g>
673 |     <g id="g898" fill="#CCC">
674 |     <path id="path900" d="m31.4,344.8s5.4-8.8-2.6-27.2c0,0-0.8,20.4-7.6,31.4,0,0,14.2-20.2,10.2-4.2z"/>
675 |     </g>
676 |     <g id="g902" fill="#CCC">
677 |     <path id="path904" d="m21.4,342.8s-0.2-20,0.2-23c0,0-3.8,16.6-14,26.2,0,0,14.4-12,13.8-3.2z"/>
678 |     </g>
679 |     <g id="g906" fill="#CCC">
680 |     <path id="path908" d="m11.8,310.8s6,13.6-4,32c0,0,6.4-12.2,1.6-19.2,0,0,2.6-3.4,2.4-12.8z"/>
681 |     </g>
682 |     <g id="g910" fill="#CCC">
683 |     <path id="path912" d="m-7.4,342.4s-1-15.6,0.8-17.8c0,0,0.2-6.4-0.2-7.4,0,0,4-6.2,4.2,1.2,0,0,1.4,7.8,4.2,12.4,0,0,3.6,5.4,3.4,11.8,0,0-10-30.2-12.4-0.2z"/>
684 |     </g>
685 |     <g id="g914" fill="#CCC">
686 |     <path id="path916" d="m-11,314.8s-6.6,10.8-8.4,29.8c0,0-1.4-6.2,2.4-20.6,0,0,4.2-15.4,6-9.2z"/>
687 |     </g>
688 |     <g id="g918" fill="#CCC">
689 |     <path id="path920" d="m-32.8,334.6s5-5.4,6.4-10.4c0,0,3.6-15.8-2.8-7.2,0,0,0.2,8-8,15.4,0,0,4.8-2.4,4.4,2.2z"/>
690 |     </g>
691 |     <g id="g922" fill="#CCC">
692 |     <path id="path924" d="m-38.6,329.6s3.4-17.4,4.2-18.2c0,0,1.8-3.4-1-0.2,0,0-8.8,19.2-12.8,25.8,0,0,8-9.2,9.6-7.4z"/>
693 |     </g>
694 |     <g id="g926" fill="#CCC">
695 |     <path id="path928" d="m-44.4,313s11.6-22.4-10.2,3.4c0,0,11-9.8,10.2-3.4z"/>
696 |     </g>
697 |     <g id="g930" fill="#CCC">
698 |     <path id="path932" d="m-59.8,298.4s4.8-18.8,7.4-18.6l1.6,1.6s-6,9.6-5.4,19.4c0,0-0.6-9.6-3.6-2.4z"/>
699 |     </g>
700 |     <g id="g934" fill="#CCC">
701 |     <path id="path936" d="m270.5,287s-12-10-14.5-13.5c0,0,13.5,18.5,13.5,25.5,0,0,2.5-7.5,1-12z"/>
702 |     </g>
703 |     <g id="g938" fill="#CCC">
704 |     <path id="path940" d="m276,265s-21-15-24.5-22.5c0,0,26.5,29.5,26.5,34,0,0,0.5-9-2-11.5z"/>
705 |     </g>
706 |     <g id="g942" fill="#CCC">
707 |     <path id="path944" d="m293,111s-12-8-13.5-6c0,0,10.5,6.5,13,15,0,0-1.5-9,0.5-9z"/>
708 |     </g>
709 |     <g id="g946" fill="#CCC">
710 |     <path id="path948" d="m301.5,191.5-17.5-12s19,17,19.5,21l-2-9z"/>
711 |     </g>
712 |     <g id="g950" stroke="#000">
713 |     <path id="path952" d="m-89.25,169,22,4.75"/>
714 |     </g>
715 |     <g id="g954" stroke="#000">
716 |     <path id="path956" d="m-39,331s-0.5-3.5-9.5,7"/>
717 |     </g>
718 |     <g id="g958" stroke="#000">
719 |     <path id="path960" d="m-33.5,336s2-6.5-4.5-2"/>
720 |     </g>
721 |     <g id="g962" stroke="#000">
722 |     <path id="path964" d="m20.5,344.5s1.5-11-10,2"/>
723 |     </g>
724 |   </g>
725 |   </svg>
726 | </template>
727 | 


--------------------------------------------------------------------------------
/src/directives/NodeIntersect.js:
--------------------------------------------------------------------------------
 1 | const setObserver = (el, observer, onIntersect) => {
 2 |   el._intersectionObserver = observer
 3 |   el._onIntersect = onIntersect
 4 | }
 5 | 
 6 | const extractOptions = (options) => {
 7 |   let observer
 8 |   let onIntersect
 9 |   if (options instanceof IntersectionObserver) {
10 |     observer = options
11 |   } else if (options && typeof options === 'object' && Object.prototype.hasOwnProperty.call(options, 'observer') && options.observer instanceof IntersectionObserver) {
12 |     observer = options.observer
13 |     if (Object.prototype.hasOwnProperty.call(options, 'onIntersect') && options.onIntersect instanceof Function) {
14 |       onIntersect = options.onIntersect
15 |     }
16 |   }
17 |   return { observer, onIntersect }
18 | }
19 | 
20 | export default {
21 |   inserted (el, { value: options }) {
22 |     const { observer, onIntersect } = extractOptions(options)
23 |     if (observer instanceof IntersectionObserver) {
24 |       observer.observe(el)
25 |     }
26 |     setObserver(el, observer, onIntersect)
27 |   },
28 |   update (el, { value: newOptions }) {
29 |     const { observer: newObserver, onIntersect: newOnIntersect } = extractOptions(newOptions)
30 |     const oldObserver = el._intersectionObserver
31 |     const isOldObserver = oldObserver instanceof IntersectionObserver
32 |     const isNewObserver = newObserver instanceof IntersectionObserver
33 | 
34 |     if (!isOldObserver && !isNewObserver) {
35 |       return false
36 |     }
37 | 
38 |     if (isOldObserver && isNewObserver && (oldObserver === newObserver)) {
39 |       setObserver(el, newObserver, newOnIntersect)
40 |       return false
41 |     }
42 | 
43 |     if (oldObserver && isOldObserver) {
44 |       oldObserver.unobserve(el)
45 |       setObserver(el, undefined, undefined)
46 |     }
47 | 
48 |     if (newObserver && isNewObserver) {
49 |       newObserver.observe(el)
50 |       setObserver(el, newObserver, newOnIntersect)
51 |     }
52 |   },
53 |   unbind (el) {
54 |     const cached = el._intersectionObserver
55 |     if (cached instanceof IntersectionObserver) {
56 |       cached.unobserve(el)
57 |     }
58 |     setObserver(el, undefined, undefined)
59 |   }
60 | }
61 | 


--------------------------------------------------------------------------------
/src/directives/NodeIntersect.ts:
--------------------------------------------------------------------------------
 1 | import { DirectiveBinding } from 'vue/types/options'
 2 | 
 3 | type onIntersectFunction = (isIntersecting: boolean) => void
 4 | 
 5 | interface HTMLBaseElementWithObserver extends HTMLBaseElement {
 6 |   _intersectionObserver?: IntersectionObserver
 7 |   _onIntersect?: onIntersectFunction
 8 | }
 9 | 
10 | const setObserver = (el: HTMLBaseElementWithObserver, observer?: IntersectionObserver, onIntersect?: onIntersectFunction) => {
11 |   el._intersectionObserver = observer
12 |   el._onIntersect = onIntersect
13 | }
14 | 
15 | function hasOwnProperty<X extends unknown, Y extends PropertyKey>(obj: X, prop: Y): obj is X & Record<Y, unknown> {
16 |   return Object.prototype.hasOwnProperty.call(obj, prop)
17 | }
18 | 
19 | const extractOptions = (options: unknown) => {
20 |   let observer: IntersectionObserver | undefined = undefined
21 |   let onIntersect: onIntersectFunction | undefined = undefined
22 |   if (options instanceof IntersectionObserver) {
23 |     observer = options
24 |   } else if (options && typeof options === 'object' && hasOwnProperty(options, 'observer') && options.observer instanceof IntersectionObserver) {
25 |     observer = options.observer
26 |     if (hasOwnProperty(options, 'onIntersect') && options.onIntersect instanceof Function) {
27 |       onIntersect = options.onIntersect as onIntersectFunction
28 |     }
29 |   }
30 |   return { observer, onIntersect }
31 | }
32 | 
33 | export default {
34 |   inserted(el: HTMLBaseElement, { value: options }: DirectiveBinding) {
35 |     const { observer, onIntersect } = extractOptions(options)
36 |     if (observer instanceof IntersectionObserver) {
37 |       observer.observe(el)
38 |     }
39 |     setObserver(el, observer, onIntersect)
40 |   },
41 |   update(el: HTMLBaseElementWithObserver, { value: newOptions }: DirectiveBinding) {
42 |     const { observer: newObserver, onIntersect: newOnIntersect } = extractOptions(newOptions)
43 |     const oldObserver = el._intersectionObserver
44 |     const isOldObserver = oldObserver instanceof IntersectionObserver
45 |     const isNewObserver = newObserver instanceof IntersectionObserver
46 | 
47 |     if (!isOldObserver && !isNewObserver) {
48 |       return false
49 |     }
50 | 
51 |     if (isOldObserver && isNewObserver && (oldObserver === newObserver)) {
52 |       setObserver(el, newObserver, newOnIntersect)
53 |       return false
54 |     }
55 | 
56 |     if (oldObserver && isOldObserver) {
57 |       oldObserver.unobserve(el)
58 |       setObserver(el, undefined, undefined)
59 |     }
60 | 
61 |     if (newObserver && isNewObserver) {
62 |       newObserver.observe(el)
63 |       setObserver(el, newObserver, newOnIntersect)
64 |     }
65 |   },
66 |   unbind(el: HTMLBaseElementWithObserver) {
67 |     const cached = el._intersectionObserver
68 |     if (cached instanceof IntersectionObserver) {
69 |       cached.unobserve(el)
70 |     }
71 |     setObserver(el, undefined, undefined)
72 |   }
73 | }
74 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import VueDragscroll from 'vue-dragscroll'
 3 | import App from '@/App.vue'
 4 | import router from '@/router'
 5 | import store from '@/store'
 6 | import NodeIntersect from '@/directives/NodeIntersect'
 7 | import '@/assets/main.sass'
 8 | 
 9 | Vue.config.productionTip = false
10 | Vue.use(VueDragscroll)
11 | Vue.directive('NodeIntersect', NodeIntersect)
12 | 
13 | new Vue({
14 |   router,
15 |   store,
16 |   render: h => h(App)
17 | }).$mount('#app')
18 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import VueRouter from 'vue-router'
 3 | import { routes } from './routes'
 4 | 
 5 | Vue.use(VueRouter)
 6 | 
 7 | const router = new VueRouter({
 8 |   mode: 'hash',
 9 |   base: process.env.BASE_URL,
10 |   routes
11 | })
12 | 
13 | export default router
14 | 


--------------------------------------------------------------------------------
/src/router/routes.js:
--------------------------------------------------------------------------------
  1 | import Home from '@/views/Home.vue'
  2 | import Examples from '@/views/Examples.vue'
  3 | import Example1 from '@/views/Example1.vue'
  4 | import Example2 from '@/views/Example2.vue'
  5 | import Example3 from '@/views/Example3.vue'
  6 | import Example4p1 from '@/views/Example4p1.vue'
  7 | import Example4p2 from '@/views/Example4p2.vue'
  8 | import Example4p3 from '@/views/Example4p3.vue'
  9 | import Example5 from '@/views/Example5.vue'
 10 | 
 11 | export const routes = [
 12 |   {
 13 |     path: '/',
 14 |     name: 'home',
 15 |     component: Home
 16 |   },
 17 |   {
 18 |     path: '/examples',
 19 |     name: 'examples',
 20 |     component: Examples,
 21 |     children: [
 22 |       {
 23 |         path: '/example1',
 24 |         name: 'example1',
 25 |         component: Example1,
 26 |         meta: {
 27 |           title: 'Example 1. Object Watcher',
 28 |           description: `
 29 | Item watcher over object-like variable can produce redundant runs.
 30 | Creating the separate primitive-type computed especially for the watcher solves the issue.
 31 |           `,
 32 |           instructions: `
 33 | Drag & drop items.
 34 | There're 2 watchers: the first one over an itemIds object, the second one - over itemIdsTrigger string.
 35 | Notice that both watchers run after drag & drop (console.log).
 36 | Check any item.
 37 | Notice that itemIds object watcher mistakenly detects the change during item check/uncheck while itemIdsTrigger string watcher runs only when it should.
 38 |           `
 39 |         }
 40 |       },
 41 |       {
 42 |         path: '/example2',
 43 |         name: 'example2',
 44 |         component: Example2,
 45 |         meta: {
 46 |           title: 'Example 2. Vuex + Object.freeze',
 47 |           description: `
 48 | Vuex makes each object property observable (recursively) by default.
 49 | In some cases that is not needed, and it leads to high memory usage.
 50 | One solution could be using Object.freeze before storing objects in vuex.
 51 |           `,
 52 |           instructions: `
 53 | Use chrome devtools memory tab. Add 100 items in a regular way. Take heap snapshot.
 54 | Clear regular items, add 100 items using Object.freeze. Take another heap snapshot.
 55 | Notice the difference.
 56 |           `
 57 |         }
 58 |       },
 59 |       {
 60 |         path: '/example3',
 61 |         name: 'example3',
 62 |         component: Example3,
 63 |         meta: {
 64 |           title: 'Example 3. Functional vs Map Getter',
 65 |           description: `
 66 | Functional getters are not cached. They are just plain functions and revaluated every time they are called.
 67 |           `,
 68 |           instructions: `
 69 | There's console.time invoked for itemById and itemByIds getters.
 70 | Notice the first getter was called 10 times, the second one was called only once.
 71 |           `
 72 |         }
 73 |       },
 74 |       {
 75 |         path: '/example4p1',
 76 |         name: 'example4p1',
 77 |         component: Example4p1,
 78 |         meta: {
 79 |           title: 'Example 4.1. Incorrect Component Code Splitting',
 80 |           description: `
 81 | Incorrect component-code splitting causes every <Item> component rerendering when only one item changes.
 82 |           `,
 83 |           instructions: `
 84 | Add some items. Check an item, rename it or move.
 85 | Notice that alongside with the target all the rest <Item> components trigger rerendering as well (use vue devtools performance component render tab).
 86 |           `
 87 |         }
 88 |       },
 89 |       {
 90 |         path: '/example4p2',
 91 |         name: 'example4p2',
 92 |         component: Example4p2,
 93 |         meta: {
 94 |           title: 'Example 4.2. Fixing Component Code Splitting - Stage 1',
 95 |           description: `
 96 | Renaming can be fixed by referring to the original itemsByIds instead of the getter.
 97 | But it does not solve rerendering that happens after checking an item.
 98 |           `,
 99 |           instructions: `
100 | Try to rename an item. It works correctly.
101 | Try to check an item. All the <Item> components mistakenly are rerendered.
102 |           `,
103 |           explanation: `
104 | Renaming works correctly because here we refer to the original itemsByIds object.
105 | Renaming mutation does not update the entire object - it updates only particular item inside.
106 | From the other side, isChecked computed refers to the entire checkedIds array while trying to find if the item is checked.
107 |           `
108 |         }
109 |       },
110 |       {
111 |         path: '/example4p3',
112 |         name: 'example4p3',
113 |         component: Example4p3,
114 |         meta: {
115 |           title: 'Example 4.3. Fixing Component Code Splitting - Stage 2',
116 |           description: `
117 | Rerendering can be fixed by providing exact <Item> related data by the parent component instead of searching the data from inside <Item>.
118 |           `,
119 |           instructions: `
120 | Try to rename, check or move an item. It works correctly - only the target item gets updated.
121 |           `,
122 |           explanation: `
123 | Here we provide the original item object and boolean isChecked prop by the parent list component.
124 | That granularity gives vue the possibility to detect if the <Item> has to be updated.
125 |           `
126 |         }
127 |       },
128 |       {
129 |         path: '/example5',
130 |         name: 'example5',
131 |         component: Example5,
132 |         meta: {
133 |           title: 'Example 5. Intersection Observer',
134 |           description: `
135 | Sometimes the DOM is heavy by itself.
136 | This trick shows how IntersectionObserver can be used to skip DOM updates for the nodes outside of the viewport.
137 |           `,
138 |           instructions: `
139 | Add some items. Each item toggles a heavy svg to blink every 500ms. Notice how lattency grows.
140 | Enable IntersectionObserver. It will hide svg-s outside of the viewport by using css display none.
141 | That helps performance a lot.
142 |           `
143 |         }
144 |       }
145 |     ]
146 |   }
147 | ]
148 | 


--------------------------------------------------------------------------------
/src/store/example1.js:
--------------------------------------------------------------------------------
 1 | export const state = () => ({
 2 |   items: [],
 3 |   checkedItemIds: []
 4 | })
 5 | 
 6 | export const getters = {
 7 |   extendedItems (state) {
 8 |     return state.items.map(item => ({
 9 |       ...item,
10 |       isChecked: state.checkedItemIds.includes(item.id)
11 |     }))
12 |   },
13 |   extendedItemsByIds (state, getters) {
14 |     return getters.extendedItems.reduce((out, item) => {
15 |       out[item.id] = item
16 |       return out
17 |     }, {})
18 |   }
19 | }
20 | 
21 | export const mutations = {
22 |   setItems (state, items) {
23 |     state.items = items
24 |   },
25 |   setCheckedItemIds (state, checkedItemIds) {
26 |     state.checkedItemIds = checkedItemIds
27 |   },
28 |   updateItemsOrder (state, { newIndex, oldIndex }) {
29 |     state.items.splice(newIndex, 0, state.items.splice(oldIndex, 1)[0])
30 |   },
31 |   setCheckedItemById (state, { id, isChecked }) {
32 |     const checkedItemIds = [...state.checkedItemIds]
33 |     const index = checkedItemIds.indexOf(id)
34 |     if (isChecked && index === -1) {
35 |       checkedItemIds.push(id)
36 |     } else if (!isChecked && index !== -1) {
37 |       checkedItemIds.splice(index, 1)
38 |     }
39 |     state.checkedItemIds = checkedItemIds
40 |   }
41 | }
42 | 
43 | export const actions = {
44 |   initializeItems ({ commit }, itemsCount = 5) {
45 |     const items = []
46 |     for (let i = 0; i < itemsCount; i++) {
47 |       items.push({
48 |         id: i + 1,
49 |         title: `Item ${i + 1}`
50 |       })
51 |     }
52 |     commit('setItems', items)
53 |     commit('setCheckedItemIds', [])
54 |   }
55 | }
56 | 


--------------------------------------------------------------------------------
/src/store/example2.js:
--------------------------------------------------------------------------------
 1 | export const state = () => ({
 2 |   regularItems: [],
 3 |   frozenItems: []
 4 | })
 5 | 
 6 | export const mutations = {
 7 |   setRegularItems (state, items) {
 8 |     state.regularItems = items
 9 |   },
10 |   addRegularItems (state, items) {
11 |     state.regularItems = [...state.regularItems, ...items]
12 |   },
13 |   setFrozenItems (state, items) {
14 |     state.frozenItems = items.map(Object.freeze)
15 |   },
16 |   addFrozenItems (state, items) {
17 |     state.frozenItems = [...state.frozenItems, ...items.map(Object.freeze)]
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/src/store/example3.js:
--------------------------------------------------------------------------------
 1 | export const state = () => ({
 2 |   items: []
 3 | })
 4 | 
 5 | export const getters = {
 6 |   itemById: (state) => (itemId) => {
 7 |     console.count('itemById')
 8 |     return state.items.find(item => item.id === itemId)
 9 |   },
10 |   itemsByIds: (state) => {
11 |     console.count('itemsByIds')
12 |     return state.items.reduce((out, item) => {
13 |       out[item.id] = item
14 |       return out
15 |     }, {})
16 |   }
17 | }
18 | 
19 | export const mutations = {
20 |   setItems (state, items) {
21 |     state.items = items
22 |   }
23 | }
24 | 
25 | export const actions = {
26 |   initializeItems ({ commit }, itemsCount = 10) {
27 |     const items = []
28 |     for (let i = 0; i < itemsCount; i++) {
29 |       items.push({
30 |         id: i + 1,
31 |         title: `Item ${i + 1}`
32 |       })
33 |     }
34 |     commit('setItems', items)
35 |   }
36 | }
37 | 


--------------------------------------------------------------------------------
/src/store/example4.js:
--------------------------------------------------------------------------------
 1 | export const state = () => ({
 2 |   ids: [],
 3 |   itemsByIds: {},
 4 |   checkedIds: []
 5 | })
 6 | 
 7 | export const getters = {
 8 |   checkedIdsRev (state) {
 9 |     return state.checkedIds.reduce((out, id) => {
10 |       out[id] = true
11 |       return out
12 |     }, {})
13 |   },
14 |   extendedItems (state, getters) {
15 |     return state.ids.map(id => ({
16 |       ...state.itemsByIds[id],
17 |       isChecked: !!getters.checkedIdsRev[id]
18 |     }))
19 |   },
20 |   extendedItemsByIds (_, getters) {
21 |     return getters.extendedItems.reduce((out, extendedItem) => {
22 |       out[extendedItem.id] = extendedItem
23 |       return out
24 |     }, {})
25 |   },
26 |   extendedItemsNested (state, getters) {
27 |     return state.ids.map(id => ({
28 |       id,
29 |       data: state.itemsByIds[id],
30 |       isChecked: !!getters.checkedIdsRev[id]
31 |     }))
32 |   },
33 |   extendedItemsByIdsNested (_, getters) {
34 |     return getters.extendedItemsNested.reduce((out, extendedItem) => {
35 |       out[extendedItem.id] = extendedItem
36 |       return out
37 |     }, {})
38 |   }
39 | }
40 | 
41 | export const mutations = {
42 |   reset (state) {
43 |     state.ids = []
44 |     state.itemsByIds = {}
45 |     state.checkedIds = []
46 |   },
47 |   addItems (state, items) {
48 |     const ids = [...state.ids]
49 |     const itemsByIds = { ...state.itemsByIds }
50 |     items.forEach((item) => {
51 |       if (!ids.includes(item.id)) {
52 |         ids.push(item.id)
53 |       }
54 |       itemsByIds[item.id] = Object.freeze(item)
55 |     })
56 |     state.ids = ids
57 |     state.itemsByIds = itemsByIds
58 |   },
59 |   updateItemsOrder (state, { newIndex, oldIndex }) {
60 |     state.ids.splice(newIndex, 0, state.ids.splice(oldIndex, 1)[0])
61 |   },
62 |   renameItem (state, { id, title }) {
63 |     const item = state.itemsByIds[id]
64 |     if (item) {
65 |       state.itemsByIds[id] = Object.freeze({
66 |         ...item,
67 |         title
68 |       })
69 |     }
70 |   },
71 |   setCheckedItemById (state, { id, isChecked }) {
72 |     const index = state.checkedIds.indexOf(id)
73 |     if (isChecked && index === -1) {
74 |       state.checkedIds.push(id)
75 |     } else if (!isChecked && index !== -1) {
76 |       state.checkedIds.splice(index, 1)
77 |     }
78 |   },
79 |   deleteCheckedItems (state) {
80 |     state.ids = state.ids.filter(id => !state.checkedIds.includes(id))
81 |     state.itemsByIds = state.ids.reduce((out, id) => {
82 |       out[id] = state.itemsByIds[id]
83 |       return out
84 |     }, {})
85 |     state.checkedIds = []
86 |   }
87 | }
88 | 


--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue'
 2 | import Vuex from 'vuex'
 3 | import * as example1 from './example1'
 4 | import * as example2 from './example2'
 5 | import * as example3 from './example3'
 6 | import * as example4 from './example4'
 7 | 
 8 | Vue.use(Vuex)
 9 | 
10 | export default new Vuex.Store({
11 |   modules: {
12 |     example1: { ...example1, namespaced: true },
13 |     example2: { ...example2, namespaced: true },
14 |     example3: { ...example3, namespaced: true },
15 |     example4: { ...example4, namespaced: true }
16 |   }
17 | })
18 | 


--------------------------------------------------------------------------------
/src/views/Example1.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <draggable
 4 |       :value="items"
 5 |       @change="updateItemsOrder"
 6 |     >
 7 |       <Item
 8 |         v-for="item in items"
 9 |         :key="item.id"
10 |         :item="item"
11 |         @set-checked="setCheckedItemById({ id: item.id, isChecked: $event })"
12 |       />
13 |     </draggable>
14 |     <p>
15 |       <strong>
16 |         Logs:
17 |       </strong>
18 |       <button @click="logs = []">
19 |         Clear Logs
20 |       </button>
21 |     </p>
22 |     <div v-for="log in logs" :key="log.id">
23 |       {{ log.time }} - {{ log.text }}
24 |     </div>
25 |   </div>
26 | </template>
27 | 
28 | <script>
29 | import draggable from 'vuedraggable'
30 | import Item from '@/components/Item'
31 | 
32 | export default {
33 |   components: {
34 |     draggable,
35 |     Item
36 |   },
37 |   data () {
38 |     return {
39 |       logs: []
40 |     }
41 |   },
42 |   computed: {
43 |     items () {
44 |       return this.$store.getters['example1/extendedItems']
45 |     },
46 |     itemIds () {
47 |       return this.items.map(item => item.id)
48 |     },
49 |     itemIdsTrigger () {
50 |       return this.itemIds.join('-')
51 |     }
52 |   },
53 |   watch: {
54 |     itemIds () {
55 |       this.log(`itemIds object-type watcher run for ${this.itemIds.join(', ')}`)
56 |     },
57 |     itemIdsTrigger () {
58 |       this.log(`itemIdsTrigger string-type watcher run for ${this.itemIds.join(', ')}`)
59 |     }
60 |   },
61 |   created () {
62 |     this.$store.dispatch('example1/initializeItems')
63 |   },
64 |   methods: {
65 |     updateItemsOrder (event) {
66 |       if (event.moved) {
67 |         this.$store.commit('example1/updateItemsOrder', event.moved)
68 |       }
69 |     },
70 |     setCheckedItemById ({ id, isChecked }) {
71 |       this.$store.commit('example1/setCheckedItemById', { id, isChecked })
72 |     },
73 |     log (text) {
74 |       this.logs.push({
75 |         id: this.logs.length,
76 |         time: (new Date()).toLocaleTimeString(),
77 |         text
78 |       })
79 |     }
80 |   }
81 | }
82 | </script>
83 | 


--------------------------------------------------------------------------------
/src/views/Example2.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <p>
 4 |       There're {{ regularItemsCount }} regular items in the store.
 5 |     </p>
 6 |     <p>
 7 |       Add <input v-model="addRegularItemsCount" type="number" style="width: 70px"> items in a regular way.
 8 |       <button @click="addRegularItems">
 9 |         Add
10 |       </button>
11 |       <button @click="clearRegularItems">
12 |         Clear regular items
13 |       </button>
14 |     </p>
15 |     <hr>
16 |     <p>
17 |       There're {{ frozenItemsCount }} frozen items in the store.
18 |     </p>
19 |     <p>
20 |       Add <input v-model="addFrozenItemsCount" type="number" style="width: 70px"> items, apply Object.freeze for each.
21 |       <button @click="addFrozenItems">
22 |         Add
23 |       </button>
24 |       <button @click="clearFrozenItems">
25 |         Clear frozen items
26 |       </button>
27 |     </p>
28 |   </div>
29 | </template>
30 | 
31 | <script>
32 | export default {
33 |   data () {
34 |     return {
35 |       addRegularItemsCount: 100,
36 |       addFrozenItemsCount: 100
37 |     }
38 |   },
39 |   computed: {
40 |     regularItemsCount () {
41 |       return this.$store.state.example2.regularItems.length
42 |     },
43 |     frozenItemsCount () {
44 |       return this.$store.state.example2.frozenItems.length
45 |     }
46 |   },
47 |   methods: {
48 |     addRegularItems () {
49 |       this.$store.commit('example2/addRegularItems', Array(Number(this.addRegularItemsCount)).fill().map(() => this.createHeavyItem(3)))
50 |     },
51 |     clearRegularItems () {
52 |       this.$store.commit('example2/setRegularItems', [])
53 |     },
54 |     addFrozenItems () {
55 |       this.$store.commit('example2/addFrozenItems', Array(Number(this.addFrozenItemsCount)).fill().map(() => this.createHeavyItem(3)))
56 |     },
57 |     clearFrozenItems () {
58 |       this.$store.commit('example2/setFrozenItems', [])
59 |     },
60 |     createHeavyItem (it, childrenCount = 10) {
61 |       return {
62 |         hashes: Array(10).fill('Lorem ipsum dolor sit amet.'),
63 |         children: it ? Array(childrenCount).fill().map(() => this.createHeavyItem(it - 1, childrenCount)) : []
64 |       }
65 |     }
66 |   }
67 | }
68 | </script>
69 | 


--------------------------------------------------------------------------------
/src/views/Example3.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div>
 4 |       <div><strong>ItemById</strong> functional getter</div>
 5 |       <div v-for="id in ids" :key="id">
 6 |         {{ (itemById(id) || {}).title }}
 7 |       </div>
 8 |     </div>
 9 |     <hr>
10 |     <div>
11 |       <div><strong>ItemsByIds</strong> map getter</div>
12 |       <div v-for="id in ids" :key="id">
13 |         {{ (itemsByIds[id] || {}).title }}
14 |       </div>
15 |     </div>
16 |   </div>
17 | </template>
18 | 
19 | <script>
20 | import { mapGetters } from 'vuex'
21 | 
22 | export default {
23 |   computed: {
24 |     ...mapGetters('example3', {
25 |       itemById: 'itemById',
26 |       itemsByIds: 'itemsByIds'
27 |     }),
28 |     ids () {
29 |       return this.$store.state.example3.items.map(item => item.id)
30 |     }
31 |   },
32 |   created () {
33 |     this.$store.dispatch('example3/initializeItems')
34 |   }
35 | }
36 | </script>
37 | 


--------------------------------------------------------------------------------
/src/views/Example4p1.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div>
 4 |       <button @click="addItems">Add 10 items</button>
 5 |       <button @click="reset">Reset store</button>
 6 |       <button v-if="checkedIds.length" @click="deleteCheckedItems">
 7 |         Delete {{ checkedIds.length }} checked item{{ checkedIds.length === 1 ? '' : 's' }}
 8 |       </button>
 9 |     </div>
10 |     <draggable
11 |       :value="ids"
12 |       @change="updateItemsOrder"
13 |     >
14 |       <ItemWithRenameById1
15 |         v-for="id in ids"
16 |         :key="id"
17 |         :item-id="id"
18 |         :class="{
19 |           'rr-item--highlight': highlightedItems[id] && (highlightedItems[id] + 1000 > currentTime)
20 |         }"
21 |         @set-checked="setCheckedItemById({ id, isChecked: $event })"
22 |         @rename="renameItem({ id, title: $event })"
23 |         @updated="highlightItem(id)"
24 |       />
25 |     </draggable>
26 |   </div>
27 | </template>
28 | 
29 | <script>
30 | import { mapState } from 'vuex'
31 | import uniqid from 'uniqid'
32 | import draggable from 'vuedraggable'
33 | import ItemWithRenameById1 from '@/components/ItemWithRenameById1'
34 | 
35 | export default {
36 |   components: {
37 |     draggable,
38 |     ItemWithRenameById1
39 |   },
40 |   data () {
41 |     return {
42 |       highlightedItems: {},
43 |       currentTime: (new Date()).getTime()
44 |     }
45 |   },
46 |   computed: {
47 |     ...mapState('example4', ['ids', 'checkedIds'])
48 |   },
49 |   mounted () {
50 |     this._interval = setInterval(() => {
51 |       this.currentTime = (new Date()).getTime()
52 |     }, 100)
53 |   },
54 |   beforeDestroy () {
55 |     this.reset()
56 |     this._interval && clearInterval(this._interval)
57 |   },
58 |   methods: {
59 |     updateItemsOrder (event) {
60 |       if (event.moved) {
61 |         this.$store.commit('example4/updateItemsOrder', event.moved)
62 |       }
63 |     },
64 |     setCheckedItemById ({ id, isChecked }) {
65 |       this.$store.commit('example4/setCheckedItemById', { id, isChecked })
66 |     },
67 |     renameItem ({ id, title }) {
68 |       this.$store.commit('example4/renameItem', { id, title })
69 |     },
70 |     addItems () {
71 |       this.$store.commit('example4/addItems', Array(10).fill().map(() => this.createHeavyItem(2)))
72 |     },
73 |     reset () {
74 |       this.$store.commit('example4/reset')
75 |     },
76 |     deleteCheckedItems () {
77 |       this.$store.commit('example4/deleteCheckedItems')
78 |     },
79 |     createHeavyItem (it, childrenCount = 10) {
80 |       const id = uniqid()
81 |       return {
82 |         id,
83 |         title: `Item ${id}`,
84 |         hashes: Array(10).fill('Lorem ipsum dolor sit amet.'),
85 |         children: it ? Array(childrenCount).fill().map(() => this.createHeavyItem(it - 1, childrenCount)) : []
86 |       }
87 |     },
88 |     highlightItem (id) {
89 |       this.highlightedItems = {
90 |         ...this.highlightedItems,
91 |         [id]: (new Date()).getTime()
92 |       }
93 |     }
94 |   }
95 | }
96 | </script>
97 | 


--------------------------------------------------------------------------------
/src/views/Example4p2.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div>
 4 |       <button @click="addItems">Add 10 items</button>
 5 |       <button @click="reset">Reset store</button>
 6 |       <button v-if="checkedIds.length" @click="deleteCheckedItems">
 7 |         Delete {{ checkedIds.length }} checked item{{ checkedIds.length === 1 ? '' : 's' }}
 8 |       </button>
 9 |     </div>
10 |     <draggable
11 |       :value="ids"
12 |       @change="updateItemsOrder"
13 |     >
14 |       <ItemWithRenameById2
15 |         v-for="id in ids"
16 |         :key="id"
17 |         :item-id="id"
18 |         :class="{
19 |           'rr-item--highlight': highlightedItems[id] && (highlightedItems[id] + 1000 > currentTime)
20 |         }"
21 |         @set-checked="setCheckedItemById({ id, isChecked: $event })"
22 |         @rename="renameItem({ id, title: $event })"
23 |         @updated="highlightItem(id)"
24 |       />
25 |     </draggable>
26 |   </div>
27 | </template>
28 | 
29 | <script>
30 | import { mapState } from 'vuex'
31 | import uniqid from 'uniqid'
32 | import draggable from 'vuedraggable'
33 | import ItemWithRenameById2 from '@/components/ItemWithRenameById2'
34 | 
35 | export default {
36 |   components: {
37 |     draggable,
38 |     ItemWithRenameById2
39 |   },
40 |   data () {
41 |     return {
42 |       highlightedItems: {},
43 |       currentTime: (new Date()).getTime()
44 |     }
45 |   },
46 |   computed: {
47 |     ...mapState('example4', ['ids', 'checkedIds'])
48 |   },
49 |   mounted () {
50 |     this._interval = setInterval(() => {
51 |       this.currentTime = (new Date()).getTime()
52 |     }, 100)
53 |   },
54 |   beforeDestroy () {
55 |     this.reset()
56 |     this._interval && clearInterval(this._interval)
57 |   },
58 |   methods: {
59 |     updateItemsOrder (event) {
60 |       if (event.moved) {
61 |         this.$store.commit('example4/updateItemsOrder', event.moved)
62 |       }
63 |     },
64 |     setCheckedItemById ({ id, isChecked }) {
65 |       this.$store.commit('example4/setCheckedItemById', { id, isChecked })
66 |     },
67 |     renameItem ({ id, title }) {
68 |       this.$store.commit('example4/renameItem', { id, title })
69 |     },
70 |     addItems () {
71 |       this.$store.commit('example4/addItems', Array(10).fill().map(() => this.createHeavyItem(2)))
72 |     },
73 |     reset () {
74 |       this.$store.commit('example4/reset')
75 |     },
76 |     deleteCheckedItems () {
77 |       this.$store.commit('example4/deleteCheckedItems')
78 |     },
79 |     createHeavyItem (it, childrenCount = 10) {
80 |       const id = uniqid()
81 |       return {
82 |         id,
83 |         title: `Item ${id}`,
84 |         hashes: Array(10).fill('Lorem ipsum dolor sit amet.'),
85 |         children: it ? Array(childrenCount).fill().map(() => this.createHeavyItem(it - 1, childrenCount)) : []
86 |       }
87 |     },
88 |     highlightItem (id) {
89 |       this.highlightedItems = {
90 |         ...this.highlightedItems,
91 |         [id]: (new Date()).getTime()
92 |       }
93 |     }
94 |   }
95 | }
96 | </script>
97 | 


--------------------------------------------------------------------------------
/src/views/Example4p3.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <div>
  4 |       <button @click="addItems">Add 10 items</button>
  5 |       <button @click="reset">Reset store</button>
  6 |       <button v-if="checkedIds.length" @click="deleteCheckedItems">
  7 |         Delete {{ checkedIds.length }} checked item{{ checkedIds.length === 1 ? '' : 's' }}
  8 |       </button>
  9 |     </div>
 10 |     <draggable
 11 |       :value="extendedItemsNested"
 12 |       @change="updateItemsOrder"
 13 |     >
 14 |       <ItemWithRename
 15 |         v-for="extendedItem in extendedItemsNested"
 16 |         :key="extendedItem.id"
 17 |         :item="extendedItem.data"
 18 |         :is-checked="extendedItem.isChecked"
 19 |         :class="{
 20 |           'rr-item--highlight': highlightedItems[extendedItem.id] && (highlightedItems[extendedItem.id] + 1000 > currentTime)
 21 |         }"
 22 |         @set-checked="setCheckedItemById({ id: extendedItem.id, isChecked: $event })"
 23 |         @rename="renameItem({ id: extendedItem.id, title: $event })"
 24 |         @updated="highlightItem(extendedItem.id)"
 25 |       />
 26 |     </draggable>
 27 |   </div>
 28 | </template>
 29 | 
 30 | <script>
 31 | import { mapGetters, mapState } from 'vuex'
 32 | import uniqid from 'uniqid'
 33 | import draggable from 'vuedraggable'
 34 | import ItemWithRename from '@/components/ItemWithRename'
 35 | 
 36 | export default {
 37 |   components: {
 38 |     draggable,
 39 |     ItemWithRename
 40 |   },
 41 |   data () {
 42 |     return {
 43 |       highlightedItems: {},
 44 |       currentTime: (new Date()).getTime()
 45 |     }
 46 |   },
 47 |   computed: {
 48 |     ...mapState('example4', ['checkedIds']),
 49 |     ...mapGetters('example4', {
 50 |       extendedItemsNested: 'extendedItemsNested'
 51 |     })
 52 |   },
 53 |   mounted () {
 54 |     this._interval = setInterval(() => {
 55 |       this.currentTime = (new Date()).getTime()
 56 |     }, 100)
 57 |   },
 58 |   beforeDestroy () {
 59 |     this.reset()
 60 |     this._interval && clearInterval(this._interval)
 61 |   },
 62 |   methods: {
 63 |     updateItemsOrder (event) {
 64 |       if (event.moved) {
 65 |         this.$store.commit('example4/updateItemsOrder', event.moved)
 66 |       }
 67 |     },
 68 |     setCheckedItemById ({ id, isChecked }) {
 69 |       this.$store.commit('example4/setCheckedItemById', { id, isChecked })
 70 |     },
 71 |     renameItem ({ id, title }) {
 72 |       this.$store.commit('example4/renameItem', { id, title })
 73 |     },
 74 |     addItems () {
 75 |       this.$store.commit('example4/addItems', Array(10).fill().map(() => this.createHeavyItem(2)))
 76 |     },
 77 |     reset () {
 78 |       this.$store.commit('example4/reset')
 79 |     },
 80 |     deleteCheckedItems () {
 81 |       this.$store.commit('example4/deleteCheckedItems')
 82 |     },
 83 |     createHeavyItem (it, childrenCount = 10) {
 84 |       const id = uniqid()
 85 |       return {
 86 |         id,
 87 |         title: `Item ${id}`,
 88 |         hashes: Array(10).fill('Lorem ipsum dolor sit amet.'),
 89 |         children: it ? Array(childrenCount).fill().map(() => this.createHeavyItem(it - 1, childrenCount)) : []
 90 |       }
 91 |     },
 92 |     highlightItem (id) {
 93 |       this.highlightedItems = {
 94 |         ...this.highlightedItems,
 95 |         [id]: (new Date()).getTime()
 96 |       }
 97 |     }
 98 |   }
 99 | }
100 | </script>
101 | 


--------------------------------------------------------------------------------
/src/views/Example5.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <p>
 4 |       <input v-model="itemsCount" :style="{ width: '100px' }" type="number">
 5 |       <button @click="isActive = !isActive">
 6 |         {{ isActive ? 'Hide Items' : `Show ${itemsCount} Items` }}
 7 |       </button>
 8 |     </p>
 9 |     <p>
10 |       <label>
11 |         <input v-model="intersectionObserverIsActive" type="checkbox">
12 |           Enable IntersectionObserver
13 |       </label>
14 |     </p>
15 |     <div v-if="isActive && Number(itemsCount)">
16 |       <div
17 |         v-for="i in Number(itemsCount)"
18 |         :key="i"
19 |         v-node-intersect="intersectionObserverIsActive ? intersectionObserver : undefined"
20 |         :class="{
21 |           'rr-intersectionable': intersectionObserverIsActive
22 |         }"
23 |       >
24 |         <HeavyItem />
25 |       </div>
26 |     </div>
27 |   </div>
28 | </template>
29 | 
30 | <script>
31 | import HeavyItem from '@/components/HeavyItem.vue'
32 | 
33 | export default {
34 |   components: {
35 |     HeavyItem
36 |   },
37 |   data () {
38 |     return {
39 |       itemsCount: 100,
40 |       isActive: false,
41 |       intersectionObserver: null,
42 |       intersectionObserverIsActive: false
43 |     }
44 |   },
45 |   mounted () {
46 |     this.intersectionObserver = new IntersectionObserver(this.handleIntersection)
47 |   },
48 |   methods: {
49 |     handleIntersection (entries) {
50 |       entries.forEach((entry) => {
51 |         const className = 'rr-intersectionable--invisible'
52 |         if (entry.isIntersecting && entry.target.classList.contains(className)) {
53 |           entry.target.classList.remove(className)
54 |         } else if (!entry.isIntersecting && !entry.target.classList.contains(className)) {
55 |           entry.target.classList.add(className)
56 |         }
57 |       })
58 |     }
59 |   }
60 | }
61 | </script>
62 | 


--------------------------------------------------------------------------------
/src/views/Examples.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h1>
 4 |       {{ $route.meta.title }}
 5 |     </h1>
 6 |     <p>
 7 |       {{ $route.meta.description }}
 8 |     </p>
 9 |     <p v-if="$route.meta.instructions">
10 |       <strong>Instructions: </strong>
11 |       {{ $route.meta.instructions }}
12 |     </p>
13 |     <p v-if="$route.meta.explanation">
14 |       <strong>Explanation: </strong>
15 |       {{ $route.meta.explanation }}
16 |     </p>
17 |     <p>
18 |       <router-link :to="{ name: 'home' }">
19 |         Back to Samples List
20 |       </router-link>
21 |     </p>
22 |     <hr />
23 |     <router-view />
24 |   </div>
25 | </template>
26 | 


--------------------------------------------------------------------------------
/src/views/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <h1>
 4 |       Vue.js Rerendering samples
 5 |     </h1>
 6 |     <div v-for="page in pages" :key="page.name">
 7 |       <h3>
 8 |         <router-link :to="page.name">
 9 |           {{ page.title }}
10 |         </router-link>
11 |       </h3>
12 |       <div>
13 |         {{ page.description }}
14 |       </div>
15 |     </div>
16 |   </div>
17 | </template>
18 | 
19 | <script>
20 | import { routes } from '@/router/routes'
21 | 
22 | export default {
23 |   computed: {
24 |     pages () {
25 |       const examples = routes.find(route => route.name === 'examples')
26 |       return ((examples || {}).children || []).map(route => ({
27 |         ...(route.meta || {}),
28 |         name: route.name
29 |       }))
30 |     }
31 |   }
32 | }
33 | </script>
34 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   publicPath: '/vue-rerendering-optimization/'
3 | }
4 | 


--------------------------------------------------------------------------------