planpostai/canvas-backend
3
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

all file added

Browse source
This commit is contained in:
Saimon8420 2024-12-25 18:13:00 +06:00
parent 670f493e4e
commit 2a2b0523db
117 changed files with 17660 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
.env Normal file
View file

@ -0,0 +1 @@
VITE_GOOGLE_FONT_API_KEY=AIzaSyBPOYGT26jwMjlDuf6sM5JwaZDkiYigeQg

24
.gitignore vendored Normal file
View file

@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

21
components.json Normal file
View file

@ -0,0 +1,21 @@
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "new-york",
"rsc": false,
"tsx": false,
"tailwind": {
"config": "tailwind.config.js",
"css": "src/index.css",
"baseColor": "slate",
"cssVariables": true,
"prefix": ""
},
"aliases": {
"components": "@/components",
"utils": "@/lib/utils",
"ui": "@/components/ui",
"lib": "@/lib",
"hooks": "@/hooks"
},
"iconLibrary": "lucide"
}

38
eslint.config.js Normal file
View file

@ -0,0 +1,38 @@
import js from '@eslint/js'
import globals from 'globals'
import react from 'eslint-plugin-react'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
export default [
{ ignores: ['dist'] },
{
files: ['**/*.{js,jsx}'],
languageOptions: {
ecmaVersion: 2020,
globals: globals.browser,
parserOptions: {
ecmaVersion: 'latest',
ecmaFeatures: { jsx: true },
sourceType: 'module',
},
},
settings: { react: { version: '18.3' } },
plugins: {
react,
'react-hooks': reactHooks,
'react-refresh': reactRefresh,
},
rules: {
...js.configs.recommended.rules,
...react.configs.recommended.rules,
...react.configs['jsx-runtime'].rules,
...reactHooks.configs.recommended.rules,
'react/jsx-no-target-blank': 'off',
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
},
]

13
index.html Normal file
View file

@ -0,0 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/src/assets/PlanPost AI_Logo.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>PlanPostAi Canvas</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>

22
jsconfig.json Normal file
View file

@ -0,0 +1,22 @@
{
"compilerOptions": {
"target": "ES2020",
"useDefineForClassFields": true,
"lib": [
"ES2020",
"DOM",
"DOM.Iterable"
],
"module": "ESNext",
"skipLibCheck": true,
"baseUrl": ".",
"paths": {
"@/*": [
"./src/*"
]
}
},
"include": [
"src"
],
}

8603
package-lock.json generated Normal file
View file

File diff suppressed because it is too large Load diff

60
package.json Normal file
View file

@ -0,0 +1,60 @@
{
"name": "canvas",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint .",
"preview": "vite preview"
},
"dependencies": {
"@radix-ui/react-aspect-ratio": "^1.1.1",
"@radix-ui/react-checkbox": "^1.1.2",
"@radix-ui/react-collapsible": "^1.1.2",
"@radix-ui/react-dialog": "^1.1.2",
"@radix-ui/react-label": "^2.1.0",
"@radix-ui/react-popover": "^1.1.2",
"@radix-ui/react-scroll-area": "^1.2.1",
"@radix-ui/react-select": "^2.1.2",
"@radix-ui/react-separator": "^1.1.0",
"@radix-ui/react-slider": "^1.2.1",
"@radix-ui/react-slot": "^1.1.0",
"@radix-ui/react-switch": "^1.1.2",
"@radix-ui/react-tabs": "^1.1.2",
"@radix-ui/react-tooltip": "^1.1.4",
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.1",
"fabric": "^5.3.0",
"lodash": "^4.17.21",
"lucide-react": "^0.456.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-dropzone": "^14.3.5",
"react-image-file-resizer": "^0.4.8",
"react-rnd": "^10.4.13",
"react-window": "^1.8.10",
"tailwind-merge": "^2.5.4",
"tailwind-scrollbar": "^3.1.0",
"tailwind-scrollbar-hide": "^1.3.1",
"tailwindcss-animate": "^1.0.7",
"webfontloader": "^1.6.28"
},
"devDependencies": {
"@eslint/js": "^9.13.0",
"@types/react": "^18.3.12",
"@types/react-dom": "^18.3.1",
"@vitejs/plugin-react": "^4.3.3",
"@vitejs/plugin-react-swc": "^3.5.0",
"autoprefixer": "^10.4.20",
"eslint": "^9.13.0",
"eslint-plugin-react": "^7.37.2",
"eslint-plugin-react-hooks": "^5.0.0",
"eslint-plugin-react-refresh": "^0.4.14",
"globals": "^15.11.0",
"postcss": "^8.4.48",
"tailwindcss": "^3.4.14",
"vite": "^5.4.10"
}
}

6
postcss.config.js Normal file
View file

@ -0,0 +1,6 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

1
public/vite.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.5 KiB

4
src/App.css Normal file
View file

@ -0,0 +1,4 @@
.fabric-canvas-container {
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
border-radius: 0px;
}

85
src/App.jsx Normal file
View file

@ -0,0 +1,85 @@
import { useEffect, useState } from 'react';
import './App.css'
import Canvas from './components/Canvas'
import WebFont from 'webfontloader';
import Header from './components/Layouts/Header';
import SheetRightPanel from './components/Layouts/SheetRightPanel';
import SheetLeftPanel from './components/Layouts/SheetLeftPanel';
import CanvasCapture from "./components/CanvasCapture";
function App() {
useEffect(() => {
WebFont.load({
google: {
families: [
'Roboto:300,400,500,700',
'Open Sans:300,400,600,700',
'Lato:300,400,700',
'Montserrat:300,400,500,700',
'Raleway:300,400,500,700',
'Poppins:300,400,500,700',
'Merriweather:300,400,700',
'Playfair Display:400,500,700',
'Nunito:300,400,600,700',
'Oswald:300,400,500,600',
'Source Sans Pro:300,400,600,700',
'Ubuntu:300,400,500,700',
'Noto Sans:300,400,500,700',
'Work Sans:300,400,500,700',
'Bebas Neue',
'Arimo:300,400,500,700',
'PT Sans:300,400,700',
'PT Serif:300,400,700',
'Titillium Web:300,400,600,700',
'Fira Sans:300,400,500,700',
'Karla:300,400,600,700',
'Josefin Sans:300,400,500,700',
'Cairo:300,400,600,700',
'Rubik:300,400,500,700',
'Mulish:300,400,500,700',
'IBM Plex Sans:300,400,500,700',
'Quicksand:300,400,500,700',
'Cabin:300,400,500,700',
'Heebo:300,400,500,700',
'Exo 2:300,400,500,700',
'Manrope:300,400,500,700',
'Jost:300,400,500,700',
'Anton',
'Asap:300,400,600,700',
'Baloo 2:300,400,500,700',
'Barlow:300,400,500,700',
'Cantarell:300,400,700',
'Chivo:300,400,500,700',
'Inter:300,400,500,700',
'Dosis:300,400,500,700',
'Crimson Text:300,400,600,700',
'Amatic SC:300,400,700',
'ABeeZee',
'Raleway Dots',
'Pacifico',
'Orbitron:300,400,500,700',
'Varela Round',
'Acme',
'Teko:300,400,500,700',
],
},
});
}, []);
return (
<div className="relative flex flex-col h-screen overflow-hidden">
<SheetLeftPanel />
<Header />
<SheetRightPanel />
<main className="flex-1 overflow-hidden mt-[60px]">
<div className="h-full overflow-auto">
<Canvas />
<CanvasCapture />
</div>
</main>
</div>
)
}
export default App

BIN
src/assets/PlanPost AI_Logo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 106 KiB

1
src/assets/react.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
Side by side

After

Width:  |  Height:  |  Size: 4 KiB

8
src/assets/svgs/Group 25367.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 15 KiB

5
src/assets/svgs/Group 25368.svg Normal file
View file

@ -0,0 +1,5 @@
<svg width="175" height="174" viewBox="0 0 175 174" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M19.7884 0H108.465C111.033 0 113.502 0.489583 115.877 1.47396C118.252 2.45833 120.346 3.85937 122.163 5.67708L168.721 52.2188C170.538 54.0365 171.939 56.1302 172.924 58.5052C173.908 60.8802 174.398 63.3542 174.398 65.9219V154.359C174.398 155.63 174.278 156.891 174.028 158.141C173.778 159.385 173.413 160.599 172.924 161.776C172.439 162.953 171.84 164.068 171.132 165.125C170.424 166.182 169.622 167.161 168.721 168.062C167.825 168.964 166.846 169.766 165.788 170.474C164.726 171.182 163.611 171.776 162.434 172.266C161.257 172.75 160.049 173.12 158.799 173.365C157.554 173.615 156.294 173.74 155.018 173.74H123.955C121.387 173.74 118.913 173.25 116.544 172.266C114.169 171.286 112.075 169.885 110.257 168.073L5.68945 63.7031C3.83529 61.849 2.41341 59.7135 1.42904 57.2865C0.439454 54.8646 -0.0345057 52.3438 0.00195292 49.724L0.408203 19.125C0.423828 17.8594 0.564454 16.6146 0.82487 15.3802C1.08529 14.1458 1.46029 12.9479 1.95508 11.7865C2.44987 10.625 3.05404 9.52083 3.76237 8.47917C4.4707 7.4375 5.278 6.46875 6.17383 5.58333C7.07487 4.69792 8.04883 3.90625 9.10091 3.20833C10.153 2.51562 11.2624 1.92708 12.429 1.44792C13.5957 0.968749 14.7988 0.609375 16.0384 0.364583C17.278 0.119791 18.528 0 19.7884 0Z"
fill="white" />
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

35
src/assets/svgs/Group 25369.svg Normal file
View file

@ -0,0 +1,35 @@
<svg width="80" height="13" viewBox="0 0 80 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="mask0_2_2" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="56" y="0" width="24" height="13">
<path d="M56.4791 0H79.026V12.6562H56.4791V0Z" fill="white"/>
</mask>
<g mask="url(#mask0_2_2)">
<mask id="mask1_2_2" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="56" y="0" width="23" height="13">
<path d="M62.8073 0H72.6614C76.1562 0 78.9895 2.83333 78.9895 6.32812C78.9895 9.82292 76.1562 12.6562 72.6614 12.6562H62.8073C59.3125 12.6562 56.4791 9.82292 56.4791 6.32812C56.4791 2.83333 59.3125 0 62.8073 0Z" fill="white"/>
</mask>
<g mask="url(#mask1_2_2)">
<path d="M56.4791 0H78.9739V12.6562H56.4791V0Z" fill="#FEAA0D"/>
</g>
</g>
<mask id="mask2_2_2" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="28" y="0" width="23" height="13">
<path d="M28.2396 0H50.7865V12.6562H28.2396V0Z" fill="white"/>
</mask>
<g mask="url(#mask2_2_2)">
<mask id="mask3_2_2" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="28" y="0" width="23" height="13">
<path d="M34.5677 0H44.4219C47.9167 0 50.75 2.83333 50.75 6.32812C50.75 9.82292 47.9167 12.6562 44.4219 12.6562H34.5677C31.073 12.6562 28.2396 9.82292 28.2396 6.32812C28.2396 2.83333 31.073 0 34.5677 0Z" fill="white"/>
</mask>
<g mask="url(#mask3_2_2)">
<path d="M28.2396 0H50.7344V12.6562H28.2396V0Z" fill="#68863C"/>
</g>
</g>
<mask id="mask4_2_2" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="23" height="13">
<path d="M0 0H22.5469V12.6562H0V0Z" fill="white"/>
</mask>
<g mask="url(#mask4_2_2)">
<mask id="mask5_2_2" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="23" height="13">
<path d="M6.32812 0H16.1823C19.6771 0 22.5104 2.83333 22.5104 6.32812C22.5104 9.82292 19.6771 12.6562 16.1823 12.6562H6.32812C2.83333 12.6562 0 9.82292 0 6.32812C0 2.83333 2.83333 0 6.32812 0Z" fill="white"/>
</mask>
<g mask="url(#mask5_2_2)">
<path d="M0 0H22.4948V12.6562H0V0Z" fill="#6E6557"/>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2 KiB

3
src/assets/svgs/Group 25370.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 260 KiB

3
src/assets/svgs/Group 25371.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="19" height="20" viewBox="0 0 19 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18.5521 9.74479L9.35417 19.0104L9.09375 18.7396L15.9375 11.8438L8.35938 17.9792L8.09375 17.7135L15.6562 11.5885L7.35417 16.9531L7.08333 16.6771L15.3333 11.3542L6.34896 15.9219L6.07292 15.6406L14.9635 11.1198L5.34375 14.8906L5.0625 14.599L5.06771 14.5938L14.5417 10.8802L4.33854 13.8594L4.04688 13.5625C4.05729 13.5521 4.07292 13.5469 4.08854 13.5417L14.0625 10.6302L3.33333 12.8281L3.03125 12.5208C3.05208 12.5052 3.07812 12.4948 3.10417 12.4896L13.5312 10.3542L2.32292 11.7917L2.02083 11.4844C2.05208 11.4583 2.08333 11.4427 2.11979 11.4375L12.9375 10.0521L1.3125 10.7552L1.01042 10.4479C1.04688 10.4115 1.08333 10.3958 1.13542 10.3906L12.2865 9.71875H0.296875L0 9.41146C0 9.41146 0 9.41146 0 9.40625L0.00520833 9.40104L8.94271 0L9.20312 0.270833L2.55729 7.26042L9.97396 1.04688L10.2396 1.31771L2.84896 7.51042L11.0052 2.09375L11.2708 2.36458L3.18229 7.73958L12.0312 3.13542L12.3073 3.41146L3.5625 7.96354L13.0573 4.17188L13.3438 4.46354L3.99479 8.19271L14.0781 5.20833L14.3802 5.51562L4.48958 8.4375L15.1042 6.24479L15.4167 6.5625H15.4115L5.04688 8.70833L16.1198 7.28125L16.4531 7.61458H16.4375L5.66667 9.00521L17.1406 8.30729L17.4896 8.66146C17.4792 8.66146 17.474 8.66667 17.4688 8.66667L6.34375 9.33854H18.1562L18.5521 9.74479Z" fill="#002FF8"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

3
src/assets/svgs/Group 25372.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="35" height="28" viewBox="0 0 35 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.5156 0C4.71875 0 0 4.71875 0 10.5156V27.0365H15.0208V12.0156H6.76042V10.5156C6.76042 7.61458 8.44271 5.26042 10.5156 5.26042H11.2656V0H10.5156ZM30.0365 0C24.2396 0 19.526 4.71875 19.526 10.5156V27.0365H34.5417V12.0156H26.2812V10.5156C26.2812 7.61458 27.9688 5.26042 30.0365 5.26042H30.7865V0H30.0365Z" fill="#363131"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 435 B

3
src/assets/svgs/Group 25373.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="115" height="116" viewBox="0 0 115 116" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M85.1975 14.2552C85.1975 15.1927 85.2861 16.1198 85.4684 17.0365C85.6559 17.9531 85.9215 18.8438 86.2809 19.7083C86.6402 20.5729 87.0777 21.3958 87.5986 22.1719C88.1194 22.9531 88.7132 23.6719 89.3746 24.3333C90.0361 24.9948 90.7548 25.5885 91.5309 26.1094C92.3121 26.625 93.135 27.0677 93.9996 27.4271C94.8642 27.7812 95.7548 28.0521 96.6715 28.2344C97.5882 28.4167 98.5152 28.5104 99.4527 28.5104H99.9632C100.588 28.5104 101.208 28.5729 101.823 28.6979C102.437 28.8177 103.031 29 103.604 29.2448C104.182 29.4844 104.729 29.7812 105.25 30.1354C105.765 30.4844 106.244 30.8854 106.682 31.3281C107.119 31.776 107.505 32.2604 107.849 32.7865C108.187 33.3125 108.474 33.8646 108.708 34.4427C108.937 35.026 109.109 35.625 109.218 36.2396C109.328 36.8542 109.38 37.474 109.369 38.099C109.349 39.0417 109.187 39.9583 108.895 40.8542C108.599 41.75 108.177 42.5781 107.63 43.349C107.088 44.1146 106.442 44.7865 105.692 45.3594C104.948 45.9323 104.13 46.3854 103.25 46.7135L9.65585 81.625C8.84856 82.0365 8.07252 82.5052 7.33814 83.0365C6.60377 83.5677 5.91106 84.151 5.26522 84.7917C4.61939 85.4271 4.02564 86.1094 3.48397 86.8385C2.94231 87.5677 2.45793 88.3333 2.03606 89.1354C1.61418 89.9427 1.25481 90.7708 0.957933 91.6302C0.661057 92.4896 0.4371 93.3646 0.275641 94.2604C0.114182 95.151 0.0256411 96.0521 0.00480773 96.9583C-0.0160256 97.8698 0.0308487 98.7708 0.145433 99.6719C1.30168 108.557 9.17668 115.036 18.135 115.036H88.7965C89.635 115.036 90.4684 114.995 91.3069 114.911C92.1402 114.828 92.9684 114.703 93.7913 114.542C94.609 114.375 95.4215 114.172 96.2236 113.932C97.0257 113.688 97.8173 113.406 98.5934 113.083C99.3642 112.76 100.125 112.406 100.864 112.01C101.599 111.615 102.317 111.182 103.015 110.719C103.713 110.25 104.385 109.75 105.036 109.219C105.682 108.688 106.302 108.125 106.895 107.531C107.489 106.943 108.052 106.318 108.583 105.672C109.114 105.026 109.614 104.349 110.078 103.656C110.546 102.958 110.974 102.24 111.369 101.5C111.765 100.76 112.125 100.005 112.442 99.2292C112.765 98.4531 113.046 97.6667 113.291 96.8646C113.536 96.0625 113.739 95.25 113.901 94.4271C114.067 93.6042 114.187 92.776 114.27 91.9427C114.354 91.1094 114.395 90.2708 114.395 89.4323V14.2552C114.395 13.3177 114.302 12.3906 114.119 11.474C113.937 10.5573 113.666 9.66667 113.307 8.79688C112.953 7.93229 112.51 7.11458 111.994 6.33333C111.474 5.55729 110.88 4.83854 110.218 4.17708C109.557 3.51562 108.838 2.92188 108.057 2.40104C107.281 1.88021 106.458 1.44271 105.593 1.08333C104.729 0.729167 103.838 0.458334 102.921 0.276042C102.005 0.093751 101.078 0 100.14 0H99.4527C98.5152 0 97.5882 0.093751 96.6715 0.276042C95.7548 0.458334 94.8642 0.729167 93.9996 1.08333C93.135 1.44271 92.3121 1.88021 91.5309 2.40104C90.7548 2.92188 90.0361 3.51562 89.3746 4.17708C88.7132 4.83854 88.1194 5.55729 87.5986 6.33333C87.0777 7.11458 86.6402 7.93229 86.2809 8.79688C85.9215 9.66146 85.6559 10.5573 85.4684 11.474C85.2861 12.3906 85.1975 13.3177 85.1975 14.2552Z" fill="#002FF8"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 3 KiB

22
src/assets/svgs/Group 25374.svg Normal file
View file

@ -0,0 +1,22 @@
<svg width="46" height="57" viewBox="0 0 46 57" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M30.1395 18.9298C27.846 18.6713 25.7787 19.7696 24.6482 21.4816C23.776 22.806 22.2578 23.5166 20.7073 23.5166H20.4489C18.7046 23.5166 17.1541 22.483 16.3789 20.9002C14.893 17.8961 11.7597 15.8934 8.14186 16.0872C3.65188 16.3133 0.0663717 20.0603 0.00176368 24.5826C-0.095136 29.3956 3.8134 33.3687 8.62639 33.3687C12.0504 33.3687 15.0222 31.366 16.4112 28.4588C17.1541 26.876 18.8015 25.9393 20.5781 25.9393H20.8042C22.3547 25.9393 23.776 26.7468 24.6805 28.0389C25.7464 29.5571 27.4907 30.5585 29.4935 30.5585C32.9175 30.5585 35.6631 27.5867 35.2755 24.0658C34.9848 21.3524 32.8205 19.1882 30.1395 18.9298Z" fill="white"/>
<path d="M33.4963 48.0017C32.075 47.8725 30.8153 48.5186 30.0723 49.5845C29.5555 50.4244 28.6187 50.8443 27.6497 50.8443H27.4882C26.3899 50.8443 25.4531 50.1983 24.9686 49.2615C24.0642 47.388 22.0937 46.1282 19.8326 46.2574C17.0546 46.3866 14.8258 48.7447 14.7612 51.5226C14.6966 54.4944 17.1515 56.9817 20.1556 56.9817C22.2553 56.9817 24.0965 55.7219 24.9686 53.9453C25.4531 52.9439 26.4868 52.3625 27.5528 52.3625H27.7143C28.6833 52.3625 29.5878 52.847 30.1369 53.6869C30.783 54.6236 31.8812 55.2374 33.141 55.2374C35.2729 55.2374 36.9526 53.3638 36.7265 51.1996C36.5327 49.5199 35.176 48.1955 33.4963 48.0017Z" fill="white"/>
<path d="M26.4563 13.4058C26.4563 14.924 25.9072 16.2484 24.8412 17.3144C23.7752 18.3803 22.4832 18.9295 20.965 18.9295C19.4468 18.9295 18.1547 18.3803 17.0564 17.3144C15.9905 16.2484 15.4413 14.924 15.4413 13.4058C15.4413 11.8876 15.9905 10.5955 17.0564 9.52959C18.1547 8.46363 19.4468 7.91449 20.965 7.91449C22.4832 7.91449 23.7752 8.46363 24.8412 9.52959C25.9072 10.5955 26.4563 11.8876 26.4563 13.4058Z" fill="white"/>
<path d="M38.73 14.2775C38.73 15.2142 38.407 16.0218 37.7287 16.7001C37.0826 17.3784 36.2751 17.7015 35.306 17.7015C34.3693 17.7015 33.5617 17.3784 32.8834 16.7001C32.205 16.0218 31.882 15.2142 31.882 14.2775C31.882 13.3084 32.205 12.5009 32.8834 11.8548C33.5617 11.1765 34.3693 10.8535 35.306 10.8535C36.2751 10.8535 37.0826 11.1765 37.7287 11.8548C38.407 12.5009 38.73 13.3084 38.73 14.2775Z" fill="white"/>
<path d="M30.7535 44.4162C30.7535 45.0622 30.5273 45.6114 30.0751 46.0636C29.6229 46.5158 29.0738 46.7419 28.4277 46.7419C27.814 46.7419 27.2648 46.5158 26.8126 46.0636C26.3604 45.6114 26.1343 45.0622 26.1343 44.4162C26.1343 43.7702 26.3604 43.221 26.8126 42.7688C27.2648 42.3166 27.814 42.0905 28.4277 42.0905C29.0738 42.0905 29.6229 42.3166 30.0751 42.7688C30.5273 43.221 30.7535 43.7702 30.7535 44.4162Z" fill="white"/>
<path d="M42.6083 30.1059C42.6083 30.752 42.3822 31.3011 41.9299 31.7533C41.4777 32.2055 40.9286 32.4317 40.2825 32.4317C39.6365 32.4317 39.0874 32.2055 38.6351 31.7533C38.1829 31.3011 37.9568 30.752 37.9568 30.1059C37.9568 29.4599 38.1829 28.9108 38.6351 28.4585C39.0874 28.0063 39.6365 27.7802 40.2825 27.7802C40.9286 27.7802 41.4777 28.0063 41.9299 28.4585C42.3822 28.9108 42.6083 29.4599 42.6083 30.1059Z" fill="white"/>
<mask id="mask0_52_2" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="35" y="16" width="11" height="9">
<path d="M35.3403 16.5391H46V24.8084H35.3403V16.5391Z" fill="white"/>
</mask>
<g mask="url(#mask0_52_2)">
<path d="M48.1319 20.2537C48.1319 21.1905 47.7765 22.0303 47.0982 22.6764C46.4199 23.3547 45.6123 23.71 44.6755 23.71C43.7065 23.71 42.8989 23.3547 42.2206 22.6764C41.5746 22.0303 41.2192 21.1905 41.2192 20.2537C41.2192 19.317 41.5746 18.4771 42.2206 17.8311C42.8989 17.1527 43.7065 16.7974 44.6755 16.7974C45.6123 16.7974 46.4199 17.1527 47.0982 17.8311C47.7765 18.4771 48.1319 19.317 48.1319 20.2537Z" fill="white"/>
</g>
<mask id="mask1_52_2" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="35" y="0" width="11" height="17">
<path d="M35.3403 0H46V16.5386H35.3403V0Z" fill="white"/>
</mask>
<g mask="url(#mask1_52_2)">
<path d="M47.938 7.5909C47.938 8.49535 47.615 9.23831 46.969 9.88434C46.3552 10.5304 45.58 10.8534 44.6755 10.8534C43.7711 10.8534 42.9958 10.5304 42.3498 9.88434C41.7361 9.23831 41.413 8.49535 41.413 7.5909C41.413 6.68644 41.7361 5.9112 42.3498 5.26516C42.9958 4.65142 43.7711 4.3284 44.6755 4.3284C45.58 4.3284 46.3552 4.65142 46.969 5.26516C47.615 5.9112 47.938 6.68644 47.938 7.5909Z" fill="white"/>
</g>
<path d="M13.5022 38.9895C13.5022 39.8293 13.1792 40.5723 12.5655 41.186C11.984 41.7997 11.2411 42.0905 10.3689 42.0905C9.52908 42.0905 8.78613 41.7997 8.1724 41.186C7.55866 40.5723 7.26794 39.8293 7.26794 38.9895C7.26794 38.1173 7.55866 37.4067 8.1724 36.7929C8.78613 36.1792 9.52908 35.8885 10.3689 35.8885C11.2411 35.8885 11.984 36.1792 12.5655 36.7929C13.1792 37.4067 13.5022 38.1173 13.5022 38.9895Z" fill="white"/>
<path d="M35.953 34.7894C34.7579 34.5632 33.6596 34.9832 32.9167 35.7261C31.9153 36.7598 30.5586 37.3412 29.1373 37.3412H28.6205C26.9731 37.3412 25.3903 36.566 24.3889 35.2093C23.4199 33.9172 21.8048 33.0774 19.9959 33.2389C17.5409 33.4004 15.5382 35.4677 15.4413 37.9549C15.3444 40.7652 17.6055 43.1233 20.4158 43.1233C22.0309 43.1233 23.4845 42.3157 24.3889 41.0882C25.3903 39.7316 27.0377 38.9886 28.7497 38.9886H29.105C30.5586 38.9886 31.9153 39.6347 32.949 40.636C33.5627 41.2174 34.4025 41.5728 35.307 41.5728C37.4389 41.5728 39.0863 39.6669 38.6664 37.4704C38.408 36.0814 37.3097 35.0155 35.953 34.7894Z" fill="white"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 5.2 KiB

3
src/assets/svgs/Group 25375.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="69" height="56" viewBox="0 0 69 56" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.1615 0.893838L64.3073 29.2949C64.9375 29.6334 65.5156 30.0501 66.0365 30.5449C66.5573 31.0397 67 31.5918 67.3698 32.2115C67.7396 32.8261 68.0208 33.4824 68.2135 34.1751C68.4062 34.8626 68.5 35.5709 68.5 36.2897V50.4251C68.5 50.8105 68.4635 51.1907 68.3802 51.5657C68.3021 51.9459 68.1875 52.3105 68.0312 52.6595C67.8802 53.0136 67.6927 53.347 67.4688 53.6595C67.2448 53.972 66.9896 54.2584 66.7083 54.5188C66.4271 54.7793 66.1198 55.0084 65.7865 55.2063C65.4583 55.4043 65.1094 55.5657 64.75 55.6907C64.3854 55.8157 64.0104 55.9043 63.6302 55.9511C63.25 55.998 62.8646 56.0084 62.4844 55.9772L10.6406 51.7584C9.92708 51.7115 9.22396 51.597 8.52604 51.4147C7.83333 51.2324 7.16146 50.9876 6.51562 50.6751C5.86458 50.3678 5.25521 50.0032 4.67188 49.5813C4.09375 49.1543 3.5625 48.6803 3.07292 48.1595C2.58333 47.6334 2.14583 47.0657 1.76042 46.4615C1.38021 45.8522 1.05729 45.2168 0.791667 44.5501C0.531251 43.8834 0.333333 43.1959 0.197917 42.4876C0.0625007 41.7845 0 41.0761 0 40.3574V7.58134C0 7.25842 0.0208333 6.9303 0.0625 6.60738C0.104167 6.28446 0.166667 5.96675 0.25 5.64905C0.333333 5.33655 0.437501 5.02405 0.557292 4.72196C0.682292 4.41988 0.822916 4.12821 0.984375 3.84696C1.14583 3.5605 1.32292 3.28967 1.52083 3.02926C1.71354 2.76884 1.92708 2.51884 2.15625 2.28446C2.38542 2.0553 2.625 1.83655 2.88021 1.63342C3.13542 1.4303 3.40625 1.248 3.6875 1.07613C3.96354 0.909463 4.25521 0.763631 4.55208 0.628213C4.85417 0.498005 5.16146 0.38863 5.47396 0.300088C5.78646 0.206338 6.10417 0.138631 6.42708 0.0865468C6.75 0.0396721 7.07292 0.00842278 7.40104 0.00321344C7.72396 -0.00720256 8.05208 0.00842244 8.375 0.0396718C8.69792 0.0761304 9.02083 0.128213 9.33854 0.206338C9.65625 0.279256 9.96875 0.373004 10.2708 0.487588C10.5781 0.60738 10.875 0.737589 11.1615 0.893838Z" fill="#002FF8"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.9 KiB

185
src/assets/svgs/Group 25376.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 147 KiB

3
src/assets/svgs/Group 25377.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="81" height="80" viewBox="0 0 81 80" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M61.6113 0C62.8457 0.020832 64.0697 0.161456 65.278 0.421874C66.4863 0.68229 67.6582 1.05729 68.7936 1.54687C69.929 2.03646 71.002 2.63021 72.0228 3.32812C73.0436 4.02604 73.9863 4.81771 74.8509 5.69792C75.7207 6.57812 76.4915 7.53646 77.1686 8.56771C77.8509 9.59896 78.4238 10.6875 78.8926 11.8333C79.3613 12.974 79.7103 14.1562 79.9499 15.3646C80.1895 16.5781 80.3092 17.8021 80.3092 19.0417C80.3092 20.276 80.1895 21.5 79.9499 22.7135C79.7103 23.9271 79.3613 25.1042 78.8926 26.2448C78.4238 27.3906 77.8509 28.4792 77.1686 29.5104C76.4915 30.5417 75.7207 31.5 74.8509 32.3802C73.9863 33.2656 73.0436 34.0521 72.0228 34.75C71.002 35.4531 69.929 36.0417 68.7936 36.5312C67.6582 37.0208 66.4863 37.3958 65.278 37.6562C64.0697 37.9167 62.8457 38.0573 61.6113 38.0781C60.8665 38.0781 60.1217 38.1146 59.377 38.1927C58.6322 38.2656 57.8926 38.375 57.1634 38.5208C56.429 38.6667 55.7051 38.8438 54.9915 39.0625C54.278 39.2812 53.5749 39.5312 52.8874 39.8177C52.1947 40.1042 51.5228 40.4219 50.8613 40.776C50.2051 41.125 49.5645 41.5104 48.9447 41.9271C48.3249 42.3385 47.7259 42.7865 47.1478 43.2604C46.5697 43.7292 46.0176 44.2344 45.4863 44.7604C44.9603 45.2865 44.4603 45.8438 43.9863 46.4167C43.5124 46.9948 43.0697 47.5938 42.653 48.2135C42.2363 48.8385 41.8561 49.4792 41.502 50.1354C41.1478 50.7917 40.8301 51.4688 40.5436 52.1562C40.2572 52.849 40.0072 53.5521 39.7884 54.2656C39.5749 54.9792 39.3926 55.7031 39.2467 56.4375C39.1009 57.1667 38.9915 57.9062 38.9186 58.651C38.8457 59.3906 38.8092 60.1354 38.8092 60.8854C38.8092 62.1354 38.6842 63.375 38.4447 64.599C38.1999 65.8281 37.8353 67.0156 37.3613 68.1719C36.8822 69.3281 36.2936 70.4271 35.6009 71.4635C34.9082 72.5052 34.1165 73.4688 33.2311 74.3542C32.3509 75.2396 31.3874 76.026 30.3457 76.724C29.3092 77.4167 28.2103 78.0052 27.054 78.4844C25.8978 78.9635 24.7103 79.3229 23.4811 79.5677C22.2572 79.8125 21.0176 79.9323 19.7676 79.9323C18.5176 79.9323 17.278 79.8125 16.0488 79.5677C14.8249 79.3229 13.6322 78.9635 12.4759 78.4844C11.3197 78.0052 10.2259 77.4167 9.18425 76.724C8.14258 76.0312 7.18425 75.2396 6.29883 74.3542C5.41341 73.4688 4.62695 72.5104 3.92904 71.4688C3.23633 70.4271 2.64779 69.3333 2.16862 68.1771C1.68945 67.0208 1.33008 65.8281 1.08529 64.6042C0.840494 63.375 0.720703 62.1406 0.720703 60.8854C0.720703 59.6354 0.845704 58.401 1.08529 57.1719C1.33008 55.9479 1.69466 54.7552 2.17383 53.599C2.653 52.4427 3.23633 51.349 3.93424 50.3073C4.62695 49.2656 5.41862 48.3073 6.30404 47.4219C7.18424 46.5365 8.14779 45.75 9.18945 45.0521C10.2259 44.3594 11.3249 43.7708 12.4811 43.2969C13.6374 42.8177 14.8301 42.4531 16.054 42.2135C17.2832 41.9688 18.5176 41.849 19.7728 41.849C20.5176 41.849 21.2624 41.8073 22.0072 41.7344C22.752 41.6615 23.4863 41.5521 24.2207 41.4062C24.9551 41.2604 25.679 41.0781 26.3926 40.8646C27.1113 40.6458 27.8092 40.3958 28.502 40.1094C29.1947 39.8229 29.8665 39.5 30.528 39.151C31.1842 38.7969 31.8249 38.4115 32.4447 37.9948C33.0697 37.5833 33.6686 37.1354 34.2415 36.6615C34.8197 36.1875 35.3717 35.6875 35.903 35.1562C36.429 34.6302 36.929 34.0729 37.403 33.4948C37.877 32.9167 38.3249 32.3177 38.7363 31.6979C39.153 31.0781 39.5384 30.4375 39.8874 29.776C40.2415 29.1146 40.5592 28.4427 40.8457 27.75C41.127 27.0625 41.3822 26.3594 41.5957 25.6406C41.8145 24.9271 41.9915 24.2031 42.1374 23.4688C42.2832 22.7344 42.3926 22 42.4655 21.2552C42.5384 20.5104 42.5749 19.7656 42.5749 19.0156C42.5749 17.7708 42.6999 16.5312 42.9447 15.3073C43.1895 14.0833 43.5488 12.8906 44.028 11.7396C44.5072 10.5833 45.0957 9.48958 45.7884 8.45312C46.4863 7.41146 47.2728 6.45312 48.1582 5.56771C49.0384 4.6875 50.002 3.89583 51.0384 3.20312C52.0801 2.51042 53.1738 1.92708 54.3301 1.44792C55.4863 0.968749 56.6738 0.609374 57.8978 0.364582C59.127 0.11979 60.3613 0 61.6113 0Z" fill="#0123B8"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 3.8 KiB

3
src/assets/svgs/Group 25378.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="80" height="123" viewBox="0 0 80 123" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M60.8906 0.635498C62.1406 0.635498 63.3802 0.755289 64.6042 1.00008C65.8281 1.24487 67.0208 1.60425 68.1771 2.08341C69.3281 2.56258 70.4271 3.14592 71.4688 3.84383C72.5052 4.53654 73.4688 5.323 74.349 6.20842C75.2344 7.09383 76.026 8.05217 76.7188 9.09383C77.4115 10.1355 78 11.2292 78.4792 12.3855C78.9583 13.5417 79.3177 14.7292 79.5625 15.9584C79.8073 17.1824 79.9271 18.422 79.9271 19.672V61.5105C79.9271 62.7605 79.8073 64.0001 79.5625 65.224C79.3177 66.4532 78.9583 67.6407 78.4792 68.797C78 69.9532 77.4115 71.047 76.7188 72.0886C76.026 73.1251 75.2344 74.0886 74.349 74.974C73.4688 75.8542 72.5052 76.6459 71.4688 77.3386C70.4271 78.0365 69.3281 78.6199 68.1771 79.099C67.0208 79.5782 65.8281 79.9376 64.6042 80.1824C63.3802 80.4272 62.1406 80.547 60.8906 80.547C60.1406 80.547 59.3958 80.5834 58.6562 80.6563C57.9115 80.7345 57.1719 80.8438 56.4375 80.9897C55.7083 81.1355 54.9844 81.3178 54.2656 81.5313C53.5521 81.7501 52.849 82.0001 52.1615 82.2865C51.4688 82.573 50.7917 82.8959 50.1354 83.2449C49.474 83.599 48.8385 83.9845 48.2135 84.3959C47.5938 84.8126 46.9948 85.2605 46.4167 85.7345C45.8385 86.2084 45.2865 86.7084 44.7604 87.2397C44.2292 87.7657 43.7292 88.3178 43.2552 88.8959C42.7812 89.474 42.3385 90.0782 41.9219 90.698C41.5104 91.3178 41.125 91.9584 40.7708 92.6199C40.4219 93.2761 40.1042 93.9532 39.8177 94.6459C39.5312 95.3334 39.2812 96.0365 39.0625 96.7501C38.849 97.4688 38.6667 98.1928 38.5208 98.9272C38.375 99.6563 38.2656 100.396 38.1927 101.141C38.1198 101.885 38.0833 102.63 38.0885 103.375C38.0885 104.625 37.9635 105.865 37.7188 107.094C37.474 108.318 37.1146 109.51 36.6354 110.667C36.1562 111.818 35.5729 112.917 34.875 113.958C34.1823 114.995 33.3906 115.958 32.5104 116.844C31.625 117.729 30.6615 118.516 29.6198 119.214C28.5833 119.906 27.4844 120.495 26.3281 120.969C25.1719 121.448 23.9844 121.813 22.7552 122.052C21.5312 122.297 20.2917 122.422 19.0417 122.422C17.7917 122.422 16.5521 122.297 15.3281 122.052C14.099 121.807 12.9062 121.448 11.7552 120.969C10.599 120.49 9.5 119.906 8.46354 119.208C7.42188 118.516 6.45833 117.724 5.57812 116.839C4.69271 115.958 3.90104 114.995 3.20833 113.953C2.51563 112.912 1.92708 111.818 1.44792 110.662C0.96875 109.505 0.609375 108.313 0.364583 107.089C0.119791 105.859 0 104.625 0 103.375C0 102.12 0.125001 100.885 0.364583 99.6563C0.609375 98.4324 0.97396 97.2397 1.45312 96.0834C1.93229 94.9324 2.51563 93.8334 3.21354 92.7917C3.90625 91.7553 4.69792 90.7917 5.58333 89.9063C6.46354 89.0261 7.42708 88.2345 8.46875 87.5417C9.51042 86.8438 10.6042 86.2605 11.7604 85.7813C12.9167 85.3022 14.1094 84.9428 15.3333 84.698C16.5625 84.4532 17.7969 84.3334 19.0521 84.3334C19.7969 84.3334 20.5417 84.297 21.2865 84.224C22.026 84.1511 22.7656 84.0417 23.5 83.8959C24.2292 83.7501 24.9531 83.5678 25.6667 83.349C26.3854 83.1355 27.0833 82.8803 27.776 82.5938C28.4635 82.3126 29.1406 81.9897 29.7969 81.6407C30.4583 81.2865 31.099 80.9063 31.7188 80.4897C32.3385 80.073 32.9375 79.6303 33.5156 79.1563C34.0938 78.6824 34.6458 78.1824 35.1719 77.6511C35.7031 77.1251 36.2031 76.573 36.6771 75.9949C37.151 75.4167 37.5938 74.8178 38.0104 74.198C38.4219 73.5782 38.8073 72.9376 39.1615 72.2761C39.5104 71.6199 39.8281 70.948 40.1146 70.2553C40.401 69.5678 40.651 68.8647 40.8698 68.1511C41.0885 67.4324 41.2708 66.7084 41.4167 65.9792C41.5625 65.2449 41.6719 64.5105 41.7448 63.7657C41.8177 63.0209 41.8542 62.2761 41.8542 61.5313V19.6876C41.8542 18.4376 41.974 17.198 42.2188 15.974C42.4583 14.7449 42.8177 13.5522 43.2969 12.3959C43.776 11.2449 44.3594 10.1459 45.0573 9.10425C45.75 8.06258 46.5365 7.09904 47.4219 6.21362C48.3073 5.33342 49.2708 4.54175 50.3073 3.84383C51.349 3.15112 52.4479 2.56258 53.599 2.08341C54.7552 1.60425 55.9479 1.24487 57.1719 1.00008C58.401 0.755289 59.6406 0.635498 60.8906 0.635498Z" fill="#0123B8"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 3.8 KiB

8
src/assets/svgs/Group 25379.svg Normal file
View file

@ -0,0 +1,8 @@
<svg width="33" height="109" viewBox="0 0 33 109" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M30.7759 108.01V15.3126" stroke="#DF8931" stroke-width="0.999467"/>
<path d="M30.7764 12.5625L29.2764 14.0625L30.7764 15.5625L32.2764 14.0625L30.7764 12.5625Z" fill="#DF8931" stroke="#DF8931" stroke-width="0.999467" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M16.9741 96.448V3.75007" stroke="#DF8931" stroke-width="0.999467"/>
<path d="M16.9741 0.999999L15.4741 2.5L16.9741 4L18.4689 2.5L16.9741 0.999999Z" fill="#DF8931" stroke="#DF8931" stroke-width="0.999467" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M2.5 108.01V15.3126" stroke="#DF8931" stroke-width="0.999467"/>
<path d="M2.5 12.5625L1 14.0625L2.5 15.5625L4 14.0625L2.5 12.5625Z" fill="#DF8931" stroke="#DF8931" stroke-width="0.999467" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 887 B

3
src/assets/svgs/Group 25380.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="194" height="319" viewBox="0 0 194 319" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M193.336 18.8446C192.867 19.704 191.117 26.9957 191.643 28.6207C192.206 28.3082 189.497 32.8602 190.909 38.3863C190.513 39.3967 193.096 40.4175 192.888 42.553C192.513 43.6363 191.143 43.2925 192.242 44.7561C192.482 49.5269 193.851 51.329 189.305 64.5529C188.398 64.329 185.95 78.8707 182.555 89.7457C183.049 91.7977 183.601 92.7352 182.456 96.5061C182.659 97.454 184.627 99.1415 183.607 101.647C182.534 106.376 182.607 117.386 183.966 119.157C184.747 118.662 182.028 128.043 183.466 128.543C183.002 131.777 184.867 133.652 180.883 140.506C177.768 143.959 181.534 146.699 178.492 151.61C179.737 153.516 176.648 154.798 178.888 163.793C179.185 164.324 177.471 167.089 176.961 169.444C178.362 172.246 176.82 172.058 176.357 176.938C173.825 180.61 173.914 182.313 171.518 187.834C172.216 187.423 173.081 190.152 171.034 196.563C170.903 197.678 168.127 198.761 167.45 201.303C166.528 202.449 168.409 204.261 166.325 204.324C166.591 206.933 164.903 206.313 164.487 207.449C165.815 208.964 164.82 208.652 165.898 209.511C165.836 213.584 162.638 219.475 162.841 224.543C161.737 229.517 162.549 231.543 160.956 236.99C162.096 237.636 161.278 238.412 159.971 242.819C161.367 244.272 160.857 247.595 159.403 251.485C161.883 254.152 160.471 262.511 159.117 265.85C159.528 268.61 158.867 271.537 157.19 274.001C156.023 279.704 155.591 284.418 150.758 290.214C149.403 294.673 149.528 297.574 146.851 303.527C145.789 305.631 144.502 303.287 144.747 307.037C143.242 308.095 145.195 311.407 141.721 314.235C142.299 317.631 143.872 319.053 137.414 318.188C94.7472 318.121 53.1326 318.839 8.48159 318.23C5.94514 317.808 -0.195489 320.912 1.12743 312.444C1.26284 219.527 0.184719 124.225 0.143052 31.5894C4.81493 -5.17622 -32.1694 2.77691 156.226 0.193575C167.159 0.625867 182.93 -0.801217 192.742 0.724826C193.758 1.4592 193.534 17.2769 193.336 18.8446Z" fill="black"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.9 KiB

119
src/assets/svgs/Group 25381.svg Normal file
View file

@ -0,0 +1,119 @@
<svg width="142" height="186" viewBox="0 0 142 186" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M101.224 160.28C103.729 161.669 105.115 164.35 105.302 168.665C106.401 164.778 108.276 162.993 110.943 162.882C109.443 162.026 108.276 160.606 107.594 158.392C106.891 156.108 106.891 153.823 107.573 151.507C108.719 147.691 111.479 145.803 114.104 147.017C116.656 148.191 118.25 152.149 117.828 156.29C117.5 159.495 115.578 163.493 111.807 163.136C113.26 163.85 114.479 165.056 115.276 167.095C116.073 169.125 116.234 171.339 115.839 173.584C115.156 177.328 112.865 179.898 110.146 179.644C107.5 179.399 105.651 176.511 104.995 171.37C104.292 173.798 103.24 175.543 101.625 176.4C100.406 177.082 99.1875 177.114 97.9687 176.44C95.1823 174.901 94.0156 170.91 94.25 167.809C94.5989 163.097 96.4948 160.606 100.078 159.963C96.8229 157.607 95.4896 153.649 96.4271 149.293C97.3125 145.263 100.01 142.876 102.677 143.693C105.557 144.621 107.266 148.476 107.078 152.467C106.844 157.036 104.365 160.463 101.224 160.28Z" fill="#04705F"/>
<path d="M83.7344 165.485C83.7344 161.137 86.0313 157.679 88.8854 157.679C91.7188 157.679 94.0833 161.209 94.0156 165.524C93.9687 169.983 91.7396 173.299 88.8385 173.338C86.0052 173.41 83.7344 169.84 83.7344 165.485Z" fill="#04705F"/>
<path d="M85.724 149.048C85.724 144.692 87.9271 141.345 90.7813 141.345C93.6615 141.345 95.9323 144.804 95.9115 149.119C95.8854 153.323 93.5469 156.854 90.7813 156.822C87.9479 156.822 85.75 153.395 85.724 149.048Z" fill="#04705F"/>
<path d="M121.411 166.666C124.172 166.698 126.396 170.125 126.375 174.298C126.349 178.502 124.031 182.001 121.271 181.929C118.083 181.826 116.234 177.653 116.328 174.115C116.448 169.911 118.599 166.627 121.411 166.666Z" fill="#04705F"/>
<path d="M108.552 135.601C108.531 139.774 106.26 143.201 103.521 143.13C100.755 143.058 98.4635 139.52 98.5312 135.316C98.6042 130.397 101.411 127.756 103.615 127.788C106.234 127.859 108.672 131.318 108.552 135.601Z" fill="#04705F"/>
<path d="M123.234 165.413C120.521 165.381 118.271 161.954 118.297 157.853C118.297 153.649 120.635 150.15 123.375 150.19C126.115 150.222 128.318 153.68 128.292 157.924C128.245 162.137 126.021 165.453 123.234 165.413Z" fill="#04705F"/>
<path d="M114.339 145.978C111.573 145.978 109.375 142.59 109.375 138.346C109.375 134.213 111.599 130.786 114.312 130.754C117.052 130.715 119.422 134.245 119.375 138.418C119.281 143.161 116.797 146.089 114.339 145.978Z" fill="#04705F"/>
<path d="M92.724 125.257C95.4167 125.257 97.5 128.43 97.5 132.531C97.5 136.601 95.3698 139.845 92.724 139.845C90.1719 139.845 87.974 136.49 87.9479 132.571C87.9479 128.501 90.0573 125.257 92.724 125.257Z" fill="#04705F"/>
<path d="M129.839 141.234C129.839 145.264 127.828 148.365 125.203 148.405C122.557 148.405 120.448 145.232 120.448 141.234C120.448 137.386 122.625 134.07 125.156 134.07C127.734 134.07 129.818 137.275 129.839 141.234Z" fill="#04705F"/>
<path d="M78.0885 169.657C75.5156 169.657 73.3854 166.413 73.4062 162.494C73.4323 158.638 75.5625 155.465 78.1146 155.505C80.6198 155.537 82.7031 158.71 82.7292 162.525C82.7292 166.341 80.5937 169.625 78.0885 169.657Z" fill="#04705F"/>
<path d="M84.599 146.12C84.599 150.079 82.5625 153.109 79.9427 153.109C77.4375 153.077 75.3281 149.865 75.375 146.089C75.3958 142.202 77.5313 138.989 80.0833 139.06C82.7292 139.132 84.7188 142.59 84.599 146.12Z" fill="#04705F"/>
<path d="M127.708 177.083C127.708 173.267 129.724 170.268 132.203 170.268C134.687 170.268 136.771 173.41 136.744 177.186C136.744 180.859 134.614 184.071 132.203 184.071C129.744 184.032 127.708 180.859 127.708 177.083Z" fill="#04705F"/>
<path d="M105.443 125.868C102.958 125.828 100.99 122.798 100.99 118.942C100.99 115.166 103.099 111.993 105.557 112.065C107.969 112.096 110.078 115.381 110.031 119.014C110.005 122.83 107.948 125.9 105.443 125.868Z" fill="#04705F"/>
<path d="M134.125 167.523C131.62 167.523 129.604 164.421 129.604 160.606C129.604 157.536 131.151 153.823 134.146 153.791C136.745 153.791 138.599 156.782 138.646 160.637C138.646 164.421 136.557 167.523 134.125 167.523Z" fill="#04705F"/>
<path d="M116.307 128.716C114.245 128.787 111.833 126.368 111.76 121.798C111.714 118.165 113.802 114.952 116.214 114.984C119.208 115.024 120.802 118.728 120.776 121.87C120.776 125.614 118.786 128.684 116.307 128.716Z" fill="#04705F"/>
<path d="M71.7448 179.113C71.7448 175.258 73.7135 172.338 76.2396 172.37C78.6979 172.41 80.6875 175.472 80.6667 179.185C80.6406 182.929 78.5833 186.07 76.125 185.999C73.4792 185.888 71.6302 182.461 71.7448 179.113Z" fill="#04705F"/>
<path d="M77.5052 129.683C77.5052 125.971 79.474 122.941 81.8594 122.901C84.25 122.901 86.2865 125.939 86.2865 129.572C86.3073 133.214 84.3177 136.244 81.9063 136.276C79.4011 136.315 77.5052 133.46 77.5052 129.683Z" fill="#04705F"/>
<path d="M90.2656 116.095C90.2656 112.422 92.1875 109.463 94.599 109.423C97.0104 109.391 99.026 112.453 99 116.126C98.9792 119.656 96.9427 122.726 94.6458 122.687C92.2552 122.687 90.2656 119.696 90.2656 116.095Z" fill="#04705F"/>
<path d="M136.047 150.721C133.63 150.721 131.76 147.874 131.76 144.232C131.76 140.663 133.724 137.632 136.021 137.632C138.364 137.672 140.307 140.631 140.354 144.193C140.375 147.731 138.385 150.721 136.047 150.721Z" fill="#04705F"/>
<path d="M131.385 124.797C131.385 128.47 129.51 131.318 127.125 131.318C124.781 131.318 122.792 128.359 122.792 124.829C122.792 121.227 124.828 118.197 127.172 118.236C129.464 118.268 131.385 121.267 131.385 124.797Z" fill="#04705F"/>
<path d="M67.25 153.434C69.4948 153.434 71.3698 156.219 71.3698 159.678C71.3698 163.208 69.5417 166.024 67.25 166.056C65.0729 166.095 63.0833 163.136 63.1042 159.781C63.1771 155.751 65.2135 153.434 67.25 153.434Z" fill="#04705F"/>
<path d="M69.1927 149.547C66.8959 149.547 65.0469 146.692 65.0729 143.201C65.0938 139.806 66.9896 136.958 69.2188 136.99C71.4167 137.029 73.3386 139.988 73.3125 143.304C73.2917 146.731 71.4427 149.547 69.1927 149.547Z" fill="#04705F"/>
<path d="M83.7813 107.035C86.0521 107.035 87.8333 109.709 87.8542 113.167C87.8802 116.555 86.0313 119.41 83.8281 119.41C81.6042 119.41 79.7083 116.483 79.7292 113.136C79.7552 109.812 81.6042 107.035 83.7813 107.035Z" fill="#04705F"/>
<path d="M111.339 102.537C111.339 105.964 109.609 108.606 107.359 108.606C105.135 108.606 103.354 105.925 103.354 102.537C103.333 99.261 105.208 96.4052 107.359 96.4449C109.583 96.4449 111.339 99.15 111.339 102.537Z" fill="#04705F"/>
<path d="M65.3281 182.215C63.1302 182.215 61.3698 179.573 61.3489 176.257C61.3229 172.87 63.0833 170.157 65.3073 170.086C67.4114 170.054 69.2864 172.838 69.3125 176.083C69.3333 179.43 67.552 182.215 65.3281 182.215Z" fill="#04705F"/>
<path d="M118.177 111.422C115.979 111.422 114.219 108.78 114.198 105.465C114.172 102.077 115.932 99.3641 118.156 99.2927C120.26 99.261 122.135 102.038 122.161 105.29C122.182 108.638 120.401 111.422 118.177 111.422Z" fill="#04705F"/>
<path d="M133.938 127.756C133.938 124.44 135.719 121.727 137.896 121.727C140.047 121.727 141.896 124.543 141.875 127.756C141.849 131.032 140.026 133.785 137.896 133.817C135.786 133.856 133.938 131.032 133.938 127.756Z" fill="#04705F"/>
<path d="M75 126.828C74.9323 130.183 73.125 132.785 70.9479 132.714C68.7969 132.642 67.0364 129.755 67.1094 126.51C67.2031 123.186 69.0521 120.553 71.2083 120.696C73.3594 120.838 75.0677 123.615 75 126.828Z" fill="#04705F"/>
<path d="M96.5886 93.6921C98.6719 93.6921 100.453 96.4448 100.427 99.618C100.406 102.823 98.6511 105.464 96.5417 105.464C94.4792 105.464 92.724 102.791 92.7031 99.6497C92.6771 96.3734 94.4115 93.6921 96.5886 93.6921Z" fill="#04705F"/>
<path d="M125.224 108.32C125.224 105.108 126.938 102.537 129.042 102.537C131.172 102.537 132.953 105.219 132.885 108.423C132.792 111.708 131.219 114.056 129.089 114.167C126.984 114.27 125.224 111.565 125.224 108.32Z" fill="#04705F"/>
<path d="M76.6615 110.28C76.6615 113.278 75.0208 115.809 73.0573 115.841C71.0417 115.88 69.3333 113.278 69.3333 110.208C69.3333 107.178 71.0208 104.647 73.0313 104.679C75.0469 104.719 76.6615 107.21 76.6615 110.28Z" fill="#04705F"/>
<path d="M85.724 91.1616C87.7135 91.1616 89.375 93.589 89.375 96.5877C89.375 99.618 87.6927 102.18 85.7031 102.149C83.7552 102.109 82.1667 99.6497 82.1406 96.6908C82.1406 93.589 83.7083 91.1616 85.724 91.1616Z" fill="#04705F"/>
<path d="M61.8854 140.377C61.8646 143.344 60.25 145.763 58.3021 145.763C56.3594 145.732 54.724 143.233 54.724 140.345C54.7448 137.347 56.4323 134.816 58.375 134.887C60.2969 134.887 61.9115 137.418 61.8854 140.377Z" fill="#04705F"/>
<path d="M56.5 151.332C58.4427 151.364 60.0365 153.823 60.0156 156.782C59.9896 159.749 58.349 162.24 56.4323 162.208C54.4635 162.169 52.8021 159.606 52.849 156.639C52.8958 153.72 54.5573 151.293 56.5 151.332Z" fill="#04705F"/>
<path d="M54.5366 178.431C52.5939 178.431 51.0679 176.186 51.0679 173.227C51.0679 170.268 52.5939 167.912 54.4897 167.912C56.3595 167.912 57.9533 170.3 57.9793 173.155C58.0002 176.043 56.4533 178.431 54.5366 178.431Z" fill="#04705F"/>
<path d="M112.724 85.9576C112.724 88.8055 111.198 91.2012 109.349 91.233C107.479 91.2726 105.859 88.8452 105.839 85.9893C105.813 83.2129 107.385 80.7854 109.234 80.7854C111.198 80.7457 112.724 82.9987 112.724 85.9576Z" fill="#04705F"/>
<path d="M116.682 88.7738C116.703 86.029 118.297 83.673 120.099 83.673C121.995 83.673 123.635 86.2432 123.562 89.0911C123.495 91.9469 121.927 94.1919 120.052 94.1602C118.109 94.0888 116.656 91.7724 116.682 88.7738Z" fill="#04705F"/>
<path d="M56.8542 123.829C56.875 120.941 58.3958 118.657 60.2969 118.657C62.1198 118.657 63.7396 121.124 63.7135 123.9C63.6667 126.725 62.099 129.112 60.2708 129.112C58.4219 129.073 56.8281 126.613 56.8542 123.829Z" fill="#04705F"/>
<path d="M98.4375 88.2026C96.5886 88.2026 95.0886 85.918 95.0886 83.1018C95.0886 80.3174 96.5677 78.0406 98.3698 78.001C100.193 77.9692 101.813 80.3888 101.786 83.2129C101.766 85.9576 100.266 88.2026 98.4375 88.2026Z" fill="#04705F"/>
<path d="M134.193 91.7327C134.193 94.5885 132.792 96.7621 130.917 96.7621C129.089 96.7621 127.594 94.5171 127.594 91.7723C127.594 89.1307 129.115 86.7746 130.844 86.7429C132.672 86.7032 134.172 88.9482 134.193 91.7327Z" fill="#04705F"/>
<path d="M71.6302 93.7635C71.6511 91.0584 73.1511 88.8055 74.9323 88.8452C76.7083 88.8769 78.1823 91.1616 78.1615 93.8746C78.1354 96.5162 76.6146 98.793 74.9063 98.7612C73.0781 98.7216 71.6042 96.4766 71.6302 93.7635Z" fill="#04705F"/>
<path d="M65.3073 107.321C65.3073 109.954 63.8542 112.136 62.1198 112.096C60.3906 112.096 58.9375 109.883 58.9375 107.281C58.9375 104.608 60.4375 102.363 62.1667 102.394C63.901 102.466 65.3073 104.679 65.3073 107.321Z" fill="#04705F"/>
<path d="M87.599 84.9184C85.8906 84.9184 84.5052 82.7845 84.5052 80.1746C84.5052 77.5409 85.9115 75.399 87.599 75.399C89.3073 75.399 90.7813 77.644 90.7604 80.246C90.7604 82.8162 89.3281 84.9184 87.599 84.9184Z" fill="#04705F"/>
<path d="M48.5417 153.895C48.5417 156.465 47.2031 158.496 45.5677 158.496C43.9271 158.464 42.5677 156.362 42.5677 153.863C42.5677 151.404 43.9063 149.405 45.5417 149.365C47.25 149.365 48.5417 151.332 48.5417 153.895Z" fill="#04705F"/>
<path d="M47.5312 132.817C49.1719 132.817 50.5052 134.784 50.5312 137.275C50.5521 139.806 49.151 141.948 47.4844 141.948C45.8698 141.916 44.5573 139.917 44.5573 137.386C44.5365 134.784 45.8229 132.817 47.5312 132.817Z" fill="#04705F"/>
<path d="M40.8123 170.411C40.7914 167.88 42.0518 165.984 43.6925 165.953C45.3331 165.953 46.6456 167.88 46.6456 170.3C46.6456 172.695 45.3071 174.758 43.7393 174.798C42.1456 174.869 40.8383 172.91 40.8123 170.411Z" fill="#04705F"/>
<path d="M111.156 65.1656C112.698 65.126 114.057 67.1964 114.031 69.5128C114.031 71.9006 112.745 73.868 111.177 73.8997C109.656 73.9394 108.297 71.8689 108.297 69.5525C108.297 67.125 109.583 65.1656 111.156 65.1656Z" fill="#04705F"/>
<path d="M46.599 120.942C46.599 118.554 47.8594 116.555 49.4323 116.523C50.974 116.483 52.3333 118.514 52.3333 120.838C52.3333 123.258 51 125.297 49.4063 125.257C47.9063 125.257 46.599 123.226 46.599 120.942Z" fill="#04705F"/>
<path d="M122.068 68.196C123.703 68.196 124.875 70.084 124.854 72.5828C124.828 74.9389 123.562 76.8269 122.021 76.8269C120.521 76.8269 119.188 74.7961 119.188 72.5115C119.188 70.1237 120.474 68.196 122.068 68.196Z" fill="#04705F"/>
<path d="M64.0625 95.1201C62.4948 95.1201 61.2083 93.1607 61.2292 90.7729C61.2552 88.4882 62.5885 86.4891 64.0885 86.4891C65.6354 86.5288 66.8958 88.4168 66.8958 90.7729C66.8958 93.2638 65.7031 95.1201 64.0625 95.1201Z" fill="#04705F"/>
<path d="M76.7812 72.9398C78.349 72.9002 79.6146 74.7961 79.6146 77.1839C79.6354 79.54 78.3698 81.4994 76.8021 81.4994C75.349 81.5311 73.9948 79.5003 73.9688 77.287C73.9688 74.9389 75.2344 72.9716 76.7812 72.9398Z" fill="#04705F"/>
<path d="M103.099 66.5935C103.099 68.9813 101.906 70.7662 100.333 70.7265C98.8594 70.7265 97.5938 68.8385 97.5938 66.5935C97.5938 64.2692 98.9063 62.2781 100.427 62.3495C101.906 62.3812 103.099 64.3089 103.099 66.5935Z" fill="#04705F"/>
<path d="M132.839 79.4688C131.36 79.4688 130.099 77.5411 130.099 75.3279C130.099 73.0432 131.386 71.1234 132.886 71.1234C134.333 71.1552 135.578 73.0829 135.552 75.3279C135.578 77.6125 134.333 79.4688 132.839 79.4688Z" fill="#04705F"/>
<path d="M53.974 104.433C53.974 106.567 52.7552 108.463 51.375 108.463C49.9219 108.463 48.7031 106.607 48.6823 104.394C48.6563 102.252 49.9427 100.364 51.375 100.364C52.8021 100.435 53.974 102.252 53.974 104.433Z" fill="#04705F"/>
<path d="M89.5625 67.6248C88.1354 67.6248 86.9896 65.9113 86.9896 63.7377C86.9896 61.5641 88.1146 59.7792 89.5156 59.7395C90.9219 59.7078 92.1406 61.5641 92.1615 63.698C92.1615 65.8796 90.9948 67.6248 89.5625 67.6248Z" fill="#04705F"/>
<path d="M66.0312 78.0406C64.7187 78.0406 63.5729 76.3589 63.5729 74.3995C63.5729 72.4401 64.6979 70.6948 65.9844 70.6552C67.2708 70.6234 68.3958 72.329 68.4219 74.3281C68.4427 76.3985 67.3906 78.0406 66.0312 78.0406Z" fill="#04705F"/>
<path d="M34.7969 147.302C36.0573 147.334 37.1614 149.008 37.1614 150.975C37.1354 153.006 36.0104 154.648 34.7031 154.609C33.4583 154.577 32.3854 152.895 32.3854 151.007C32.3854 148.976 33.4844 147.302 34.7969 147.302Z" fill="#04705F"/>
<path d="M36.6198 138.172C35.3333 138.1 34.2813 136.347 34.3281 134.427C34.375 132.389 35.5469 130.786 36.8542 130.897C38.1198 131 39.1511 132.674 39.1042 134.602C39.0573 136.601 37.9323 138.243 36.6198 138.172Z" fill="#04705F"/>
<path d="M53.3177 91.5582C51.9844 91.59 50.9531 90.0193 50.9271 88.0281C50.9271 86.029 51.9583 84.4187 53.2708 84.3869C54.4896 84.3473 55.6094 86.029 55.6354 87.9171C55.6563 89.8765 54.6302 91.5186 53.3177 91.5582Z" fill="#04705F"/>
<path d="M30.5781 167.38C30.5781 165.453 31.6563 163.85 32.9219 163.882C34.1615 163.922 35.2396 165.556 35.2396 167.452C35.2396 169.3 34.0937 171.014 32.901 170.982C31.6354 170.942 30.5781 169.3 30.5781 167.38Z" fill="#04705F"/>
<path d="M78.7708 57.3201C80.0365 57.3201 81.0156 58.8194 81.0156 60.7788C81.0156 62.7065 80.0104 64.2375 78.7708 64.2692C77.5781 64.3089 76.474 62.6668 76.4531 60.8502C76.4271 58.8828 77.4844 57.3201 78.7708 57.3201Z" fill="#04705F"/>
<path d="M38.5677 121.37C37.3021 121.37 36.3177 119.871 36.3177 117.911C36.3177 115.983 37.3229 114.452 38.5677 114.413C39.7604 114.381 40.8594 116.023 40.8854 117.84C40.9063 119.799 39.8542 121.41 38.5677 121.37Z" fill="#04705F"/>
<path d="M123.964 59.3509C122.719 59.3826 121.667 57.8198 121.667 55.8922C121.667 54.0359 122.651 52.5048 123.891 52.4652C125.042 52.3938 126.161 54.0359 126.188 55.8208C126.234 57.677 125.203 59.3112 123.964 59.3509Z" fill="#04705F"/>
<path d="M115.37 53.0046C115.391 54.8926 114.359 56.495 113.12 56.495C111.901 56.495 110.896 54.9957 110.849 53.1474C110.802 51.3228 111.927 49.6172 113.12 49.6172C114.339 49.6172 115.344 51.1483 115.37 53.0046Z" fill="#04705F"/>
<path d="M104.479 50.1487C104.479 52.005 103.521 53.4329 102.302 53.3932C101.109 53.3932 100.099 51.8622 100.099 50.117C100.099 48.2924 101.156 46.7217 102.349 46.7614C103.521 46.7931 104.505 48.3638 104.479 50.1487Z" fill="#04705F"/>
<path d="M136.864 58.8827C136.838 60.739 135.859 62.2065 134.661 62.1352C133.536 62.0955 132.531 60.4931 132.578 58.7796C132.625 56.9947 133.583 55.6064 134.755 55.6064C135.906 55.6064 136.864 57.1057 136.864 58.8827Z" fill="#04705F"/>
<path d="M40.5104 104.608C39.3386 104.576 38.4479 103.18 38.474 101.435C38.474 99.7608 39.4063 98.3329 40.5104 98.3329C41.6563 98.3329 42.6406 99.8639 42.6146 101.609C42.5677 103.251 41.6094 104.647 40.5104 104.608Z" fill="#04705F"/>
<path d="M91.4167 44.2309C92.5156 44.2309 93.4531 45.6905 93.4271 47.3326C93.4063 48.935 92.4427 50.3312 91.3906 50.2916C90.3125 50.2598 89.4479 48.8636 89.4479 47.2215C89.4479 45.5477 90.3386 44.2309 91.4167 44.2309Z" fill="#04705F"/>
<path d="M67.8333 54.964C68.9583 54.9243 69.8021 56.2094 69.8229 57.9229C69.8229 59.565 68.9115 60.9533 67.8594 60.9215C66.849 60.9215 65.9167 59.4936 65.9375 57.9229C65.9167 56.3205 66.8021 54.9957 67.8333 54.964Z" fill="#04705F"/>
<path d="M57.0625 71.4088C57.0625 73.0429 56.151 74.3995 55.0729 74.3995C54.0677 74.3677 53.1302 72.9398 53.151 71.4088C53.1771 69.7984 54.0417 68.4816 55.0729 68.4419C56.2187 68.4419 57.0625 69.727 57.0625 71.4088Z" fill="#04705F"/>
<path d="M42.4271 87.7425C41.4479 87.7425 40.651 86.4574 40.6719 84.9898C40.6979 83.4985 41.5365 82.2451 42.474 82.3165C43.4375 82.3561 44.2552 83.6413 44.2344 85.1009C44.2552 86.5288 43.4115 87.7425 42.4271 87.7425Z" fill="#04705F"/>
<path d="M23.9323 145.375C24.9115 145.335 25.6615 146.446 25.6875 147.905C25.7083 149.405 24.9115 150.65 23.9531 150.65C23.0417 150.65 22.2188 149.405 22.2188 148.008C22.2188 146.588 22.9948 145.406 23.9323 145.375Z" fill="#04705F"/>
<path d="M78.9115 44.3022C78.9115 42.8029 79.6354 41.7003 80.6198 41.7003C81.5781 41.7003 82.3542 42.8347 82.375 44.2626C82.4011 45.6905 81.5313 47.0073 80.5938 46.9756C79.6615 46.9359 78.9115 45.7619 78.9115 44.3022Z" fill="#04705F"/>
<path d="M27.5625 131.603C27.5365 133.071 26.7865 134.173 25.8281 134.173C24.8646 134.142 24.0938 132.999 24.0938 131.532C24.0938 130.144 24.9115 128.898 25.8281 128.898C26.7656 128.858 27.5625 130.112 27.5625 131.603Z" fill="#04705F"/>
<path d="M21.9896 167.166C21.0989 167.127 20.3229 165.953 20.3229 164.564C20.3229 163.208 21.1198 161.994 22.0104 161.994C22.9219 161.994 23.6979 163.168 23.7187 164.525C23.7187 165.953 22.9219 167.166 21.9896 167.166Z" fill="#04705F"/>
<path d="M27.7708 117.594C26.8802 117.594 26.1302 116.451 26.1302 115.127C26.1302 113.85 26.9063 112.636 27.7448 112.596C28.6354 112.564 29.4115 113.778 29.4115 115.166C29.3854 116.523 28.6823 117.594 27.7708 117.594Z" fill="#04705F"/>
<path d="M125.859 41.843C124.969 41.843 124.292 40.8435 124.292 39.487C124.292 38.0908 124.995 36.9881 125.906 37.0278C126.724 37.0595 127.474 38.2336 127.474 39.487C127.453 40.8038 126.75 41.843 125.859 41.843Z" fill="#04705F"/>
<path d="M113.401 36.4884C113.401 35.1319 114.057 34.1006 114.969 34.1006C115.885 34.1006 116.609 35.2033 116.589 36.5598C116.563 37.7735 115.839 38.8762 115.042 38.9158C114.125 38.9872 113.401 37.8766 113.401 36.4884Z" fill="#04705F"/>
<path d="M105.719 33.6008C105.745 34.8463 105.042 35.9886 104.245 36.0283C103.401 36.06 102.656 34.9891 102.656 33.6722C102.656 32.4585 103.354 31.3558 104.177 31.3162C104.995 31.2844 105.698 32.3157 105.719 33.6008Z" fill="#04705F"/>
<path d="M138.151 42.4063C138.151 43.6597 137.474 44.6592 136.651 44.6592C135.833 44.6592 135.177 43.62 135.177 42.4063C135.177 41.2005 135.86 40.1613 136.651 40.1295C137.427 40.1295 138.177 41.2719 138.151 42.4063Z" fill="#04705F"/>
<path d="M57.0625 52.6793C57.8125 52.6476 58.5625 53.7899 58.5625 54.9243C58.5625 56.138 57.8854 57.1773 57.0885 57.209C56.2656 57.209 55.6094 56.2094 55.5885 54.964C55.5885 53.7503 56.2656 52.719 57.0625 52.6793Z" fill="#04705F"/>
<path d="M31.1198 98.6185C31.1198 99.8639 30.5312 100.76 29.7135 100.792C28.9427 100.792 28.2864 99.8322 28.2604 98.6502C28.2604 97.5079 28.9167 96.4449 29.6927 96.4449C30.4635 96.4449 31.1198 97.4365 31.1198 98.6185Z" fill="#04705F"/>
<path d="M45.7292 68.5847C45.7292 69.8381 45.1198 70.7266 44.3021 70.7266C43.5313 70.7266 42.875 69.727 42.875 68.553C42.875 67.4106 43.5781 66.3794 44.3229 66.3794C45.099 66.4111 45.7552 67.4106 45.7292 68.5847Z" fill="#04705F"/>
<path d="M69.776 43.4455C69.0313 43.4058 68.4427 42.4063 68.4688 41.2719C68.4896 40.201 69.125 39.2728 69.8229 39.2728C70.599 39.3046 71.2083 40.2724 71.2083 41.375C71.1823 42.5174 70.5052 43.4772 69.776 43.4455Z" fill="#04705F"/>
<path d="M94.7396 30.6419C94.7604 31.8159 94.1562 32.7837 93.4062 32.7837C92.6771 32.7837 92.0208 31.8159 92 30.6736C92 29.5313 92.6302 28.6111 93.3802 28.6111C94.1094 28.6111 94.7135 29.5313 94.7396 30.6419Z" fill="#04705F"/>
<path d="M32.7604 82.1023C32.7344 83.1018 32.1719 83.8872 31.5417 83.8554C30.9062 83.8158 30.3958 82.959 30.4167 81.9595C30.4375 80.9282 30.9792 80.2142 31.6562 80.2856C32.2917 80.357 32.7812 81.1741 32.7604 82.1023Z" fill="#04705F"/>
<path d="M82.5417 26.1439C83.1042 26.1122 83.6146 26.8579 83.6615 27.7543C83.7083 28.7142 83.2448 29.4995 82.5885 29.4995C82 29.4995 81.4844 28.7856 81.4375 27.9288C81.4167 27.0403 81.9531 26.1836 82.5417 26.1439Z" fill="#04705F"/>
<path d="M14.1667 145.16C14.1667 146.049 13.6979 146.731 13.1354 146.692C12.599 146.692 12.1511 146.017 12.1302 145.192C12.1042 144.375 12.599 143.59 13.1354 143.558C13.6979 143.558 14.1875 144.264 14.1667 145.16Z" fill="#04705F"/>
<path d="M16.0417 128.755C16.0156 129.572 15.5938 130.255 15.0573 130.255C14.4688 130.255 13.9531 129.43 14 128.573C14.0469 127.756 14.4948 127.145 15.0313 127.145C15.6198 127.185 16.0625 127.899 16.0417 128.755Z" fill="#04705F"/>
<path d="M17.8906 112.096C17.9115 112.882 17.5156 113.524 16.974 113.564C16.4635 113.596 16.0156 112.953 16.0156 112.168C15.9948 111.422 16.4375 110.708 16.9271 110.708C17.4427 110.668 17.8906 111.311 17.8906 112.096Z" fill="#04705F"/>
<path d="M12.1511 161.637C12.1302 162.422 11.7292 163.025 11.1927 163.025C10.6771 162.994 10.2552 162.351 10.2813 161.566C10.2813 160.78 10.75 160.138 11.2396 160.177C11.7552 160.209 12.1511 160.883 12.1511 161.637Z" fill="#04705F"/>
<path d="M46.2708 53.433C45.7552 53.433 45.3542 52.7904 45.3542 51.9654C45.3542 51.1801 45.8021 50.5375 46.3177 50.5772C46.8073 50.5772 47.25 51.2911 47.2292 52.0368C47.2031 52.7904 46.7604 53.433 46.2708 53.433Z" fill="#04705F"/>
<path d="M59.0312 39.9154C58.4896 39.9154 58.0938 39.3045 58.0938 38.4875C58.0938 37.7021 58.5156 37.0595 59.0312 37.0595C59.5208 37.0595 59.9688 37.7338 59.9688 38.4875C59.9688 39.2728 59.5469 39.9154 59.0312 39.9154Z" fill="#04705F"/>
<path d="M33.5052 66.9109C33.0416 66.8791 32.6406 66.2366 32.6875 65.483C32.7344 64.8404 33.0885 64.3089 33.5052 64.3089C33.9739 64.3089 34.3958 64.9515 34.375 65.6654C34.3489 66.3794 33.9739 66.9109 33.5052 66.9109Z" fill="#04705F"/>
<path d="M106.141 15.9106C106.609 15.9106 106.964 16.4817 106.964 17.1957C106.964 17.9097 106.516 18.5126 106.047 18.4808C105.625 18.4412 105.276 17.87 105.276 17.2274C105.255 16.5135 105.672 15.9106 106.141 15.9106Z" fill="#04705F"/>
<path d="M127.708 21.6857C128.177 21.6857 128.573 22.3282 128.552 23.0819C128.526 23.7958 128.13 24.3273 127.688 24.2559C127.24 24.2242 126.865 23.6134 126.865 22.9391C126.865 22.2965 127.266 21.6857 127.708 21.6857Z" fill="#04705F"/>
<path d="M116.865 18.7664C117.359 18.7267 117.755 19.3376 117.755 20.0832C117.755 20.7575 117.359 21.3684 116.911 21.3287C116.469 21.3287 116.073 20.7575 116.073 20.0832C116.047 19.3693 116.401 18.7981 116.865 18.7664Z" fill="#04705F"/>
<path d="M19.5729 95.6595C19.5729 96.2624 19.25 96.8018 18.849 96.8018C18.4531 96.8336 18.099 96.3338 18.099 95.6912C18.099 95.0883 18.4271 94.5489 18.8281 94.5489C19.224 94.5172 19.5729 95.0487 19.5729 95.6595Z" fill="#04705F"/>
<path d="M72.4219 24.8668C72.4219 25.4697 72.0729 25.9694 71.6771 26.0012C71.2761 26.0012 70.9271 25.5014 70.9271 24.8985C70.9271 24.2956 71.2761 23.7562 71.6511 23.7562C72.0729 23.7562 72.4219 24.2956 72.4219 24.8668Z" fill="#04705F"/>
<path d="M20.7917 80.1428C20.4635 80.1428 20.1823 79.7541 20.1823 79.2861C20.1823 78.7863 20.4427 78.3579 20.7448 78.3262C21.0989 78.2865 21.401 78.7546 21.401 79.2861C21.3802 79.7145 21.1198 80.1428 20.7917 80.1428Z" fill="#04705F"/>
<path d="M95.9115 14.2684C95.8854 14.7682 95.6302 15.1648 95.3021 15.1648C94.9479 15.1648 94.6667 14.6651 94.6927 14.1653C94.7135 13.6973 95.0208 13.3086 95.349 13.3403C95.6771 13.3403 95.9323 13.7687 95.9115 14.2684Z" fill="#04705F"/>
<path d="M2.25001 141.559C2.55209 141.591 2.71355 141.845 2.69272 142.233C2.66668 142.59 2.53126 142.844 2.29688 142.844C2.01563 142.876 1.84897 142.63 1.84897 142.202C1.84897 141.773 2.03647 141.591 2.25001 141.559Z" fill="#04705F"/>
<path d="M0.468749 159.321C0.1875 159.281 0 159.106 0 158.678C0 158.281 0.161459 158.036 0.442708 158.036C0.677083 158.036 0.817708 158.281 0.843749 158.607C0.864584 159.035 0.703125 159.249 0.468749 159.321Z" fill="#04705F"/>
<path d="M8.47397 92.7323C8.42709 93.1607 8.28647 93.4066 8.01042 93.3352C7.75001 93.3035 7.58855 93.0179 7.63542 92.5895C7.65626 92.2325 7.82292 92.0183 8.0573 92.0183C8.31251 92.0897 8.45313 92.3436 8.47397 92.7323Z" fill="#04705F"/>
<path d="M107.968 1.29042C107.713 1.21902 107.546 0.96517 107.572 0.57646C107.593 0.148086 107.781 -0.0343685 108.062 0.00529527C108.296 0.0370267 108.437 0.290878 108.411 0.647856C108.39 1.03656 108.229 1.25075 107.968 1.29042Z" fill="#04705F"/>
<path d="M118.833 2.93243C119.141 2.96417 119.302 3.21802 119.281 3.60673C119.281 3.96371 119.141 4.20962 118.906 4.20962C118.625 4.24929 118.458 4.0351 118.438 3.60673C118.438 3.21802 118.625 3.00383 118.833 2.93243Z" fill="#04705F"/>
<path d="M130.099 6.56571C130.052 6.96235 129.911 7.20827 129.63 7.20827C129.349 7.17654 129.229 6.89096 129.255 6.49431C129.276 6.13734 129.417 5.92315 129.677 5.92315C129.932 5.89142 130.073 6.13734 130.099 6.56571Z" fill="#04705F"/>
<path d="M74.0625 8.42195C74.0417 8.81066 73.9219 9.09624 73.6406 9.09624C73.3854 9.09624 73.2188 8.85033 73.2188 8.42195C73.2188 8.06497 73.3854 7.85079 73.5938 7.81905C73.8542 7.77939 74.0156 7.96185 74.0625 8.42195Z" fill="#04705F"/>
<path d="M84.4115 10.6352C84.6719 10.667 84.8594 10.8811 84.8333 11.3095C84.8333 11.7062 84.6458 11.9521 84.3906 11.9521C84.1563 11.9521 84.0156 11.7062 83.9896 11.3492C83.9896 10.9208 84.1302 10.667 84.4115 10.6352Z" fill="#04705F"/>
<path d="M50.5052 19.052C50.4844 19.4407 50.3437 19.7263 50.0833 19.7263C49.8073 19.7263 49.6667 19.4803 49.6667 19.052C49.6667 18.695 49.8073 18.4411 50.0364 18.4411C50.2969 18.4094 50.4583 18.6236 50.5052 19.052Z" fill="#04705F"/>
<path d="M61.3021 21.8999C61.2761 22.2965 61.1615 22.5821 60.8802 22.5821C60.625 22.5821 60.4583 22.3282 60.4583 21.8999C60.4583 21.5429 60.625 21.3287 60.8333 21.297C61.1146 21.2573 61.2761 21.4715 61.3021 21.8999Z" fill="#04705F"/>
<path d="M22.6875 61.9925C22.9687 62.0242 23.1562 62.2067 23.1562 62.6351C23.1562 63.0238 22.9948 63.2697 22.7135 63.2697C22.4792 63.2697 22.3385 63.0238 22.3125 62.7064C22.2656 62.3098 22.4323 62.0639 22.6875 61.9925Z" fill="#04705F"/>
<path d="M6.60417 109.32C6.57813 109.748 6.41667 109.994 6.13542 109.954C5.875 109.923 5.71354 109.637 5.73438 109.248C5.76042 108.891 5.92188 108.677 6.15625 108.677C6.4375 108.638 6.57813 108.891 6.60417 109.32Z" fill="#04705F"/>
<path d="M37.7708 32.7123C37.7448 33.101 37.6042 33.3549 37.3229 33.3549C37.0885 33.3549 36.9271 33.1407 36.901 32.7837C36.8802 32.3871 37.0208 32.1015 37.3021 32.0698C37.5833 32.0301 37.724 32.2839 37.7708 32.7123Z" fill="#04705F"/>
<path d="M48.5625 35.4889C48.5625 35.8855 48.4219 36.1711 48.1406 36.1711C47.9063 36.1711 47.7448 35.9886 47.6979 35.6317C47.651 35.2033 47.8125 34.9574 48.0729 34.886C48.3542 34.8463 48.5156 35.1002 48.5625 35.4889Z" fill="#04705F"/>
<path d="M35.3802 49.8314C35.125 49.76 34.9584 49.5062 34.9844 49.1175C35.0052 48.6891 35.1927 48.5066 35.474 48.5463C35.7084 48.578 35.849 48.8319 35.8281 49.1889C35.8021 49.5776 35.6406 49.7918 35.3802 49.8314Z" fill="#04705F"/>
<path d="M3.79166 125.828C3.8177 125.4 3.93228 125.114 4.21353 125.114C4.47395 125.114 4.63541 125.368 4.63541 125.796C4.63541 126.153 4.47395 126.368 4.26041 126.399C4.0052 126.439 3.83853 126.185 3.79166 125.828Z" fill="#04705F"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 28 KiB

28
src/assets/svgs/Group 25382.svg Normal file
View file

@ -0,0 +1,28 @@
<svg width="73" height="36" viewBox="0 0 73 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.8">
<path d="M18.05 12.62C18.0474 13.2919 17.7785 13.9355 17.3025 14.4096C16.8264 14.8838 16.1819 15.15 15.51 15.15C14.839 15.15 14.1954 14.8835 13.7209 14.409C13.2465 13.9346 12.98 13.291 12.98 12.62C12.98 11.949 13.2465 11.3055 13.7209 10.831C14.1954 10.3566 14.839 10.0901 15.51 10.0901C16.1819 10.0901 16.8264 10.3562 17.3025 10.8304C17.7785 11.3046 18.0474 11.948 18.05 12.62Z" fill="white"/>
<path d="M31.5601 12.62C31.5601 13.291 31.2936 13.9346 30.8191 14.409C30.3446 14.8835 29.701 15.15 29.03 15.15C28.3581 15.15 27.7136 14.8838 27.2375 14.4096C26.7615 13.9355 26.4926 13.2919 26.49 12.62C26.4926 11.948 26.7615 11.3046 27.2375 10.8304C27.7136 10.3562 28.3581 10.0901 29.03 10.0901C29.701 10.0901 30.3446 10.3566 30.8191 10.831C31.2936 11.3055 31.5601 11.949 31.5601 12.62Z" fill="white"/>
<path d="M42.54 15.15C43.9373 15.15 45.07 14.0173 45.07 12.62C45.07 11.2227 43.9373 10.09 42.54 10.09C41.1427 10.09 40.01 11.2227 40.01 12.62C40.01 14.0173 41.1427 15.15 42.54 15.15Z" fill="white"/>
<path d="M58.6001 12.62C58.5975 13.2919 58.3286 13.9355 57.8525 14.4096C57.3765 14.8838 56.732 15.15 56.0601 15.15C55.7278 15.15 55.3988 15.0846 55.0918 14.9575C54.7848 14.8303 54.5059 14.644 54.271 14.409C54.0361 14.1741 53.8498 13.8952 53.7227 13.5882C53.5955 13.2813 53.53 12.9522 53.53 12.62C53.53 12.2877 53.5955 11.9588 53.7227 11.6518C53.8498 11.3449 54.0361 11.066 54.271 10.831C54.5059 10.5961 54.7848 10.4097 55.0918 10.2826C55.3988 10.1554 55.7278 10.0901 56.0601 10.0901C56.732 10.0901 57.3765 10.3562 57.8525 10.8304C58.3286 11.3046 58.5975 11.948 58.6001 12.62Z" fill="white"/>
<path d="M72.1101 12.62C72.1101 13.291 71.8434 13.9346 71.3689 14.409C70.8944 14.8835 70.2511 15.15 69.5801 15.15C68.9082 15.15 68.2634 14.8838 67.7874 14.4096C67.3113 13.9355 67.0427 13.2919 67.04 12.62C67.0427 11.948 67.3113 11.3046 67.7874 10.8304C68.2634 10.3562 68.9082 10.0901 69.5801 10.0901C70.2511 10.0901 70.8944 10.3566 71.3689 10.831C71.8434 11.3055 72.1101 11.949 72.1101 12.62Z" fill="white"/>
<path d="M18.05 2.55002C18.05 3.22367 17.7825 3.8697 17.3062 4.34604C16.8298 4.82238 16.1837 5.09006 15.51 5.09006C14.8381 5.08741 14.1946 4.81855 13.7205 4.3425C13.2463 3.86644 12.98 3.22194 12.98 2.55002C12.98 1.87902 13.2465 1.23554 13.7209 0.761078C14.1954 0.286611 14.839 0.019989 15.51 0.019989C16.1819 0.0199838 16.8264 0.286286 17.3025 0.760468C17.7785 1.23465 18.0474 1.8781 18.05 2.55002Z" fill="white"/>
<path d="M31.5601 2.55002C31.5601 3.22194 31.2938 3.86644 30.8196 4.3425C30.3454 4.81855 29.7019 5.08741 29.03 5.09006C28.3564 5.09006 27.7102 4.82238 27.2339 4.34604C26.7575 3.8697 26.49 3.22367 26.49 2.55002C26.4926 1.8781 26.7615 1.23465 27.2375 0.760468C27.7136 0.286286 28.3581 0.0199838 29.03 0.019989C29.701 0.019989 30.3446 0.286611 30.8191 0.761078C31.2936 1.23554 31.5601 1.87902 31.5601 2.55002Z" fill="white"/>
<path d="M42.54 5.06003C43.9373 5.06003 45.07 3.92728 45.07 2.53C45.07 1.13272 43.9373 0 42.54 0C41.1427 0 40.01 1.13272 40.01 2.53C40.01 3.92728 41.1427 5.06003 42.54 5.06003Z" fill="white"/>
<path d="M58.6001 2.55002C58.6001 3.22367 58.3323 3.8697 57.856 4.34604C57.3796 4.82238 56.7337 5.09006 56.0601 5.09006C55.3881 5.08741 54.7447 4.81855 54.2705 4.3425C53.7963 3.86644 53.53 3.22194 53.53 2.55002C53.53 2.21777 53.5955 1.88883 53.7227 1.58188C53.8498 1.27492 54.0361 0.99601 54.271 0.761078C54.5059 0.526146 54.7848 0.33976 55.0918 0.212616C55.3988 0.0854716 55.7278 0.019989 56.0601 0.019989C56.732 0.0199838 57.3765 0.286286 57.8525 0.760468C58.3286 1.23465 58.5975 1.8781 58.6001 2.55002Z" fill="white"/>
<path d="M72.1101 2.55002C72.1101 3.22194 71.8438 3.86644 71.3696 4.3425C70.8954 4.81855 70.252 5.08741 69.5801 5.09006C68.9064 5.09006 68.2603 4.82238 67.7839 4.34604C67.3076 3.8697 67.04 3.22367 67.04 2.55002C67.0427 1.8781 67.3113 1.23465 67.7874 0.760468C68.2634 0.286286 68.9082 0.0199838 69.5801 0.019989C70.2511 0.019989 70.8944 0.286611 71.3689 0.761078C71.8434 1.23554 72.1101 1.87902 72.1101 2.55002Z" fill="white"/>
<path d="M18.05 22.76C18.0474 23.4319 17.7785 24.0755 17.3025 24.5497C16.8264 25.0238 16.1819 25.29 15.51 25.29C14.839 25.29 14.1954 25.0235 13.7209 24.549C13.2465 24.0746 12.98 23.431 12.98 22.76C12.98 22.0881 13.2463 21.4436 13.7205 20.9675C14.1946 20.4914 14.8381 20.2227 15.51 20.2201C16.1837 20.2201 16.8298 20.4876 17.3062 20.964C17.7825 21.4403 18.05 22.0863 18.05 22.76Z" fill="white"/>
<path d="M31.5601 22.76C31.5601 23.431 31.2936 24.0746 30.8191 24.549C30.3446 25.0235 29.701 25.29 29.03 25.29C28.3581 25.29 27.7136 25.0238 27.2375 24.5497C26.7615 24.0755 26.4926 23.4319 26.49 22.76C26.49 22.0863 26.7575 21.4403 27.2339 20.964C27.7102 20.4876 28.3564 20.2201 29.03 20.2201C29.7019 20.2227 30.3454 20.4914 30.8196 20.9675C31.2938 21.4436 31.5601 22.0881 31.5601 22.76Z" fill="white"/>
<path d="M42.54 25.29C43.9373 25.29 45.07 24.1573 45.07 22.76C45.07 21.3627 43.9373 20.23 42.54 20.23C41.1427 20.23 40.01 21.3627 40.01 22.76C40.01 24.1573 41.1427 25.29 42.54 25.29Z" fill="white"/>
<path d="M58.6001 22.76C58.5975 23.4319 58.3286 24.0755 57.8525 24.5497C57.3765 25.0238 56.732 25.29 56.0601 25.29C55.7278 25.29 55.3988 25.2245 55.0918 25.0974C54.7848 24.9702 54.5059 24.784 54.271 24.549C54.0361 24.3141 53.8498 24.0352 53.7227 23.7282C53.5955 23.4213 53.53 23.0922 53.53 22.76C53.53 22.0881 53.7963 21.4436 54.2705 20.9675C54.7447 20.4914 55.3881 20.2227 56.0601 20.2201C56.7337 20.2201 57.3796 20.4876 57.856 20.964C58.3323 21.4403 58.6001 22.0863 58.6001 22.76Z" fill="white"/>
<path d="M72.1101 22.76C72.1101 23.431 71.8434 24.0746 71.3689 24.549C70.8944 25.0235 70.2511 25.29 69.5801 25.29C68.9082 25.29 68.2634 25.0238 67.7874 24.5497C67.3113 24.0755 67.0427 23.4319 67.04 22.76C67.04 22.0863 67.3076 21.4403 67.7839 20.964C68.2603 20.4876 68.9064 20.2201 69.5801 20.2201C70.252 20.2227 70.8954 20.4914 71.3696 20.9675C71.8438 21.4436 72.1101 22.0881 72.1101 22.76Z" fill="white"/>
<path d="M18.05 32.89C18.05 33.5636 17.7825 34.2098 17.3062 34.6861C16.8298 35.1625 16.1837 35.43 15.51 35.43C14.8381 35.4274 14.1946 35.1586 13.7205 34.6826C13.2463 34.2065 12.98 33.5619 12.98 32.89C12.98 32.219 13.2465 31.5755 13.7209 31.101C14.1954 30.6266 14.839 30.3601 15.51 30.3601C16.1819 30.3601 16.8264 30.6263 17.3025 31.1004C17.7785 31.5746 18.0474 32.2181 18.05 32.89Z" fill="white"/>
<path d="M5.07007 12.62C5.06742 13.2919 4.79857 13.9355 4.32251 14.4096C3.84645 14.8838 3.20195 15.15 2.53003 15.15C2.19778 15.15 1.86872 15.0846 1.56177 14.9575C1.25481 14.8303 0.975899 14.644 0.740967 14.409C0.506035 14.1741 0.319771 13.8952 0.192627 13.5882C0.0654826 13.2813 0 12.9522 0 12.62C0 12.2877 0.0654826 11.9588 0.192627 11.6518C0.319771 11.3449 0.506035 11.066 0.740967 10.831C0.975899 10.5961 1.25481 10.4097 1.56177 10.2826C1.86872 10.1554 2.19778 10.0901 2.53003 10.0901C3.20195 10.0901 3.84645 10.3562 4.32251 10.8304C4.79857 11.3046 5.06742 11.948 5.07007 12.62Z" fill="white"/>
<path d="M5.07007 2.55002C5.07007 3.22367 4.80227 3.8697 4.32593 4.34604C3.84959 4.82238 3.20368 5.09006 2.53003 5.09006C1.85811 5.08741 1.21466 4.81855 0.740479 4.3425C0.266297 3.86644 -5.20734e-06 3.22194 0 2.55002C0 2.21777 0.0654826 1.88883 0.192627 1.58188C0.319771 1.27492 0.506035 0.99601 0.740967 0.761078C0.975899 0.526146 1.25481 0.33976 1.56177 0.212616C1.86872 0.0854716 2.19778 0.019989 2.53003 0.019989C3.20195 0.0199838 3.84645 0.286286 4.32251 0.760468C4.79857 1.23465 5.06742 1.8781 5.07007 2.55002Z" fill="white"/>
<path d="M5.07007 22.76C5.06742 23.4319 4.79857 24.0755 4.32251 24.5497C3.84645 25.0238 3.20195 25.29 2.53003 25.29C2.19778 25.29 1.86872 25.2245 1.56177 25.0974C1.25481 24.9702 0.975899 24.784 0.740967 24.549C0.506035 24.3141 0.319771 24.0352 0.192627 23.7282C0.0654826 23.4213 0 23.0922 0 22.76C-5.20734e-06 22.0881 0.266297 21.4436 0.740479 20.9675C1.21466 20.4914 1.85811 20.2227 2.53003 20.2201C3.20368 20.2201 3.84959 20.4876 4.32593 20.964C4.80227 21.4403 5.07007 22.0863 5.07007 22.76Z" fill="white"/>
<path d="M5.07007 32.89C5.07007 33.5636 4.80227 34.2098 4.32593 34.6861C3.84959 35.1625 3.20368 35.43 2.53003 35.43C1.85811 35.4274 1.21466 35.1586 0.740479 34.6826C0.266297 34.2065 -5.20734e-06 33.5619 0 32.89C0 32.5577 0.0654826 32.2288 0.192627 31.9218C0.319771 31.6149 0.506035 31.336 0.740967 31.101C0.975899 30.8661 1.25481 30.6797 1.56177 30.5526C1.86872 30.4254 2.19778 30.3601 2.53003 30.3601C3.20195 30.3601 3.84645 30.6263 4.32251 31.1004C4.79857 31.5746 5.06742 32.2181 5.07007 32.89Z" fill="white"/>
<path d="M31.5601 32.89C31.5601 33.5619 31.2938 34.2065 30.8196 34.6826C30.3454 35.1586 29.7019 35.4274 29.03 35.43C28.3564 35.43 27.7102 35.1625 27.2339 34.6861C26.7575 34.2098 26.49 33.5636 26.49 32.89C26.4926 32.2181 26.7615 31.5746 27.2375 31.1004C27.7136 30.6263 28.3581 30.3601 29.03 30.3601C29.701 30.3601 30.3446 30.6266 30.8191 31.101C31.2936 31.5755 31.5601 32.219 31.5601 32.89Z" fill="white"/>
<path d="M42.54 35.43C43.9373 35.43 45.07 34.2973 45.07 32.9C45.07 31.5027 43.9373 30.37 42.54 30.37C41.1427 30.37 40.01 31.5027 40.01 32.9C40.01 34.2973 41.1427 35.43 42.54 35.43Z" fill="white"/>
<path d="M58.6001 32.89C58.6001 33.5636 58.3323 34.2098 57.856 34.6861C57.3796 35.1625 56.7337 35.43 56.0601 35.43C55.3881 35.4274 54.7447 35.1586 54.2705 34.6826C53.7963 34.2065 53.53 33.5619 53.53 32.89C53.53 32.5577 53.5955 32.2288 53.7227 31.9218C53.8498 31.6149 54.0361 31.336 54.271 31.101C54.5059 30.8661 54.7848 30.6797 55.0918 30.5526C55.3988 30.4254 55.7278 30.3601 56.0601 30.3601C56.732 30.3601 57.3765 30.6263 57.8525 31.1004C58.3286 31.5746 58.5975 32.2181 58.6001 32.89Z" fill="white"/>
<path d="M72.1101 32.89C72.1101 33.5619 71.8438 34.2065 71.3696 34.6826C70.8954 35.1586 70.252 35.4274 69.5801 35.43C68.9064 35.43 68.2603 35.1625 67.7839 34.6861C67.3076 34.2098 67.04 33.5636 67.04 32.89C67.0427 32.2181 67.3113 31.5746 67.7874 31.1004C68.2634 30.6263 68.9082 30.3601 69.5801 30.3601C70.2511 30.3601 70.8944 30.6266 71.3689 31.101C71.8434 31.5755 72.1101 32.219 72.1101 32.89Z" fill="white"/>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 9.8 KiB

3
src/assets/svgs/Group 25383.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="304" height="227" viewBox="0 0 304 227" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M303.333 226.609C300.208 226.609 297.089 225.714 293.964 224.375L295.75 220.365C298.427 221.255 301.104 222.146 303.776 222.146L303.333 226.609ZM285.49 219.469C284.599 218.578 283.703 218.13 283.26 217.24C281.922 215.453 280.583 213.672 279.688 211.885L283.703 209.656C284.599 211.443 285.938 212.781 286.828 214.12C287.271 215.01 288.167 215.453 288.609 215.901L285.49 219.469ZM276.12 202.964C275.229 200.286 274.339 197.167 273.891 194.042L278.354 193.151C278.797 196.276 279.688 198.948 280.583 201.625L276.12 202.964ZM272.104 185.12L271.661 182.891C271.214 180.661 271.214 178.432 270.771 176.198L275.229 175.755C275.677 177.984 275.677 180.214 276.12 182.448L276.568 184.677L272.104 185.12ZM269.432 167.281C268.536 164.156 268.094 161.479 266.755 158.802L270.771 157.021C271.661 159.698 272.552 162.818 273.443 165.943L269.432 167.281ZM141.849 161.927C140.516 161.927 139.177 161.927 137.839 161.927L138.281 157.464C140.958 157.464 144.083 157.464 146.76 157.464L147.203 161.927C145.865 161.927 144.083 161.927 141.849 161.927ZM128.917 160.589C125.792 159.698 122.672 158.802 119.995 157.464L121.776 153.448C124.453 154.786 127.13 155.682 129.807 156.125L128.917 160.589ZM156.573 160.589L155.682 156.125C157.911 155.682 160.141 155.234 162.37 154.344L164.156 153.896L165.495 158.359L163.708 158.802C161.479 159.698 159.25 160.141 156.573 160.589ZM174.417 155.234L172.63 151.219C175.307 150.328 177.984 148.99 181.104 147.651L182.891 151.667C179.771 153.005 177.094 153.896 174.417 155.234ZM111.964 152.115C111.516 151.667 111.073 151.219 110.182 150.776C108.396 148.99 107.057 147.203 105.271 144.974L108.844 142.297C110.182 144.083 111.516 145.865 112.854 147.203C113.302 147.651 113.75 148.099 114.193 148.542L111.964 152.115ZM262.74 151.667L261.849 150.776C260.51 148.99 258.724 147.203 256.938 145.865L259.615 142.297C261.849 144.083 263.63 145.865 265.417 148.099C265.859 148.542 265.859 148.99 266.307 149.438L262.74 151.667ZM190.922 148.099L189.135 144.083C191.812 142.745 194.49 141.854 197.609 140.516L199.396 144.531C196.271 145.865 193.599 146.76 190.922 148.099ZM207.427 141.854L206.089 137.839C208.318 136.948 210.995 136.5 213.224 135.609L214.562 135.161L215.453 139.62L214.115 140.068C212.333 140.068 209.656 140.958 207.427 141.854ZM249.802 141.406C247.125 140.516 244.448 139.62 241.771 138.729L242.667 134.271C245.786 135.161 248.911 136.052 251.589 136.948L249.802 141.406ZM224.375 137.839L223.932 133.375C227.052 132.932 230.177 132.932 233.297 132.932V137.391C230.177 137.391 227.5 137.839 224.375 137.839ZM101.26 136.5C100.365 133.823 99.474 130.698 98.5833 127.578L103.042 126.688C103.49 129.807 104.38 132.484 105.271 135.161L101.26 136.5ZM97.6875 118.208C97.6875 117.318 97.6875 116.427 97.6875 115.531C97.6875 113.302 97.6875 111.073 98.1354 108.844L102.599 109.286C102.599 111.521 102.151 113.75 102.151 115.531C102.151 116.427 102.151 116.87 102.151 117.766L97.6875 118.208ZM103.49 100.812L99.026 99.9219C99.474 96.7969 100.365 94.1198 101.26 91L105.719 91.8906C104.828 95.0156 104.38 97.6927 103.49 100.812ZM107.948 83.4167L103.49 82.0781L104.38 79.849C104.828 77.6146 105.719 75.8333 106.167 73.6042L110.625 74.9427C110.182 77.1719 109.286 78.9531 108.844 81.1875L107.948 83.4167ZM112.411 66.0208L107.948 65.125C108.844 62.0052 109.286 59.3281 109.734 56.651L114.193 57.099C113.75 59.776 113.302 62.8958 112.411 66.0208ZM115.089 47.7292H110.625C110.625 47.2813 110.625 46.3906 110.625 45.9427C110.625 43.7135 110.625 41.4844 110.182 39.2552L114.641 38.8073C115.089 41.0365 115.089 43.7135 115.089 45.9427C115.089 46.3906 115.089 46.8385 115.089 47.7292ZM4.01562 43.2708L0 41.0365C1.33854 38.3594 3.11979 35.6875 5.34896 33.4531L8.92188 36.1302C7.13542 38.3594 5.34896 41.0365 4.01562 43.2708ZM108.844 30.3333C107.948 27.6562 107.057 24.9792 105.719 22.3021L109.734 20.0729C111.073 22.75 112.411 25.8698 113.302 28.9948L108.844 30.3333ZM15.1667 29.8854L12.0417 26.7656C14.2708 24.9792 16.5052 22.75 19.1823 20.9635L21.8542 24.5312C19.1823 26.3177 16.9479 28.1042 15.1667 29.8854ZM28.9948 19.625L26.7656 15.6094C29.4375 14.276 32.1146 12.4896 34.7917 11.151L37.0208 15.1667C34.349 16.5052 31.6719 18.2865 28.9948 19.625ZM100.812 15.6094C99.9219 14.276 98.5833 13.3802 97.2448 12.4896C96.349 11.599 95.4583 11.151 94.1198 10.2604L96.349 6.69271C97.6875 7.58333 98.5833 8.47396 99.9219 9.36458C101.26 10.7031 102.599 11.599 103.932 12.9375L100.812 15.6094ZM45.0521 11.599L43.2656 7.58333C45.9427 6.24479 49.0677 5.35417 51.7448 4.45833L53.0833 8.92188C50.4062 9.36458 47.7292 10.2604 45.0521 11.599ZM86.9844 6.24479C84.3073 5.35417 81.6302 4.90625 78.5104 4.45833L78.9531 0C82.0781 0.442708 85.1979 0.890624 88.3229 1.78125L86.9844 6.24479ZM61.5573 6.24479L60.6667 1.78125C63.7865 0.890624 66.9115 0.442708 70.0312 0.442708L70.4792 4.90625C67.3542 4.90625 64.6823 5.35417 61.5573 6.24479Z" fill="#6E6557"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 4.8 KiB

7
src/assets/svgs/Group 25384.svg Normal file
View file

@ -0,0 +1,7 @@
<svg width="37" height="8" viewBox="0 0 37 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19.9804 4.65819C20.0894 5.35279 20.4697 5.97565 21.0379 6.38979C21.606 6.80393 22.3156 6.97546 23.0102 6.86654C23.7025 6.75518 24.3225 6.37392 24.7345 5.80639C25.1464 5.23887 25.3168 4.53126 25.2082 3.83845C25.0997 3.14658 24.7209 2.52618 24.1549 2.11367C23.589 1.70117 22.8823 1.53031 22.1904 1.6388C21.4976 1.74743 20.8761 2.12622 20.4619 2.69212C20.0477 3.25802 19.8745 3.96495 19.9804 4.65819Z" fill="white"/>
<path d="M11.8428 4.82574C11.9243 5.34535 12.2084 5.81147 12.6328 6.12211C13.0572 6.43276 13.5874 6.56265 14.1074 6.48321C14.6283 6.40152 15.0955 6.11617 15.4061 5.69004C15.7168 5.26391 15.8453 4.73188 15.7636 4.21093C15.6801 3.69164 15.3942 3.22664 14.9685 2.91768C14.5429 2.60871 14.0122 2.48092 13.4926 2.56241C12.9737 2.64377 12.5083 2.928 12.1989 3.35245C11.8895 3.77691 11.7615 4.30684 11.8428 4.82574Z" fill="white"/>
<path d="M6.72921 5.87984C6.00741 5.99303 5.33051 5.49963 5.21733 4.77784C5.10415 4.05604 5.59753 3.37915 6.31933 3.26597C7.04113 3.15279 7.71802 3.64617 7.8312 4.36796C7.94438 5.08976 7.45101 5.76666 6.72921 5.87984Z" fill="white"/>
<path d="M0.102269 4.54608C0.129498 4.71973 0.224643 4.87543 0.366686 4.97897C0.508729 5.0825 0.686047 5.1254 0.859697 5.09817C1.03279 5.07032 1.18779 4.97501 1.29078 4.83313C1.39377 4.69125 1.43637 4.51435 1.4092 4.34114C1.39577 4.2555 1.3656 4.17335 1.32042 4.09937C1.27523 4.02538 1.21595 3.96101 1.14589 3.90995C1.07584 3.85889 0.996404 3.82211 0.91214 3.80175C0.827876 3.78138 0.740405 3.7778 0.654761 3.79123C0.481556 3.81839 0.326184 3.91309 0.222635 4.05456C0.119087 4.19604 0.0757912 4.37277 0.102269 4.54608Z" fill="white"/>
<path d="M29.6303 4.28557C29.7664 5.15382 30.2421 5.93235 30.9523 6.45002C31.6626 6.96769 32.5492 7.18215 33.4174 7.04601C34.2829 6.9068 35.0579 6.43023 35.5728 5.72082C36.0878 5.01141 36.3007 4.12691 36.1649 3.26089C36.0978 2.83267 35.9469 2.42194 35.721 2.05201C35.4951 1.68208 35.1987 1.36024 34.8484 1.10492C34.4981 0.849605 34.1009 0.665748 33.6796 0.563912C33.2583 0.462075 32.8209 0.444182 32.3927 0.51133C31.5267 0.647121 30.7498 1.12061 30.2321 1.82798C29.7144 2.53535 29.4979 3.41902 29.6303 4.28557Z" fill="white"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.2 KiB

248
src/assets/svgs/Group 25385.svg Normal file
View file

@ -0,0 +1,248 @@
<svg width="76" height="68" viewBox="0 0 76 68" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M74.5158 2.38021C73.8543 2.36458 73.3283 1.80208 73.3543 1.14063C73.3856 0.494791 73.9064 0 74.5523 0C75.2241 0 75.7554 0.541667 75.745 1.20833C75.7293 1.875 75.1877 2.39063 74.5158 2.38021Z" fill="#77271F"/>
<path d="M73.4692 6.71888C73.4535 6.12513 73.9431 5.61992 74.5421 5.61992C75.1202 5.61471 75.5994 6.06783 75.6254 6.64075C75.6515 7.24492 75.1879 7.75013 74.589 7.76575C73.9796 7.78138 73.4848 7.31783 73.4692 6.71888Z" fill="#77271F"/>
<path d="M67.9642 1.16142C67.9798 0.562467 68.485 0.088508 69.0839 0.114549C69.6881 0.135383 70.1464 0.635383 70.1152 1.24476C70.0892 1.81767 69.6152 2.26559 69.0319 2.26038C68.4277 2.25517 67.9485 1.76038 67.9642 1.16142Z" fill="#77271F"/>
<path d="M71.7972 2.86454C72.3962 2.85933 72.8857 3.35933 72.8753 3.95308C72.8701 4.526 72.4014 4.99996 71.8285 5.026C71.2399 5.04683 70.7295 4.55204 70.7243 3.95829C70.7139 3.35413 71.193 2.86454 71.7972 2.86454Z" fill="#77271F"/>
<path d="M72.7762 9.5105C72.7398 10.0313 72.2606 10.4584 71.7502 10.4272C71.1929 10.3959 70.7866 9.92196 70.8335 9.35425C70.8752 8.81779 71.3283 8.44279 71.8752 8.47925C72.4012 8.5105 72.8231 8.98967 72.7762 9.5105Z" fill="#77271F"/>
<path d="M65.3232 3.90636C65.3389 3.3699 65.7607 2.96366 66.3128 2.97407C66.8441 2.97928 67.2764 3.41678 67.2764 3.94803C67.2712 4.48449 66.7764 4.95324 66.2451 4.9272C65.7139 4.89595 65.3076 4.44803 65.3232 3.91157V3.90636Z" fill="#77271F"/>
<path d="M73.568 12.2241C73.5524 11.7085 73.9847 11.2449 74.5107 11.2189C75.0316 11.1876 75.4899 11.6147 75.5159 12.146C75.542 12.7189 75.1253 13.1616 74.5576 13.1668C74.0159 13.1668 73.5784 12.7501 73.568 12.2241Z" fill="#77271F"/>
<path d="M68.0577 6.6928C68.0577 6.17718 68.5056 5.72405 69.0265 5.70843C69.5733 5.69801 70.0265 6.15634 70.0108 6.71884C70.0004 7.26051 69.5785 7.66676 69.0317 7.66155C68.4952 7.65113 68.0629 7.22405 68.0577 6.6928Z" fill="#77271F"/>
<path d="M62.5523 1.18234C62.5575 0.661502 63.0055 0.213586 63.5263 0.203168C64.0784 0.19796 64.5211 0.661502 64.5055 1.224C64.4898 1.76046 64.0628 2.16671 63.5159 2.15629C62.9846 2.14588 62.5523 1.70838 62.5575 1.18234H62.5523Z" fill="#77271F"/>
<path d="M60.761 4.8177C60.2662 4.80207 59.8912 4.39061 59.9173 3.8854C59.9433 3.41144 60.3235 3.0677 60.8131 3.07811C61.2871 3.08853 61.6569 3.46353 61.6621 3.93749C61.6673 4.42186 61.2506 4.82811 60.761 4.8177Z" fill="#77271F"/>
<path d="M72.6723 15.0157C72.6358 15.5001 72.1931 15.8751 71.7087 15.823C71.24 15.7762 70.9014 15.3699 70.9327 14.896C70.9639 14.3907 71.3754 14.047 71.8858 14.0939C72.3493 14.1355 72.7087 14.5522 72.6723 15.0157Z" fill="#77271F"/>
<path d="M66.2868 8.5833C66.7868 8.57809 67.1827 8.97914 67.167 9.47393C67.1514 9.93747 66.7608 10.3177 66.2972 10.3229C65.8077 10.3281 65.4118 9.92705 65.4222 9.42705C65.4327 8.94788 65.8024 8.58851 66.2868 8.5833Z" fill="#77271F"/>
<path d="M57.1568 1.16675C57.1673 0.677166 57.6048 0.276124 58.0839 0.307375C58.5475 0.338624 58.9121 0.739666 58.9016 1.20842C58.8912 1.70321 58.4798 2.08342 57.9798 2.05217C57.511 2.02612 57.1412 1.63029 57.1568 1.16675Z" fill="#77271F"/>
<path d="M63.521 7.56255C63.0262 7.55214 62.6356 7.13547 62.6616 6.64589C62.6877 6.18235 63.0939 5.80735 63.5523 5.81255C64.0418 5.82297 64.4273 6.23964 64.4064 6.73964C64.3804 7.21359 64.0002 7.57297 63.521 7.56255Z" fill="#77271F"/>
<path d="M69.0473 13.0677C68.5525 13.0729 68.1515 12.6614 68.1671 12.1718C68.1827 11.7135 68.5734 11.3229 69.0369 11.3177C69.5213 11.3125 69.9223 11.7291 69.9119 12.2239C69.9015 12.6979 69.5213 13.0677 69.0473 13.0677Z" fill="#77271F"/>
<path d="M73.6725 17.6823C73.6881 17.1979 74.1204 16.7969 74.5996 16.8281C75.0631 16.8594 75.4277 17.2552 75.4173 17.724C75.4068 18.224 74.9954 18.599 74.4954 18.5729C74.0266 18.5417 73.6621 18.151 73.6725 17.6823Z" fill="#77271F"/>
<path d="M66.2766 14.1824C66.6985 14.1772 67.0527 14.5106 67.0579 14.9376C67.0683 15.3647 66.735 15.7085 66.3079 15.7189C65.8808 15.7241 65.5318 15.396 65.5214 14.9689C65.511 14.547 65.8495 14.1928 66.2766 14.1824Z" fill="#77271F"/>
<path d="M69.0577 16.9324C69.4796 16.9428 69.8285 17.3022 69.8181 17.7189C69.8077 18.1356 69.4431 18.4897 69.0317 18.4793C68.6098 18.4741 68.2713 18.1147 68.2765 17.6876C68.2817 17.2658 68.6358 16.9272 69.0577 16.9324Z" fill="#77271F"/>
<path d="M71.8234 19.6927C72.2504 19.7031 72.5786 20.0573 72.5629 20.4843C72.5525 20.9114 72.2036 21.2343 71.7713 21.2239C71.3494 21.2083 71.0056 20.8489 71.0213 20.4323C71.0369 20.0104 71.3963 19.677 71.8234 19.6927Z" fill="#77271F"/>
<path d="M51.7606 1.18243C51.7606 0.755348 52.1095 0.411597 52.5314 0.416806C52.9533 0.422014 53.3022 0.776181 53.3022 1.19285C53.297 1.61472 52.9325 1.96889 52.521 1.96368C52.1043 1.96368 51.7554 1.60431 51.7554 1.18243H51.7606Z" fill="#77271F"/>
<path d="M57.2663 6.71353C57.2506 6.28645 57.584 5.93749 58.0111 5.92186C58.4329 5.91145 58.7923 6.24999 58.8027 6.67186C58.8183 7.08853 58.4694 7.45832 58.0527 7.47395C57.6413 7.48957 57.2715 7.13541 57.2611 6.71874L57.2663 6.71353Z" fill="#77271F"/>
<path d="M62.7713 12.1929C62.7713 11.7658 63.1202 11.4272 63.5421 11.4272C63.964 11.4325 64.3181 11.7918 64.3129 12.2085C64.3077 12.6252 63.9431 12.9793 63.5317 12.9741C63.115 12.9689 62.7661 12.6147 62.7713 12.1929Z" fill="#77271F"/>
<path d="M60.7866 10.2137C60.3595 10.2137 60.0106 9.86995 60.0106 9.44808C60.0106 9.0262 60.3595 8.67725 60.7814 8.67725C61.2085 8.67725 61.5522 9.021 61.5522 9.44808C61.5522 9.87516 61.2189 10.2085 60.7866 10.2085V10.2137Z" fill="#77271F"/>
<path d="M73.7818 23.2346C73.7714 22.8075 74.1048 22.4533 74.5266 22.4429C74.9485 22.4273 75.3079 22.7658 75.3235 23.1877C75.3339 23.6044 74.9902 23.9742 74.5735 23.9898C74.162 24.0054 73.7923 23.6512 73.7818 23.2346Z" fill="#77271F"/>
<path d="M55.2556 3.17191C55.6775 3.15628 56.0369 3.49482 56.0473 3.9167C56.0629 4.34378 55.7348 4.69274 55.3025 4.70316C54.8754 4.71357 54.5213 4.38545 54.5056 3.96357C54.4952 3.5417 54.8338 3.18232 55.2556 3.17191Z" fill="#77271F"/>
<path d="M57.3596 12.2241C57.3492 11.8491 57.6044 11.5575 57.9794 11.5314C58.3701 11.5054 58.7034 11.7918 58.7138 12.1721C58.7294 12.5471 58.4065 12.8856 58.0315 12.8804C57.6721 12.8804 57.3753 12.5887 57.3596 12.2241Z" fill="#77271F"/>
<path d="M60.7971 15.6198C60.4065 15.625 60.0836 15.3073 60.0992 14.9323C60.1148 14.5833 60.4221 14.276 60.7711 14.2656C61.1461 14.2552 61.4638 14.5781 61.4534 14.9687C61.4482 15.349 61.1773 15.6146 60.7971 15.6198Z" fill="#77271F"/>
<path d="M68.3756 23.1981C68.3808 22.8179 68.6516 22.547 69.0318 22.5418C69.4224 22.5366 69.7401 22.8491 69.7297 23.2293C69.7193 23.5783 69.412 23.8856 69.0579 23.896C68.6776 23.9064 68.3651 23.5835 68.3756 23.1929V23.1981Z" fill="#77271F"/>
<path d="M66.3079 21.125C65.9173 21.1354 65.5943 20.8229 65.6048 20.4427C65.6152 20.0937 65.9173 19.7864 66.2714 19.7708C66.6412 19.7552 66.9641 20.0781 66.9589 20.4687C66.9537 20.8437 66.6829 21.1198 66.3079 21.125Z" fill="#77271F"/>
<path d="M47.0312 0.515625C47.3958 0.520833 47.6927 0.8125 47.7031 1.16667C47.7187 1.54167 47.3906 1.875 47.0156 1.86979C46.6302 1.86979 46.3333 1.54687 46.3489 1.15104C46.3645 0.776041 46.651 0.515625 47.026 0.515625H47.0312Z" fill="#77271F"/>
<path d="M72.4692 25.9687C72.464 26.3437 72.1932 26.625 71.8182 26.6302C71.4276 26.6458 71.1047 26.3333 71.1099 25.9531C71.1203 25.5833 71.464 25.2552 71.8338 25.2812C72.1932 25.3021 72.4692 25.6042 72.4692 25.9687Z" fill="#77271F"/>
<path d="M55.2971 10.1147C54.9065 10.1251 54.5836 9.81264 54.594 9.43243C54.6044 9.08347 54.9065 8.77618 55.2555 8.76055C55.6305 8.74493 55.9534 9.06785 55.9482 9.45847C55.943 9.83347 55.6721 10.1095 55.2971 10.1147Z" fill="#77271F"/>
<path d="M50.4431 3.95309C50.4379 4.3333 50.1619 4.60413 49.7869 4.60934C49.3962 4.61455 49.0733 4.29684 49.0889 3.92184C49.0994 3.57288 49.4119 3.26559 49.7608 3.25517C50.1358 3.23955 50.4535 3.56767 50.4431 3.95309Z" fill="#77271F"/>
<path d="M51.8545 6.70852C51.8493 6.33352 52.1149 6.04185 52.4899 6.02622C52.8805 6.0106 53.2087 6.30748 53.2139 6.68768C53.2139 7.06268 52.8857 7.39081 52.5107 7.38039C52.1514 7.36997 51.8597 7.06789 51.8545 6.70852Z" fill="#77271F"/>
<path d="M62.8704 17.6823C62.8808 17.3073 63.1516 17.0364 63.5318 17.0364C63.9225 17.0312 64.2402 17.3489 64.2245 17.7291C64.2089 18.0781 63.8964 18.3802 63.5475 18.3906C63.1673 18.3958 62.86 18.0729 62.8704 17.6823Z" fill="#77271F"/>
<path d="M46.995 7.28645C46.6565 7.27603 46.3857 6.98436 46.4117 6.65103C46.4325 6.34895 46.7086 6.08853 47.0159 6.08332C47.344 6.07811 47.6253 6.35936 47.62 6.70311C47.6148 7.05207 47.3544 7.30207 46.995 7.28645Z" fill="#77271F"/>
<path d="M63.5474 23.8073C63.2036 23.8125 62.9224 23.5365 62.9276 23.2031C62.9276 22.8802 63.2349 22.5834 63.5578 22.599C63.8651 22.6094 64.1255 22.8698 64.1359 23.1823C64.1463 23.5365 63.8963 23.8021 63.5474 23.8073Z" fill="#77271F"/>
<path d="M66.2711 25.3645C66.6096 25.3541 66.9013 25.625 66.9013 25.9583C66.9065 26.276 66.6044 26.5781 66.2867 26.5781C65.9742 26.5729 65.7138 26.3177 65.693 26C65.6721 25.6458 65.9169 25.375 66.2711 25.3645Z" fill="#77271F"/>
<path d="M41.5317 1.78648C41.1879 1.79169 40.9015 1.52085 40.9015 1.18752C40.9015 0.869809 41.2088 0.567727 41.5265 0.578143C41.8338 0.583352 42.0994 0.83856 42.115 1.15106C42.1306 1.51043 41.8858 1.77606 41.5317 1.78648Z" fill="#77271F"/>
<path d="M60.7818 21.0729C60.4485 21.0677 60.1777 20.776 60.1881 20.4375C60.1985 20.0885 60.4693 19.8385 60.8235 19.8594C61.136 19.875 61.3912 20.1406 61.3964 20.4531C61.4016 20.7708 61.0995 21.0729 60.7818 21.0729Z" fill="#77271F"/>
<path d="M52.5212 12.797C52.1775 12.7918 51.9015 12.5158 51.9171 12.1825C51.9275 11.8543 52.24 11.5679 52.5577 11.5887C52.865 11.6043 53.115 11.87 53.1254 12.1825C53.1306 12.5366 52.8754 12.797 52.5212 12.797Z" fill="#77271F"/>
<path d="M69.0731 29.3126C68.7294 29.3282 68.4377 29.0626 68.4325 28.7292C68.4221 28.4063 68.7242 28.1042 69.0419 28.1042C69.3544 28.1042 69.62 28.3542 69.6408 28.672C69.6617 29.0261 69.4221 29.297 69.0731 29.3126Z" fill="#77271F"/>
<path d="M55.2973 14.3543C55.6306 14.3595 55.9118 14.6564 55.891 14.9845C55.8702 15.2866 55.5993 15.5522 55.2973 15.5626C54.9639 15.5783 54.6827 15.297 54.6827 14.9533C54.6827 14.6043 54.9431 14.3439 55.2973 14.3543Z" fill="#77271F"/>
<path d="M49.1721 9.41156C49.193 9.06782 49.469 8.82302 49.8232 8.84907C50.1357 8.8699 50.3909 9.14594 50.3857 9.45323C50.3805 9.77615 50.0732 10.073 49.7555 10.0626C49.4221 10.047 49.1565 9.75532 49.1721 9.41156Z" fill="#77271F"/>
<path d="M58.042 18.3022C57.6983 18.3022 57.417 18.0314 57.4222 17.698C57.4222 17.3751 57.7295 17.0782 58.0524 17.0939C58.3597 17.1043 58.6149 17.3647 58.6305 17.6772C58.641 18.0314 58.391 18.297 58.042 18.297V18.3022Z" fill="#77271F"/>
<path d="M44.2921 3.34382C44.6306 3.35424 44.9067 3.65632 44.8806 3.97924C44.8546 4.28132 44.5733 4.55215 44.2765 4.55736C43.9431 4.56257 43.6671 4.27611 43.6723 3.93757C43.6723 3.5834 43.9379 3.3334 44.2921 3.34382Z" fill="#77271F"/>
<path d="M71.7971 30.8699C72.1356 30.8699 72.4169 31.1563 72.4065 31.4845C72.396 31.8074 72.0835 32.099 71.771 32.0834C71.4585 32.0678 71.2085 31.8022 71.1981 31.4845C71.1877 31.1303 71.4429 30.8699 71.7971 30.8699Z" fill="#77271F"/>
<path d="M60.2606 25.9791C60.2554 25.7031 60.4638 25.4687 60.7398 25.4479C61.0419 25.427 61.2971 25.651 61.3075 25.9531C61.3127 26.2239 61.1044 26.4583 60.8284 26.4791C60.5263 26.5 60.2711 26.276 60.2606 25.9791Z" fill="#77271F"/>
<path d="M44.2922 9.96355C43.9902 9.97397 43.7402 9.73959 43.7454 9.44272C43.7454 9.17188 43.9693 8.94272 44.2402 8.92709C44.5474 8.91668 44.7922 9.15105 44.787 9.45313C44.787 9.72918 44.5735 9.95313 44.2922 9.96355Z" fill="#77271F"/>
<path d="M57.511 23.224C57.5058 22.9272 57.7558 22.6772 58.0474 22.6876C58.3183 22.698 58.5474 22.9272 58.5527 23.198C58.5579 23.4897 58.3027 23.7501 58.011 23.7397C57.7454 23.724 57.5162 23.4949 57.511 23.224Z" fill="#77271F"/>
<path d="M55.2767 20.974C54.9746 20.974 54.7402 20.724 54.7558 20.4271C54.7767 20.1511 55.0058 19.9375 55.2819 19.9427C55.5892 19.9427 55.8183 20.1927 55.7975 20.4948C55.7819 20.7708 55.5527 20.9792 55.2767 20.9792V20.974Z" fill="#77271F"/>
<path d="M46.5005 12.1771C46.5109 11.9062 46.7349 11.6823 47.0109 11.6771C47.3026 11.6719 47.5526 11.9219 47.5422 12.2187C47.5317 12.4844 47.2922 12.7187 47.0317 12.724C46.7401 12.7344 46.4901 12.474 46.5005 12.1771Z" fill="#77271F"/>
<path d="M68.5214 34.2085C68.5318 33.9324 68.7506 33.7085 69.0266 33.6981C69.3183 33.6876 69.5735 33.9429 69.5683 34.2345C69.5579 34.5001 69.3235 34.7397 69.0579 34.7501C68.7662 34.7606 68.5162 34.5054 68.5214 34.2085Z" fill="#77271F"/>
<path d="M49.2504 14.9689C49.2452 14.6928 49.4536 14.4585 49.7296 14.4376C50.0317 14.4168 50.2869 14.6407 50.2921 14.9376C50.3025 15.2137 50.0942 15.448 49.8181 15.4689C49.5161 15.4897 49.2609 15.2657 49.2504 14.9689Z" fill="#77271F"/>
<path d="M52.5109 18.2293C52.2193 18.2241 51.9849 17.9585 52.0057 17.6616C52.0318 17.3856 52.2661 17.1773 52.5422 17.1825C52.8338 17.1877 53.0734 17.4533 53.0422 17.7502C53.0213 18.021 52.7765 18.2398 52.5109 18.2293Z" fill="#77271F"/>
<path d="M35.49 1.17723C35.4952 0.901193 35.714 0.677234 35.99 0.666818C36.2817 0.656401 36.5369 0.906401 36.5317 1.19807C36.5265 1.46369 36.2973 1.70328 36.0317 1.71369C35.74 1.72932 35.4848 1.47411 35.49 1.17723Z" fill="#77271F"/>
<path d="M38.7765 3.42188C39.0785 3.43229 39.3077 3.6875 39.2817 3.98438C39.2608 4.26042 39.0265 4.46354 38.7504 4.45833C38.4483 4.45312 38.2192 4.19271 38.2452 3.89583C38.266 3.61979 38.5004 3.41667 38.7765 3.42708V3.42188Z" fill="#77271F"/>
<path d="M65.7714 31.4897C65.7558 31.2136 65.9641 30.9793 66.2402 30.9532C66.5475 30.9272 66.8027 31.1511 66.8131 31.448C66.8235 31.7241 66.6152 31.9636 66.3391 31.9845C66.0371 32.0105 65.7819 31.7866 65.7714 31.4897Z" fill="#77271F"/>
<path d="M71.8183 37.4897C71.5162 37.5002 71.2714 37.2658 71.2714 36.9689C71.2766 36.6929 71.5006 36.4689 71.7766 36.4585C72.0787 36.4429 72.3235 36.6824 72.3183 36.9845C72.3131 37.2606 72.0943 37.4793 71.8183 37.4897Z" fill="#77271F"/>
<path d="M63.5525 29.2448C63.2816 29.25 63.042 29.0313 63.0212 28.7604C62.9952 28.4584 63.2295 28.1979 63.5264 28.1927C63.7972 28.1823 64.0316 28.4011 64.0577 28.6719C64.0837 28.9584 63.8389 29.2344 63.5525 29.2448Z" fill="#77271F"/>
<path d="M40.9951 6.67716C41.0055 6.40112 41.2295 6.17716 41.5055 6.17195C41.7972 6.16675 42.0472 6.41675 42.0368 6.71362C42.0264 6.97925 41.7868 7.21362 41.5264 7.22404C41.2347 7.22925 40.9847 6.96883 40.9951 6.67716Z" fill="#77271F"/>
<path d="M54.818 25.9635C54.818 25.7031 55.0264 25.5 55.2816 25.5C55.5368 25.5 55.7451 25.7135 55.7451 25.9635C55.7451 26.2083 55.5159 26.4375 55.2764 26.4323C55.0264 26.4323 54.818 26.2135 54.818 25.9635Z" fill="#77271F"/>
<path d="M66.292 37.448C66.042 37.448 65.8285 37.2292 65.8285 36.974C65.8285 36.7188 66.0368 36.5105 66.292 36.5105C66.542 36.5105 66.7607 36.724 66.7607 36.974C66.7607 37.2188 66.5316 37.448 66.292 37.448Z" fill="#77271F"/>
<path d="M71.3338 42.4844C71.3338 42.2292 71.5422 42.0156 71.7922 42.0156C72.0422 42.0156 72.2609 42.224 72.2661 42.474C72.2661 42.7187 72.0474 42.9479 71.8026 42.9531C71.5526 42.9531 71.339 42.7396 71.3338 42.4844Z" fill="#77271F"/>
<path d="M60.3233 31.4636C60.3285 31.2031 60.5369 31 60.7921 31.0052C61.0473 31.0104 61.2556 31.2292 61.2504 31.474C61.2452 31.7188 61.016 31.9427 60.7764 31.9427C60.5264 31.9375 60.3181 31.7188 60.3233 31.4636Z" fill="#77271F"/>
<path d="M49.7454 20.9271C49.5006 20.9114 49.2975 20.6771 49.3131 20.4271C49.3288 20.1771 49.5527 19.9791 49.8027 19.9948C50.0579 20.0104 50.2611 20.2396 50.2402 20.4896C50.2246 20.7291 49.9798 20.9479 49.7454 20.9271Z" fill="#77271F"/>
<path d="M33.2347 3.47401C33.4899 3.46359 33.7138 3.67192 33.7243 3.92192C33.7347 4.16151 33.5159 4.39588 33.2763 4.41151C33.0315 4.42713 32.8076 4.21359 32.7972 3.95838C32.7868 3.70317 32.9847 3.48442 33.2347 3.47401Z" fill="#77271F"/>
<path d="M38.3024 9.448C38.3024 9.19279 38.5055 8.98446 38.7607 8.97925C39.016 8.97925 39.2295 9.19279 39.2295 9.44279C39.2295 9.68758 39.0055 9.91154 38.766 9.91675C38.516 9.91675 38.3024 9.7032 38.3024 9.448Z" fill="#77271F"/>
<path d="M44.2556 14.4896C44.5108 14.4844 44.7296 14.6875 44.7348 14.9427C44.74 15.1823 44.5212 15.4115 44.2764 15.4219C44.0316 15.4323 43.8129 15.2188 43.8077 14.9636C43.8025 14.7084 44.0056 14.4948 44.2556 14.4896Z" fill="#77271F"/>
<path d="M63.5369 34.6824C63.2817 34.6824 63.0734 34.4792 63.0682 34.224C63.0682 33.9792 63.2817 33.7605 63.5369 33.7605C63.7974 33.7605 64.0005 33.9636 64.0005 34.224C64.0005 34.4845 63.8026 34.6772 63.5369 34.6824Z" fill="#77271F"/>
<path d="M57.5631 28.7137C57.5631 28.4689 57.7818 28.2554 58.0318 28.2554C58.2922 28.2554 58.4953 28.4585 58.4901 28.7137C58.4901 28.9741 58.2922 29.172 58.0266 29.172C57.7714 29.172 57.5631 28.9689 57.5631 28.7137Z" fill="#77271F"/>
<path d="M41.0471 12.224C41.0315 11.9844 41.2398 11.7553 41.4898 11.7397C41.7503 11.724 41.9638 11.9167 41.9742 12.1719C41.9898 12.4272 41.7971 12.6407 41.5419 12.6563C41.2867 12.6719 41.0628 12.474 41.0471 12.224Z" fill="#77271F"/>
<path d="M69.047 40.1875C68.7866 40.1875 68.5783 39.9844 68.5783 39.7292C68.5731 39.4844 68.7866 39.2656 69.0418 39.2656C69.297 39.2656 69.5054 39.4687 69.5054 39.724C69.5054 39.9896 69.3075 40.1823 69.047 40.1875Z" fill="#77271F"/>
<path d="M47.0106 17.245C47.2711 17.2398 47.4794 17.4377 47.4794 17.6929C47.4846 17.9533 47.2919 18.1564 47.0315 18.1616C46.7763 18.1721 46.5575 17.9689 46.5523 17.7137C46.5419 17.4741 46.7606 17.2502 47.0106 17.245Z" fill="#77271F"/>
<path d="M35.5418 6.69279C35.5418 6.44279 35.7606 6.22925 36.0158 6.22925C36.271 6.23446 36.4741 6.43758 36.4741 6.698C36.4689 6.95321 36.271 7.15112 36.0054 7.15112C35.7502 7.15112 35.5418 6.948 35.5418 6.69279Z" fill="#77271F"/>
<path d="M52.0579 23.2397C52.0422 22.9949 52.2506 22.7658 52.5006 22.7502C52.761 22.7345 52.9745 22.9272 52.985 23.1824C53.0006 23.4429 52.8079 23.6564 52.5527 23.672C52.2975 23.6824 52.0735 23.4897 52.0579 23.2397Z" fill="#77271F"/>
<path d="M35.61 12.2032C35.61 11.9896 35.7818 11.8126 35.9902 11.8021C36.2246 11.7917 36.4225 11.9948 36.4068 12.224C36.3912 12.4271 36.1933 12.6094 35.9954 12.599C35.7923 12.5938 35.6152 12.4063 35.61 12.198V12.2032Z" fill="#77271F"/>
<path d="M52.1306 28.6616C52.1618 28.448 52.3545 28.297 52.5629 28.3178C52.7972 28.3439 52.9639 28.573 52.9118 28.8022C52.8701 29.0053 52.6514 29.1512 52.4587 29.1147C52.2504 29.073 52.1045 28.8699 52.1306 28.6616Z" fill="#77271F"/>
<path d="M69.0526 44.8334C69.261 44.8386 69.4433 45.0209 69.4433 45.2292C69.4485 45.4323 69.261 45.625 69.063 45.6355C68.8391 45.6459 68.6308 45.4375 68.6464 45.2084C68.662 44.9948 68.8443 44.8282 69.0526 44.8334Z" fill="#77271F"/>
<path d="M30.5109 6.29186C30.7192 6.29707 30.9015 6.47936 30.9067 6.6877C30.9067 6.88561 30.7244 7.08353 30.5265 7.09395C30.3026 7.10957 30.0942 6.90124 30.1099 6.67207C30.1203 6.45853 30.2974 6.28665 30.5109 6.29186Z" fill="#77271F"/>
<path d="M46.6253 23.2137C46.6253 23.0001 46.792 22.8231 47.0055 22.8126C47.2347 22.8022 47.4378 23.0053 47.417 23.2397C47.4066 23.4376 47.2087 23.6199 47.0107 23.6147C46.8024 23.6043 46.6253 23.4168 46.6253 23.2085V23.2137Z" fill="#77271F"/>
<path d="M57.6408 34.1667C57.6721 33.9532 57.8596 33.8021 58.0731 33.823C58.3075 33.849 58.4689 34.0782 58.4221 34.3073C58.3752 34.5105 58.1564 34.6615 57.9637 34.6198C57.7554 34.5782 57.6096 34.375 57.6408 34.1667Z" fill="#77271F"/>
<path d="M63.5681 40.1302C63.365 40.1458 63.167 39.9792 63.1462 39.7708C63.1202 39.5312 63.3025 39.3281 63.542 39.3281C63.7452 39.3281 63.9327 39.5052 63.9379 39.7135C63.9431 39.9167 63.766 40.1146 63.5681 40.1302Z" fill="#77271F"/>
<path d="M41.1204 17.7083C41.1204 17.4948 41.2871 17.3177 41.5006 17.3073C41.7298 17.2969 41.9329 17.5 41.9121 17.7344C41.9017 17.9323 41.7038 18.1146 41.5059 18.1094C41.2975 18.0989 41.1204 17.9114 41.1204 17.7031V17.7083Z" fill="#77271F"/>
<path d="M71.8182 47.5938C72.037 47.6042 72.1984 47.7813 72.1932 47.9948C72.188 48.2344 71.9901 48.4063 71.7453 48.375C71.537 48.3542 71.3807 48.1615 71.4016 47.9531C71.4224 47.7396 71.6047 47.5833 71.8182 47.5938Z" fill="#77271F"/>
<path d="M65.891 42.4585C65.9066 42.2502 66.0889 42.0835 66.2973 42.0887C66.516 42.0939 66.6879 42.2606 66.6879 42.4742C66.6931 42.7189 66.4952 42.896 66.2504 42.8752C66.0421 42.8544 65.8806 42.6669 65.891 42.4585Z" fill="#77271F"/>
<path d="M55.3026 31.8595C55.0943 31.8751 54.9068 31.7188 54.8807 31.5105C54.8599 31.297 55.0057 31.1095 55.2245 31.0834C55.4641 31.0522 55.6724 31.2293 55.6776 31.4584C55.6828 31.6772 55.5214 31.849 55.3026 31.8647V31.8595Z" fill="#77271F"/>
<path d="M49.3755 25.9429C49.3859 25.7345 49.5682 25.5679 49.7817 25.5679C49.9953 25.5731 50.1672 25.745 50.1724 25.9585C50.1724 26.1981 49.9797 26.3752 49.7349 26.3543C49.5265 26.3387 49.3651 26.146 49.3755 25.9429Z" fill="#77271F"/>
<path d="M43.8701 20.4375C43.8805 20.224 44.0628 20.0625 44.2764 20.0625C44.4899 20.0677 44.6618 20.2396 44.667 20.4531C44.667 20.6927 44.4743 20.8698 44.2295 20.849C44.0212 20.8333 43.8597 20.6406 43.8701 20.4375Z" fill="#77271F"/>
<path d="M60.7558 37.3646C60.5475 37.3542 60.3756 37.1667 60.386 36.9583C60.3912 36.75 60.5735 36.5781 60.787 36.5781C61.0266 36.5833 61.2089 36.7865 61.1777 37.0208C61.1516 37.2396 60.9745 37.3854 60.7558 37.3646Z" fill="#77271F"/>
<path d="M38.3647 14.9324C38.3752 14.724 38.5575 14.5574 38.7658 14.5574C38.9845 14.5626 39.1564 14.7345 39.1616 14.9428C39.1616 15.1824 38.9689 15.3647 38.7241 15.3438C38.5158 15.3282 38.3543 15.1407 38.3647 14.9324Z" fill="#77271F"/>
<path d="M32.8595 9.45329C32.8543 9.24496 33.0262 9.06267 33.2345 9.05225C33.4533 9.04183 33.6356 9.19808 33.6512 9.40642C33.672 9.65121 33.4898 9.84392 33.2502 9.83871C33.0366 9.83871 32.8648 9.66683 32.8595 9.45329Z" fill="#77271F"/>
<path d="M27.7398 4.33349C27.5315 4.33349 27.3544 4.15641 27.3492 3.94808C27.3492 3.73974 27.5211 3.55745 27.7294 3.54703C27.969 3.53662 28.1617 3.72933 28.1461 3.9637C28.1357 4.18245 27.9586 4.3387 27.745 4.33349H27.7398Z" fill="#77271F"/>
<path d="M38.7401 20.8126C38.563 20.8022 38.412 20.6199 38.4224 20.4376C38.4328 20.2397 38.5891 20.0991 38.787 20.1147C38.9745 20.1251 39.1308 20.3022 39.1151 20.4793C39.0943 20.6616 38.912 20.823 38.7401 20.8126Z" fill="#77271F"/>
<path d="M21.9012 3.95846C21.8908 3.76054 22.0366 3.60429 22.2294 3.59388C22.4169 3.58867 22.5887 3.74492 22.5991 3.92721C22.6096 4.09909 22.4429 4.28138 22.2606 4.297C22.0835 4.30742 21.9116 4.14596 21.9012 3.95846Z" fill="#77271F"/>
<path d="M30.1514 12.1875C30.1618 12.0105 30.3337 11.8438 30.5108 11.849C30.6983 11.8542 30.8493 12.0157 30.8441 12.2084C30.8441 12.4063 30.6983 12.5417 30.4951 12.5365C30.2972 12.5313 30.1462 12.375 30.1514 12.1875Z" fill="#77271F"/>
<path d="M63.188 45.2239C63.1932 45.0416 63.3651 44.8802 63.5474 44.8854C63.7349 44.8906 63.8859 45.052 63.8807 45.2395C63.8755 45.4375 63.7297 45.5729 63.5266 45.5729C63.3339 45.5677 63.1828 45.4114 63.188 45.2239Z" fill="#77271F"/>
<path d="M54.938 36.9688C54.938 36.7709 55.0891 36.6251 55.287 36.6303C55.4745 36.6355 55.6359 36.8021 55.6307 36.9844C55.6255 37.1615 55.4484 37.3334 55.2714 37.3282C55.0943 37.3282 54.9328 37.1563 54.938 36.9688Z" fill="#77271F"/>
<path d="M47.0419 29.0573C46.8544 29.0677 46.6825 28.9219 46.6669 28.7396C46.6564 28.5677 46.8127 28.3854 46.995 28.3698C47.1825 28.3542 47.3492 28.5 47.3596 28.6927C47.3752 28.8906 47.245 29.0417 47.0419 29.0573Z" fill="#77271F"/>
<path d="M71.4535 53.5158C71.4431 53.3179 71.5837 53.1564 71.7764 53.146C71.9587 53.1356 72.1358 53.2918 72.1514 53.4741C72.1618 53.646 71.9951 53.8283 71.8181 53.8439C71.641 53.8595 71.4691 53.7033 71.4535 53.5158Z" fill="#77271F"/>
<path d="M24.6462 6.69792C24.6462 6.52083 24.8128 6.34896 24.9951 6.34375C25.1826 6.34375 25.3389 6.5 25.3389 6.69271C25.3389 6.89063 25.2035 7.03125 25.0003 7.03125C24.8076 7.03646 24.6462 6.88021 24.6462 6.69792Z" fill="#77271F"/>
<path d="M66.2713 47.6406C66.4588 47.6302 66.6307 47.7865 66.6411 47.9688C66.6567 48.1406 66.49 48.3229 66.3129 48.3385C66.1359 48.3542 65.9588 48.1979 65.9484 48.0052C65.9379 47.8073 66.0786 47.651 66.2713 47.6406Z" fill="#77271F"/>
<path d="M41.5422 23.5522C41.3495 23.5626 41.1776 23.4168 41.162 23.2345C41.1464 23.0626 41.3078 22.8803 41.4901 22.8647C41.6724 22.8439 41.8443 22.9949 41.8547 23.1824C41.8703 23.3856 41.7401 23.5366 41.5422 23.5522Z" fill="#77271F"/>
<path d="M36.0315 18.0468C35.8388 18.0573 35.6721 17.9114 35.6565 17.7291C35.6461 17.5521 35.8075 17.375 35.9846 17.3593C36.1721 17.3385 36.3388 17.4896 36.3544 17.6823C36.3648 17.8802 36.2294 18.0312 36.0315 18.0468Z" fill="#77271F"/>
<path d="M68.6929 50.7136C68.7085 50.5313 68.8908 50.3751 69.0679 50.3855C69.2502 50.4011 69.4012 50.5782 69.3856 50.7605C69.3752 50.9584 69.2189 51.0886 69.0158 51.0782C68.8283 51.0626 68.6773 50.8959 68.6929 50.7136Z" fill="#77271F"/>
<path d="M27.7658 9.10423C27.9533 9.10943 28.1095 9.28131 28.0991 9.45839C28.0887 9.64068 27.9116 9.80735 27.7397 9.80214C27.5574 9.79172 27.4012 9.61985 27.4064 9.43235C27.4116 9.23443 27.5679 9.09381 27.7606 9.09902L27.7658 9.10423Z" fill="#77271F"/>
<path d="M33.2661 15.3074C33.0838 15.3126 32.9224 15.146 32.9172 14.9585C32.9119 14.7605 33.0578 14.6095 33.2505 14.6095C33.438 14.6043 33.6047 14.7657 33.6099 14.948C33.6099 15.1251 33.438 15.3022 33.2661 15.3074Z" fill="#77271F"/>
<path d="M49.7816 31.823C49.6045 31.8282 49.4379 31.6668 49.4327 31.4793C49.4275 31.2814 49.5733 31.1251 49.766 31.1251C49.9535 31.1199 50.1254 31.2814 50.1254 31.4637C50.1306 31.6407 49.9587 31.8178 49.7816 31.823Z" fill="#77271F"/>
<path d="M52.511 33.875C52.6985 33.8646 52.86 34.0156 52.8652 34.2084C52.8756 34.4115 52.735 34.5573 52.5371 34.5625C52.3443 34.5677 52.1777 34.4167 52.1725 34.2344C52.1673 34.0573 52.3287 33.8854 52.511 33.875Z" fill="#77271F"/>
<path d="M44.2763 26.3177C44.094 26.3229 43.9325 26.1614 43.9273 25.9739C43.9221 25.776 44.0627 25.6198 44.2606 25.6198C44.4481 25.6145 44.6148 25.776 44.62 25.9583C44.6252 26.1302 44.4533 26.3125 44.2763 26.3177Z" fill="#77271F"/>
<path d="M61.1356 42.5054C61.12 42.6877 60.9325 42.8491 60.7606 42.8387C60.5836 42.8231 60.4325 42.646 60.4429 42.4585C60.4533 42.2606 60.6096 42.1252 60.8075 42.1356C60.995 42.1512 61.1513 42.3231 61.1356 42.5054Z" fill="#77271F"/>
<path d="M57.6774 39.7398C57.6721 39.5627 57.8388 39.3856 58.0211 39.3804C58.2086 39.37 58.3701 39.5262 58.3701 39.7137C58.3805 39.9168 58.2399 40.0627 58.0419 40.0679C57.8492 40.0731 57.6826 39.922 57.6774 39.7398Z" fill="#77271F"/>
<path d="M71.5003 59C71.5056 58.8385 71.6618 58.6979 71.8233 58.7083C71.9587 58.7187 72.0785 58.8541 72.0785 58.9948C72.0837 59.1666 71.9431 59.2916 71.766 59.276C71.6253 59.2604 71.5003 59.1302 71.5003 59Z" fill="#77271F"/>
<path d="M49.8076 37.2502C49.6305 37.2658 49.4795 37.1408 49.4795 36.9793C49.4795 36.8439 49.5993 36.7137 49.7399 36.6877C49.9014 36.6668 50.0576 36.8023 50.0576 36.9689C50.0576 37.12 49.9535 37.2398 49.8076 37.2502Z" fill="#77271F"/>
<path d="M60.4897 47.9845C60.495 47.8283 60.6512 47.6876 60.8127 47.6981C60.9481 47.7085 61.0679 47.8387 61.0679 47.9845C61.0679 48.1564 60.9325 48.2814 60.7554 48.2658C60.6147 48.2501 60.4897 48.1199 60.4897 47.9845Z" fill="#77271F"/>
<path d="M66.5732 53.5156C66.5628 53.6666 66.443 53.7708 66.2919 53.7708C66.1253 53.7708 65.9794 53.6198 66.0003 53.4635C66.0159 53.3281 66.1513 53.2031 66.2867 53.1979C66.4482 53.1927 66.5836 53.3489 66.5732 53.5208V53.5156Z" fill="#77271F"/>
<path d="M22.2713 9.15631C22.4119 9.16672 22.5265 9.30214 22.5317 9.44276C22.5317 9.61985 22.3911 9.73964 22.214 9.72402C22.0734 9.70839 21.9484 9.57818 21.9536 9.44797C21.9536 9.28651 22.1099 9.14589 22.2713 9.15631Z" fill="#77271F"/>
<path d="M43.9741 31.4636C43.9793 31.3073 44.1408 31.1667 44.3022 31.1823C44.4429 31.198 44.5522 31.3282 44.5522 31.474C44.5522 31.6459 44.4064 31.7657 44.2293 31.7448C44.0887 31.7292 43.9689 31.599 43.9741 31.4636Z" fill="#77271F"/>
<path d="M38.4745 25.9896C38.4589 25.8281 38.5995 25.6719 38.7662 25.6719C38.8964 25.6719 39.0318 25.7917 39.0422 25.9323C39.0579 26.0885 38.9641 26.2135 38.8183 26.2396C38.6464 26.2656 38.485 26.151 38.4745 25.9896Z" fill="#77271F"/>
<path d="M55.2819 42.7605C55.136 42.7605 55.0058 42.6512 54.9902 42.5158C54.9746 42.3543 55.1152 42.198 55.2766 42.1876C55.4329 42.1824 55.5735 42.3335 55.5579 42.5053C55.5475 42.6564 55.4329 42.7605 55.2819 42.7605Z" fill="#77271F"/>
<path d="M16.7402 4.22393C16.5995 4.22393 16.4641 4.10934 16.4485 3.97393C16.4329 3.81768 16.5735 3.65622 16.735 3.65101C16.8964 3.6458 17.0318 3.79684 17.0214 3.96872C17.011 4.11976 16.8964 4.22393 16.7402 4.22393Z" fill="#77271F"/>
<path d="M27.7814 14.6667C27.922 14.6771 28.0366 14.8073 28.0366 14.9532C28.0366 15.1251 27.896 15.2501 27.7189 15.2292C27.5731 15.2136 27.4533 15.0834 27.4585 14.948C27.4585 14.7917 27.62 14.6511 27.7814 14.6667Z" fill="#77271F"/>
<path d="M33.2868 20.7345C33.1149 20.7502 32.9639 20.62 32.9639 20.4585C32.9639 20.3231 33.0837 20.1929 33.2243 20.172C33.3857 20.1512 33.542 20.2866 33.542 20.4533C33.542 20.6043 33.4378 20.7241 33.2868 20.7345Z" fill="#77271F"/>
<path d="M57.7503 45.2084C57.7607 45.0574 57.8805 44.948 58.0315 44.948C58.1982 44.948 58.344 45.1042 58.3232 45.2605C58.3024 45.3959 58.167 45.5261 58.0367 45.5313C57.8805 45.5365 57.7399 45.3751 57.7503 45.2084Z" fill="#77271F"/>
<path d="M46.74 34.1979C46.7505 34.0469 46.8702 33.9375 47.0213 33.9375C47.188 33.9375 47.3338 34.0937 47.313 34.25C47.2921 34.3854 47.1567 34.5156 47.0265 34.5208C46.8702 34.526 46.7296 34.3646 46.74 34.1979Z" fill="#77271F"/>
<path d="M69.0106 56.5365C68.8491 56.5157 68.7345 56.349 68.7658 56.1823C68.797 56.0365 68.9273 55.9427 69.0783 55.9636C69.2189 55.9792 69.3439 56.1146 69.3387 56.25C69.3335 56.4063 69.1668 56.5521 69.0106 56.5365Z" fill="#77271F"/>
<path d="M30.5005 18.0001C30.3703 18.0001 30.2401 17.8751 30.2244 17.7345C30.2036 17.5574 30.339 17.4167 30.5109 17.4167C30.6515 17.422 30.7869 17.547 30.7973 17.6824C30.8078 17.8386 30.6567 18.0001 30.5005 18.0001Z" fill="#77271F"/>
<path d="M24.7137 12.1981C24.7137 12.047 24.8231 11.9272 24.9742 11.9168C25.1408 11.9064 25.2971 12.047 25.2919 12.2033C25.2867 12.3595 25.12 12.5106 24.9637 12.4897C24.8335 12.4741 24.7137 12.3387 24.7137 12.1981Z" fill="#77271F"/>
<path d="M36.0055 23.5053C35.8753 23.5053 35.7451 23.3803 35.7295 23.2396C35.7086 23.0678 35.8389 22.9219 36.0159 22.9271C36.1566 22.9271 36.292 23.0521 36.2972 23.1876C36.3128 23.3438 36.167 23.5053 36.0055 23.5053Z" fill="#77271F"/>
<path d="M41.2347 28.6928C41.2451 28.5417 41.3649 28.4324 41.5159 28.4324C41.6826 28.4324 41.8284 28.5886 41.8076 28.7449C41.7867 28.8803 41.6513 29.0105 41.5211 29.0157C41.3649 29.0209 41.2242 28.8595 41.2347 28.6928Z" fill="#77271F"/>
<path d="M19.4902 6.98958C19.36 6.98958 19.2298 6.86458 19.2142 6.71875C19.1933 6.54688 19.3235 6.40625 19.5006 6.40625C19.6413 6.41146 19.7767 6.53125 19.7871 6.66667C19.7975 6.82812 19.6465 6.98958 19.4902 6.98958Z" fill="#77271F"/>
<path d="M52.245 39.7033C52.2554 39.5575 52.3752 39.4429 52.5262 39.4429C52.6877 39.4429 52.8387 39.5991 52.8179 39.7554C52.8023 39.8908 52.6616 40.021 52.5314 40.0262C52.3752 40.0314 52.2346 39.87 52.245 39.7033Z" fill="#77271F"/>
<path d="M63.2557 50.7135C63.2661 50.5625 63.3911 50.4531 63.5369 50.4531C63.7036 50.4531 63.8494 50.6094 63.8286 50.7656C63.813 50.901 63.6723 51.0313 63.5421 51.0365C63.3859 51.0417 63.2452 50.8802 63.2557 50.7135Z" fill="#77271F"/>
<path d="M44.0527 36.9948C44.0735 36.8282 44.2089 36.7188 44.3131 36.7709C44.386 36.8073 44.4537 36.8959 44.4746 36.9792C44.5006 37.0886 44.3496 37.2292 44.2558 37.1823C44.1673 37.1459 44.0996 37.0469 44.0527 36.9948Z" fill="#77271F"/>
<path d="M16.5263 9.48977C16.5368 9.30748 16.6513 9.1981 16.7659 9.24498C16.844 9.27102 16.9222 9.35435 16.9482 9.43248C16.9847 9.53664 16.844 9.68769 16.7399 9.65644C16.6513 9.63039 16.5784 9.53144 16.5263 9.48977Z" fill="#77271F"/>
<path d="M60.5683 53.5261C60.5839 53.349 60.7141 53.2396 60.8183 53.2865C60.8912 53.3178 60.9693 53.4063 60.9954 53.4844C61.0214 53.5938 60.8808 53.7344 60.7818 53.698C60.6881 53.6667 60.6204 53.5678 60.5683 53.5209V53.5261Z" fill="#77271F"/>
<path d="M66.0837 59.0574C66.0785 58.8751 66.1722 58.7814 66.3024 58.7866C66.4222 58.7918 66.4795 58.8699 66.5055 58.9637C66.5316 59.073 66.417 59.2293 66.3076 59.2032C66.2191 59.1876 66.141 59.0939 66.0837 59.0574Z" fill="#77271F"/>
<path d="M38.8336 31.6772C38.6721 31.6981 38.5575 31.5939 38.5523 31.4741C38.5523 31.3595 38.6148 31.2918 38.7138 31.2606C38.8179 31.2293 38.9898 31.3387 38.969 31.4324C38.9533 31.5314 38.87 31.6147 38.8336 31.6772Z" fill="#77271F"/>
<path d="M49.5628 42.5313C49.5628 42.349 49.667 42.2553 49.792 42.2657C49.9065 42.2813 49.969 42.3542 49.9847 42.4532C50.0107 42.5626 49.8909 42.7136 49.7868 42.6876C49.693 42.6615 49.6149 42.573 49.5628 42.5313Z" fill="#77271F"/>
<path d="M11.0265 4.00004C11.0213 3.81775 11.1203 3.724 11.2453 3.72921C11.3651 3.73442 11.4224 3.81254 11.4484 3.90629C11.4744 4.01567 11.3599 4.17192 11.2557 4.14588C11.1619 4.13025 11.0838 4.0365 11.0265 4.00004Z" fill="#77271F"/>
<path d="M71.5786 64.5261C71.5994 64.3542 71.7348 64.25 71.839 64.2969C71.9119 64.3333 71.9848 64.4271 72.0004 64.5052C72.0265 64.6146 71.8754 64.7552 71.7817 64.7136C71.6932 64.6771 71.6307 64.5781 71.5786 64.5261Z" fill="#77271F"/>
<path d="M33.2503 25.75C33.3701 25.75 33.4795 25.8542 33.469 25.9688C33.4638 26.0885 33.3336 26.2135 33.2347 26.1719C33.1617 26.1406 33.0836 26.0625 33.0524 25.9844C33.0107 25.8698 33.1253 25.7552 33.2503 25.75Z" fill="#77271F"/>
<path d="M22.2452 14.7397C22.365 14.7397 22.4692 14.8491 22.4588 14.9637C22.4483 15.0835 22.3233 15.1929 22.2192 15.1668C22.115 15.146 22.0473 15.0783 22.0369 14.9689C22.0213 14.8491 22.1202 14.7397 22.2452 14.7397Z" fill="#77271F"/>
<path d="M55.2713 48.2814C55.1775 48.1407 55.0942 48.0574 55.0734 47.9637C55.0578 47.8647 55.1463 47.7866 55.2557 47.7762C55.3755 47.7605 55.5161 47.8699 55.4848 47.9741C55.4588 48.073 55.3703 48.1459 55.2713 48.2814Z" fill="#77271F"/>
<path d="M27.5471 20.5313C27.5263 20.3542 27.6252 20.2501 27.745 20.2449C27.8648 20.2449 27.9273 20.3126 27.9638 20.4115C28.0002 20.5105 27.8961 20.6772 27.7867 20.6667C27.6929 20.6511 27.6096 20.5678 27.5471 20.5313Z" fill="#77271F"/>
<path d="M30.287 23.2553C30.2974 23.0782 30.4276 22.9688 30.5474 23.0053C30.6516 23.0313 30.7193 23.099 30.7141 23.224C30.7089 23.3542 30.5891 23.4584 30.4641 23.4115C30.3859 23.3803 30.3287 23.2917 30.287 23.2553Z" fill="#77271F"/>
<path d="M46.8023 39.7656C46.8231 39.5886 46.9585 39.4896 47.0731 39.5261C47.1773 39.5573 47.2398 39.6302 47.2293 39.75C47.2189 39.875 47.0887 39.9792 46.9741 39.9271C46.896 39.8906 46.8439 39.8021 46.8023 39.7656Z" fill="#77271F"/>
<path d="M57.818 50.7343C57.818 50.6146 57.9482 50.5052 58.068 50.5312C58.1722 50.5573 58.2451 50.6198 58.2451 50.7448C58.2399 50.8646 58.1722 50.9271 58.0628 50.9427C57.9326 50.9635 57.818 50.8593 57.818 50.7343Z" fill="#77271F"/>
<path d="M63.3231 56.2709C63.3075 56.1511 63.4169 56.0313 63.5419 56.0365C63.6565 56.0418 63.7346 56.1042 63.745 56.2188C63.7606 56.3334 63.7034 56.4167 63.594 56.448C63.4794 56.4792 63.3388 56.3907 63.3284 56.2709H63.3231Z" fill="#77271F"/>
<path d="M19.4637 11.9324C19.5627 12.0209 19.6564 12.073 19.6929 12.1459C19.745 12.2605 19.646 12.3959 19.5158 12.4063C19.3856 12.4167 19.2554 12.3178 19.2866 12.198C19.3075 12.1147 19.3856 12.047 19.4637 11.9324Z" fill="#77271F"/>
<path d="M69.1096 61.5469C69.146 61.5938 69.2294 61.6615 69.245 61.7396C69.2762 61.8646 69.1564 61.9688 69.0262 61.9532C68.9116 61.9427 68.8439 61.875 68.8335 61.7604C68.8179 61.6407 68.9377 61.5313 69.1096 61.5469Z" fill="#77271F"/>
<path d="M13.7662 6.72408C13.7975 6.54699 13.9277 6.45845 14.0475 6.49491C14.1516 6.52616 14.2089 6.60428 14.1985 6.72408C14.1829 6.84908 14.0475 6.94283 13.9329 6.89074C13.8547 6.85428 13.8027 6.76574 13.7662 6.72408Z" fill="#77271F"/>
<path d="M35.7918 28.7448C35.8179 28.5677 35.9481 28.4792 36.0679 28.5157C36.1772 28.5521 36.2293 28.6302 36.2189 28.7448C36.2085 28.8698 36.0731 28.9688 35.9533 28.9115C35.8804 28.875 35.8283 28.7865 35.7918 28.7448Z" fill="#77271F"/>
<path d="M52.4954 45.5001C52.4173 45.3855 52.3391 45.3178 52.3183 45.2397C52.2923 45.1199 52.4277 45.0157 52.5527 45.0261C52.6725 45.0365 52.7818 45.1824 52.7246 45.2865C52.6881 45.3647 52.5943 45.4115 52.4954 45.5001Z" fill="#77271F"/>
<path d="M41.5107 34.4896C41.4222 34.3854 41.3336 34.3281 41.3076 34.2448C41.2659 34.1354 41.3961 34.0156 41.5211 34.0156C41.6513 34.0156 41.7607 34.1354 41.719 34.2552C41.693 34.3333 41.6044 34.3906 41.5107 34.4896Z" fill="#77271F"/>
<path d="M25.0682 17.9115C24.8859 17.9219 24.7766 17.8177 24.787 17.6927C24.7974 17.5781 24.8703 17.5157 24.9797 17.5C25.1099 17.4792 25.2349 17.5938 25.2036 17.7136C25.1828 17.7969 25.1047 17.8646 25.0682 17.9063V17.9115Z" fill="#77271F"/>
<path d="M55.4951 58.9845C55.4066 59.0574 55.3597 59.1355 55.3024 59.1407C55.2451 59.1407 55.1618 59.0886 55.1253 59.0366C55.0784 58.9636 55.1878 58.8178 55.2764 58.8334C55.3441 58.8491 55.3962 58.9116 55.4951 58.9845Z" fill="#77271F"/>
<path d="M41.3131 45.1459C41.4277 45.1199 41.4954 45.0834 41.5631 45.0886C41.6516 45.0991 41.6933 45.172 41.6725 45.2657C41.6516 45.3699 41.5162 45.4428 41.4433 45.3803C41.3912 45.3386 41.3704 45.2553 41.3131 45.1459Z" fill="#77271F"/>
<path d="M46.8079 45.2502C46.8912 45.172 46.9433 45.0887 46.9954 45.0887C47.0527 45.0835 47.1412 45.1408 47.1725 45.1981C47.2194 45.2762 47.1152 45.422 47.0214 45.4012C46.9589 45.3856 46.9069 45.3231 46.8079 45.2502Z" fill="#77271F"/>
<path d="M44.0421 47.9636C44.1463 47.9011 44.2088 47.8386 44.2713 47.8281C44.3651 47.8073 44.4484 47.9375 44.4171 48.0365C44.3911 48.125 44.313 48.1615 44.2349 48.1302C44.1724 48.1042 44.1307 48.0417 44.0421 47.9636Z" fill="#77271F"/>
<path d="M49.9897 47.9688C49.9012 48.047 49.8543 48.1251 49.797 48.1251C49.7397 48.1303 49.6564 48.0782 49.62 48.0261C49.5731 47.9532 49.6825 47.8022 49.771 47.823C49.8387 47.8386 49.8908 47.9011 49.9897 47.9688Z" fill="#77271F"/>
<path d="M47.0265 50.9688C46.9536 50.875 46.8911 50.8229 46.8703 50.7604C46.8494 50.6771 46.8911 50.6042 46.9849 50.5833C47.0942 50.5677 47.2088 50.6563 47.1828 50.75C47.1619 50.8177 47.0994 50.8698 47.0265 50.9636V50.9688Z" fill="#77271F"/>
<path d="M52.313 50.7448C52.4015 50.6719 52.4536 50.5938 52.5057 50.5938C52.5682 50.5938 52.6515 50.6562 52.6828 50.7135C52.7244 50.7969 52.6151 50.9271 52.5213 50.9062C52.4536 50.8854 52.4067 50.8177 52.313 50.7448Z" fill="#77271F"/>
<path d="M49.5265 53.5208C49.6515 53.4323 49.7192 53.3593 49.7922 53.3437C49.8286 53.3333 49.9172 53.4427 49.9224 53.4948C49.9224 53.5468 49.839 53.6302 49.7817 53.6354C49.7244 53.6458 49.6567 53.5833 49.5265 53.5208Z" fill="#77271F"/>
<path d="M55.2506 53.6979C55.1881 53.6042 55.1256 53.5469 55.1152 53.4844C55.1048 53.3906 55.2506 53.2969 55.3235 53.3438C55.3756 53.3802 55.4277 53.4688 55.4225 53.5261C55.4173 53.5781 55.3339 53.6198 55.2506 53.6979Z" fill="#77271F"/>
<path d="M52.3129 56.2761C52.391 56.1927 52.4379 56.1042 52.49 56.099C52.5525 56.0938 52.641 56.1459 52.6775 56.198C52.7296 56.2761 52.6358 56.4219 52.5369 56.4063C52.4744 56.4011 52.4119 56.3386 52.3129 56.2761Z" fill="#77271F"/>
<path d="M57.8183 56.2136C57.9173 56.1563 57.985 56.0834 58.0371 56.0938C58.0996 56.1042 58.1725 56.1771 58.1933 56.2396C58.2246 56.3282 58.0839 56.4427 58.0006 56.4011C57.9381 56.375 57.9016 56.3021 57.8183 56.2136Z" fill="#77271F"/>
<path d="M13.995 11.9792C14.0679 12.0782 14.1356 12.1303 14.1512 12.198C14.1721 12.2865 14.0314 12.4011 13.9533 12.3542C13.896 12.323 13.8387 12.2397 13.8439 12.1772C13.8439 12.1251 13.9221 12.073 13.995 11.9845V11.9792Z" fill="#77271F"/>
<path d="M8.49011 11.9792C8.56302 12.0782 8.63073 12.1303 8.64636 12.198C8.66719 12.2865 8.52657 12.4011 8.44844 12.3542C8.39115 12.323 8.33386 12.2397 8.33907 12.1772C8.33907 12.1251 8.41719 12.073 8.49011 11.9845V11.9792Z" fill="#77271F"/>
<path d="M19.5004 22.9949C19.5733 23.0886 19.641 23.1459 19.6566 23.2084C19.6774 23.297 19.5368 23.4115 19.4587 23.3699C19.4014 23.3334 19.3441 23.2501 19.3493 23.1928C19.3493 23.1355 19.4274 23.0834 19.5004 22.9949Z" fill="#77271F"/>
<path d="M24.9588 22.9949C25.0526 23.0782 25.1255 23.1199 25.1515 23.1772C25.1932 23.2605 25.0838 23.4011 24.9953 23.3751C24.938 23.3542 24.8651 23.2813 24.8494 23.2188C24.839 23.1667 24.9067 23.099 24.9588 22.9949Z" fill="#77271F"/>
<path d="M22.4585 25.9479C22.3752 26.026 22.3231 26.1041 22.271 26.1041C22.2085 26.1094 22.1252 26.0573 22.0887 26C22.047 25.9271 22.1564 25.7812 22.245 25.8021C22.3075 25.8177 22.3595 25.8802 22.4585 25.9479Z" fill="#77271F"/>
<path d="M60.542 59.0262C60.667 58.9376 60.7295 58.8647 60.8076 58.8491C60.8389 58.8387 60.9326 58.948 60.9326 59.0001C60.9326 59.0522 60.8493 59.1355 60.792 59.1408C60.7347 59.1512 60.667 59.0887 60.542 59.0262Z" fill="#77271F"/>
<path d="M11.2504 9.22925C11.3129 9.323 11.3858 9.38029 11.3806 9.44279C11.3806 9.49487 11.3077 9.573 11.2504 9.59383C11.1462 9.62508 11.0368 9.51571 11.0785 9.42196C11.1046 9.35946 11.1723 9.31258 11.2504 9.22925Z" fill="#77271F"/>
<path d="M5.50561 9.45851C5.59416 9.38038 5.64624 9.31267 5.70874 9.29184C5.79728 9.25538 5.90665 9.36996 5.87541 9.46892C5.85457 9.52621 5.77124 9.58871 5.71395 9.58871C5.65666 9.58871 5.59936 9.52101 5.50561 9.45851Z" fill="#77271F"/>
<path d="M27.5262 25.9583C27.6252 25.8854 27.6773 25.8229 27.745 25.8021C27.8335 25.776 27.9221 25.901 27.9012 26C27.8804 26.0989 27.8075 26.1354 27.7241 26.1094C27.6616 26.0885 27.6148 26.026 27.5262 25.9583Z" fill="#77271F"/>
<path d="M57.8179 61.7553C57.9064 61.6824 57.9585 61.6042 58.0106 61.6042C58.0731 61.6042 58.1564 61.6667 58.1877 61.724C58.2293 61.8074 58.12 61.9376 58.0262 61.9167C57.9585 61.8959 57.9116 61.8282 57.8179 61.7553Z" fill="#77271F"/>
<path d="M63.5003 61.5312C63.5888 61.6198 63.6618 61.6562 63.693 61.7188C63.7347 61.8021 63.6253 61.9427 63.5368 61.9115C63.4743 61.8958 63.4013 61.8177 63.3909 61.7604C63.3805 61.7083 63.4482 61.6354 63.5003 61.5312Z" fill="#77271F"/>
<path d="M24.9692 28.9429C24.912 28.8387 24.839 28.771 24.8494 28.7137C24.8547 28.6564 24.9328 28.5835 24.9901 28.5679C25.0942 28.5366 25.1984 28.6616 25.1515 28.7502C25.1255 28.8127 25.0578 28.8543 24.9692 28.9481V28.9429Z" fill="#77271F"/>
<path d="M30.5158 28.5C30.5835 28.5937 30.6512 28.651 30.6669 28.7135C30.6877 28.8021 30.5471 28.9167 30.4689 28.875C30.4117 28.8385 30.3544 28.7552 30.3596 28.6979C30.3596 28.6406 30.4377 28.5885 30.5158 28.5Z" fill="#77271F"/>
<path d="M8.44314 6.92206C8.38584 6.81269 8.32334 6.73977 8.33376 6.68248C8.34418 6.62519 8.4223 6.55227 8.4848 6.54185C8.58376 6.52102 8.67751 6.64602 8.63584 6.73456C8.59939 6.79706 8.53168 6.83352 8.44314 6.92206Z" fill="#77271F"/>
<path d="M2.76074 6.69792C2.84928 6.63021 2.90136 6.54688 2.95866 6.54688C3.01595 6.54688 3.10449 6.60937 3.13053 6.66667C3.1722 6.75521 3.06282 6.88542 2.96907 6.85938C2.90657 6.84375 2.85449 6.77083 2.76074 6.70312V6.69792Z" fill="#77271F"/>
<path d="M27.766 31.25C27.8285 31.3437 27.9014 31.4062 27.9014 31.4635C27.8962 31.5156 27.8232 31.599 27.766 31.6146C27.6618 31.6458 27.5576 31.5365 27.5941 31.4479C27.6201 31.3854 27.6878 31.3385 27.766 31.25Z" fill="#77271F"/>
<path d="M33.2295 31.2554C33.3076 31.3335 33.3753 31.3752 33.4014 31.4325C33.4378 31.5158 33.3962 31.5887 33.3076 31.6147C33.2034 31.646 33.0784 31.5679 33.0941 31.4793C33.1097 31.4116 33.167 31.3543 33.2295 31.2554Z" fill="#77271F"/>
<path d="M60.5631 64.5313C60.6517 64.448 60.6933 64.3802 60.7558 64.349C60.8444 64.3125 60.9642 64.4167 60.9329 64.5157C60.9173 64.573 60.8392 64.6459 60.7819 64.6511C60.7246 64.6563 60.6621 64.5886 60.5579 64.5313H60.5631Z" fill="#77271F"/>
<path d="M66.2971 64.7136C66.219 64.625 66.1513 64.5782 66.1304 64.5157C66.1044 64.4271 66.2242 64.3125 66.3127 64.349C66.37 64.3698 66.4325 64.4532 66.4377 64.5157C66.4429 64.5677 66.3648 64.625 66.2971 64.7136Z" fill="#77271F"/>
<path d="M30.5109 34.448C30.438 34.3594 30.3755 34.3074 30.3547 34.2396C30.3338 34.1615 30.3703 34.0886 30.4692 34.0678C30.5786 34.0469 30.6932 34.1355 30.6672 34.2292C30.6463 34.2969 30.5838 34.3542 30.5109 34.448Z" fill="#77271F"/>
<path d="M13.7713 17.724C13.8599 17.6459 13.9067 17.5626 13.9588 17.5574C14.0213 17.5574 14.1099 17.6147 14.1411 17.6667C14.188 17.7449 14.0786 17.8907 13.9901 17.8699C13.9224 17.8595 13.8703 17.7917 13.7713 17.724Z" fill="#77271F"/>
<path d="M5.94287 3.92711C5.85954 4.00002 5.80745 4.07815 5.75537 4.08336C5.69287 4.08336 5.60954 4.03127 5.57308 3.97919C5.5262 3.90627 5.64079 3.76044 5.72412 3.77606C5.79183 3.79169 5.84391 3.85419 5.94287 3.92711Z" fill="#77271F"/>
<path d="M68.8546 67.3072C68.8285 67.1405 68.8962 67.052 69.0368 67.052C69.1723 67.052 69.2608 67.1197 69.2296 67.3072H68.8546Z" fill="#77271F"/>
<path d="M0.000242621 3.95313C0.0887839 3.87501 0.140866 3.8073 0.203368 3.78647C0.291909 3.75001 0.401284 3.86459 0.370034 3.96355C0.3492 4.01564 0.265867 4.08334 0.208576 4.08334C0.151284 4.08334 0.093992 4.01564 0.000242621 3.95313Z" fill="#77271F"/>
<path d="M35.9689 34.0054C36.0627 34.0887 36.1356 34.1304 36.1669 34.1877C36.2033 34.2762 36.0991 34.4116 36.0054 34.3856C35.9481 34.3647 35.8752 34.2918 35.8648 34.2293C35.8491 34.1772 35.9169 34.1095 35.9689 34.0054Z" fill="#77271F"/>
<path d="M33.2713 36.7554C33.3338 36.8491 33.4067 36.9116 33.4067 36.9689C33.4015 37.021 33.3286 37.1043 33.2713 37.12C33.1672 37.1512 33.063 37.0418 33.0994 36.9533C33.1255 36.8908 33.1932 36.8439 33.2713 36.7554Z" fill="#77271F"/>
<path d="M38.9795 36.9584C38.8909 37.0365 38.8389 37.1146 38.7868 37.1146C38.7295 37.1199 38.6409 37.0678 38.6097 37.0105C38.5628 36.9376 38.6722 36.7917 38.7607 36.8126C38.8232 36.8282 38.8753 36.8907 38.9795 36.9584Z" fill="#77271F"/>
<path d="M35.9795 39.9531C35.9222 39.8489 35.8545 39.7812 35.8597 39.7239C35.8701 39.6666 35.943 39.5937 36.0003 39.5781C36.1045 39.552 36.2087 39.6718 36.1618 39.7604C36.1357 39.8229 36.068 39.8698 35.9795 39.9583V39.9531Z" fill="#77271F"/>
<path d="M41.4743 39.5105C41.5681 39.5938 41.641 39.6355 41.6722 39.6928C41.7087 39.7813 41.6045 39.9167 41.5108 39.8907C41.4535 39.8699 41.3806 39.797 41.3701 39.7397C41.3545 39.6824 41.4222 39.6147 41.4743 39.5105Z" fill="#77271F"/>
<path d="M16.516 14.9481C16.6149 14.8752 16.667 14.8127 16.7347 14.7918C16.8233 14.7658 16.9118 14.8908 16.891 14.9897C16.8701 15.0887 16.7972 15.1252 16.7191 15.0991C16.6566 15.0783 16.6045 15.0158 16.516 14.9481Z" fill="#77271F"/>
<path d="M11.0107 14.9324C11.1149 14.8647 11.1722 14.8074 11.2399 14.7918C11.3284 14.7709 11.4118 14.9011 11.3805 15.0001C11.3545 15.0939 11.2815 15.1251 11.1982 15.0939C11.1409 15.0678 11.094 15.0053 11.0107 14.9272V14.9324Z" fill="#77271F"/>
<path d="M16.516 20.4532C16.6149 20.3803 16.667 20.3178 16.7347 20.2969C16.8233 20.2709 16.9118 20.3959 16.891 20.4949C16.8701 20.5938 16.7972 20.6303 16.7139 20.6042C16.6514 20.5834 16.6045 20.5209 16.516 20.4532Z" fill="#77271F"/>
<path d="M38.5158 42.5106C38.6408 42.4169 38.7033 42.3439 38.7814 42.3283C38.8127 42.3231 38.9064 42.4273 38.9116 42.4846C38.9116 42.5314 38.8231 42.6148 38.7658 42.6252C38.7137 42.6356 38.6408 42.5731 38.5158 42.5106Z" fill="#77271F"/>
<path d="M22.0211 20.4844C22.1097 20.401 22.1566 20.3333 22.2139 20.3073C22.3076 20.2656 22.4222 20.3698 22.3961 20.4687C22.3805 20.526 22.3024 20.5989 22.2451 20.6042C22.1878 20.6146 22.1201 20.5417 22.0211 20.4844Z" fill="#77271F"/>
<path d="M44.0419 42.4949C44.1357 42.4116 44.1825 42.3491 44.2502 42.3231C44.3388 42.2918 44.4482 42.4012 44.4169 42.5001C44.3961 42.5574 44.3127 42.6251 44.2555 42.6251C44.1982 42.6251 44.1409 42.5574 44.0419 42.4897V42.4949Z" fill="#77271F"/>
<path d="M19.2767 17.672C19.3756 17.6148 19.4433 17.547 19.4954 17.5575C19.5579 17.5679 19.6308 17.6408 19.6517 17.6981C19.6829 17.7866 19.5475 17.9012 19.459 17.8648C19.4017 17.8335 19.36 17.7606 19.2767 17.672Z" fill="#77271F"/>
<path d="M63.5365 67.0364C63.6042 67.1301 63.6458 67.1822 63.6875 67.2395C63.6302 67.2708 63.5729 67.3176 63.5104 67.328C63.474 67.328 63.3958 67.2551 63.401 67.2395C63.4219 67.177 63.4687 67.1301 63.5365 67.0364Z" fill="#77271F"/>
<path d="M27.6564 42.5261C27.6772 42.4688 27.6929 42.4376 27.7033 42.4011C27.7554 42.422 27.8022 42.4376 27.8491 42.4584C27.8335 42.4949 27.8179 42.5522 27.797 42.5574C27.7554 42.5626 27.7085 42.5365 27.6564 42.5261Z" fill="#77271F"/>
<path d="M33.1617 47.9533C33.2085 47.9377 33.2502 47.9116 33.2971 47.9116C33.3127 47.9116 33.3544 47.9845 33.3492 47.995C33.3075 48.0262 33.2606 48.0575 33.219 48.0835C33.2033 48.047 33.1877 48.0158 33.1617 47.9533Z" fill="#77271F"/>
<path d="M55.1828 64.5521C55.2088 64.4948 55.2192 64.4583 55.2349 64.4219C55.2817 64.4427 55.3286 64.4635 55.3755 64.4792C55.3599 64.5156 55.3494 64.5729 55.3234 64.5781C55.2817 64.5833 55.2349 64.5625 55.1828 64.5521Z" fill="#77271F"/>
<path d="M38.8701 47.9584C38.8389 48.0105 38.8232 48.047 38.8024 48.0782C38.7607 48.0522 38.7139 48.0261 38.6826 47.9949C38.6722 47.9792 38.7139 47.9011 38.7243 47.9011C38.7764 47.9115 38.8232 47.9376 38.8701 47.9584Z" fill="#77271F"/>
<path d="M0.333496 9.41691C0.302245 9.46899 0.281413 9.50545 0.260579 9.5367C0.218913 9.51066 0.172038 9.48983 0.140788 9.45337C0.130372 9.44295 0.177245 9.35962 0.187663 9.35962C0.234537 9.37004 0.281412 9.39608 0.333496 9.41691Z" fill="#77271F"/>
<path d="M22.1462 31.5002C22.1775 31.4429 22.1931 31.4116 22.214 31.3804C22.2556 31.4064 22.3025 31.4325 22.339 31.4689C22.3442 31.4741 22.2973 31.5575 22.2817 31.5575C22.2348 31.5522 22.1931 31.521 22.1462 31.5002Z" fill="#77271F"/>
<path d="M38.6673 53.4428C38.7194 53.4376 38.7663 53.4168 38.8131 53.4272C38.834 53.4272 38.86 53.5105 38.8548 53.5157C38.8131 53.5418 38.761 53.5574 38.7142 53.5782C38.7038 53.5418 38.6881 53.5053 38.6673 53.448V53.4428Z" fill="#77271F"/>
<path d="M16.7138 31.5885C16.6878 31.5365 16.6461 31.4792 16.6565 31.4688C16.6878 31.4323 16.7347 31.4115 16.7815 31.3906C16.7867 31.3906 16.8388 31.4635 16.8336 31.474C16.8024 31.5156 16.7555 31.5469 16.7138 31.5885Z" fill="#77271F"/>
<path d="M16.8491 25.9377C16.8179 25.9897 16.797 26.021 16.7762 26.0522C16.7397 26.0262 16.6877 26.0054 16.6564 25.9689C16.6512 25.9585 16.6929 25.8804 16.7033 25.8804C16.7502 25.8908 16.797 25.9168 16.8491 25.9377Z" fill="#77271F"/>
<path d="M11.2089 26.0834C11.1829 26.0313 11.1412 25.974 11.1517 25.9636C11.1829 25.9272 11.2298 25.9011 11.2767 25.8855C11.2819 25.8855 11.3339 25.9532 11.3287 25.9688C11.2975 26.0105 11.2506 26.0417 11.2089 26.0834Z" fill="#77271F"/>
<path d="M44.172 53.5418C44.1981 53.4793 44.2085 53.4481 44.2189 53.4116C44.271 53.4325 44.3179 53.4481 44.3647 53.4689C44.3491 53.5054 44.3335 53.5627 44.3127 53.5679C44.271 53.5731 44.2241 53.547 44.172 53.5366V53.5418Z" fill="#77271F"/>
<path d="M49.8804 64.474C49.8491 64.5261 49.8335 64.5626 49.8127 64.5938C49.771 64.5678 49.7241 64.547 49.6929 64.5105C49.6825 64.5001 49.7241 64.4167 49.7345 64.4167C49.7866 64.4272 49.8335 64.4532 49.8804 64.474Z" fill="#77271F"/>
<path d="M27.6567 36.9271C27.7088 36.9167 27.7557 36.9011 27.8026 36.9063C27.8234 36.9115 27.8442 36.9896 27.839 36.9948C27.7974 37.0261 27.7505 37.0417 27.7036 37.0626C27.6932 37.0261 27.6776 36.9896 27.6567 36.9271Z" fill="#77271F"/>
<path d="M33.1619 42.4323C33.214 42.4219 33.2609 42.4062 33.3078 42.4114C33.3286 42.4166 33.3546 42.5 33.3494 42.5C33.3025 42.5312 33.2557 42.5469 33.2088 42.5677C33.1984 42.5312 33.1828 42.4948 33.1619 42.4323Z" fill="#77271F"/>
<path d="M44.1723 59.026C44.1984 58.9687 44.2192 58.9375 44.2348 58.9062C44.2765 58.9375 44.3286 58.9583 44.3598 58.9948C44.3703 59 44.3234 59.0833 44.3077 59.0833C44.2609 59.0781 44.2192 59.0469 44.1723 59.026Z" fill="#77271F"/>
<path d="M22.2192 37.0939C22.1932 37.0418 22.1515 36.9897 22.1619 36.9741C22.1932 36.9377 22.24 36.9168 22.2869 36.896C22.2921 36.896 22.3442 36.9689 22.339 36.9793C22.3077 37.021 22.2609 37.0522 22.2192 37.0939Z" fill="#77271F"/>
<path d="M5.63084 14.9167C5.67772 14.901 5.72459 14.875 5.77147 14.875C5.78709 14.875 5.82355 14.9531 5.81834 14.9583C5.78188 14.9948 5.73501 15.0208 5.68813 15.0521C5.67251 15.0156 5.65688 14.9792 5.63084 14.9219V14.9167Z" fill="#77271F"/>
<path d="M0.192804 15.0729C0.17197 15.0156 0.130304 14.9636 0.14072 14.9531C0.171971 14.9167 0.218845 14.8906 0.260512 14.875C0.270929 14.8698 0.323011 14.9427 0.312595 14.9584C0.286554 15 0.239678 15.0313 0.192804 15.0729Z" fill="#77271F"/>
<path d="M5.6359 20.5052C5.65674 20.4479 5.66716 20.4115 5.68278 20.375C5.72966 20.3958 5.77653 20.4167 5.82861 20.4375C5.80778 20.4687 5.79736 20.526 5.77132 20.5312C5.72965 20.5417 5.68278 20.5156 5.6359 20.5052Z" fill="#77271F"/>
<path d="M11.2089 20.5783C11.1829 20.5262 11.1412 20.4689 11.1517 20.4585C11.1829 20.4221 11.2298 20.396 11.2767 20.3804C11.2819 20.3752 11.3339 20.4481 11.3287 20.4637C11.2975 20.5054 11.2506 20.5366 11.2089 20.5783Z" fill="#77271F"/>
<path d="M49.6774 59.047C49.7035 58.9845 49.7139 58.9532 49.7243 58.9167C49.7764 58.9376 49.8232 58.9532 49.8701 58.974C49.8545 59.0105 49.8441 59.0678 49.818 59.073C49.7764 59.0782 49.7295 59.0574 49.6774 59.0417V59.047Z" fill="#77271F"/>
<path d="M47.063 56.1458C47.0734 56.1927 47.0942 56.2396 47.0942 56.2917C47.0942 56.3021 47.0109 56.3281 47.0057 56.3177C46.9744 56.2865 46.9536 56.2396 46.9536 56.1979C46.9536 56.1875 47.0109 56.1667 47.063 56.1406V56.1458Z" fill="#77271F"/>
<path d="M30.542 39.823C30.4847 39.7969 30.4535 39.7813 30.417 39.7709C30.443 39.7292 30.4639 39.6823 30.4899 39.6459C30.4951 39.6355 30.5732 39.6667 30.5732 39.6823C30.5732 39.7292 30.5576 39.7709 30.542 39.8178V39.823Z" fill="#77271F"/>
<path d="M25.0366 39.625C25.0522 39.6771 25.0679 39.724 25.0679 39.7708C25.0679 39.7812 24.9897 39.8125 24.9793 39.8021C24.9533 39.7708 24.9325 39.724 24.9272 39.6823C24.9272 39.6667 24.9897 39.651 25.0366 39.625Z" fill="#77271F"/>
<path d="M3.0109 17.8023C2.95882 17.7762 2.92236 17.7606 2.89111 17.745C2.91195 17.7033 2.93278 17.6616 2.96403 17.62C2.96924 17.6148 3.04736 17.646 3.04736 17.6616C3.04736 17.7033 3.02653 17.7502 3.01611 17.797L3.0109 17.8023Z" fill="#77271F"/>
<path d="M2.87551 12.2345C2.89634 12.1877 2.91718 12.1304 2.9328 12.1304C2.97447 12.1356 3.02134 12.1564 3.05259 12.1825C3.06301 12.1877 3.03176 12.271 3.02134 12.271C2.97446 12.271 2.92238 12.2502 2.87551 12.2345Z" fill="#77271F"/>
<path d="M8.521 23.3073C8.4637 23.2813 8.42725 23.2657 8.396 23.2553C8.41683 23.2084 8.43766 23.1667 8.46891 23.1303C8.47412 23.1198 8.55225 23.1511 8.55225 23.1667C8.55225 23.2084 8.53141 23.2553 8.521 23.3021V23.3073Z" fill="#77271F"/>
<path d="M46.8856 61.7606C46.9585 61.7137 47.0002 61.6825 47.047 61.6616C47.0522 61.6616 47.0991 61.7137 47.0991 61.745C47.0991 61.771 47.0679 61.8335 47.0575 61.8283C47.0106 61.8231 46.9637 61.797 46.8856 61.7606Z" fill="#77271F"/>
<path d="M52.4225 61.7865C52.4485 61.7397 52.4694 61.6824 52.485 61.6824C52.5267 61.6824 52.5683 61.7084 52.6048 61.7345C52.61 61.7397 52.584 61.8178 52.5683 61.8178C52.5215 61.8178 52.4746 61.8022 52.4225 61.7865Z" fill="#77271F"/>
<path d="M35.9119 45.2136C35.9536 45.1876 36.0004 45.1615 36.0473 45.1355C36.0629 45.172 36.0994 45.2188 36.089 45.2345C36.0629 45.2657 36.0161 45.2917 35.9744 45.3074C35.964 45.3126 35.9379 45.2553 35.9119 45.2136Z" fill="#77271F"/>
<path d="M19.5317 28.6147C19.5474 28.6668 19.563 28.7137 19.563 28.7606C19.563 28.771 19.4849 28.8022 19.4744 28.7918C19.4484 28.7606 19.4276 28.7137 19.4224 28.672C19.4224 28.6564 19.4849 28.6408 19.5317 28.6147Z" fill="#77271F"/>
<path d="M14.0109 28.8126C13.9536 28.7814 13.9224 28.7657 13.8911 28.7501C13.9224 28.7085 13.9484 28.6668 13.9849 28.6303C13.9953 28.6251 14.063 28.6668 14.063 28.6824C14.0578 28.7241 14.0317 28.7657 14.0109 28.8074V28.8126Z" fill="#77271F"/>
<path d="M8.38039 17.7397C8.40643 17.6928 8.42206 17.6355 8.43768 17.6355C8.47935 17.6407 8.52622 17.6615 8.55747 17.6876C8.56789 17.6928 8.53664 17.7761 8.52622 17.7761C8.47935 17.7761 8.42726 17.7553 8.38039 17.7397Z" fill="#77271F"/>
<path d="M30.4016 45.271C30.4276 45.2241 30.4433 45.1616 30.4589 45.1668C30.5006 45.1668 30.5474 45.1929 30.5839 45.2137C30.5891 45.2189 30.5578 45.3022 30.5474 45.3022C30.5006 45.3022 30.4537 45.2814 30.4016 45.271Z" fill="#77271F"/>
<path d="M13.8858 23.25C13.9118 23.1979 13.9274 23.1406 13.9431 23.1406C13.9847 23.1458 14.0316 23.1667 14.0628 23.1927C14.0733 23.1979 14.042 23.2812 14.0316 23.2812C13.9847 23.2812 13.9326 23.2604 13.8858 23.25Z" fill="#77271F"/>
<path d="M52.4222 67.2865C52.4482 67.2397 52.4691 67.1824 52.4847 67.1824C52.5264 67.1824 52.5628 67.2136 52.6045 67.2292C52.5941 67.2553 52.5837 67.3126 52.568 67.3126C52.5212 67.3126 52.4743 67.297 52.4222 67.2865Z" fill="#77271F"/>
<path d="M24.8599 34.2343C24.938 34.1822 24.9744 34.151 25.0213 34.1354C25.0265 34.1302 25.0734 34.1822 25.0786 34.2135C25.0786 34.2447 25.0422 34.302 25.0317 34.302C24.9849 34.2916 24.9432 34.2708 24.8599 34.2343Z" fill="#77271F"/>
<path d="M41.4118 56.2814C41.4378 56.2345 41.4534 56.1772 41.469 56.1772C41.5107 56.1772 41.5576 56.2033 41.594 56.2293C41.5993 56.2345 41.5732 56.3127 41.5576 56.3127C41.5107 56.3127 41.4638 56.297 41.4118 56.2814Z" fill="#77271F"/>
<path d="M19.3911 34.2031C19.4379 34.1771 19.4848 34.151 19.5265 34.125C19.5473 34.1615 19.5838 34.2083 19.5734 34.224C19.5473 34.2552 19.5004 34.2812 19.4536 34.2969C19.4484 34.2969 19.4223 34.2448 19.3911 34.2031Z" fill="#77271F"/>
<path d="M36.0316 50.8333C35.9796 50.8073 35.9431 50.7864 35.9118 50.7708C35.9431 50.7343 35.9691 50.6875 36.0108 50.6562C36.016 50.651 36.0889 50.6927 36.0837 50.7031C36.0785 50.75 36.0525 50.7864 36.0316 50.8333Z" fill="#77271F"/>
<path d="M41.4173 50.7188C41.4589 50.6927 41.5058 50.6667 41.5527 50.6406C41.5683 50.6771 41.6048 50.724 41.5943 50.7396C41.5683 50.776 41.5214 50.7969 41.4798 50.8125C41.4693 50.8177 41.4433 50.7604 41.4173 50.7188Z" fill="#77271F"/>
<path d="M58.0578 67.3334C58.0005 67.3073 57.9641 67.2969 57.9328 67.2813C57.9641 67.2448 57.9953 67.198 58.0318 67.1667C58.0422 67.1615 58.1099 67.2032 58.1047 67.2136C58.0995 67.2553 58.0734 67.2969 58.0578 67.3334Z" fill="#77271F"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 57 KiB

8
src/assets/svgs/Group 25386.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 25 KiB

16
src/assets/svgs/Group 25387.svg Normal file
View file

@ -0,0 +1,16 @@
<svg width="61" height="13" viewBox="0 0 61 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M60.802 12.9844L56.5208 8.65625H60.802V12.9844Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M52.2395 12.9844L47.9583 8.65625H52.2395V12.9844Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M43.6768 12.9844L39.3904 8.65625H43.6768V12.9844Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M35.0989 12.9844L30.8176 8.65625H35.0989V12.9844Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M26.5364 12.9844L22.2551 8.65625H26.5364V12.9844Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.9739 12.9844L13.6926 8.65625H17.9739V12.9844Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.39575 12.9844L5.1145 8.65625H9.39575V12.9844Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M56.5208 4.32812L52.2395 0H56.5208V4.32812Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M47.9583 4.32812L43.677 0H47.9583V4.32812Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M39.3905 4.32812L35.0989 0H39.3905V4.32812Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M30.8176 4.32812L26.5364 0H30.8176V4.32812Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M22.2551 4.32812L17.9739 0H22.2551V4.32812Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M13.6926 4.32812L9.39575 0H13.6926V4.32812Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.1145 4.32812L0.833252 0H5.1145V4.32812Z" fill="black"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.6 KiB

12
src/assets/svgs/Group 25388.svg Normal file
View file

@ -0,0 +1,12 @@
<svg width="10" height="72" viewBox="0 0 10 72" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.6" d="M10 4.5L0 0V4L10 8.5V4.5Z" fill="black"/>
<path opacity="0.6" d="M10 11.5L0 7V11L10 15.5V11.5Z" fill="black"/>
<path opacity="0.6" d="M10 18.5L0 14V18L10 22.5V18.5Z" fill="black"/>
<path opacity="0.6" d="M10 25.5L0 21V25L10 29.5V25.5Z" fill="black"/>
<path opacity="0.6" d="M10 32.5L0 28V32L10 36.5V32.5Z" fill="black"/>
<path opacity="0.6" d="M10 39.5L0 35V39L10 43.5V39.5Z" fill="black"/>
<path opacity="0.6" d="M10 46.5L0 42V46L10 50.5V46.5Z" fill="black"/>
<path opacity="0.6" d="M10 53.5L0 49V53L10 57.5V53.5Z" fill="black"/>
<path opacity="0.6" d="M10 60.5L0 56V60L10 64.5V60.5Z" fill="black"/>
<path opacity="0.6" d="M10 67.5L0 63V67L10 71.5V67.5Z" fill="black"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 797 B

5
src/assets/svgs/Group 25389.svg Normal file
View file

@ -0,0 +1,5 @@
<svg width="65" height="121" viewBox="0 0 65 121" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M35.6351 108.052C35.4945 110.594 35.3747 112.062 34.6143 112.823C33.8538 113.583 32.3851 113.703 29.8434 113.844C29.7757 113.849 29.7236 113.906 29.7236 113.974C29.7236 114.042 29.7757 114.099 29.8434 114.104C32.3851 114.245 33.8538 114.364 34.6143 115.125C35.3747 115.885 35.4945 117.359 35.6351 119.896C35.6403 119.963 35.6976 120.015 35.7653 120.015C35.833 120.015 35.8903 119.963 35.8955 119.896C36.0361 117.359 36.1559 115.885 36.9163 115.125C37.6768 114.364 39.1507 114.245 41.6872 114.104C41.7549 114.099 41.807 114.042 41.807 113.974C41.807 113.906 41.7549 113.849 41.6872 113.844C39.1507 113.703 37.6768 113.583 36.9163 112.823C36.1559 112.062 36.0361 110.594 35.8955 108.052C35.8903 107.984 35.833 107.932 35.7653 107.932C35.6976 107.932 35.6403 107.984 35.6351 108.052Z" fill="#3B5223"/>
<path d="M5.91667 76.4479C5.77083 78.9896 5.65104 80.4635 4.89583 81.2188C4.13542 81.9792 2.66146 82.099 0.125 82.2396C0.052084 82.2448 0 82.3021 0 82.3698C0 82.4375 0.052084 82.4948 0.125 82.5C2.66146 82.6458 4.13542 82.7604 4.89583 83.5208C5.65104 84.2813 5.77083 85.7552 5.91667 88.2917C5.92188 88.3594 5.97396 88.4167 6.04688 88.4167C6.11458 88.4167 6.17188 88.3594 6.17188 88.2917C6.31771 85.7552 6.4375 84.2813 7.19271 83.5208C7.95313 82.7604 9.42708 82.6458 11.9635 82.5C12.0365 82.4948 12.0885 82.4375 12.0885 82.3698C12.0885 82.3021 12.0365 82.2448 11.9635 82.2396C9.42708 82.099 7.95313 81.9792 7.19271 81.2188C6.4375 80.4635 6.31771 78.9896 6.17188 76.4479C6.16667 76.3802 6.11458 76.3281 6.04688 76.3281C5.97396 76.3281 5.91667 76.3802 5.91667 76.4479Z" fill="#3B5223"/>
<path d="M64.2655 114.115C64.2655 114.229 64.1717 114.318 64.0623 114.318H19.7134C11.9842 114.318 5.69775 108.031 5.69775 100.302V0.390625C5.69775 0.276042 5.7863 0.1875 5.90088 0.1875C6.01025 0.1875 6.104 0.276042 6.104 0.390625V100.302C6.104 107.807 12.2082 113.911 19.7134 113.911H64.0623C64.1717 113.911 64.2655 114.005 64.2655 114.115Z" fill="#3B5223"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2 KiB

8
src/assets/svgs/Group 25390.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 24 KiB

11
src/assets/svgs/Group 25391.svg Normal file
View file

@ -0,0 +1,11 @@
<svg width="33" height="109" viewBox="0 0 33 109" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M30.7759 108.01V15.3126V108.01Z" fill="#272857"/>
<path d="M30.7759 108.01V15.3126" stroke="#272857" stroke-width="0.999467"/>
<path d="M30.7764 12.5625L29.2764 14.0625L30.7764 15.5625L32.2764 14.0625L30.7764 12.5625Z" fill="#0099FF" stroke="#272857" stroke-width="0.999467" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M16.9741 96.448V3.75007V96.448Z" fill="#272857"/>
<path d="M16.9741 96.448V3.75007" stroke="#272857" stroke-width="0.999467"/>
<path d="M16.9741 0.999999L15.4741 2.5L16.9741 4L18.4689 2.5L16.9741 0.999999Z" fill="#0099FF" stroke="#272857" stroke-width="0.999467" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M2.5 108.01V15.3126V108.01Z" fill="#272857"/>
<path d="M2.5 108.01V15.3126" stroke="#272857" stroke-width="0.999467"/>
<path d="M2.5 12.5625L1 14.0625L2.5 15.5625L4 14.0625L2.5 12.5625Z" fill="#0099FF" stroke="#272857" stroke-width="0.999467" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1 KiB

3
src/assets/svgs/Group 25392.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 5 KiB

5
src/assets/svgs/Group 25393.svg Normal file
View file

@ -0,0 +1,5 @@
<svg width="65" height="19" viewBox="0 0 65 19" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 1C3.59875 1 3.59874 4.88326 7.1975 4.88326C10.7963 4.88326 10.7962 1 14.395 1C17.9938 1 17.9937 4.88326 21.5925 4.88326C25.1912 4.88326 25.1913 1 28.79 1C32.3888 1 32.3888 4.88326 35.9875 4.88326C39.5863 4.88326 39.5863 1 43.185 1C46.7838 1 46.7838 4.88326 50.3825 4.88326C53.9813 4.88326 53.9813 1 57.5878 1C61.1942 1 61.1865 4.88326 64.793 4.88326" stroke="white" stroke-width="0.768965" stroke-miterlimit="10"/>
<path d="M0 7.55164C3.59875 7.55164 3.59874 11.4349 7.1975 11.4349C10.7963 11.4349 10.7962 7.55164 14.395 7.55164C17.9938 7.55164 17.9937 11.4349 21.5925 11.4349C25.1912 11.4349 25.1913 7.55164 28.79 7.55164C32.3888 7.55164 32.3888 11.4349 35.9875 11.4349C39.5863 11.4349 39.5863 7.55164 43.185 7.55164C46.7838 7.55164 46.7838 11.4349 50.3825 11.4349C53.9813 11.4349 53.9813 7.55164 57.5878 7.55164C61.1942 7.55164 61.1865 11.4349 64.793 11.4349" stroke="white" stroke-width="0.768965" stroke-miterlimit="10"/>
<path d="M0 14.1031C3.59875 14.1031 3.59874 17.9864 7.1975 17.9864C10.7963 17.9864 10.7962 14.1031 14.395 14.1031C17.9938 14.1031 17.9937 17.9864 21.5925 17.9864C25.1912 17.9864 25.1913 14.1031 28.79 14.1031C32.3888 14.1031 32.3888 17.9864 35.9875 17.9864C39.5863 17.9864 39.5863 14.1031 43.185 14.1031C46.7838 14.1031 46.7838 17.9864 50.3825 17.9864C53.9813 17.9864 53.9813 14.1031 57.5878 14.1031C61.1942 14.1031 61.1865 17.9864 64.793 17.9864" stroke="white" stroke-width="0.768965" stroke-miterlimit="10"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.5 KiB

10
src/assets/svgs/Group 25394.svg Normal file
View file

@ -0,0 +1,10 @@
<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.7891 9.75L11.7891 0H13.7891L12.7891 9.75Z" fill="white"/>
<path d="M10.6078 10.7301L3.00781 4.54012L4.41785 3.12012L10.6078 10.7301Z" fill="white"/>
<path d="M9.75 12.96L0 13.96V11.96L9.75 12.96Z" fill="white"/>
<path d="M10.7328 15.1499L4.54285 22.7499L3.13281 21.3299L10.7328 15.1499Z" fill="white"/>
<path d="M12.9609 16L13.9609 25.75H11.9609L12.9609 16Z" fill="white"/>
<path d="M15.1484 15.02L22.7484 21.21L21.3384 22.63L15.1484 15.02Z" fill="white"/>
<path d="M16 12.79L25.75 11.79V13.79L16 12.79Z" fill="white"/>
<path d="M15.0312 10.61L21.2112 3L22.6312 4.42L15.0312 10.61Z" fill="white"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 714 B

5
src/assets/svgs/Group 25395.svg Normal file
View file

@ -0,0 +1,5 @@
<svg width="39" height="11" viewBox="0 0 39 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M10.2728 5.63641C6.45671 6.08816 6.08815 6.45669 5.6364 10.2728C5.18465 6.45669 4.81612 6.08816 1 5.63641C4.81612 5.18465 5.18465 4.81612 5.6364 1C6.08815 4.81612 6.45671 5.18465 10.2728 5.63641Z" stroke="white" stroke-width="0.772734" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M24.2717 5.63641C20.4556 6.08816 20.087 6.45669 19.6353 10.2728C19.1835 6.45669 18.815 6.08816 14.9988 5.63641C18.815 5.18465 19.1835 4.81612 19.6353 1C20.087 4.81612 20.4556 5.18465 24.2717 5.63641Z" stroke="white" stroke-width="0.772734" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M38.2635 5.63641C34.4474 6.08816 34.0789 6.45669 33.6271 10.2728C33.1754 6.45669 32.8068 6.08816 28.9907 5.63641C32.8068 5.18465 33.1754 4.81612 33.6271 1C34.0789 4.81612 34.4474 5.18465 38.2635 5.63641Z" stroke="white" stroke-width="0.772734" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 997 B

3
src/assets/svgs/Group 25396.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.6 8.79999C10.18 9.55999 9.56005 10.18 8.80005 16.6C8.04005 10.18 7.42 9.55999 1 8.79999C7.42 8.03999 8.04005 7.42 8.80005 1C9.56005 7.42 10.18 8.03999 16.6 8.79999Z" stroke="black" stroke-opacity="0.2" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 386 B

3
src/assets/svgs/Group 25397.svg Normal file
View file

@ -0,0 +1,3 @@
<svg width="121" height="114" viewBox="0 0 121 114" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.83838 0H7.68213V7.04688L0.650879 7.08854V9.25521H7.68213V16.3021H9.83838V9.25521H16.8696V7.08854H9.83838V0ZM44.4321 0H42.2707V7.04688H35.2446V9.21354H42.2707V16.2604H44.4321V9.21354H51.4582V7.04688H44.4321V0ZM78.9842 0H76.8228V7.04688H69.7967V9.21354H76.8228V16.2604H78.9842V9.21354H86.0103V7.04688H78.9842V0ZM113.536 7.08854V0.0416667H111.375V7.08854H104.349V9.25521H111.375V16.3021H113.536V9.25521H120.562V7.08854H113.536ZM9.83838 32.5625H7.68213V39.6094H0.650879V41.776H7.68213V48.8229H9.83838V41.776H16.8696V39.6094H9.83838V32.5625ZM44.4321 32.5625H42.2707V39.6094H35.2446V41.776H42.2707V48.8229H44.4321V41.776H51.4582V39.6094H44.4321V32.5625ZM78.9842 32.5625H76.8228V39.6094H69.7967V41.776H76.8228V48.8229H78.9842V41.776H86.0103V39.6094H78.9842V32.5625ZM113.536 32.5208H111.375V39.5677H104.349V41.7344H111.375V48.7812H113.536V41.7344H120.562V39.5677H113.536V32.5208ZM9.83838 65.1198H7.68213V72.1667H0.650879V74.3333H7.68213V81.3802H9.83838V74.3333H16.8696V72.1667H9.83838V65.1198ZM44.4321 65.1198H42.2707V72.1667H35.2446V74.3333H42.2707V81.3802H44.4321V74.3333H51.4582V72.1667H44.4321V65.1198ZM78.9842 65.1198H76.8228V72.1667H69.7967V74.3333H76.8228V81.3802H78.9842V74.3333H86.0103V72.1667H78.9842V65.1198ZM113.536 65.1198H111.375V72.1667H104.349V74.3333H111.375V81.3802H113.536V74.3333H120.562V72.1667H113.536V65.1198ZM9.83838 97.6823H7.68213V104.729H0.650879V106.891H7.68213V113.943H9.83838V106.891H16.8696V104.729H9.83838V97.6823ZM44.4321 97.6823H42.2707V104.729H35.2446V106.891H42.2707V113.943H44.4321V106.891H51.4582V104.729H44.4321V97.6823ZM78.9842 97.6406H76.8228V104.688H69.7967V106.854H76.8228V113.901H78.9842V106.854H86.0103V104.688H78.9842V97.6406ZM113.536 97.6406H111.375V104.688H104.349V106.854H111.375V113.901H113.536V106.854H120.562V104.688H113.536V97.6406Z" fill="white"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.9 KiB

12
src/assets/svgs/Group 25398.svg Normal file
View file

@ -0,0 +1,12 @@
<svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.45817 2.5778C4.45817 2.83822 4.40609 3.09342 4.30713 3.33301C4.20817 3.57259 4.06755 3.78613 3.88005 3.96842C3.69775 4.15592 3.48421 4.29655 3.24463 4.39551C3.00505 4.49447 2.75505 4.54655 2.49463 4.54655C2.23421 4.54655 1.98421 4.49447 1.73942 4.39551C1.49984 4.29655 1.28629 4.15592 1.104 3.96842C0.921712 3.78613 0.775879 3.57259 0.676921 3.33301C0.577962 3.09342 0.525879 2.83822 0.525879 2.5778C0.525879 2.31738 0.577962 2.06738 0.676921 1.8278C0.775879 1.58822 0.921712 1.37467 1.104 1.19238C1.28629 1.00488 1.49984 0.864257 1.73942 0.765298C1.98421 0.666341 2.23421 0.614258 2.49463 0.614258C2.75505 0.614258 3.00505 0.666341 3.24463 0.765298C3.48421 0.864257 3.69775 1.00488 3.88005 1.19238C4.06755 1.37467 4.20817 1.58822 4.30713 1.8278C4.40609 2.06738 4.45817 2.31738 4.45817 2.5778Z" fill="#131011"/>
<path d="M14.1663 2.5778C14.1663 2.83822 14.1195 3.09342 14.0205 3.33301C13.9163 3.57259 13.7757 3.78613 13.5934 3.96842C13.4059 4.15592 13.1976 4.29655 12.9528 4.39551C12.7132 4.49447 12.4632 4.54655 12.2028 4.54655C11.9424 4.54655 11.6924 4.49447 11.4528 4.39551C11.2132 4.29655 10.9997 4.15592 10.8122 3.96842C10.6299 3.78613 10.4893 3.57259 10.3903 3.33301C10.2861 3.09342 10.2393 2.83822 10.2393 2.5778C10.2393 2.31738 10.2861 2.06738 10.3903 1.8278C10.4893 1.58822 10.6299 1.37467 10.8122 1.19238C10.9997 1.00488 11.2132 0.864257 11.4528 0.765298C11.6924 0.666341 11.9424 0.614258 12.2028 0.614258C12.4632 0.614258 12.7132 0.666341 12.9528 0.765298C13.1976 0.864257 13.4059 1.00488 13.5934 1.19238C13.7757 1.37467 13.9163 1.58822 14.0205 1.8278C14.1195 2.06738 14.1663 2.31738 14.1663 2.5778Z" fill="#131011"/>
<path d="M23.8698 2.5778C23.8698 2.83822 23.8177 3.09342 23.7188 3.33301C23.6198 3.57259 23.4792 3.78613 23.2917 3.96842C23.1094 4.15592 22.8958 4.29655 22.6562 4.39551C22.4167 4.49447 22.1667 4.54655 21.9062 4.54655C21.6406 4.54655 21.3906 4.49447 21.151 4.39551C20.9115 4.29655 20.6979 4.15592 20.5156 3.96842C20.3281 3.78613 20.1875 3.57259 20.0885 3.33301C19.9896 3.09342 19.9375 2.83822 19.9375 2.5778C19.9375 2.31738 19.9896 2.06738 20.0885 1.8278C20.1875 1.58822 20.3281 1.37467 20.5156 1.19238C20.6979 1.00488 20.9115 0.864257 21.151 0.765298C21.3906 0.666341 21.6406 0.614258 21.9062 0.614258C22.1667 0.614258 22.4167 0.666341 22.6562 0.765298C22.8958 0.864257 23.1094 1.00488 23.2917 1.19238C23.4792 1.37467 23.6198 1.58822 23.7188 1.8278C23.8177 2.06738 23.8698 2.31738 23.8698 2.5778Z" fill="#131011"/>
<path d="M33.578 2.5778C33.578 2.83822 33.5311 3.09342 33.4269 3.33301C33.328 3.57259 33.1873 3.78613 33.005 3.96842C32.8175 4.15592 32.604 4.29655 32.3644 4.39551C32.1248 4.49447 31.8748 4.54655 31.6144 4.54655C31.354 4.54655 31.104 4.49447 30.8644 4.39551C30.6196 4.29655 30.4113 4.15592 30.2238 3.96842C30.0415 3.78613 29.9009 3.57259 29.7967 3.33301C29.6978 3.09342 29.6509 2.83822 29.6509 2.5778C29.6509 2.31738 29.6978 2.06738 29.7967 1.8278C29.9009 1.58822 30.0415 1.37467 30.2238 1.19238C30.4113 1.00488 30.6196 0.864257 30.8644 0.765298C31.104 0.666341 31.354 0.614258 31.6144 0.614258C31.8748 0.614258 32.1248 0.666341 32.3644 0.765298C32.604 0.864257 32.8175 1.00488 33.005 1.19238C33.1873 1.37467 33.328 1.58822 33.4269 1.8278C33.5311 2.06738 33.578 2.31738 33.578 2.5778Z" fill="#131011"/>
<path d="M14.1663 12.1247C14.1663 12.3851 14.1195 12.6351 14.0205 12.8747C13.9163 13.1195 13.7757 13.3278 13.5934 13.5153C13.4059 13.6976 13.1976 13.8382 12.9528 13.9424C12.7132 14.0413 12.4632 14.0882 12.2028 14.0882C11.9424 14.0882 11.6924 14.0413 11.4528 13.9424C11.2132 13.8382 10.9997 13.6976 10.8122 13.5153C10.6299 13.3278 10.4893 13.1195 10.3903 12.8747C10.2861 12.6351 10.2393 12.3851 10.2393 12.1247C10.2393 11.8643 10.2861 11.6143 10.3903 11.3747C10.4893 11.1299 10.6299 10.9215 10.8122 10.734C10.9997 10.5518 11.2132 10.4111 11.4528 10.307C11.6924 10.208 11.9424 10.1611 12.2028 10.1611C12.4632 10.1611 12.7132 10.208 12.9528 10.307C13.1976 10.4111 13.4059 10.5518 13.5934 10.734C13.7757 10.9215 13.9163 11.1299 14.0205 11.3747C14.1195 11.6143 14.1663 11.8643 14.1663 12.1247Z" fill="#131011"/>
<path d="M23.8693 12.1247C23.8693 12.3851 23.8172 12.6351 23.7183 12.8747C23.6193 13.1195 23.4787 13.3278 23.2912 13.5153C23.1089 13.6976 22.8953 13.8382 22.6558 13.9424C22.4162 14.0413 22.1662 14.0882 21.9058 14.0882C21.6401 14.0882 21.3901 14.0413 21.1506 13.9424C20.911 13.8382 20.6974 13.6976 20.5151 13.5153C20.3276 13.3278 20.187 13.1195 20.0881 12.8747C19.9891 12.6351 19.937 12.3851 19.937 12.1247C19.937 11.8643 19.9891 11.6143 20.0881 11.3747C20.187 11.1299 20.3276 10.9215 20.5151 10.734C20.6974 10.5518 20.911 10.4111 21.1506 10.307C21.3901 10.208 21.6401 10.1611 21.9058 10.1611C22.1662 10.1611 22.4162 10.208 22.6558 10.307C22.8953 10.4111 23.1089 10.5518 23.2912 10.734C23.4787 10.9215 23.6193 11.1299 23.7183 11.3747C23.8172 11.6143 23.8693 11.8643 23.8693 12.1247Z" fill="#131011"/>
<path d="M33.578 12.1247C33.578 12.3851 33.5311 12.6351 33.4269 12.8747C33.328 13.1195 33.1873 13.3278 33.005 13.5153C32.8175 13.6976 32.604 13.8382 32.3644 13.9424C32.1248 14.0413 31.8748 14.0882 31.6144 14.0882C31.354 14.0882 31.104 14.0413 30.8644 13.9424C30.6196 13.8382 30.4113 13.6976 30.2238 13.5153C30.0415 13.3278 29.9009 13.1195 29.7967 12.8747C29.6978 12.6351 29.6509 12.3851 29.6509 12.1247C29.6509 11.8643 29.6978 11.6143 29.7967 11.3747C29.9009 11.1299 30.0415 10.9215 30.2238 10.734C30.4113 10.5518 30.6196 10.4111 30.8644 10.307C31.104 10.208 31.354 10.1611 31.6144 10.1611C31.8748 10.1611 32.1248 10.208 32.3644 10.307C32.604 10.4111 32.8175 10.5518 33.005 10.734C33.1873 10.9215 33.328 11.1299 33.4269 11.3747C33.5311 11.6143 33.578 11.8643 33.578 12.1247Z" fill="#131011"/>
<path d="M23.8693 21.6611C23.8693 21.9215 23.8172 22.1715 23.7183 22.4111C23.6193 22.6507 23.4787 22.8643 23.2912 23.0465C23.1089 23.234 22.8953 23.3747 22.6558 23.4736C22.4162 23.5726 22.1662 23.6247 21.9058 23.6247C21.6401 23.6247 21.3901 23.5726 21.1506 23.4736C20.911 23.3747 20.6974 23.234 20.5151 23.0465C20.3276 22.8643 20.187 22.6507 20.0881 22.4111C19.9891 22.1715 19.937 21.9215 19.937 21.6611C19.937 21.4007 19.9891 21.1507 20.0881 20.9059C20.187 20.6663 20.3276 20.4528 20.5151 20.2705C20.6974 20.0882 20.911 19.9424 21.1506 19.8434C21.3901 19.7445 21.6401 19.6924 21.9058 19.6924C22.1662 19.6924 22.4162 19.7445 22.6558 19.8434C22.8953 19.9424 23.1089 20.0882 23.2912 20.2705C23.4787 20.4528 23.6193 20.6663 23.7183 20.9059C23.8172 21.1507 23.8693 21.4007 23.8693 21.6611Z" fill="#131011"/>
<path d="M33.578 21.6611C33.578 21.9215 33.5311 22.1715 33.4269 22.4111C33.328 22.6507 33.1873 22.8643 33.005 23.0465C32.8175 23.234 32.604 23.3747 32.3644 23.4736C32.1248 23.5726 31.8748 23.6247 31.6144 23.6247C31.354 23.6247 31.104 23.5726 30.8644 23.4736C30.6196 23.3747 30.4113 23.234 30.2238 23.0465C30.0415 22.8643 29.9009 22.6507 29.7967 22.4111C29.6978 22.1715 29.6509 21.9215 29.6509 21.6611C29.6509 21.4007 29.6978 21.1507 29.7967 20.9059C29.9009 20.6663 30.0415 20.4528 30.2238 20.2705C30.4113 20.0882 30.6196 19.9424 30.8644 19.8434C31.104 19.7445 31.354 19.6924 31.6144 19.6924C31.8748 19.6924 32.1248 19.7445 32.3644 19.8434C32.604 19.9424 32.8175 20.0882 33.005 20.2705C33.1873 20.4528 33.328 20.6663 33.4269 20.9059C33.5311 21.1507 33.578 21.4007 33.578 21.6611Z" fill="#131011"/>
<path d="M33.578 31.2028C33.578 31.4632 33.5311 31.7132 33.4269 31.958C33.328 32.1976 33.1873 32.4111 33.005 32.5934C32.8175 32.7757 32.604 32.9215 32.3644 33.0205C32.1248 33.1195 31.8748 33.1715 31.6144 33.1715C31.354 33.1715 31.104 33.1195 30.8644 33.0205C30.6196 32.9215 30.4113 32.7757 30.2238 32.5934C30.0415 32.4111 29.9009 32.1976 29.7967 31.958C29.6978 31.7132 29.6509 31.4632 29.6509 31.2028C29.6509 30.9424 29.6978 30.6924 29.7967 30.4528C29.9009 30.2132 30.0415 29.9997 30.2238 29.8174C30.4113 29.6299 30.6196 29.4893 30.8644 29.3903C31.104 29.2913 31.354 29.2393 31.6144 29.2393C31.8748 29.2393 32.1248 29.2913 32.3644 29.3903C32.604 29.4893 32.8175 29.6299 33.005 29.8174C33.1873 29.9997 33.328 30.2132 33.4269 30.4528C33.5311 30.6924 33.578 30.9424 33.578 31.2028Z" fill="#131011"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 8 KiB

985
src/assets/svgs/Group 25399.svg Normal file
View file

@ -0,0 +1,985 @@
<svg width="370" height="205" viewBox="0 0 370 205" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.8">
<mask id="mask0_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="370" height="76">
<path d="M369.42 0H0V75.4631H369.42V0Z" fill="white"/>
</mask>
<g mask="url(#mask0_70_4)">
<mask id="mask1_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="45" height="44">
<path d="M22.3901 0L0 21.5596L22.3901 43.119L44.7803 21.5596L22.3901 0Z" fill="white"/>
</mask>
<g mask="url(#mask1_70_4)">
<path d="M44.78 0.0101318H0V43.129H44.78V0.0101318Z" fill="url(#paint0_linear_70_4)"/>
</g>
<mask id="mask2_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="22" y="21" width="34" height="33">
<path d="M44.7803 21.5697L22.3901 43.119L33.5801 53.9037L55.9702 32.3443L44.7803 21.5697Z" fill="white"/>
</mask>
<g mask="url(#mask2_70_4)">
<path d="M39.182 4.67449L6.3367 37.749L39.1818 70.8234L72.027 37.7488L39.182 4.67449Z" fill="url(#paint1_linear_70_4)"/>
</g>
<mask id="mask3_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="44" y="0" width="46" height="44">
<path d="M67.1704 0L44.7803 21.5596L67.1704 43.119L89.5601 21.5596L67.1704 0Z" fill="white"/>
</mask>
<g mask="url(#mask3_70_4)">
<path d="M89.56 0.0101318H44.78V43.129H89.56V0.0101318Z" fill="url(#paint2_linear_70_4)"/>
</g>
<mask id="mask4_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="67" y="21" width="34" height="33">
<path d="M89.5601 21.5697L67.1704 43.119L78.3604 53.9037L100.75 32.3443L89.5601 21.5697Z" fill="white"/>
</mask>
<g mask="url(#mask4_70_4)">
<path d="M83.956 4.67034L51.1108 37.7449L83.9559 70.8192L116.801 37.7447L83.956 4.67034Z" fill="url(#paint3_linear_70_4)"/>
</g>
<mask id="mask5_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="89" y="0" width="46" height="44">
<path d="M111.95 0L89.5601 21.5596L111.95 43.119L134.34 21.5596L111.95 0Z" fill="white"/>
</mask>
<g mask="url(#mask5_70_4)">
<path d="M134.34 0.0101318H89.56V43.129H134.34V0.0101318Z" fill="url(#paint4_linear_70_4)"/>
</g>
<mask id="mask6_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="111" y="21" width="35" height="33">
<path d="M134.34 21.5697L111.95 43.119L123.14 53.9037L145.53 32.3443L134.34 21.5697Z" fill="white"/>
</mask>
<g mask="url(#mask6_70_4)">
<path d="M128.74 4.66595L95.8952 37.7405L128.74 70.8148L161.586 37.7403L128.74 4.66595Z" fill="url(#paint5_linear_70_4)"/>
</g>
<mask id="mask7_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="134" y="0" width="46" height="44">
<path d="M156.73 0L134.34 21.5596L156.73 43.119L179.11 21.5596L156.73 0Z" fill="white"/>
</mask>
<g mask="url(#mask7_70_4)">
<path d="M179.12 0.0101318H134.34V43.129H179.12V0.0101318Z" fill="url(#paint6_linear_70_4)"/>
</g>
<mask id="mask8_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="156" y="21" width="35" height="33">
<path d="M179.11 21.5697L156.73 43.119L167.92 53.9037L190.31 32.3443L179.11 21.5697Z" fill="white"/>
</mask>
<g mask="url(#mask8_70_4)">
<path d="M173.515 4.67193L140.669 37.7465L173.514 70.8208L206.36 37.7463L173.515 4.67193Z" fill="url(#paint7_linear_70_4)"/>
</g>
<mask id="mask9_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="179" y="0" width="45" height="44">
<path d="M201.5 0L179.11 21.5596L201.5 43.119L223.89 21.5596L201.5 0Z" fill="white"/>
</mask>
<g mask="url(#mask9_70_4)">
<path d="M223.89 0.0101318H179.11V43.129H223.89V0.0101318Z" fill="url(#paint8_linear_70_4)"/>
</g>
<mask id="mask10_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="201" y="21" width="35" height="33">
<path d="M223.89 21.5697L201.5 43.119L212.7 53.9037L235.09 32.3443L223.89 21.5697Z" fill="white"/>
</mask>
<g mask="url(#mask10_70_4)">
<path d="M218.299 4.66777L185.454 37.7419L218.299 70.8163L251.144 37.7421L218.299 4.66777Z" fill="url(#paint9_linear_70_4)"/>
</g>
<mask id="mask11_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="223" y="0" width="46" height="44">
<path d="M246.28 0L223.89 21.5596L246.28 43.119L268.67 21.5596L246.28 0Z" fill="white"/>
</mask>
<g mask="url(#mask11_70_4)">
<path d="M268.67 0.0101318H223.89V43.129H268.67V0.0101318Z" fill="url(#paint10_linear_70_4)"/>
</g>
<mask id="mask12_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="246" y="21" width="34" height="33">
<path d="M268.67 21.5697L246.28 43.119L257.48 53.9037L279.87 32.3443L268.67 21.5697Z" fill="white"/>
</mask>
<g mask="url(#mask12_70_4)">
<path d="M263.073 4.66326L230.228 37.7378L263.073 70.8121L295.918 37.7376L263.073 4.66326Z" fill="url(#paint11_linear_70_4)"/>
</g>
<mask id="mask13_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="268" y="0" width="46" height="44">
<path d="M291.06 0L268.67 21.5596L291.06 43.119L313.45 21.5596L291.06 0Z" fill="white"/>
</mask>
<g mask="url(#mask13_70_4)">
<path d="M313.45 0.0101318H268.67V43.129H313.45V0.0101318Z" fill="url(#paint12_linear_70_4)"/>
</g>
<mask id="mask14_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="291" y="21" width="34" height="33">
<path d="M313.45 21.5697L291.06 43.119L302.26 53.9037L324.65 32.3443L313.45 21.5697Z" fill="white"/>
</mask>
<g mask="url(#mask14_70_4)">
<path d="M307.857 4.66923L275.012 37.7434L307.857 70.8178L340.702 37.7436L307.857 4.66923Z" fill="url(#paint13_linear_70_4)"/>
</g>
<mask id="mask15_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="313" y="0" width="46" height="44">
<path d="M335.84 0L313.45 21.5596L335.84 43.119L358.23 21.5596L335.84 0Z" fill="white"/>
</mask>
<g mask="url(#mask15_70_4)">
<path d="M358.23 0.0101318H313.45V43.129H358.23V0.0101318Z" fill="url(#paint14_linear_70_4)"/>
</g>
<mask id="mask16_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="335" y="21" width="35" height="33">
<path d="M358.23 21.5697L335.84 43.119L347.03 53.9037L369.42 32.3443L358.23 21.5697Z" fill="white"/>
</mask>
<g mask="url(#mask16_70_4)">
<path d="M352.624 4.67204L319.779 37.7462L352.624 70.8206L385.469 37.7464L352.624 4.67204Z" fill="url(#paint15_linear_70_4)"/>
</g>
<mask id="mask17_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="21" width="45" height="44">
<path d="M22.3901 21.5697L0 43.119L22.3901 64.6784L44.7803 43.119L22.3901 21.5697Z" fill="white"/>
</mask>
<g mask="url(#mask17_70_4)">
<path d="M44.78 21.5697H0V64.6886H44.78V21.5697Z" fill="url(#paint16_linear_70_4)"/>
</g>
<mask id="mask18_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="22" y="43" width="34" height="33">
<path d="M44.7803 43.129L22.3901 64.6884L33.5801 75.463L55.9702 53.9037L44.7803 43.129Z" fill="white"/>
</mask>
<g mask="url(#mask18_70_4)">
<path d="M39.1812 26.2332L6.33597 59.3077L39.181 92.3821L72.0263 59.3076L39.1812 26.2332Z" fill="url(#paint17_linear_70_4)"/>
</g>
<mask id="mask19_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="44" y="21" width="46" height="44">
<path d="M67.1704 21.5697L44.7803 43.119L67.1704 64.6784L89.5601 43.119L67.1704 21.5697Z" fill="white"/>
</mask>
<g mask="url(#mask19_70_4)">
<path d="M89.56 21.5697H44.78V64.6886H89.56V21.5697Z" fill="url(#paint18_linear_70_4)"/>
</g>
<mask id="mask20_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="67" y="43" width="34" height="33">
<path d="M89.5601 43.129L67.1704 64.6884L78.3604 75.463L100.75 53.9037L89.5601 43.129Z" fill="white"/>
</mask>
<g mask="url(#mask20_70_4)">
<path d="M83.9553 26.2291L51.11 59.3036L83.9551 92.3779L116.8 59.3034L83.9553 26.2291Z" fill="url(#paint19_linear_70_4)"/>
</g>
<mask id="mask21_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="89" y="21" width="46" height="44">
<path d="M111.95 21.5697L89.5601 43.119L111.95 64.6784L134.34 43.119L111.95 21.5697Z" fill="white"/>
</mask>
<g mask="url(#mask21_70_4)">
<path d="M134.34 21.5697H89.56V64.6886H134.34V21.5697Z" fill="url(#paint20_linear_70_4)"/>
</g>
<mask id="mask22_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="111" y="43" width="35" height="33">
<path d="M134.34 43.129L111.95 64.6884L123.14 75.463L145.53 53.9037L134.34 43.129Z" fill="white"/>
</mask>
<g mask="url(#mask22_70_4)">
<path d="M128.74 26.2247L95.8945 59.2992L128.74 92.3735L161.585 59.299L128.74 26.2247Z" fill="url(#paint21_linear_70_4)"/>
</g>
<mask id="mask23_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="134" y="21" width="46" height="44">
<path d="M156.73 21.5697L134.34 43.119L156.73 64.6784L179.11 43.119L156.73 21.5697Z" fill="white"/>
</mask>
<g mask="url(#mask23_70_4)">
<path d="M179.12 21.5697H134.34V64.6886H179.12V21.5697Z" fill="url(#paint22_linear_70_4)"/>
</g>
<mask id="mask24_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="156" y="43" width="35" height="33">
<path d="M179.11 43.129L156.73 64.6884L167.92 75.463L190.31 53.9037L179.11 43.129Z" fill="white"/>
</mask>
<g mask="url(#mask24_70_4)">
<path d="M173.514 26.2305L140.669 59.3051L173.514 92.3794L206.359 59.3049L173.514 26.2305Z" fill="url(#paint23_linear_70_4)"/>
</g>
<mask id="mask25_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="179" y="21" width="45" height="44">
<path d="M201.5 21.5697L179.11 43.119L201.5 64.6784L223.89 43.119L201.5 21.5697Z" fill="white"/>
</mask>
<g mask="url(#mask25_70_4)">
<path d="M223.89 21.5697H179.11V64.6886H223.89V21.5697Z" fill="url(#paint24_linear_70_4)"/>
</g>
<mask id="mask26_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="201" y="43" width="35" height="33">
<path d="M223.89 43.129L201.5 64.6884L212.7 75.463L235.09 53.9037L223.89 43.129Z" fill="white"/>
</mask>
<g mask="url(#mask26_70_4)">
<path d="M218.298 26.2265L185.453 59.3007L218.298 92.375L251.143 59.3008L218.298 26.2265Z" fill="url(#paint25_linear_70_4)"/>
</g>
<mask id="mask27_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="223" y="21" width="46" height="44">
<path d="M246.28 21.5697L223.89 43.119L246.28 64.6784L268.67 43.119L246.28 21.5697Z" fill="white"/>
</mask>
<g mask="url(#mask27_70_4)">
<path d="M268.67 21.5697H223.89V64.6886H268.67V21.5697Z" fill="url(#paint26_linear_70_4)"/>
</g>
<mask id="mask28_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="246" y="43" width="34" height="33">
<path d="M268.67 43.129L246.28 64.6884L257.48 75.463L279.87 53.9037L268.67 43.129Z" fill="white"/>
</mask>
<g mask="url(#mask28_70_4)">
<path d="M263.072 26.2321L230.227 59.3066L263.072 92.381L295.917 59.3065L263.072 26.2321Z" fill="url(#paint27_linear_70_4)"/>
</g>
<mask id="mask29_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="268" y="21" width="46" height="44">
<path d="M291.06 21.5697L268.67 43.119L291.06 64.6784L313.45 43.119L291.06 21.5697Z" fill="white"/>
</mask>
<g mask="url(#mask29_70_4)">
<path d="M313.45 21.5697H268.67V64.6886H313.45V21.5697Z" fill="url(#paint28_linear_70_4)"/>
</g>
<mask id="mask30_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="291" y="43" width="34" height="33">
<path d="M313.45 43.129L291.06 64.6884L302.26 75.463L324.65 53.9037L313.45 43.129Z" fill="white"/>
</mask>
<g mask="url(#mask30_70_4)">
<path d="M307.856 26.2279L275.012 59.3021L307.857 92.3765L340.702 59.3023L307.856 26.2279Z" fill="url(#paint29_linear_70_4)"/>
</g>
<mask id="mask31_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="313" y="21" width="46" height="44">
<path d="M335.84 21.5697L313.45 43.119L335.84 64.6784L358.23 43.119L335.84 21.5697Z" fill="white"/>
</mask>
<g mask="url(#mask31_70_4)">
<path d="M358.23 21.5697H313.45V64.6886H358.23V21.5697Z" fill="url(#paint30_linear_70_4)"/>
</g>
<mask id="mask32_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="335" y="43" width="35" height="33">
<path d="M358.23 43.129L335.84 64.6884L347.03 75.463L369.42 53.9037L358.23 43.129Z" fill="white"/>
</mask>
<g mask="url(#mask32_70_4)">
<path d="M352.624 26.2308L319.779 59.3049L352.624 92.3793L385.469 59.3051L352.624 26.2308Z" fill="url(#paint31_linear_70_4)"/>
</g>
</g>
</g>
<g opacity="0.6">
<mask id="mask33_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="43" width="370" height="76">
<path d="M369.42 43.1289H0V118.592H369.42V43.1289Z" fill="white"/>
</mask>
<g mask="url(#mask33_70_4)">
<mask id="mask34_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="43" width="45" height="44">
<path d="M22.3901 43.1289L0 64.6883L22.3901 86.2479L44.7803 64.6883L22.3901 43.1289Z" fill="white"/>
</mask>
<g mask="url(#mask34_70_4)">
<path d="M44.78 43.139H0V86.2579H44.78V43.139Z" fill="url(#paint32_linear_70_4)"/>
</g>
<mask id="mask35_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="22" y="64" width="34" height="34">
<path d="M44.7803 64.6882L22.3901 86.2478L33.5801 97.0326L55.9702 75.473L44.7803 64.6882Z" fill="white"/>
</mask>
<g mask="url(#mask35_70_4)">
<path d="M39.1703 47.7916L6.32504 80.8661L39.1701 113.94L72.0154 80.8659L39.1703 47.7916Z" fill="url(#paint33_linear_70_4)"/>
</g>
<mask id="mask36_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="44" y="43" width="46" height="44">
<path d="M67.1704 43.1289L44.7803 64.6883L67.1704 86.2479L89.5601 64.6883L67.1704 43.1289Z" fill="white"/>
</mask>
<g mask="url(#mask36_70_4)">
<path d="M89.56 43.139H44.78V86.2579H89.56V43.139Z" fill="url(#paint34_linear_70_4)"/>
</g>
<mask id="mask37_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="67" y="64" width="34" height="34">
<path d="M89.5601 64.6882L67.1704 86.2478L78.3604 97.0326L100.75 75.473L89.5601 64.6882Z" fill="white"/>
</mask>
<g mask="url(#mask37_70_4)">
<path d="M83.9544 47.7874L51.1091 80.8619L83.9542 113.936L116.799 80.8618L83.9544 47.7874Z" fill="url(#paint35_linear_70_4)"/>
</g>
<mask id="mask38_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="89" y="43" width="46" height="44">
<path d="M111.95 43.1289L89.5601 64.6883L111.95 86.2479L134.34 64.6883L111.95 43.1289Z" fill="white"/>
</mask>
<g mask="url(#mask38_70_4)">
<path d="M134.34 43.139H89.56V86.2579H134.34V43.139Z" fill="url(#paint36_linear_70_4)"/>
</g>
<mask id="mask39_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="111" y="64" width="35" height="34">
<path d="M134.34 64.6882L111.95 86.2478L123.14 97.0326L145.53 75.473L134.34 64.6882Z" fill="white"/>
</mask>
<g mask="url(#mask39_70_4)">
<path d="M128.729 47.793L95.8835 80.8676L128.729 113.942L161.574 80.8674L128.729 47.793Z" fill="url(#paint37_linear_70_4)"/>
</g>
<mask id="mask40_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="134" y="43" width="46" height="44">
<path d="M156.73 43.1289L134.34 64.6883L156.73 86.2479L179.11 64.6883L156.73 43.1289Z" fill="white"/>
</mask>
<g mask="url(#mask40_70_4)">
<path d="M179.12 43.139H134.34V86.2579H179.12V43.139Z" fill="url(#paint38_linear_70_4)"/>
</g>
<mask id="mask41_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="156" y="64" width="35" height="34">
<path d="M179.11 64.6882L156.73 86.2478L167.92 97.0326L190.31 75.473L179.11 64.6882Z" fill="white"/>
</mask>
<g mask="url(#mask41_70_4)">
<path d="M173.513 47.789L140.668 80.8635L173.513 113.938L206.358 80.8633L173.513 47.789Z" fill="url(#paint39_linear_70_4)"/>
</g>
<mask id="mask42_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="179" y="43" width="45" height="44">
<path d="M201.5 43.1289L179.11 64.6883L201.5 86.2479L223.89 64.6883L201.5 43.1289Z" fill="white"/>
</mask>
<g mask="url(#mask42_70_4)">
<path d="M223.89 43.139H179.11V86.2579H223.89V43.139Z" fill="url(#paint40_linear_70_4)"/>
</g>
<mask id="mask43_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="201" y="64" width="35" height="34">
<path d="M223.89 64.6882L201.5 86.2478L212.7 97.0326L235.09 75.473L223.89 64.6882Z" fill="white"/>
</mask>
<g mask="url(#mask43_70_4)">
<path d="M218.287 47.7848L185.442 80.859L218.287 113.933L251.132 80.8592L218.287 47.7848Z" fill="url(#paint41_linear_70_4)"/>
</g>
<mask id="mask44_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="223" y="43" width="46" height="44">
<path d="M246.28 43.1289L223.89 64.6883L246.28 86.2479L268.67 64.6883L246.28 43.1289Z" fill="white"/>
</mask>
<g mask="url(#mask44_70_4)">
<path d="M268.67 43.139H223.89V86.2579H268.67V43.139Z" fill="url(#paint42_linear_70_4)"/>
</g>
<mask id="mask45_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="246" y="64" width="34" height="34">
<path d="M268.67 64.6882L246.28 86.2478L257.48 97.0326L279.87 75.473L268.67 64.6882Z" fill="white"/>
</mask>
<g mask="url(#mask45_70_4)">
<path d="M263.071 47.7803L230.226 80.8549L263.071 113.929L295.917 80.8547L263.071 47.7803Z" fill="url(#paint43_linear_70_4)"/>
</g>
<mask id="mask46_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="268" y="43" width="46" height="44">
<path d="M291.06 43.1289L268.67 64.6883L291.06 86.2479L313.45 64.6883L291.06 43.1289Z" fill="white"/>
</mask>
<g mask="url(#mask46_70_4)">
<path d="M313.45 43.139H268.67V86.2579H313.45V43.139Z" fill="url(#paint44_linear_70_4)"/>
</g>
<mask id="mask47_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="291" y="64" width="34" height="34">
<path d="M313.45 64.6882L291.06 86.2478L302.26 97.0326L324.65 75.473L313.45 64.6882Z" fill="white"/>
</mask>
<g mask="url(#mask47_70_4)">
<path d="M307.856 47.7863L275.011 80.8605L307.856 113.935L340.701 80.8606L307.856 47.7863Z" fill="url(#paint45_linear_70_4)"/>
</g>
<mask id="mask48_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="313" y="43" width="46" height="44">
<path d="M335.84 43.1289L313.45 64.6883L335.84 86.2479L358.23 64.6883L335.84 43.1289Z" fill="white"/>
</mask>
<g mask="url(#mask48_70_4)">
<path d="M358.23 43.139H313.45V86.2579H358.23V43.139Z" fill="url(#paint46_linear_70_4)"/>
</g>
<mask id="mask49_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="335" y="64" width="35" height="34">
<path d="M358.23 64.6882L335.84 86.2478L347.03 97.0326L369.42 75.473L358.23 64.6882Z" fill="white"/>
</mask>
<g mask="url(#mask49_70_4)">
<path d="M352.623 47.7992L319.778 80.8734L352.623 113.948L385.468 80.8736L352.623 47.7992Z" fill="url(#paint47_linear_70_4)"/>
</g>
<mask id="mask50_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="64" width="45" height="44">
<path d="M22.3901 64.6882L0 86.2478L22.3901 107.807L44.7803 86.2478L22.3901 64.6882Z" fill="white"/>
</mask>
<g mask="url(#mask50_70_4)">
<path d="M44.78 64.6984H0V107.817H44.78V64.6984Z" fill="url(#paint48_linear_70_4)"/>
</g>
<mask id="mask51_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="22" y="86" width="34" height="33">
<path d="M44.7803 86.2579L22.3901 107.817L33.5801 118.592L55.9702 97.0326L44.7803 86.2579Z" fill="white"/>
</mask>
<g mask="url(#mask51_70_4)">
<path d="M39.1765 69.3572L6.33121 102.432L39.1763 135.506L72.0215 102.432L39.1765 69.3572Z" fill="url(#paint49_linear_70_4)"/>
</g>
<mask id="mask52_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="44" y="64" width="46" height="44">
<path d="M67.1704 64.6882L44.7803 86.2478L67.1704 107.807L89.5601 86.2478L67.1704 64.6882Z" fill="white"/>
</mask>
<g mask="url(#mask52_70_4)">
<path d="M89.56 64.6984H44.78V107.817H89.56V64.6984Z" fill="url(#paint50_linear_70_4)"/>
</g>
<mask id="mask53_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="67" y="86" width="34" height="33">
<path d="M89.5601 86.2579L67.1704 107.817L78.3604 118.592L100.75 97.0326L89.5601 86.2579Z" fill="white"/>
</mask>
<g mask="url(#mask53_70_4)">
<path d="M83.9605 69.3531L51.1153 102.428L83.9604 135.502L116.806 102.427L83.9605 69.3531Z" fill="url(#paint51_linear_70_4)"/>
</g>
<mask id="mask54_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="89" y="64" width="46" height="44">
<path d="M111.95 64.6882L89.5601 86.2478L111.95 107.807L134.34 86.2478L111.95 64.6882Z" fill="white"/>
</mask>
<g mask="url(#mask54_70_4)">
<path d="M134.34 64.6984H89.56V107.817H134.34V64.6984Z" fill="url(#paint52_linear_70_4)"/>
</g>
<mask id="mask55_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="111" y="86" width="35" height="33">
<path d="M134.34 86.2579L111.95 107.817L123.14 118.592L145.53 97.0326L134.34 86.2579Z" fill="white"/>
</mask>
<g mask="url(#mask55_70_4)">
<path d="M128.735 69.3587L95.8898 102.433L128.735 135.508L161.58 102.433L128.735 69.3587Z" fill="url(#paint53_linear_70_4)"/>
</g>
<mask id="mask56_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="134" y="64" width="46" height="44">
<path d="M156.73 64.6882L134.34 86.2478L156.73 107.807L179.11 86.2478L156.73 64.6882Z" fill="white"/>
</mask>
<g mask="url(#mask56_70_4)">
<path d="M179.12 64.6984H134.34V107.817H179.12V64.6984Z" fill="url(#paint54_linear_70_4)"/>
</g>
<mask id="mask57_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="156" y="86" width="35" height="33">
<path d="M179.11 86.2579L156.73 107.817L167.92 118.592L190.31 97.0326L179.11 86.2579Z" fill="white"/>
</mask>
<g mask="url(#mask57_70_4)">
<path d="M173.519 69.3547L140.674 102.429L173.519 135.504L206.364 102.429L173.519 69.3547Z" fill="url(#paint55_linear_70_4)"/>
</g>
<mask id="mask58_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="179" y="64" width="45" height="44">
<path d="M201.5 64.6882L179.11 86.2478L201.5 107.807L223.89 86.2478L201.5 64.6882Z" fill="white"/>
</mask>
<g mask="url(#mask58_70_4)">
<path d="M223.89 64.6984H179.11V107.817H223.89V64.6984Z" fill="url(#paint56_linear_70_4)"/>
</g>
<mask id="mask59_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="201" y="86" width="35" height="33">
<path d="M223.89 86.2579L201.5 107.817L212.7 118.592L235.09 97.0326L223.89 86.2579Z" fill="white"/>
</mask>
<g mask="url(#mask59_70_4)">
<path d="M218.293 69.3505L185.448 102.425L218.293 135.499L251.138 102.425L218.293 69.3505Z" fill="url(#paint57_linear_70_4)"/>
</g>
<mask id="mask60_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="223" y="64" width="46" height="44">
<path d="M246.28 64.6882L223.89 86.2478L246.28 107.807L268.67 86.2478L246.28 64.6882Z" fill="white"/>
</mask>
<g mask="url(#mask60_70_4)">
<path d="M268.67 64.6984H223.89V107.817H268.67V64.6984Z" fill="url(#paint58_linear_70_4)"/>
</g>
<mask id="mask61_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="246" y="86" width="34" height="33">
<path d="M268.67 86.2579L246.28 107.817L257.48 118.592L279.87 97.0326L268.67 86.2579Z" fill="white"/>
</mask>
<g mask="url(#mask61_70_4)">
<path d="M263.078 69.3561L230.232 102.431L263.077 135.505L295.923 102.43L263.078 69.3561Z" fill="url(#paint59_linear_70_4)"/>
</g>
<mask id="mask62_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="268" y="64" width="46" height="44">
<path d="M291.06 64.6882L268.67 86.2478L291.06 107.807L313.45 86.2478L291.06 64.6882Z" fill="white"/>
</mask>
<g mask="url(#mask62_70_4)">
<path d="M313.45 64.6984H268.67V107.817H313.45V64.6984Z" fill="url(#paint60_linear_70_4)"/>
</g>
<mask id="mask63_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="291" y="86" width="34" height="33">
<path d="M313.45 86.2579L291.06 107.817L302.26 118.592L324.65 97.0326L313.45 86.2579Z" fill="white"/>
</mask>
<g mask="url(#mask63_70_4)">
<path d="M307.852 69.352L275.007 102.426L307.852 135.501L340.697 102.426L307.852 69.352Z" fill="url(#paint61_linear_70_4)"/>
</g>
<mask id="mask64_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="313" y="64" width="46" height="44">
<path d="M335.84 64.6882L313.45 86.2478L335.84 107.807L358.23 86.2478L335.84 64.6882Z" fill="white"/>
</mask>
<g mask="url(#mask64_70_4)">
<path d="M358.23 64.6984H313.45V107.817H358.23V64.6984Z" fill="url(#paint62_linear_70_4)"/>
</g>
<mask id="mask65_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="335" y="86" width="35" height="33">
<path d="M358.23 86.2579L335.84 107.817L347.03 118.592L369.42 97.0326L358.23 86.2579Z" fill="white"/>
</mask>
<g mask="url(#mask65_70_4)">
<path d="M352.629 69.3649L319.784 102.439L352.629 135.513L385.474 102.439L352.629 69.3649Z" fill="url(#paint63_linear_70_4)"/>
</g>
</g>
</g>
<g opacity="0.2">
<mask id="mask66_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="129" width="370" height="76">
<path d="M369.42 129.387H0V204.851H369.42V129.387Z" fill="white"/>
</mask>
<g mask="url(#mask66_70_4)">
<mask id="mask67_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="129" width="45" height="44">
<path d="M22.3901 129.387L0 150.947L22.3901 172.496L44.7803 150.947L22.3901 129.387Z" fill="white"/>
</mask>
<g mask="url(#mask67_70_4)">
<path d="M44.78 129.387H0V172.506H44.78V129.387Z" fill="url(#paint64_linear_70_4)"/>
</g>
<mask id="mask68_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="22" y="150" width="34" height="34">
<path d="M44.7803 150.947L22.3901 172.506L33.5801 183.281L55.9702 161.731L44.7803 150.947Z" fill="white"/>
</mask>
<g mask="url(#mask68_70_4)">
<path d="M39.181 134.051L6.33575 167.125L39.181 200.2L72.0263 167.125L39.181 134.051Z" fill="url(#paint65_linear_70_4)"/>
</g>
<mask id="mask69_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="44" y="129" width="46" height="44">
<path d="M67.1704 129.387L44.7803 150.947L67.1704 172.496L89.5601 150.947L67.1704 129.387Z" fill="white"/>
</mask>
<g mask="url(#mask69_70_4)">
<path d="M89.56 129.387H44.78V172.506H89.56V129.387Z" fill="url(#paint66_linear_70_4)"/>
</g>
<mask id="mask70_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="67" y="150" width="34" height="34">
<path d="M89.5601 150.947L67.1704 172.506L78.3604 183.281L100.75 161.731L89.5601 150.947Z" fill="white"/>
</mask>
<g mask="url(#mask70_70_4)">
<path d="M83.9551 134.047L51.1099 167.121L83.9551 200.196L116.8 167.121L83.9551 134.047Z" fill="url(#paint67_linear_70_4)"/>
</g>
<mask id="mask71_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="89" y="129" width="46" height="44">
<path d="M111.95 129.387L89.5601 150.947L111.95 172.496L134.34 150.947L111.95 129.387Z" fill="white"/>
</mask>
<g mask="url(#mask71_70_4)">
<path d="M134.34 129.387H89.56V172.506H134.34V129.387Z" fill="url(#paint68_linear_70_4)"/>
</g>
<mask id="mask72_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="111" y="150" width="35" height="34">
<path d="M134.34 150.947L111.95 172.506L123.14 183.281L145.53 161.731L134.34 150.947Z" fill="white"/>
</mask>
<g mask="url(#mask72_70_4)">
<path d="M128.74 134.042L95.8943 167.117L128.74 200.191L161.585 167.117L128.74 134.042Z" fill="url(#paint69_linear_70_4)"/>
</g>
<mask id="mask73_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="134" y="129" width="46" height="44">
<path d="M156.73 129.387L134.34 150.947L156.73 172.496L179.11 150.947L156.73 129.387Z" fill="white"/>
</mask>
<g mask="url(#mask73_70_4)">
<path d="M179.12 129.387H134.34V172.506H179.12V129.387Z" fill="url(#paint70_linear_70_4)"/>
</g>
<mask id="mask74_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="156" y="150" width="35" height="34">
<path d="M179.11 150.947L156.73 172.506L167.92 183.281L190.31 161.731L179.11 150.947Z" fill="white"/>
</mask>
<g mask="url(#mask74_70_4)">
<path d="M173.514 134.048L140.668 167.123L173.514 200.197L206.359 167.123L173.514 134.048Z" fill="url(#paint71_linear_70_4)"/>
</g>
<mask id="mask75_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="179" y="129" width="45" height="44">
<path d="M201.5 129.387L179.11 150.947L201.5 172.496L223.89 150.947L201.5 129.387Z" fill="white"/>
</mask>
<g mask="url(#mask75_70_4)">
<path d="M223.89 129.387H179.11V172.506H223.89V129.387Z" fill="url(#paint72_linear_70_4)"/>
</g>
<mask id="mask76_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="201" y="150" width="35" height="34">
<path d="M223.89 150.947L201.5 172.506L212.7 183.281L235.09 161.731L223.89 150.947Z" fill="white"/>
</mask>
<g mask="url(#mask76_70_4)">
<path d="M218.298 134.044L185.453 167.118L218.298 200.193L251.143 167.118L218.298 134.044Z" fill="url(#paint73_linear_70_4)"/>
</g>
<mask id="mask77_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="223" y="129" width="46" height="44">
<path d="M246.28 129.387L223.89 150.947L246.28 172.496L268.67 150.947L246.28 129.387Z" fill="white"/>
</mask>
<g mask="url(#mask77_70_4)">
<path d="M268.67 129.387H223.89V172.506H268.67V129.387Z" fill="url(#paint74_linear_70_4)"/>
</g>
<mask id="mask78_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="246" y="150" width="34" height="34">
<path d="M268.67 150.947L246.28 172.506L257.48 183.281L279.87 161.731L268.67 150.947Z" fill="white"/>
</mask>
<g mask="url(#mask78_70_4)">
<path d="M263.072 134.039L230.227 167.114L263.072 200.189L295.917 167.114L263.072 134.039Z" fill="url(#paint75_linear_70_4)"/>
</g>
<mask id="mask79_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="268" y="129" width="46" height="44">
<path d="M291.06 129.387L268.67 150.947L291.06 172.496L313.45 150.947L291.06 129.387Z" fill="white"/>
</mask>
<g mask="url(#mask79_70_4)">
<path d="M313.45 129.387H268.67V172.506H313.45V129.387Z" fill="url(#paint76_linear_70_4)"/>
</g>
<mask id="mask80_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="291" y="150" width="34" height="34">
<path d="M313.45 150.947L291.06 172.506L302.26 183.281L324.65 161.731L313.45 150.947Z" fill="white"/>
</mask>
<g mask="url(#mask80_70_4)">
<path d="M307.856 134.045L275.011 167.12L307.857 200.194L340.702 167.12L307.856 134.045Z" fill="url(#paint77_linear_70_4)"/>
</g>
<mask id="mask81_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="313" y="129" width="46" height="44">
<path d="M335.84 129.387L313.45 150.947L335.84 172.496L358.23 150.947L335.84 129.387Z" fill="white"/>
</mask>
<g mask="url(#mask81_70_4)">
<path d="M358.23 129.387H313.45V172.506H358.23V129.387Z" fill="url(#paint78_linear_70_4)"/>
</g>
<mask id="mask82_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="335" y="150" width="35" height="34">
<path d="M358.23 150.947L335.84 172.506L347.03 183.281L369.42 161.731L358.23 150.947Z" fill="white"/>
</mask>
<g mask="url(#mask82_70_4)">
<path d="M352.623 134.048L319.779 167.122L352.624 200.197L385.469 167.123L352.623 134.048Z" fill="url(#paint79_linear_70_4)"/>
</g>
<mask id="mask83_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="150" width="45" height="45">
<path d="M22.3901 150.947L0 172.506L22.3901 194.066L44.7803 172.506L22.3901 150.947Z" fill="white"/>
</mask>
<g mask="url(#mask83_70_4)">
<path d="M44.78 150.947H0V194.066H44.78V150.947Z" fill="url(#paint80_linear_70_4)"/>
</g>
<mask id="mask84_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="22" y="172" width="34" height="33">
<path d="M44.7803 172.516L22.3901 194.066L33.5801 204.85L55.9702 183.291L44.7803 172.516Z" fill="white"/>
</mask>
<g mask="url(#mask84_70_4)">
<path d="M39.1703 155.609L6.32501 188.684L39.1701 221.758L72.0153 188.684L39.1703 155.609Z" fill="url(#paint81_linear_70_4)"/>
</g>
<mask id="mask85_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="44" y="150" width="46" height="45">
<path d="M67.1704 150.947L44.7803 172.506L67.1704 194.066L89.5601 172.506L67.1704 150.947Z" fill="white"/>
</mask>
<g mask="url(#mask85_70_4)">
<path d="M89.56 150.947H44.78V194.066H89.56V150.947Z" fill="url(#paint82_linear_70_4)"/>
</g>
<mask id="mask86_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="67" y="172" width="34" height="33">
<path d="M89.5601 172.516L67.1704 194.066L78.3604 204.85L100.75 183.291L89.5601 172.516Z" fill="white"/>
</mask>
<g mask="url(#mask86_70_4)">
<path d="M83.9544 155.605L51.1091 188.68L83.9542 221.754L116.799 188.68L83.9544 155.605Z" fill="url(#paint83_linear_70_4)"/>
</g>
<mask id="mask87_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="89" y="150" width="46" height="45">
<path d="M111.95 150.947L89.5601 172.506L111.95 194.066L134.34 172.506L111.95 150.947Z" fill="white"/>
</mask>
<g mask="url(#mask87_70_4)">
<path d="M134.34 150.947H89.56V194.066H134.34V150.947Z" fill="url(#paint84_linear_70_4)"/>
</g>
<mask id="mask88_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="111" y="172" width="35" height="33">
<path d="M134.34 172.516L111.95 194.066L123.14 204.85L145.53 183.291L134.34 172.516Z" fill="white"/>
</mask>
<g mask="url(#mask88_70_4)">
<path d="M128.729 155.611L95.8835 188.685L128.729 221.76L161.574 188.685L128.729 155.611Z" fill="url(#paint85_linear_70_4)"/>
</g>
<mask id="mask89_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="134" y="150" width="46" height="45">
<path d="M156.73 150.947L134.34 172.506L156.73 194.066L179.11 172.506L156.73 150.947Z" fill="white"/>
</mask>
<g mask="url(#mask89_70_4)">
<path d="M179.12 150.947H134.34V194.066H179.12V150.947Z" fill="url(#paint86_linear_70_4)"/>
</g>
<mask id="mask90_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="156" y="172" width="35" height="33">
<path d="M179.11 172.516L156.73 194.066L167.92 204.85L190.31 183.291L179.11 172.516Z" fill="white"/>
</mask>
<g mask="url(#mask90_70_4)">
<path d="M173.513 155.607L140.668 188.681L173.513 221.756L206.358 188.681L173.513 155.607Z" fill="url(#paint87_linear_70_4)"/>
</g>
<mask id="mask91_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="179" y="150" width="45" height="45">
<path d="M201.5 150.947L179.11 172.506L201.5 194.066L223.89 172.506L201.5 150.947Z" fill="white"/>
</mask>
<g mask="url(#mask91_70_4)">
<path d="M223.89 150.947H179.11V194.066H223.89V150.947Z" fill="url(#paint88_linear_70_4)"/>
</g>
<mask id="mask92_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="201" y="172" width="35" height="33">
<path d="M223.89 172.516L201.5 194.066L212.7 204.85L235.09 183.291L223.89 172.516Z" fill="white"/>
</mask>
<g mask="url(#mask92_70_4)">
<path d="M218.287 155.603L185.442 188.677L218.287 221.751L251.132 188.677L218.287 155.603Z" fill="url(#paint89_linear_70_4)"/>
</g>
<mask id="mask93_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="223" y="150" width="46" height="45">
<path d="M246.28 150.947L223.89 172.506L246.28 194.066L268.67 172.506L246.28 150.947Z" fill="white"/>
</mask>
<g mask="url(#mask93_70_4)">
<path d="M268.67 150.947H223.89V194.066H268.67V150.947Z" fill="url(#paint90_linear_70_4)"/>
</g>
<mask id="mask94_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="246" y="172" width="34" height="33">
<path d="M268.67 172.516L246.28 194.066L257.48 204.85L279.87 183.291L268.67 172.516Z" fill="white"/>
</mask>
<g mask="url(#mask94_70_4)">
<path d="M263.071 155.598L230.226 188.673L263.071 221.747L295.917 188.673L263.071 155.598Z" fill="url(#paint91_linear_70_4)"/>
</g>
<mask id="mask95_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="268" y="150" width="46" height="45">
<path d="M291.06 150.947L268.67 172.506L291.06 194.066L313.45 172.506L291.06 150.947Z" fill="white"/>
</mask>
<g mask="url(#mask95_70_4)">
<path d="M313.45 150.947H268.67V194.066H313.45V150.947Z" fill="url(#paint92_linear_70_4)"/>
</g>
<mask id="mask96_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="291" y="172" width="34" height="33">
<path d="M313.45 172.516L291.06 194.066L302.26 204.85L324.65 183.291L313.45 172.516Z" fill="white"/>
</mask>
<g mask="url(#mask96_70_4)">
<path d="M307.856 155.604L275.011 188.678L307.856 221.753L340.701 188.679L307.856 155.604Z" fill="url(#paint93_linear_70_4)"/>
</g>
<mask id="mask97_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="313" y="150" width="46" height="45">
<path d="M335.84 150.947L313.45 172.506L335.84 194.066L358.23 172.506L335.84 150.947Z" fill="white"/>
</mask>
<g mask="url(#mask97_70_4)">
<path d="M358.23 150.947H313.45V194.066H358.23V150.947Z" fill="url(#paint94_linear_70_4)"/>
</g>
<mask id="mask98_70_4" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="335" y="172" width="35" height="33">
<path d="M358.23 172.516L335.84 194.066L347.03 204.85L369.42 183.291L358.23 172.516Z" fill="white"/>
</mask>
<g mask="url(#mask98_70_4)">
<path d="M352.623 155.617L319.778 188.691L352.623 221.766L385.468 188.691L352.623 155.617Z" fill="url(#paint95_linear_70_4)"/>
</g>
</g>
</g>
<defs>
<linearGradient id="paint0_linear_70_4" x1="28.0501" y1="55.0746" x2="28.0501" y2="-11.0509" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint1_linear_70_4" x1="16.9864" y1="56.2201" x2="51.1866" y2="22.2571" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint2_linear_70_4" x1="71.4814" y1="55.0746" x2="71.4814" y2="-11.0509" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint3_linear_70_4" x1="62.4047" y1="57.2848" x2="96.6048" y2="23.3217" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint4_linear_70_4" x1="116.975" y1="55.0746" x2="116.975" y2="-11.0509" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint5_linear_70_4" x1="106.772" y1="57.2804" x2="140.972" y2="23.3173" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint6_linear_70_4" x1="162.458" y1="55.0746" x2="162.458" y2="-11.0509" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint7_linear_70_4" x1="152.183" y1="56.2532" x2="186.383" y2="22.2901" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint8_linear_70_4" x1="205.889" y1="55.0746" x2="205.889" y2="-11.0509" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint9_linear_70_4" x1="196.543" y1="56.27" x2="230.743" y2="22.3073" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint10_linear_70_4" x1="251.373" y1="55.0746" x2="251.373" y2="-11.0509" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint11_linear_70_4" x1="240.893" y1="56.273" x2="275.093" y2="22.3099" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint12_linear_70_4" x1="296.866" y1="55.0746" x2="296.866" y2="-11.0509" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint13_linear_70_4" x1="286.322" y1="57.3473" x2="320.522" y2="23.3846" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint14_linear_70_4" x1="340.298" y1="55.0746" x2="340.298" y2="-11.0509" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint15_linear_70_4" x1="330.686" y1="57.2789" x2="364.886" y2="23.3162" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint16_linear_70_4" x1="28.0501" y1="76.9703" x2="28.0501" y2="10.8448" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint17_linear_70_4" x1="16.8301" y1="78.7173" x2="51.0303" y2="44.7542" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint18_linear_70_4" x1="71.4814" y1="76.9703" x2="71.4814" y2="10.8448" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint19_linear_70_4" x1="62.2554" y1="77.6088" x2="96.4556" y2="43.6457" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint20_linear_70_4" x1="116.975" y1="76.9703" x2="116.975" y2="10.8448" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint21_linear_70_4" x1="106.623" y1="77.5901" x2="140.823" y2="43.6271" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint22_linear_70_4" x1="162.458" y1="76.9703" x2="162.458" y2="10.8448" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint23_linear_70_4" x1="152.041" y1="78.6648" x2="186.241" y2="44.7017" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint24_linear_70_4" x1="205.889" y1="76.9703" x2="205.889" y2="10.8448" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint25_linear_70_4" x1="196.394" y1="78.7173" x2="230.594" y2="44.7546" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint26_linear_70_4" x1="251.373" y1="76.9703" x2="251.373" y2="10.8448" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint27_linear_70_4" x1="240.744" y1="78.7305" x2="274.944" y2="44.7674" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint28_linear_70_4" x1="296.866" y1="76.9703" x2="296.866" y2="10.8448" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint29_linear_70_4" x1="286.18" y1="77.593" x2="320.379" y2="43.6303" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint30_linear_70_4" x1="340.298" y1="76.9703" x2="340.298" y2="10.8448" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint31_linear_70_4" x1="330.544" y1="77.5246" x2="364.743" y2="43.5619" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint32_linear_70_4" x1="28.2301" y1="96.6785" x2="28.2301" y2="30.5529" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint33_linear_70_4" x1="17.8947" y1="100.031" x2="52.0948" y2="66.0684" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint34_linear_70_4" x1="71.6614" y1="96.6785" x2="71.6614" y2="30.5529" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint35_linear_70_4" x1="62.2545" y1="100.063" x2="96.4547" y2="66.0998" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint36_linear_70_4" x1="117.145" y1="96.6785" x2="117.145" y2="30.5529" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint37_linear_70_4" x1="106.612" y1="100.04" x2="140.812" y2="66.0769" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint38_linear_70_4" x1="162.628" y1="96.6785" x2="162.628" y2="30.5529" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint39_linear_70_4" x1="152.04" y1="98.9672" x2="186.24" y2="65.0041" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint40_linear_70_4" x1="206.069" y1="96.6785" x2="206.069" y2="30.5529" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint41_linear_70_4" x1="196.397" y1="98.9342" x2="230.597" y2="64.9715" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint42_linear_70_4" x1="251.553" y1="96.6785" x2="251.553" y2="30.5529" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint43_linear_70_4" x1="241.826" y1="99.9988" x2="276.026" y2="66.0358" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint44_linear_70_4" x1="297.036" y1="96.6785" x2="297.036" y2="30.5529" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint45_linear_70_4" x1="286.186" y1="100.068" x2="320.386" y2="66.1058" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint46_linear_70_4" x1="340.478" y1="96.6785" x2="340.478" y2="30.5529" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint47_linear_70_4" x1="330.529" y1="100.131" x2="364.728" y2="66.1686" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint48_linear_70_4" x1="28.0501" y1="118.705" x2="28.0501" y2="52.5793" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint49_linear_70_4" x1="16.8324" y1="121.488" x2="51.0326" y2="87.5251" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint50_linear_70_4" x1="71.4814" y1="118.705" x2="71.4814" y2="52.5793" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint51_linear_70_4" x1="62.2678" y1="120.365" x2="96.4679" y2="86.4023" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint52_linear_70_4" x1="116.975" y1="118.705" x2="116.975" y2="52.5793" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint53_linear_70_4" x1="107.686" y1="121.411" x2="141.887" y2="87.4482" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint54_linear_70_4" x1="162.458" y1="118.705" x2="162.458" y2="52.5793" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint55_linear_70_4" x1="152.039" y1="121.436" x2="186.239" y2="87.4727" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint56_linear_70_4" x1="205.889" y1="118.705" x2="205.889" y2="52.5793" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint57_linear_70_4" x1="196.396" y1="121.403" x2="230.596" y2="87.44" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint58_linear_70_4" x1="251.373" y1="118.705" x2="251.373" y2="52.5793" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint59_linear_70_4" x1="240.763" y1="121.409" x2="274.963" y2="87.4457" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint60_linear_70_4" x1="296.866" y1="118.705" x2="296.866" y2="52.5793" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint61_linear_70_4" x1="286.182" y1="120.364" x2="320.382" y2="86.4012" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint62_linear_70_4" x1="340.298" y1="118.705" x2="340.298" y2="52.5793" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint63_linear_70_4" x1="330.535" y1="120.441" x2="364.735" y2="86.4782" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint64_linear_70_4" x1="28.0501" y1="184.412" x2="28.0501" y2="118.287" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint65_linear_70_4" x1="17.8984" y1="185.691" x2="52.0986" y2="151.728" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint66_linear_70_4" x1="71.4814" y1="184.412" x2="71.4814" y2="118.287" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint67_linear_70_4" x1="62.2553" y1="185.687" x2="96.4555" y2="151.724" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint68_linear_70_4" x1="116.975" y1="184.412" x2="116.975" y2="118.287" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint69_linear_70_4" x1="106.615" y1="185.69" x2="140.816" y2="151.727" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint70_linear_70_4" x1="162.458" y1="184.412" x2="162.458" y2="118.287" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint71_linear_70_4" x1="150.972" y1="185.681" x2="185.172" y2="151.718" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint72_linear_70_4" x1="205.889" y1="184.412" x2="205.889" y2="118.287" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint73_linear_70_4" x1="196.401" y1="186.703" x2="230.601" y2="152.74" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint74_linear_70_4" x1="251.373" y1="184.412" x2="251.373" y2="118.287" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint75_linear_70_4" x1="241.819" y1="185.659" x2="276.019" y2="151.695" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint76_linear_70_4" x1="296.866" y1="184.412" x2="296.866" y2="118.287" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint77_linear_70_4" x1="286.179" y1="185.685" x2="320.379" y2="151.723" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint78_linear_70_4" x1="340.298" y1="184.412" x2="340.298" y2="118.287" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint79_linear_70_4" x1="330.537" y1="185.681" x2="364.736" y2="151.718" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint80_linear_70_4" x1="28.2301" y1="206.177" x2="28.2301" y2="140.051" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint81_linear_70_4" x1="16.8333" y1="207.098" x2="51.0335" y2="173.135" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint82_linear_70_4" x1="71.6614" y1="206.177" x2="71.6614" y2="140.051" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint83_linear_70_4" x1="62.2616" y1="208.134" x2="96.4617" y2="174.171" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint84_linear_70_4" x1="117.145" y1="206.177" x2="117.145" y2="140.051" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint85_linear_70_4" x1="106.612" y1="208.19" x2="140.812" y2="174.227" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint86_linear_70_4" x1="162.628" y1="206.177" x2="162.628" y2="140.051" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint87_linear_70_4" x1="152.047" y1="207.038" x2="186.247" y2="173.075" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint88_linear_70_4" x1="206.069" y1="206.177" x2="206.069" y2="140.051" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint89_linear_70_4" x1="196.397" y1="207.069" x2="230.597" y2="173.107" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint90_linear_70_4" x1="251.553" y1="206.177" x2="251.553" y2="140.051" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint91_linear_70_4" x1="240.764" y1="207.037" x2="274.964" y2="173.074" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint92_linear_70_4" x1="297.036" y1="206.177" x2="297.036" y2="140.051" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint93_linear_70_4" x1="286.179" y1="208.154" x2="320.378" y2="174.191" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint94_linear_70_4" x1="340.478" y1="206.177" x2="340.478" y2="140.051" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
<linearGradient id="paint95_linear_70_4" x1="330.529" y1="208.252" x2="364.728" y2="174.29" gradientUnits="userSpaceOnUse">
<stop stop-color="white"/>
<stop offset="1" stop-color="white"/>
</linearGradient>
</defs>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 55 KiB

15
src/assets/svgs/Group 25400.svg Normal file
View file

@ -0,0 +1,15 @@
<svg width="72" height="73" viewBox="0 0 72 73" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M68.0988 21.8175C66.3592 18.0571 63.9478 14.5519 60.8384 11.4425C57.755 8.35921 54.2186 5.9165 50.4634 4.18213L68.0988 21.8175Z" fill="#131011"/>
<path d="M41.4375 1.37451L70.9323 30.8693C70.7031 29.4995 70.3698 28.1506 69.9792 26.8068L45.474 2.3016C44.125 1.91097 42.7812 1.59847 41.4375 1.37451Z" fill="#131011"/>
<path d="M34.6768 0.84367L71.4632 37.6301C71.4893 36.5624 71.432 35.4947 71.3799 34.4322L37.8747 0.927003C36.807 0.84367 35.7445 0.817629 34.6768 0.84367Z" fill="#131011"/>
<path d="M28.9893 1.375L70.932 43.3177C71.0986 42.4219 71.208 41.4948 71.2966 40.5729L31.734 0.984375C30.807 1.09896 29.8851 1.20833 28.9893 1.375Z" fill="#131011"/>
<path d="M23.9946 2.58301L69.6978 48.2809C69.9478 47.4684 70.1717 46.682 70.3957 45.8695L26.4061 1.91113C25.5936 2.10384 24.7811 2.3278 23.9946 2.58301Z" fill="#131011"/>
<path d="M19.5415 4.37451L67.9009 52.7391C68.2394 52.036 68.5467 51.3068 68.854 50.5828L21.6978 3.42139C20.9686 3.70264 20.2655 4.00993 19.5415 4.37451Z" fill="#131011"/>
<path d="M15.5571 6.59359L65.6873 56.7186C66.1092 56.078 66.4998 55.4321 66.8644 54.7863L17.4946 5.4165C16.8488 5.77588 16.203 6.17171 15.5571 6.59359Z" fill="#131011"/>
<path d="M11.9688 9.229L63.0521 60.3071C63.526 59.7498 63.9792 59.1613 64.4271 58.5728L13.7083 7.854C13.1198 8.30192 12.5573 8.74984 11.9688 9.229Z" fill="#131011"/>
<path d="M9.53092 11.4422C9.27572 11.6922 9.02572 11.9735 8.77051 12.2287L60.0518 63.5047C60.3018 63.2547 60.583 62.9995 60.8382 62.7495C61.0882 62.4943 61.3434 62.2131 61.5934 61.9631L10.3174 10.687C10.0622 10.937 9.78092 11.187 9.53092 11.4422Z" fill="#131011"/>
<path d="M5.94238 15.6195L56.6611 66.3382C57.2497 65.8903 57.8382 65.4424 58.3955 64.9632L7.31738 13.8799C6.83822 14.4684 6.3903 15.0309 5.94238 15.6195Z" fill="#131011"/>
<path d="M3.5 19.4062L52.875 68.776C53.5208 68.4115 54.1667 68.0208 54.8073 67.599L4.68229 17.4688C4.26042 18.1146 3.86458 18.7604 3.5 19.4062Z" fill="#131011"/>
<path d="M1.51025 23.6094L48.6665 70.7656C49.3957 70.4844 50.1248 70.151 50.828 69.8125L2.43734 21.4531C2.09879 22.1823 1.7915 22.8802 1.51025 23.6094Z" fill="#131011"/>
<path d="M0 28.3172L43.9844 72.3068C44.8021 72.1141 45.6146 71.8901 46.3958 71.6089L0.671875 25.9058C0.416666 26.6922 0.192709 27.5047 0 28.3172Z" fill="#131011"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.3 KiB

18
src/assets/svgs/Group 25401.svg Normal file
View file

@ -0,0 +1,18 @@
<svg width="58" height="80" viewBox="0 0 58 80" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M44.5678 67.9077C43.6511 66.5952 43.0418 65.0848 42.5938 63.564C42.3803 62.7984 42.2136 62.0171 42.1407 61.2411C42.0834 60.4702 42.0938 59.6577 42.4115 59.0484C42.7188 58.4286 43.4063 58.2307 44.1355 58.3036C44.8647 58.3869 45.6303 58.6057 46.2918 58.9494C46.9636 59.3036 47.573 59.7827 48.1668 60.3036C48.7553 60.8192 49.3438 61.3713 49.922 61.9182C50.4897 62.465 51.0365 63.0327 51.5053 63.6525C51.9636 64.2775 52.3543 64.9598 52.6876 65.6734C53.3386 67.1057 53.8907 68.6265 54.4793 70.1161C55.0678 71.6109 55.6199 73.1161 56.1668 74.6213L56.9584 76.8973C57.2136 77.6369 57.4949 78.4494 57.1928 79.0952L57.4688 79.0015C56.2605 78.3192 55.6511 76.9754 54.7397 75.8348C54.297 75.2515 53.7293 74.6994 53.0834 74.3192C52.4532 73.9234 51.8022 73.6265 51.1928 73.2775C49.974 72.5796 48.8334 71.7046 47.6824 70.84C46.5365 69.9807 45.4324 69.0536 44.5678 67.9077ZM44.5157 67.9494C45.3751 69.1004 46.4584 70.0692 47.5313 71.0275C48.6199 71.9598 49.6772 72.9442 50.9063 73.7515C51.5209 74.1525 52.172 74.4702 52.7553 74.84C53.3386 75.215 53.8334 75.6525 54.2709 76.2098C54.7084 76.7515 55.1043 77.3504 55.5782 77.9129C56.0418 78.4754 56.599 79.0171 57.2813 79.3556L57.4793 79.4546L57.5574 79.2567C57.7345 78.8296 57.7084 78.3661 57.6095 77.965C57.5105 77.5536 57.349 77.1786 57.2136 76.8036L56.3699 74.5484C55.8334 73.0379 55.297 71.5275 54.797 70.0015C54.2657 68.4859 53.8386 66.9442 53.2032 65.439C52.8855 64.689 52.5105 63.9494 52.0209 63.2775C51.5418 62.6057 50.9793 61.9963 50.4063 61.4234C49.2553 60.314 48.1459 59.1004 46.6251 58.3036C46.2553 58.1109 45.8438 57.9494 45.4428 57.8452C45.047 57.7202 44.6251 57.6317 44.1928 57.5952C43.7605 57.5744 43.2918 57.5744 42.849 57.7827C42.4063 57.9702 42.0418 58.3452 41.8543 58.7671C41.4688 59.6161 41.5365 60.4911 41.6668 61.2984C41.8022 62.1161 42.0418 62.8921 42.3178 63.6525C42.9011 65.1629 43.5834 66.6265 44.5157 67.9494Z" fill="#825026"/>
<path d="M40.9843 59.173C41.3437 59.9438 41.5728 60.7616 41.7187 61.5897C41.8801 62.4178 41.9687 63.2616 41.9999 64.0949C42.1301 65.7772 41.7708 67.4334 41.6405 69.1574C41.578 70.0116 41.5312 70.8813 41.6145 71.7511C41.6822 72.6209 41.8749 73.4751 42.0989 74.298C42.5364 75.9438 43.0676 77.5949 42.953 79.2876L43.1614 79.2043C41.5676 77.6991 40.2187 75.9543 39.0312 74.1313C38.4478 73.2147 37.901 72.272 37.4218 71.298C36.9426 70.3345 36.5728 69.3241 36.4843 68.298C36.401 67.272 36.6041 66.2095 36.802 65.1313C36.9062 64.5845 37.0051 64.0428 37.052 63.4647C37.1041 62.8813 37.0624 62.3084 36.9791 61.7511C36.6249 59.5168 35.7499 57.4595 34.7708 55.4907L34.7083 55.5168C35.4635 57.5741 36.1562 59.6886 36.401 61.8241C36.4583 62.3553 36.4739 62.8866 36.4062 63.397C36.3437 63.9178 36.2135 64.4543 36.1041 64.9907C35.8853 66.0636 35.6353 67.1886 35.7395 68.3605C35.8333 69.5428 36.302 70.6209 36.8124 71.6105C37.3333 72.6001 37.901 73.5532 38.5468 74.4595C39.8176 76.2876 41.3593 77.9074 42.9999 79.3866L43.1926 79.5636L43.203 79.3032C43.2603 77.5584 42.7499 75.8866 42.427 74.2199C42.2655 73.3866 42.1405 72.5584 42.1301 71.7251C42.1197 70.8918 42.1666 70.048 42.2499 69.2095C42.3489 68.3657 42.4322 67.522 42.5051 66.6626C42.5833 65.8084 42.5885 64.923 42.5051 64.0636C42.3176 62.3553 41.9739 60.6053 41.0468 59.1366L40.9843 59.173Z" fill="#825026"/>
<path d="M35.9945 56.3501C36.4945 55.4022 37.109 54.522 37.8851 53.8189C38.6559 53.1157 39.557 52.5584 40.5049 52.1366C41.4684 51.7303 42.4893 51.4803 43.5257 51.3397C44.557 51.1991 45.6143 51.1626 46.6663 51.2876C48.7705 51.522 50.7913 52.4022 52.5413 53.6157C54.2913 54.8397 55.807 56.3553 57.2288 57.9386L57.7132 57.5324C57.2393 56.897 56.5361 56.4907 55.8278 56.2564C55.1195 56.0116 54.3955 55.9074 53.6872 55.8293C52.2757 55.6782 50.8486 55.6001 49.4163 55.6939C47.9893 55.798 46.5466 56.0793 45.2288 56.6834C43.9216 57.2824 42.734 58.2043 41.984 59.423L42.0413 59.4595C42.932 58.3761 44.1299 57.6053 45.4111 57.1261C46.7028 56.647 48.0726 56.4178 49.4528 56.3866C50.833 56.3345 52.2184 56.4386 53.6143 56.5689C54.3018 56.6314 54.984 56.7147 55.6143 56.9126C56.2445 57.1053 56.8226 57.423 57.2132 57.9178L57.6924 57.5116C56.1976 55.9439 54.5205 54.5376 52.6872 53.397C50.859 52.2407 48.8747 51.3293 46.7288 50.8709C44.583 50.4334 42.2757 50.6678 40.2757 51.6157C38.2497 52.5116 36.6038 54.2616 35.9268 56.3241L35.9945 56.3501Z" fill="#825026"/>
<path d="M31.6092 54.116C31.3072 55.0379 31.2603 56.0327 31.3332 57.0015C31.4113 57.9702 31.5884 58.9233 31.7603 59.866C32.1353 61.7358 32.3332 63.6213 31.6978 65.3869C31.4061 66.2775 31.052 67.1785 30.7655 68.1056C30.4738 69.0327 30.2551 69.9702 30.0572 70.9181C29.6822 72.8088 29.479 74.7254 29.453 76.6629L29.7342 76.5483C29.0467 75.7931 28.7134 74.7931 28.5936 73.7879C28.4634 72.7775 28.5572 71.7515 28.6665 70.7098C28.7811 69.6785 28.9061 68.6056 28.8957 67.5327C28.8957 66.4598 28.7915 65.3973 28.6561 64.3504C28.3801 62.2515 27.9374 60.1994 27.7811 58.1317C27.6249 56.0692 27.7134 53.9494 28.479 51.9858L28.4165 51.9546C27.4322 53.8452 27.1613 56.0431 27.2238 58.1577C27.2863 60.2879 27.6509 62.3765 27.9165 64.4494C28.0467 65.4806 28.1457 66.5119 28.1822 67.5431C28.2134 68.5744 28.1249 69.6004 28.0311 70.6525C27.9478 71.7046 27.8957 72.7931 28.0884 73.866C28.2811 74.9285 28.7134 75.991 29.4947 76.7671L29.7915 77.064L29.7759 76.6525C29.6926 74.7515 29.8749 72.8296 30.3176 70.9754C30.5311 70.0431 30.8436 69.1369 31.177 68.2515C31.4999 67.3556 31.9478 66.5119 32.2603 65.5796C32.5936 64.6577 32.7863 63.6369 32.7134 62.6473C32.6717 61.6577 32.4842 60.6994 32.2811 59.7567C31.8488 57.8921 31.328 56.0327 31.677 54.1317L31.6092 54.116Z" fill="#825026"/>
<path d="M21.052 43.3503C23.4791 43.8919 25.8124 44.7513 27.9843 45.9232C28.5937 46.2409 29.2864 46.3294 29.9374 46.293C30.5937 46.2565 31.2239 46.1211 31.8333 45.9544C33.0468 45.6159 34.2291 45.1992 35.3905 44.7409C37.703 43.8034 39.9426 42.7044 42.2812 41.8659C43.453 41.4492 44.6405 41.0794 45.8489 40.8242C47.0624 40.5742 48.2916 40.4128 49.5155 40.3815L49.5051 39.9284C48.3072 39.9128 47.1405 40.3399 46.151 40.9649C45.1458 41.5846 44.2968 42.4128 43.5364 43.2774C42.0155 45.0065 40.7187 46.8607 38.8749 48.0951C37.0364 49.319 34.8958 50.0951 32.6718 50.319C30.453 50.5326 28.1666 50.2201 26.078 49.3086L26.052 49.3711C28.0572 50.4753 30.3958 50.9649 32.7135 50.8555C35.026 50.6992 37.3333 50.0013 39.276 48.6888C40.2447 48.0326 41.1249 47.2305 41.8853 46.3659C42.6458 45.4909 43.3176 44.5742 44.0468 43.7201C44.7708 42.8659 45.5624 42.0846 46.4739 41.4649C47.3801 40.8503 48.4218 40.4336 49.5103 40.3815L49.4947 39.9284C46.9791 40.1367 44.552 40.8242 42.2083 41.6576C39.8541 42.4805 37.5416 43.4128 35.1926 44.2201C34.026 44.6263 32.8541 45.0274 31.6666 45.3503C30.5103 45.6888 29.2603 45.9388 28.2291 45.4388C25.9843 44.3138 23.5416 43.5638 21.0624 43.2826L21.052 43.3503Z" fill="#825026"/>
<path d="M25.3438 49.3553C25.6407 51.2407 25.2917 53.1782 24.3751 54.7824C23.922 55.5897 23.3178 56.3032 22.5938 56.8657C21.8542 57.4126 21.0417 57.9543 20.2865 58.5688C18.7813 59.8032 17.5365 61.2876 16.323 62.772C15.1355 64.2824 13.9792 65.8084 12.823 67.3293L13.1511 67.4647C13.8126 63.6105 14.9897 59.8605 16.6824 56.3605C17.0938 55.4751 17.5417 54.6105 18.0157 53.7616C18.4949 52.9126 18.9792 52.0688 19.5417 51.2824C20.6407 49.7199 22.0313 48.2459 23.9324 47.6678L23.9167 47.6001C22.9428 47.7928 22.0053 48.2199 21.2136 48.8293C20.4115 49.4334 19.7084 50.1626 19.099 50.9543C17.8855 52.5428 16.8855 54.2511 16.0053 56.0324C15.1355 57.8188 14.4532 59.6886 13.9011 61.5897C13.3542 63.4959 12.9897 65.4491 12.7865 67.4126L12.7136 68.147L13.1199 67.5428C14.1876 65.9595 15.2657 64.3761 16.5157 62.9334C17.7449 61.4751 19.1459 60.1626 20.6459 59.0272C21.3803 58.4334 22.2084 57.9751 22.974 57.3397C23.7449 56.7095 24.3803 55.9178 24.8438 55.0428C25.7449 53.2772 25.9636 51.1938 25.4115 49.3397L25.3438 49.3553Z" fill="#825026"/>
<path d="M20.5153 31.819C20.4163 31.7356 20.4528 31.6211 20.5413 31.5429C20.6299 31.4596 20.7445 31.4023 20.859 31.3659C21.0726 31.3034 21.3643 31.3294 21.6195 31.3086L23.2028 31.2565C24.2549 31.22 25.307 31.2304 26.3486 31.2721C28.432 31.3659 30.5049 31.7304 32.3695 32.6159C34.2393 33.4856 35.9007 34.8294 37.4945 36.2096C39.0986 37.569 40.7028 39.0117 42.6872 39.8867L42.6455 39.5481C40.9268 40.6888 38.9268 41.3711 36.8955 41.5273C34.8538 41.6992 32.8278 41.2148 30.8278 40.6523C28.8174 40.0846 26.8122 39.5169 24.9424 38.6315C23.0778 37.7565 21.3226 36.5481 20.1455 34.8034L20.083 34.8398C21.0778 36.72 22.8226 38.1315 24.6976 39.1159C26.583 40.1106 28.609 40.7825 30.6247 41.3711C32.6351 41.9596 34.7861 42.4127 36.9528 42.1836C39.0986 41.9804 41.1716 41.1523 42.8695 39.8606L43.1559 39.6471L42.833 39.5273C40.8799 38.7929 39.2028 37.4388 37.6455 36.0273C36.0674 34.6367 34.5622 33.1054 32.6247 32.095C30.6872 31.0846 28.4893 30.7721 26.3643 30.7356C25.2966 30.7148 24.234 30.7981 23.182 30.8919C22.6507 30.9388 22.1247 31.0013 21.5986 31.069C21.3382 31.1211 21.0882 31.1054 20.7966 31.2096C20.6716 31.2669 20.5466 31.3502 20.4528 31.4596C20.4059 31.5169 20.3643 31.5846 20.3643 31.6679C20.3538 31.7565 20.4111 31.8294 20.4684 31.8711L20.5153 31.819Z" fill="#825026"/>
<path d="M20.7655 43.8815C20.1457 45.8242 19.578 47.7826 18.7447 49.6211C18.3437 50.543 17.8749 51.4388 17.3072 52.2565C16.7343 53.0742 16.0989 53.8294 15.3645 54.5221C14.6353 55.2148 13.8593 55.918 13.2239 56.7513C12.578 57.5742 12.0885 58.4857 11.6353 59.4023C10.7239 61.2357 9.98429 63.1523 8.84887 64.8346L9.11971 64.9076C9.03637 62.5742 8.97908 60.2357 9.29679 57.9596C9.44783 56.8242 9.71346 55.7044 10.1197 54.6471C10.526 53.5846 11.0885 52.5898 11.7082 51.6211C12.3489 50.668 13.0155 49.7201 13.7447 48.8086L15.8749 46.0378C17.3489 44.2669 18.4426 41.9909 20.7603 41.2773L20.7395 41.2148C20.1666 41.3607 19.6145 41.5742 19.0989 41.8815C18.5832 42.1888 18.1249 42.5846 17.7239 43.0169C16.927 43.8971 16.1874 44.7773 15.4322 45.6836C13.953 47.5013 12.3853 49.2253 11.0832 51.2148C9.74471 53.1732 8.90095 55.5221 8.67179 57.8815C8.40616 60.2461 8.63012 62.6003 8.82283 64.9232L8.85929 65.3763L9.09366 64.9961C10.1718 63.2357 10.9062 61.3138 11.8749 59.5326C12.3697 58.6471 12.9166 57.793 13.578 57.043C14.2291 56.2826 15.0207 55.6628 15.7707 54.9596C17.3489 53.5846 18.4635 51.7305 19.2291 49.8294C19.9843 47.9023 20.4582 45.9023 20.8332 43.8971L20.7655 43.8815Z" fill="#825026"/>
<path d="M20.1771 36.6992C19.8802 37.6367 19.2604 38.4076 18.5677 39.0742C17.8698 39.7409 17.1146 40.3711 16.2969 40.8607C15.4844 41.3711 14.6042 41.6784 13.6458 41.7878C13.1719 41.8555 12.6771 41.9023 12.1823 41.9961C11.6823 42.0951 11.1979 42.2253 10.7188 42.3763C9.76562 42.6784 8.85938 43.1055 7.97396 43.543L5.34375 44.8763C4.46354 45.3138 3.58854 45.7721 2.73437 46.2565C1.86979 46.7305 1.02604 47.2461 0.213543 47.8034L0.427083 47.9701C1.30729 45.8555 2.41146 43.8346 3.72396 41.9805C5.03125 40.1211 6.61458 38.4701 8.44792 37.1471C10.2812 35.8242 12.3177 34.7461 14.3281 33.6315C16.3438 32.5169 18.3385 31.3711 20.3333 30.2148L20.3021 30.1523C18.2031 31.1003 16.125 32.1003 14.0573 33.1315C12 34.1576 9.91146 35.1628 8.00521 36.543C6.09375 37.9128 4.51042 39.694 3.21354 41.6263C1.91667 43.569 0.953125 45.6992 0.161458 47.8711L0 48.3138L0.375 48.0326C1.15625 47.4492 1.98958 46.9336 2.83854 46.4388C3.69271 45.9701 4.57813 45.543 5.46875 45.1315C7.26563 44.3607 9.06771 43.5326 10.901 42.9544C11.8229 42.6628 12.75 42.5326 13.7396 42.3763C14.7344 42.2409 15.7448 41.8711 16.5781 41.3034C17.4219 40.7305 18.1458 40.0482 18.8229 39.319C19.4792 38.5742 20.0677 37.7044 20.2448 36.7148L20.1771 36.6992Z" fill="#825026"/>
<path d="M19.224 13.3244C18.9323 15.814 18.3229 18.2515 17.3386 20.5275C16.8698 21.6785 16.2917 22.7775 15.6406 23.8296C14.9844 24.8817 14.2865 25.9077 13.4844 26.8504C12.6875 27.7931 11.8542 28.7254 10.9167 29.5379C9.99482 30.3713 8.98961 31.1213 7.98961 31.8869C6.99482 32.6577 6.04169 33.4858 5.15106 34.3765C4.26565 35.2723 3.44273 36.2306 2.68752 37.2463L3.00002 37.314C2.64586 34.715 3.08857 32.0796 3.94273 29.616C4.78648 27.1369 6.05732 24.8192 7.39586 22.5588C8.76565 20.3192 10.2917 18.1681 12.0209 16.1785C13.7552 14.2046 15.6771 12.3817 17.8021 10.7931L17.7604 10.7358C15.5052 12.1421 13.4427 13.866 11.6094 15.8088C9.78127 17.7567 8.16148 19.8973 6.77086 22.1785C5.37502 24.4494 4.15106 26.8504 3.32815 29.4129C2.49481 31.9598 2.15627 34.7254 2.65627 37.3765L2.73961 37.7931L2.97398 37.4442C4.35419 35.3765 6.11982 33.5483 8.14586 32.0952C9.14586 31.3348 10.2031 30.6629 11.1875 29.8556C12.1771 29.0692 13.099 28.189 13.9323 27.2254C15.6146 25.3192 16.9011 23.0848 17.8334 20.7306C18.75 18.3608 19.2604 15.8452 19.2917 13.3296L19.224 13.3244Z" fill="#825026"/>
<path d="M0.3125 48.0326C2.57813 44.6785 5.89062 42.3243 9.30208 40.2618C12.6979 38.1316 16.3229 36.2931 19.7344 34.1941C20.1615 33.9701 20.6198 33.8139 21.0781 33.8191C21.526 33.8191 21.9792 33.9753 22.4219 34.1733C23.3021 34.6056 24.224 35.0691 25.1458 35.4701C27 36.2826 28.8958 37.017 30.8385 37.5951C32.776 38.1837 34.7604 38.6264 36.75 38.9701C37.75 39.1368 38.7552 39.2618 39.7604 39.366C40.2656 39.4285 40.7604 39.4389 41.2344 39.5639C41.7031 39.6785 42.1719 39.9128 42.3802 40.3712L42.4427 40.3451C42.276 39.8399 41.7812 39.517 41.3021 39.3503C40.8125 39.1733 40.2969 39.1056 39.8073 39.0118C38.8125 38.8503 37.8333 38.6368 36.8542 38.4285C34.8958 38.0014 32.9635 37.4806 31.0573 36.8816C29.1458 36.2931 27.2604 35.6212 25.4062 34.8608L22.6354 33.6628C22.1562 33.4649 21.6198 33.3087 21.0625 33.3399C20.5 33.3712 19.9948 33.5899 19.5469 33.8556C17.8594 35.0014 16.1979 36.0899 14.3958 37.0014C12.6198 37.9597 10.7812 38.7774 9.01042 39.7618C7.23958 40.7514 5.55729 41.9076 4.02604 43.2514C2.51562 44.6056 1.16667 46.1837 0.25 47.991L0.3125 48.0326Z" fill="#825026"/>
<path d="M9.10408 65.4021C9.83846 63.3969 10.3541 61.3188 10.8801 59.2875C11.1353 58.2719 11.427 57.2511 11.9322 56.324C12.4322 55.3917 13.0728 54.5427 13.7239 53.699C15.0416 52.0219 16.2864 50.2979 17.4895 48.5479C18.6666 46.7771 19.8072 44.9802 20.828 43.1L20.7708 43.0583C19.3853 44.6833 18.1093 46.3917 16.8749 48.1208C15.6718 49.8761 14.5051 51.6521 13.4114 53.4802C12.8541 54.3917 12.276 55.2875 11.7291 56.2094C11.1822 57.1261 10.6822 58.1 10.3228 59.1156C9.96867 60.1365 9.75513 61.1886 9.54679 62.225C9.34367 63.2771 9.15617 64.3188 9.03638 65.3865L9.10408 65.4021Z" fill="#825026"/>
<path d="M55.9792 76.8921C55.0105 75.0796 53.9011 73.34 52.7397 71.6421C51.573 69.9494 50.3595 68.2931 49.2292 66.59C48.6459 65.7358 48.1563 64.8765 47.5365 64.0015C47.224 63.5796 46.8959 63.1838 46.5834 62.7827C46.4167 62.5848 46.2917 62.3921 46.1042 62.1786C45.9167 61.9546 45.7084 61.7879 45.5105 61.6108C43.8595 60.3036 42.0678 59.2931 40.3022 58.2411C38.5157 57.2202 36.7084 56.2411 34.9167 55.2463C33.1199 54.2619 31.3178 53.2827 29.5938 52.189C27.8699 51.0952 26.2084 49.8817 24.7865 48.4181C24.0834 47.6838 23.4376 46.8973 22.8699 46.0483C22.3178 45.1942 21.8542 44.2827 21.474 43.3348C20.7605 41.4233 20.4115 39.3921 20.3334 37.3504C20.2657 35.3088 20.4324 33.2671 20.7136 31.2358C21.2657 27.189 22.2813 23.189 22.6199 19.0588C22.7657 16.9963 22.7917 14.9025 22.4428 12.84C22.1199 10.7775 21.448 8.74626 20.3855 6.93376C19.3282 5.12126 17.9897 3.51189 16.5782 2.00668C15.8803 1.28272 15.1459 0.402511 13.9792 0.079594C13.4011 -0.0922807 12.7345 0.022303 12.2292 0.345219C11.9688 0.506678 11.7345 0.725428 11.573 1.00668C11.4063 1.28793 11.323 1.64209 11.3855 1.98064L11.4011 2.10564L11.4897 2.17855C14.5157 4.87126 17.0886 8.10564 18.7657 11.8088C20.4324 15.5067 21.1772 19.6004 21.1459 23.6786L21.2136 23.6838C21.3126 21.6369 21.2188 19.5744 20.8959 17.5483C20.5574 15.5171 19.9792 13.5223 19.1667 11.6317C17.547 7.82439 14.9845 4.47022 11.9636 1.66293L12.0782 1.87126C12.0209 1.52751 12.2397 1.16293 12.599 0.944177C12.9636 0.720219 13.3907 0.647302 13.8022 0.767094C14.6667 0.996259 15.3542 1.76189 16.0522 2.50147C17.4376 3.99105 18.7345 5.56397 19.7397 7.30876C20.7761 9.03272 21.4324 10.9598 21.7657 12.9494C22.1147 14.939 22.1147 16.9806 21.9897 19.0119C21.7397 23.0796 20.8074 27.0952 20.3334 31.189C20.0886 33.2358 19.9688 35.3036 20.0782 37.3661C20.172 39.4181 20.5365 41.4806 21.2813 43.4129C21.6563 44.3765 22.1147 45.3036 22.6667 46.1786C23.2345 47.0483 23.8803 47.8556 24.5886 48.6108C26.0001 50.1213 27.6459 51.3973 29.3595 52.5483C32.7917 54.84 36.448 56.7202 39.9897 58.7879C41.7501 59.814 43.5626 60.8192 45.1459 62.0483C45.3334 62.2098 45.5261 62.3661 45.6667 62.5379C45.823 62.7046 45.9845 62.939 46.1511 63.1317C46.474 63.5327 46.8022 63.9233 47.1042 64.3244C47.4063 64.7202 47.672 65.1525 47.9584 65.5848L48.8334 66.8608C51.1928 70.2358 53.8282 73.3869 55.922 76.9233L55.9792 76.8921Z" fill="#825026"/>
<path d="M43.0624 79.2774C41.2863 76.392 40.4738 73.1108 39.9582 69.8139C39.6718 68.1629 39.4426 66.4858 39.2968 64.8087L38.9426 59.7462C38.8853 58.9024 38.703 58.0431 39.1093 57.4285C39.4999 56.7983 40.2447 56.4076 40.9686 55.9806C42.4166 55.1368 43.8905 54.3347 45.4582 53.9233C47.0103 53.5118 48.7082 53.5795 50.3176 53.9076C51.9374 54.2358 53.4999 54.8712 54.9999 55.6472L55.0364 55.5847C53.6509 54.6108 52.1093 53.8243 50.4426 53.3764C48.7811 52.9441 47.0051 52.7722 45.2759 53.1993C43.5624 53.6316 42.0624 54.5326 40.6249 55.4129C39.927 55.8556 39.1093 56.3035 38.6249 57.1524C38.3853 57.5743 38.328 58.0847 38.3749 58.5222C38.4166 58.9701 38.5051 59.3764 38.5624 59.7931C38.8228 61.4545 38.9738 63.1368 39.0728 64.8243C39.1666 66.5066 39.1926 68.1993 39.3801 69.892C39.5624 71.5847 39.9634 73.2566 40.5259 74.866C41.1041 76.4754 41.9061 78.017 42.9999 79.3191L43.0624 79.2774Z" fill="#825026"/>
<path d="M29.2187 53.2671C29.1353 55.1942 29.2239 57.1004 29.4374 58.9963C29.5676 59.9442 29.7499 60.8921 29.8489 61.8348C29.953 62.7879 29.9687 63.741 29.8905 64.6838C29.8072 65.6317 29.6509 66.5431 29.427 67.4598C29.2134 68.3765 28.9322 69.3035 28.7916 70.2723C28.5155 72.1994 28.6249 74.1942 29.1926 76.0327L29.2603 76.0223C29.1353 74.1108 29.1978 72.2306 29.5259 70.3869C29.8332 68.5744 30.4322 66.6473 30.2707 64.6942C30.2291 63.7254 30.1249 62.7775 30.078 61.8192C30.0259 60.866 30.0468 59.9077 30.0207 58.9494C29.9166 57.0431 29.6874 55.1473 29.2864 53.2671H29.2187Z" fill="#825026"/>
<path d="M13.599 67.2983C13.8907 65.3712 14.8074 63.642 15.9376 62.1056C17.0574 60.5431 18.4272 59.1733 19.672 57.6681C20.9115 56.1576 22.0417 54.5118 22.7605 52.6733C23.1042 51.7618 23.3803 50.8243 23.7813 49.9493C24.1615 49.0795 24.7292 48.241 25.5522 47.8608C26.3959 47.4649 27.3282 47.6628 28.198 48.017C29.0782 48.3608 29.9428 48.866 30.9792 49.0587C31.4949 49.1576 32.0574 49.1472 32.5678 49.0118C33.0834 48.8868 33.5522 48.6785 34.0001 48.4493C34.8803 47.991 35.6928 47.4858 36.5417 47.0014C39.8907 45.017 43.2136 42.9858 46.4584 40.8451L46.422 40.7878C42.9428 42.5535 39.547 44.4337 36.172 46.3503C35.3334 46.8295 34.4897 47.3451 33.6615 47.8035C32.8282 48.2566 31.974 48.5743 31.0938 48.4076C30.2032 48.2618 29.3282 47.8243 28.3907 47.4962C27.922 47.3295 27.422 47.1941 26.9011 47.1785C26.3803 47.1524 25.8438 47.2722 25.3855 47.517C24.4376 48.017 23.9428 48.9701 23.5522 49.8503C23.172 50.7566 22.9167 51.6993 22.5365 52.5847C21.8074 54.3816 20.5209 55.8608 19.2345 57.2878C17.948 58.7253 16.6042 60.1576 15.5001 61.7983C14.4063 63.4181 13.5626 65.3191 13.5261 67.2878L13.599 67.2983Z" fill="#825026"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 19 KiB

1045
src/assets/svgs/Group 25402.svg Normal file
View file

File diff suppressed because it is too large Load diff
Side by side

After

Width:  |  Height:  |  Size: 238 KiB

207
src/components/AspectCanvas.jsx Normal file
View file

@ -0,0 +1,207 @@
import { useState, useEffect, useContext } from 'react'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { AspectRatio } from "@/components/ui/aspect-ratio"
import CanvasContext from './Context/canvasContext/CanvasContext'
import OpenContext from './Context/openContext/OpenContext';
import { Settings, Download, Share2, Settings2 } from "lucide-react";
import { Card, CardContent } from './ui/card';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './ui/tooltip';
import { Button } from './ui/button';
import { Separator } from './ui/separator';
const aspectRatios = [
{ value: "1:1", label: "Square (1:1)" },
{ value: "4:3", label: "Standard (4:3)" },
{ value: "3:2", label: "Classic (3:2)" },
{ value: "16:9", label: "Widescreen (16:9)" },
{ value: "9:16", label: "Portrait (9:16)" },
{ value: "21:9", label: "Ultrawide (21:9)" },
{ value: "32:9", label: "Super Ultrawide (32:9)" },
{ value: "1.85:1", label: "Cinema Standard (1.85:1)" },
{ value: "2.39:1", label: "Anamorphic Widescreen (2.39:1)" },
{ value: "2.76:1", label: "Ultra Panavision 70 (2.76:1)" },
{ value: "5:4", label: "Large Format (5:4)" },
{ value: "7:5", label: "Artistic Format (7:5)" },
{ value: "11:8.5", label: "Letter Size (11:8.5)" },
{ value: "9:21", label: "Tall Video (9:21)" },
{ value: "3:4", label: "Portrait (3:4)" },
{ value: "1.91:1", label: "Facebook Ads (1.91:1)" }
];
export function AspectCanvas() {
const { setLeftPanelOpen, setRightPanelOpen, setOpenPanel, setCaptureOpen, setOpenSetting, openObjectPanel, setOpenObjectPanel, rightPanelOpen } = useContext(OpenContext);
const [selectedRatio, setSelectedRatio] = useState("4:3");
const { canvasRef, canvas, setCanvas, fabricCanvasRef } = useContext(CanvasContext);
useEffect(() => {
import('fabric').then((fabricModule) => {
window.fabric = fabricModule.fabric;
});
}, []);
const getRatioValue = (ratio) => {
const [width, height] = ratio.split(':').map(Number)
return width / height
}
useEffect(() => {
const updateCanvasSize = () => {
if (canvasRef.current && canvas) {
canvas.setWidth(canvasRef?.current?.offsetWidth);
canvas.setHeight(canvasRef?.current?.offsetHeight);
canvas.backgroundImage = null;
canvas.overlayImage = null;
canvas.renderAll();
}
if (document.getElementById("root").offsetWidth <= 640) {
setLeftPanelOpen(false);
setRightPanelOpen(false);
if (rightPanelOpen === true) {
setOpenObjectPanel(true);
}
}
if (document.getElementById("root").offsetWidth > 640) {
// setLeftPanelOpen(true);
if (openObjectPanel === true) {
setRightPanelOpen(true);
}
}
if (document.getElementById("root").offsetWidth > 640) {
setOpenObjectPanel(false);
}
}
updateCanvasSize()
window.addEventListener('resize', updateCanvasSize)
return () => window.removeEventListener('resize', updateCanvasSize)
}, [selectedRatio, canvasRef, canvas, openObjectPanel, setLeftPanelOpen, setOpenObjectPanel, setRightPanelOpen, rightPanelOpen])
useEffect(() => {
if (window.fabric) {
if (fabricCanvasRef?.current) {
fabricCanvasRef?.current.dispose()
}
// Set styles directly on the canvas element
const canvasElement = document.getElementById('fabric-canvas')
if (canvasElement) {
canvasElement.classList.add('fabric-canvas-container') // Add the CSS class
}
fabricCanvasRef.current = new window.fabric.Canvas('fabric-canvas', {
width: canvasRef?.current?.offsetWidth,
height: canvasRef?.current?.offsetWidth,
backgroundColor: "#ffffff",
})
setCanvas(fabricCanvasRef?.current);
}
}, [])
const handleRatioChange = (newRatio) => {
setSelectedRatio(newRatio)
}
return (
<Card className="w-full max-w-3xl mx-auto p-2 my-4 overflow-y-scroll scrollbar-hide">
<CardContent className="p-0 space-y-4">
<div className='flex w-full flex-wrap items-center justify-between mx-auto gap-2'>
<div className='flex gap-2'>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<Button variant="outline" size="icon" onClick={() => setOpenPanel(true)}>
<Settings2 className="h-5 w-5" />
</Button>
</TooltipTrigger>
<TooltipContent>
<p>Open Panel</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
<div className="flex justify-between gap-2 items-center">
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<Button variant="outline" size="icon" onClick={() => setOpenSetting(true)}>
<Settings className="h-4 w-4" />
</Button>
</TooltipTrigger>
<TooltipContent>
<p>Open Settings</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<Button variant="outline" size="icon" onClick={() => { setCaptureOpen(true) }}>
<Download className="h-4 w-4" />
</Button>
</TooltipTrigger>
<TooltipContent>
<p>Download</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<Button variant="outline" size="icon">
<Share2 className="h-4 w-4" />
</Button>
</TooltipTrigger>
<TooltipContent>
<p>Share (Coming soon)</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
</div>
<div>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<div className="w-full">
<Select onValueChange={handleRatioChange} value={selectedRatio}>
<SelectTrigger className="w-full">
<SelectValue placeholder="Select aspect ratio" />
</SelectTrigger>
<SelectContent>
{aspectRatios.map((ratio) => (
<SelectItem key={ratio.value} value={ratio.value}>
{ratio.label}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
</TooltipTrigger>
<TooltipContent side="bottom" className="max-w-xs">
<p>After changing the resolution, the canvas background image will reset.</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
</div>
<Separator />
<AspectRatio ratio={getRatioValue(selectedRatio)} className="overflow-y-scroll shadow-red-200 overflow-x-hidden shadow-lg rounded-lg border-2 border-primary/10 transition-all duration-300 ease-in-out hover:shadow-xl scrollbar-hide">
<div ref={canvasRef} className="w-full h-full flex items-center justify-center bg-white rounded-md shadow-lg" id='canvas-ref'>
<canvas id="fabric-canvas" />
</div>
</AspectRatio>
</CardContent>
</Card>
)
}

91
src/components/Canvas.jsx Normal file
View file

@ -0,0 +1,91 @@
import { useEffect, useCallback, useContext } from 'react';
import CanvasContext from './Context/canvasContext/CanvasContext';
import ActiveObjectContext from './Context/activeObject/ObjectContext';
import { Rnd } from 'react-rnd';
import OpenContext from './Context/openContext/OpenContext';
import CanvasSetting from './CanvasSetting';
import { EditPanel } from './EditPanel';
import ObjectPanel from './ObjectPanel';
import { AspectCanvas } from './AspectCanvas';
const Canvas = () => {
const { canvas } = useContext(CanvasContext);
const { openSetting, openObjectPanel, openPanel } = useContext(OpenContext);
const { setActiveObject } = useContext(ActiveObjectContext);
useEffect(() => {
if (canvas) {
canvas.on('mouse:down', () => {
const activeObject = canvas?.getActiveObject();
setActiveObject(activeObject);
});
}
}, [canvas]);
const removeSelected = useCallback(() => {
const activeObject = canvas?.getActiveObject();
const allObjects = canvas?.getObjects();
const textObjects = allObjects.filter((obj) => obj.type === 'textbox' || obj.type === 'text' || obj.type === 'i-text');
if (activeObject) {
canvas.remove(activeObject);
setActiveObject(null);
}
if (activeObject && textObjects?.length === 1) {
canvas.remove(activeObject);
setActiveObject(null);
}
if (activeObject.length > 1) {
canvas.remove(...activeObject);
setActiveObject(null);
}
}, [canvas, setActiveObject]);
useEffect(() => {
const handleDeleteKey = (event) => {
if (event.key === 'Delete') {
removeSelected();
}
};
window.addEventListener('keydown', handleDeleteKey);
return () => {
window.removeEventListener('keydown', handleDeleteKey);
};
}, [removeSelected]);
return (
<div className='flex flex-col items-center relative w-full h-full overflow-hidden'>
{openSetting && (
<Rnd
className='z-[1000]'
default={{
x: 0,
y: 20,
}}
minWidth={220}
maxWidth={250}
minHeight={150}
bounds='parent'
>
<CanvasSetting />
</Rnd>
)}
{
openPanel &&
<EditPanel />
}
{openObjectPanel && <ObjectPanel />}
{/* Main canvas */}
<AspectCanvas />
</div>
);
};
export default Canvas;

139
src/components/CanvasCapture.jsx Normal file
View file

@ -0,0 +1,139 @@
import { useContext, useState } from 'react';
import CanvasContext from './Context/canvasContext/CanvasContext';
import OpenContext from './Context/openContext/OpenContext';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Label } from '@/components/ui/label';
import { Button } from '@/components/ui/button';
import { Card, CardHeader, CardTitle } from './ui/card';
import { Rnd } from 'react-rnd';
import { X } from 'lucide-react';
import { Separator } from './ui/separator';
const resolutions = [
{ value: '720p', label: 'HD (1280x720)', width: 1280, height: 720 },
{ value: '1080p', label: 'Full HD (1920x1080)', width: 1920, height: 1080 },
{ value: '1440p', label: 'QHD (2560x1440)', width: 2560, height: 1440 },
{ value: '4k', label: '4K (3840x2160)', width: 3840, height: 2160 },
{ value: 'story', label: 'Story (1080x1920)', width: 1080, height: 1920 }, // Added for Stories
{ value: '5k', label: '5K (5120x2880)', width: 5120, height: 2880 },
{ value: 'ultrawide', label: 'Ultrawide (3440x1440)', width: 3440, height: 1440 },
{ value: 'cinematic', label: 'Cinematic (2560x1080)', width: 2560, height: 1080 },
];
const imageTypes = [
{ value: 'png', label: 'PNG' },
{ value: 'jpeg', label: 'JPEG' },
{ value: 'webp', label: 'WebP' },
];
const CanvasCapture = () => {
const [resolution, setResolution] = useState(resolutions[0].value);
const [imageType, setImageType] = useState(imageTypes[0].value);
const { canvas } = useContext(CanvasContext);
const { captureOpen, setCaptureOpen } = useContext(OpenContext);
const captureImage = async () => {
if (!canvas) return;
const selectedResolution = resolutions.find(res => res.value === resolution);
const { width, height } = selectedResolution;
// Create a temporary canvas for resizing
const tempCanvas = document.createElement('canvas');
const tempCtx = tempCanvas.getContext('2d');
// Set desired resolution
tempCanvas.width = width;
tempCanvas.height = height;
// Render the fabric.js canvas onto the temporary canvas
const dataUrl = canvas.toDataURL({
format: imageType,
quality: 1,
multiplier: width / canvas.width, // Adjust the scale based on width
});
const img = new Image();
img.src = dataUrl;
img.onload = () => {
tempCtx.drawImage(img, 0, 0, width, height);
// Generate resized image data URL
const resizedDataUrl = tempCanvas.toDataURL(`image/${imageType}`, 1);
// Download the resized image
const link = document.createElement('a');
link.href = resizedDataUrl;
link.download = `PlanPostAi-capture-${resolution}.${imageType}`;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
};
};
return (
<>
{captureOpen && (
<Rnd
className='z-[1000]'
default={{ x: 0, y: 20 }}
minWidth={250}
maxWidth={300}
minHeight={150}
bounds='parent'
>
<Card className='space-y-2 p-2'>
<CardHeader className='p-0'>
<div className='flex items-center justify-between'>
<Button variant={'ghost'} onClick={() => setCaptureOpen(false)}>
<X className='cursor-pointer' />
</Button>
<CardTitle className='text-lg mr-1'>Capture Panel</CardTitle>
</div>
</CardHeader>
<Separator />
<div className='grid grid-cols-1 sm:grid-cols-2 gap-4'>
<div className='space-y-2'>
<Label htmlFor='resolution'>Resolution</Label>
<Select onValueChange={setResolution} defaultValue={resolution}>
<SelectTrigger id='resolution'>
<SelectValue placeholder='Select resolution' />
</SelectTrigger>
<SelectContent>
{resolutions.map(res => (
<SelectItem key={res.value} value={res.value}>
{res.label}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
<div className='space-y-2'>
<Label htmlFor='imageType'>Image Type</Label>
<Select onValueChange={setImageType} defaultValue={imageType}>
<SelectTrigger id='imageType'>
<SelectValue placeholder='Select image type' />
</SelectTrigger>
<SelectContent>
{imageTypes.map(type => (
<SelectItem key={type.value} value={type.value}>
{type.label}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
</div>
<Button onClick={captureImage} className='w-full'>
Capture Canvas
</Button>
</Card>
</Rnd>
)}
</>
);
};
export default CanvasCapture;

235
src/components/CanvasSetting.jsx Normal file
View file

@ -0,0 +1,235 @@
import { useContext, useRef, useState } from 'react'
import CanvasContext from './Context/canvasContext/CanvasContext';
import { Card, CardTitle } from './ui/card';
import { Button } from './ui/button';
import { Trash2, UploadIcon, X } from 'lucide-react';
import { Separator } from './ui/separator';
import ColorComponent from './ColorComponent';
import { Label } from './ui/label';
import { Input } from './ui/input';
import { Slider } from './ui/slider';
import { fabric } from 'fabric';
import OpenContext from './Context/openContext/OpenContext';
const CanvasSetting = () => {
const { canvas } = useContext(CanvasContext);
const { setOpenSetting } = useContext(OpenContext);
const bgImgRef = useRef(null);
const [canvasSettings, setCanvasSettings] = useState({
width: canvas?.width,
height: canvas?.height,
perPixelTargetFind: true, // Enable per-pixel detection globally
targetFindTolerance: 4, // Adjust for leniency in pixel-perfect detection
});
const handleChange = (key, value) => {
setCanvasSettings((prevSettings) => ({
...prevSettings,
[key]: value,
}));
// Use the value directly for canvas updates
if (key === 'width') {
canvas.setWidth(value);
} else if (key === 'height') {
canvas.setHeight(value);
}
canvas.renderAll();
};
const setBackgroundImage = (e) => {
const file = e.target.files[0];
if (file) {
const blobUrl = URL.createObjectURL(file);
// Create an image element
const imgElement = new Image();
imgElement.src = blobUrl;
imgElement.onload = () => {
// Create a fabric.Image instance
const img = new fabric.Image(imgElement, {
scaleX: canvas.width / imgElement.width,
scaleY: canvas.height / imgElement.height,
});
// Set the background image on the canvas
canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas));
// Revoke the object URL to free memory
URL.revokeObjectURL(blobUrl);
};
imgElement.onerror = () => {
console.error("Failed to load the image.");
URL.revokeObjectURL(blobUrl);
};
}
};
const setBackgroundOverlayImage = (e) => {
const file = e.target.files[0];
if (file) {
const blobUrl = URL.createObjectURL(file);
// Create an image element
const imgElement = new Image();
imgElement.src = blobUrl;
imgElement.onload = () => {
const img = new fabric.Image(imgElement, {
scaleX: canvas.width / imgElement.width,
scaleY: canvas.height / imgElement.height,
});
// Use setOverlayImage method to add the image as an overlay
canvas.setOverlayImage(img, () => {
canvas.renderAll();
});
// Revoke the object URL after image is loaded and set
URL.revokeObjectURL(blobUrl);
};
}
};
const adjustBackgroundOpacity = (value) => {
if (canvas) {
if (canvas.backgroundImage) {
// Update the opacity of the background image if it exists
canvas.backgroundImage.set("opacity", value);
} else if (canvas.overlayImage) {
// Update the opacity of the overlay image if it exists
canvas.overlayImage.set("opacity", value);
} else {
console.error("No background or overlay image found on the canvas.");
return;
}
// Re-render the canvas to apply changes
canvas.renderAll();
} else {
console.error("Canvas is not initialized.");
}
};
const removeBackgroundImage = () => {
if (canvas) {
canvas.backgroundImage = null;
canvas.renderAll();
}
if (bgImgRef.current) {
bgImgRef.current.value = "";
}
};
const removeBackgroundOverlayImage = () => {
if (canvas) {
canvas.overlayImage = null;
canvas.renderAll();
}
};
return (
<Card className="px-2 py-2">
<CardTitle className="flex items-center flex-wrap justify-between gap-1">Canvas Setting <Button variant="secondary" onClick={() => setOpenSetting(false)}><X /></Button> </CardTitle>
<Separator className="mt-4" />
<div>
<ColorComponent />
<div className='flex flex-col my-2 gap-2'>
<div>
<Label>Background:</Label>
<div className='flex items-center w-fit gap-2 flex-wrap relative'>
<Button className="top-0 absolute flex items-center w-[30px]">
<UploadIcon className="cursor-pointer" />
<Input
ref={bgImgRef}
className="absolute top-0 opacity-0"
type="file"
accept="image/*"
onChange={setBackgroundImage}
/>
</Button>
<Button variant="secondary" className="ml-[35px]" onClick={removeBackgroundImage}><Trash2 /></Button>
</div>
</div>
<div>
<Label>Background Overlay:</Label>
<div className='flex items-center w-fit gap-2 flex-wrap relative'>
<Button className="top-0 absolute flex items-center w-[30px]">
<UploadIcon className="cursor-pointer" />
<Input
className="absolute top-0 opacity-0"
type="file"
accept="image/*"
onChange={setBackgroundOverlayImage}
/>
</Button>
<Button variant="secondary" className="ml-[35px]" onClick={removeBackgroundOverlayImage}><Trash2 /></Button>
</div>
</div>
<Separator className="mt-4" />
<div className='flex flex-col gap-2'>
<Label>
Adjust Opacity:
</Label>
<Slider
defaultValue={[1.0]} // Default value, you can set it to 0.0 or another value
min={0.0}
max={1.0}
step={0.01} // Step size for fine control
onValueChange={(value) => {
const newOpacity = value[0]; // Extract slider value
adjustBackgroundOpacity(newOpacity); // Adjust Fabric.js background opacity
}}
/>
</div>
</div>
<Separator className="mt-4" />
<div className='flex gap-2 my-2'>
<div className='flex flex-col gap-2'>
<Label>
Width:
</Label>
<Input
type="number"
value={canvasSettings.width}
onChange={(e) => {
if (canvasSettings?.width > parseInt(e.target.value)) {
handleChange('width', parseInt(e.target.value, 10));
}
}}
/>
</div>
<div className='flex flex-col gap-2'>
<Label>
Height:
</Label>
<Input
type="number"
value={canvasSettings.height}
onChange={(e) => {
if (canvasSettings?.height > parseInt(e.target.value)) {
handleChange('height', parseInt(e.target.value, 10));
}
}}
/>
</div>
</div>
</div>
</Card>
)
}
export default CanvasSetting

203
src/components/ColorComponent.jsx Normal file
View file

@ -0,0 +1,203 @@
import { useContext, useEffect } from 'react'
import { Label } from './ui/label';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
import { Input } from './ui/input';
import ColorContext from './Context/colorContext/ColorContext';
import CanvasContext from './Context/canvasContext/CanvasContext';
import { fabric } from 'fabric';
const ColorComponent = () => {
const { canvas } = useContext(CanvasContext);
const {
backgroundType,
setBackgroundType,
solidColor,
gradientColors,
setSolidColor,
setGradientColors,
gradientDirection,
setGradientDirection,
setDirectionCoords,
directionCoords,
} = useContext(ColorContext);
const applySolidColor = (color) => {
setSolidColor(color);
};
const applyGradient = () => {
const width = canvas?.width || 0;
const height = canvas?.height || 0;
// Define coordinates for linear gradient
const linearCoords = {
"top-to-bottom": { x1: 0, y1: 0, x2: 0, y2: height },
"bottom-to-top": { x1: 0, y1: height, x2: 0, y2: 0 },
"left-to-right": { x1: 0, y1: 0, x2: width, y2: 0 },
"right-to-left": { x1: width, y1: 0, x2: 0, y2: 0 },
};
const directionCoords = linearCoords[gradientDirection];
if (directionCoords) {
setDirectionCoords(directionCoords);
} else {
console.error(`Invalid gradient direction: ${gradientDirection}`);
}
};
useEffect(() => {
if (gradientDirection && backgroundType === "gradient") {
applyGradient();
}
}, [gradientDirection, backgroundType]);
useEffect(() => {
const object = canvas?.getActiveObject();
if (!object) {
if (canvas && solidColor && backgroundType === "color") {
canvas.backgroundColor = solidColor;
canvas.renderAll();
}
if (canvas && directionCoords && gradientColors && backgroundType === "gradient") {
const gradient = new fabric.Gradient({
type: "linear",
gradientUnits: "pixels",
coords: directionCoords,
colorStops: [
{ offset: 0, color: gradientColors.color1 },
{ offset: 1, color: gradientColors.color2 },
],
});
canvas.backgroundColor = gradient;
canvas.renderAll();
}
if (canvas && gradientColors && backgroundType === "radial") {
const gradient = new fabric.Gradient({
type: "radial",
gradientUnits: "pixels",
coords: {
x1: canvas.width / 2,
y1: canvas.height / 2,
r1: 0,
x2: canvas.width / 2,
y2: canvas.height / 2,
r2: Math.min(canvas.width, canvas.height) / 2,
},
colorStops: [
{ offset: 0, color: gradientColors.color1 },
{ offset: 1, color: gradientColors.color2 },
],
});
canvas.backgroundColor = gradient;
canvas.renderAll();
}
}
}, [gradientColors, directionCoords, solidColor, canvas, backgroundType]);
return (
<div className='flex flex-wrap my-2 gap-2'>
<div className='flex gap-2 flex-wrap mb-auto'>
<Label>Background Type:</Label>
<Select value={backgroundType} onValueChange={setBackgroundType}>
<SelectTrigger>
<SelectValue placeholder="Select background type" />
</SelectTrigger>
<SelectContent>
<SelectItem value="color">Solid Color</SelectItem>
<SelectItem value="gradient">Linear Gradient</SelectItem>
<SelectItem value="radial">Radial Gradient</SelectItem>
</SelectContent>
</Select>
</div>
{backgroundType === "color" ? (
<div className='flex flex-col gap-2'>
<Label>Solid Color:</Label>
<Input
type="color"
value={solidColor}
onChange={(e) => applySolidColor(e.target.value)}
/>
</div>
) : backgroundType === "gradient" ? (
<div className='grid grid-cols-1 gap-2'>
<div className='flex flex-wrap gap-2'>
<Label>Direction:</Label>
<Select
value={gradientDirection}
onValueChange={(value) => {
setGradientDirection(value);
}}
>
<SelectTrigger>
<SelectValue placeholder="Select direction" />
</SelectTrigger>
<SelectContent>
<SelectItem value="top-to-bottom">Top to Bottom</SelectItem>
<SelectItem value="bottom-to-top">Bottom to Top</SelectItem>
<SelectItem value="left-to-right">Left to Right</SelectItem>
<SelectItem value="right-to-left">Right to Left</SelectItem>
</SelectContent>
</Select>
</div>
<div className='flex gap-2 flex-wrap'>
<Label>Color 1:</Label>
<Input
type="color"
value={gradientColors.color1}
onChange={(e) =>
setGradientColors((prev) => ({
...prev,
color1: e.target.value,
}))}
/>
</div>
<div className='flex flex-wrap gap-2'>
<Label>Color 2:</Label>
<Input
type="color"
value={gradientColors.color2}
onChange={(e) =>
setGradientColors((prev) => ({
...prev,
color2: e.target.value,
}))}
/>
</div>
</div>
) : (
<div className='flex flex-wrap gap-2'>
<div className='flex gap-2 flex-wrap'>
<Label>Color 1:</Label>
<Input
type="color"
value={gradientColors.color1}
onChange={(e) =>
setGradientColors((prev) => ({
...prev,
color1: e.target.value,
}))}
/>
</div>
<div className='flex flex-wrap gap-2'>
<Label>Color 2:</Label>
<Input
type="color"
value={gradientColors.color2}
onChange={(e) =>
setGradientColors((prev) => ({
...prev,
color2: e.target.value,
}))}
/>
</div>
</div>
)}
</div>
);
};
export default ColorComponent;

5
src/components/Context/activeObject/ObjectContext.js Normal file
View file

@ -0,0 +1,5 @@
import React from "react";
const ActiveObjectContext = React.createContext();
export default ActiveObjectContext;

11
src/components/Context/activeObject/ObjectProvider.jsx Normal file
View file

@ -0,0 +1,11 @@
import { useState } from 'react'
import ActiveObjectContext from './ObjectContext'
export const ObjectProvider = ({ children }) => {
const [activeObject, setActiveObject] = useState(null);
return (
<ActiveObjectContext.Provider value={{ activeObject, setActiveObject }}>
{children}
</ActiveObjectContext.Provider>
)
}

5
src/components/Context/canvasContext/CanvasContext.js Normal file
View file

@ -0,0 +1,5 @@
import React from "react";
const CanvasContext = React.createContext();
export default CanvasContext;

16
src/components/Context/canvasContext/CanvasContextProvider.jsx Normal file
View file

@ -0,0 +1,16 @@
import { useRef, useState } from 'react'
import CanvasContext from './CanvasContext';
const CanvasContextProvider = ({ children }) => {
const canvasRef = useRef(null);
const [canvas, setCanvas] = useState(null);
const fabricCanvasRef = useRef(null);
return (
<CanvasContext.Provider value={{ canvasRef, canvas, setCanvas, fabricCanvasRef }}>
{children}
</CanvasContext.Provider>
)
}
export default CanvasContextProvider

5
src/components/Context/colorContext/ColorContext.js Normal file
View file

@ -0,0 +1,5 @@
import React from "react";
const ColorContext = React.createContext();
export default ColorContext;

22
src/components/Context/colorContext/ColorContextProvider.jsx Normal file
View file

@ -0,0 +1,22 @@
import { useState } from 'react'
import ColorContext from './ColorContext'
const ColorContextProvider = ({ children }) => {
const [backgroundType, setBackgroundType] = useState("color"); // 'color' or 'gradient'
const [solidColor, setSolidColor] = useState("#ffffff");
const [gradientColors, setGradientColors] = useState({
color1: "#ffffff",
color2: "#e26286",
});
const [gradientDirection, setGradientDirection] = useState("top-to-bottom");
const [directionCoords, setDirectionCoords] = useState(null);
return (
<ColorContext.Provider value={{ backgroundType, setBackgroundType, solidColor, setSolidColor, gradientColors, setGradientColors, gradientDirection, setGradientDirection, directionCoords, setDirectionCoords }}>
{children}
</ColorContext.Provider>
)
}
export default ColorContextProvider

5
src/components/Context/openContext/OpenContext.js Normal file
View file

@ -0,0 +1,5 @@
import React from "react";
const OpenContext = React.createContext();
export default OpenContext;

19
src/components/Context/openContext/OpenContextProvider.jsx Normal file
View file

@ -0,0 +1,19 @@
import { useState } from 'react'
import OpenContext from './OpenContext';
const IconContextProvider = ({ children }) => {
const [openSetting, setOpenSetting] = useState(false);
const [openObjectPanel, setOpenObjectPanel] = useState(false);
const [tabValue, setTabValue] = useState("icons");
const [captureOpen, setCaptureOpen] = useState(false);
const [rightPanelOpen, setRightPanelOpen] = useState(true);
const [leftPanelOpen, setLeftPanelOpen] = useState(true);
const [openPanel, setOpenPanel] = useState(false);
return (
<OpenContext.Provider value={{ openSetting, setOpenSetting, openObjectPanel, setOpenObjectPanel, tabValue, setTabValue, captureOpen, setCaptureOpen, rightPanelOpen, setRightPanelOpen, leftPanelOpen, setLeftPanelOpen, openPanel, setOpenPanel }}>
{children}
</OpenContext.Provider>
)
}
export default IconContextProvider

289
src/components/EachComponent/ApplyColor.jsx Normal file
View file

@ -0,0 +1,289 @@
import { useContext, useEffect, useState } from 'react'
import ActiveObjectContext from '../Context/activeObject/ObjectContext';
import CanvasContext from '../Context/canvasContext/CanvasContext';
import { fabric } from 'fabric';
import { debounce } from "lodash";
import { Separator } from '../ui/separator';
import { Label } from '../ui/label';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select';
import { Input } from '../ui/input';
import { Card } from '../ui/card';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs';
import { Button } from '../ui/button';
import CollapsibleComponent from './Customization/CollapsibleComponent';
const ApplyColor = () => {
const [colorField, setColorField] = useState("fill");
const [fillColor, setFillColor] = useState("");
const [backgroundColor, setBackgroundColor] = useState("");
const [gradientFillColors, setGradientFillColors] = useState({
color1: "#f97316",
color2: "#e26286",
});
const [colorType, setColorType] = useState("color"); // 'color' or 'gradient'
const [gradientDirection, setGradientDirection] = useState("top-to-bottom");
// get values from context
const { activeObject } = useContext(ActiveObjectContext);
const { canvas } = useContext(CanvasContext);
// to get previous values from active object
useEffect(() => {
const handleObjectStyle = (object) => {
if (object.fill) {
if (typeof object.fill === "string") {
setColorType("color");
} else if (object.fill instanceof fabric.Gradient) {
setColorType("gradient");
}
}
// Handle solid colors
if (object.fill && !object.fill.colorStops) {
setFillColor(object.fill); // Solid fill
}
if (object.backgroundColor) {
setBackgroundColor(object.backgroundColor); // Solid background color
}
// Handle gradients
if (object.fill?.colorStops) {
setGradientFillColors({
color1: object.fill.colorStops[0]?.color || "",
color2: object.fill.colorStops[1]?.color || "",
});
}
};
const processGroupObjects = (group) => {
group._objects.forEach((obj) => {
if (obj.type === "group") {
processGroupObjects(obj); // Recursively handle nested groups
} else {
handleObjectStyle(obj); // Apply styles to child objects
}
});
};
if (activeObject) {
if (activeObject.type === "group") {
processGroupObjects(activeObject); // Process all objects in the group
} else {
handleObjectStyle(activeObject); // Handle single object
}
}
}, [activeObject, colorField]);
const handleSolidColorChange = debounce((newColor) => {
if (colorField === "fill") {
setFillColor(newColor)
}
else {
setBackgroundColor(newColor)
}
}, 100);
// Common debounce handler for updating colors
const debouncedSetGradientColors = debounce((key, value) => {
if (colorField === "fill") {
setGradientFillColors((prev) => ({
...prev,
[key]: value,
}))
}
}, 300); // Adjust debounce delay as needed
const handleColorChange = (key) => (e) => {
const newColor = e.target.value;
debouncedSetGradientColors(key, newColor);
};
// Apply color/gradient style to the selected object on the canvas
const applyColor = () => {
const applyStyleToObject = (object, style) => {
if (colorType === "color") {
if (colorField === "fill" && object.fill !== style.fill) {
object.set("fill", style.fill);
}
if (colorField === "background" && object.backgroundColor !== style.backgroundColor) {
object.set("backgroundColor", style.backgroundColor);
}
}
if (colorType === "gradient" && colorField === "fill") {
const width = object?.width || 0;
const height = object?.height || 0;
const coords = {
"top-to-bottom": { x1: 0, y1: 0, x2: 0, y2: height },
"bottom-to-top": { x1: 0, y1: height, x2: 0, y2: 0 },
"left-to-right": { x1: 0, y1: 0, x2: width, y2: 0 },
"right-to-left": { x1: width, y1: 0, x2: 0, y2: 0 },
};
const directionCoords = coords[gradientDirection];
const gradient = new fabric.Gradient({
type: "linear",
gradientUnits: "pixels",
coords: directionCoords,
colorStops: [
{ offset: 0, color: gradientFillColors.color1 },
{ offset: 1, color: gradientFillColors.color2 },
],
});
object.set("fill", gradient);
}
};
const applyStyleRecursively = (object, style) => {
if (object.type === "group" && object._objects) {
// If the object is a group, iterate through its children
object._objects.forEach((child) => applyStyleRecursively(child, style));
} else {
// If the object is not a group, apply the style directly
applyStyleToObject(object, style);
}
};
const style = {
fill: fillColor,
backgroundColor: backgroundColor,
};
applyStyleRecursively(activeObject, style);
// Trigger re-render for the canvas
canvas.renderAll();
}
const content = () => {
return (
<div>
<div className="grid">
<div className="space-y-2">
<div className="space-y-2">
<Label htmlFor="colorField">Color Field</Label>
<Select value={colorField} onValueChange={(value) => setColorField(value)}>
<SelectTrigger id="colorField">
<SelectValue placeholder="Select color field type" />
</SelectTrigger>
<SelectContent>
<SelectItem value="fill">Fill</SelectItem>
<SelectItem value="background">Background</SelectItem>
</SelectContent>
</Select>
</div>
<Tabs value={colorType} onValueChange={(value) => setColorType(value)}>
<TabsList className="grid w-full grid-cols-2">
<TabsTrigger value="color">Solid Color</TabsTrigger>
<TabsTrigger value="gradient" disabled={colorField === 'background'}>Gradient</TabsTrigger>
</TabsList>
<TabsContent value="color" className="space-y-4">
<div className="space-y-2">
<Label htmlFor="solidColor">Color</Label>
<div className="flex items-center space-x-2">
<Input
id="solidColor"
type="color"
value={colorField === "fill" ? fillColor : backgroundColor}
onChange={(e) => handleSolidColorChange(e.target.value)}
className="w-12 h-12 p-1 rounded-md"
/>
<Input
type="text"
value={colorField === "fill" ? fillColor : backgroundColor}
onChange={(e) => handleSolidColorChange(e.target.value)}
className="flex-grow"
/>
</div>
</div>
<div className="h-24 rounded-md" style={{
backgroundColor: colorField === "fill" ? fillColor : backgroundColor,
}}></div>
</TabsContent>
<TabsContent value="gradient" className="space-y-4">
<div className="space-y-2">
<Label htmlFor="gradientDirection">Direction</Label>
<Select value={gradientDirection} onValueChange={setGradientDirection}>
<SelectTrigger id="gradientDirection">
<SelectValue placeholder="Select direction" />
</SelectTrigger>
<SelectContent>
<SelectItem value="top-to-bottom">Top to Bottom</SelectItem>
<SelectItem value="bottom-to-top">Bottom to Top</SelectItem>
<SelectItem value="left-to-right">Left to Right</SelectItem>
<SelectItem value="right-to-left">Right to Left</SelectItem>
</SelectContent>
</Select>
</div>
<div className="space-y-2">
<Label htmlFor="gradientColor1">Color 1</Label>
<div className="flex items-center space-x-2">
<Input
id="gradientColor1"
type="color"
value={gradientFillColors.color1}
onChange={handleColorChange('color1')}
className="w-12 h-12 p-1 rounded-md"
/>
<Input
type="text"
value={gradientFillColors.color1}
onChange={handleColorChange('color1')}
className="flex-grow"
/>
</div>
</div>
<div className="space-y-2">
<Label htmlFor="gradientColor2">Color 2</Label>
<div className="flex items-center space-x-2">
<Input
id="gradientColor2"
type="color"
value={gradientFillColors.color2}
onChange={handleColorChange('color2')}
className="w-12 h-12 p-1 rounded-md"
/>
<Input
type="text"
value={gradientFillColors.color2}
onChange={handleColorChange('color2')}
className="flex-grow"
/>
</div>
</div>
<div className="h-24 rounded-md" style={{
background: `linear-gradient(${gradientDirection === 'top-to-bottom' ? 'to bottom' :
gradientDirection === 'bottom-to-top' ? 'to top' :
gradientDirection === 'left-to-right' ? 'to right' :
'to left'
}, ${gradientFillColors.color1}, ${gradientFillColors.color2})`,
}}></div>
</TabsContent>
</Tabs>
</div>
<Button className="my-2" onClick={() => { applyColor() }}>Apply</Button>
</div>
</div>
)
}
return (
<div>
<Card className="p-2">
<CollapsibleComponent text={"Color Control"}>
{content()}
</CollapsibleComponent>
</Card>
<Separator className="my-2" />
</div>
)
}
export default ApplyColor

68
src/components/EachComponent/CustomShape/CustomShape.jsx Normal file
View file

@ -0,0 +1,68 @@
import ActiveObjectContext from '@/components/Context/activeObject/ObjectContext';
import CanvasContext from '@/components/Context/canvasContext/CanvasContext';
import { useContext } from 'react'
import { shapes } from './shapes';
import { fabric } from 'fabric';
const CustomShape = () => {
const { canvas } = useContext(CanvasContext);
const { setActiveObject } = useContext(ActiveObjectContext);
const addShape = (each) => {
// Load the SVG from the imported file
fabric.loadSVGFromURL(each, (objects, options) => {
const svgGroup = fabric.util.groupSVGElements(objects, options);
// Calculate canvas center
const centerX = canvas.getWidth() / 2;
const centerY = canvas.getHeight() / 2;
// Set properties for centering the SVG
svgGroup.set({
left: centerX, // Center horizontally
top: centerY, // Center vertically
originX: 'center', // Set the origin to the center
originY: 'center',
fill: "#f09b0a",
scaleX: 1,
scaleY: 1,
});
// Add SVG to the canvas
canvas.add(svgGroup);
canvas.setActiveObject(svgGroup);
// Update the active object state
setActiveObject(svgGroup);
// Render the canvas
canvas.renderAll();
});
};
return (
<div
className="rounded-md grid grid-cols-3 gap-2 p-2"
onClick={() => addShape()}
>
{shapes.map((each) => (
<div
key={each.shape}
className="relative aspect-square flex items-center justify-center bg-secondary rounded-md cursor-pointer"
onClick={(e) => {
e.stopPropagation()
addShape(each.source)
}}
>
<img
src={each.source}
alt={`Shape ${each.shape}`}
className="max-w-full max-h-full p-1 object-contain hover:bg-gray-200 rounded-md transition-colors duration-200"
/>
</div>
))}
</div>
)
}
export default CustomShape

39
src/components/EachComponent/CustomShape/shapes.js Normal file
View file

@ -0,0 +1,39 @@
export const shapes = [
{ shape: 25367, source: "/src/assets/svgs/Group 25367.svg" },
{ shape: 25368, source: "/src/assets/svgs/Group 25368.svg" },
{ shape: 25369, source: "/src/assets/svgs/Group 25369.svg" },
{ shape: 25370, source: "/src/assets/svgs/Group 25370.svg" },
{ shape: 25371, source: "/src/assets/svgs/Group 25371.svg" },
{ shape: 25372, source: "/src/assets/svgs/Group 25372.svg" },
{ shape: 25373, source: "/src/assets/svgs/Group 25373.svg" },
{ shape: 25374, source: "/src/assets/svgs/Group 25374.svg" },
{ shape: 25375, source: "/src/assets/svgs/Group 25375.svg" },
{ shape: 25376, source: "/src/assets/svgs/Group 25376.svg" },
{ shape: 25377, source: "/src/assets/svgs/Group 25377.svg" },
{ shape: 25378, source: "/src/assets/svgs/Group 25378.svg" },
{ shape: 25379, source: "/src/assets/svgs/Group 25379.svg" },
{ shape: 25380, source: "/src/assets/svgs/Group 25380.svg" },
{ shape: 25381, source: "/src/assets/svgs/Group 25381.svg" },
{ shape: 25382, source: "/src/assets/svgs/Group 25382.svg" },
{ shape: 25383, source: "/src/assets/svgs/Group 25383.svg" },
{ shape: 25384, source: "/src/assets/svgs/Group 25384.svg" },
{ shape: 25385, source: "/src/assets/svgs/Group 25385.svg" },
{ shape: 25386, source: "/src/assets/svgs/Group 25386.svg" },
{ shape: 25387, source: "/src/assets/svgs/Group 25387.svg" },
{ shape: 25388, source: "/src/assets/svgs/Group 25388.svg" },
{ shape: 25389, source: "/src/assets/svgs/Group 25389.svg" },
{ shape: 25390, source: "/src/assets/svgs/Group 25390.svg" },
{ shape: 25391, source: "/src/assets/svgs/Group 25391.svg" },
{ shape: 25392, source: "/src/assets/svgs/Group 25392.svg" },
{ shape: 25393, source: "/src/assets/svgs/Group 25393.svg" },
{ shape: 25394, source: "/src/assets/svgs/Group 25394.svg" },
{ shape: 25395, source: "/src/assets/svgs/Group 25395.svg" },
{ shape: 25396, source: "/src/assets/svgs/Group 25396.svg" },
{ shape: 25397, source: "/src/assets/svgs/Group 25397.svg" },
{ shape: 25398, source: "/src/assets/svgs/Group 25398.svg" },
{ shape: 25399, source: "/src/assets/svgs/Group 25399.svg" },
{ shape: 25400, source: "/src/assets/svgs/Group 25400.svg" },
{ shape: 25401, source: "/src/assets/svgs/Group 25401.svg" },
{ shape: 25402, source: "/src/assets/svgs/Group 25402.svg" },
];

332
src/components/EachComponent/Customization/AddImageIntoShape.jsx Normal file
View file

@ -0,0 +1,332 @@
import ActiveObjectContext from '@/components/Context/activeObject/ObjectContext';
import CanvasContext from '@/components/Context/canvasContext/CanvasContext';
import { useContext, useRef, useState } from 'react';
import { Button } from '@/components/ui/button';
import { fabric } from 'fabric';
import Resizer from "react-image-file-resizer";
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Slider } from '@/components/ui/slider';
import { HardDriveUpload, ImagePlus, Upload, Crop, RotateCw, FileType, ChevronUp, ChevronDown } from 'lucide-react';
import { Card, CardContent } from '@/components/ui/card';
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
import CollapsibleComponent from './CollapsibleComponent';
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
const features = [
{ icon: Upload, title: 'Auto-Resize', description: 'Images larger than 1080px are automatically resized' },
{ icon: Crop, title: 'Custom Dimensions', description: 'Set your preferred resize dimensions' },
{ icon: RotateCw, title: 'Quality & Rotation', description: 'Adjust image quality and rotation as needed' },
{ icon: FileType, title: 'Format Conversion', description: 'Convert between various image formats' },
]
const AddImageIntoShape = () => {
const { canvas } = useContext(CanvasContext);
const { activeObject, setActiveObject } = useContext(ActiveObjectContext);
const [errorMessage, setErrorMessage] = useState("");
const [width, setWidth] = useState(1080);
const [height, setHeight] = useState(1080);
const [quality, setQuality] = useState(100);
const [rotation, setRotation] = useState("0");
const [format, setFormat] = useState('JPEG');
const fileInputRef = useRef(null);
const [isOpen, setIsOpen] = useState(true);
const handleResize = (file, callback) => {
Resizer.imageFileResizer(
file,
width,
height,
format,
quality,
parseInt(rotation),
(resizedFile) => {
callback(resizedFile); // Pass the resized file to the callback
},
'file' // Output type
);
};
const fileHandler = (e) => {
const file = e.target.files[0];
if (!file) {
setErrorMessage("No file selected.");
return;
}
// Check if the file is an SVG
if (file.type === "image/svg+xml") {
// Add SVG directly to canvas without compression
const blobUrl = URL.createObjectURL(file);
const imgElement = new Image();
imgElement.src = blobUrl;
imgElement.onload = () => {
handleImageInsert(imgElement); // Insert the image without resizing
URL.revokeObjectURL(blobUrl);
clearFileInput();
};
imgElement.onerror = () => {
console.error("Failed to load SVG.");
setErrorMessage("Failed to load SVG.");
URL.revokeObjectURL(blobUrl);
clearFileInput();
};
return;
}
// Handle raster images (JPEG, PNG, etc.)
const imgElement = new Image();
const blobUrl = URL.createObjectURL(file);
imgElement.src = blobUrl;
imgElement.onload = () => {
// If the width is greater than 1080px, compress the image
if (imgElement.width > 1080) {
handleResize(file, (compressedFile) => {
const compressedBlobUrl = URL.createObjectURL(compressedFile);
const compressedImg = new Image();
compressedImg.src = compressedBlobUrl;
compressedImg.onload = () => {
handleImageInsert(compressedImg); // Insert the resized image
URL.revokeObjectURL(compressedBlobUrl); // Clean up
clearFileInput();
};
compressedImg.onerror = () => {
console.error("Failed to load compressed image.");
setErrorMessage("Failed to load compressed image.");
URL.revokeObjectURL(compressedBlobUrl);
clearFileInput();
};
});
} else {
handleImageInsert(imgElement); // Insert the original image if no resizing needed
clearFileInput();
}
URL.revokeObjectURL(blobUrl); // Clean up
clearFileInput();
};
imgElement.onerror = () => {
console.error("Failed to load image.");
setErrorMessage("Failed to load image.");
URL.revokeObjectURL(blobUrl);
clearFileInput();
};
};
const clearFileInput = () => {
if (fileInputRef.current) {
fileInputRef.current.value = "";
}
};
const handleImageInsert = (img) => {
if (!activeObject) {
setErrorMessage("No active object selected!");
return;
}
// Ensure absolute positioning for the clipPath
activeObject.set({
isClipPath: true, // Custom property
absolutePositioned: true,
});
// Create a fabric image object with scaling and clipPath
const fabricImage = new fabric.Image(img, {
scaleX: 0.2,
scaleY: 0.2,
left: activeObject.left,
top: activeObject.top,
clipPath: activeObject, // Apply clipPath to the image
});
canvas.add(fabricImage);
canvas.setActiveObject(fabricImage);
setActiveObject(fabricImage);
canvas.renderAll();
};
// canvas.remove(activeObject);
const content = () => {
return (
<div>
{/* <Card className="my-2">
<CardContent className="p-0">
<Alert>
<AlertTitle className="text-lg font-semibold flex items-center gap-1 flex-wrap">Image Insertion <ImagePlus className="h-5 w-5" /></AlertTitle>
<AlertDescription className="mt-1">
<p className="mb-1">
Insert and customize images within shapes. Adjust image position and clipping after insertion.
</p>
<h4 className="font-medium mb-1">Key Features:</h4>
<div className="grid grid-cols-1 gap-2 mt-2">
{features.map((feature, index) => (
<div
key={index}
className="flex items-start p-4 bg-white rounded-lg shadow-sm"
>
<feature.icon className="h-6 w-6 mr-3 flex-shrink-0 text-primary" />
<div>
<h3 className="font-semibold mb-1">{feature.title}</h3>
<p className="text-sm text-gray-600">{feature.description}</p>
</div>
</div>
))}
</div>
</AlertDescription>
</Alert>
</CardContent>
</Card> */}
<Card className="my-2">
<CardContent className="p-0">
<Alert>
<AlertTitle className="text-lg font-semibold flex items-center gap-1 flex-wrap">
Image Insertion <ImagePlus className="h-5 w-5" />
</AlertTitle>
<AlertDescription className="mt-1">
<p className="mb-1">
Insert and customize images within shapes. Adjust image position and clipping after insertion.
</p>
<Collapsible open={isOpen} onOpenChange={setIsOpen}>
<CollapsibleTrigger asChild>
<Button variant="outline" className="w-full justify-between mt-2">
<span>Key Features</span>
{isOpen ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
</Button>
</CollapsibleTrigger>
<CollapsibleContent>
<div className="grid grid-cols-1 gap-2 mt-2">
{features.map((feature, index) => (
<div
key={index}
className="flex items-start p-4 bg-white rounded-lg shadow-sm"
>
<feature.icon className="h-6 w-6 mr-3 flex-shrink-0 text-primary" />
<div>
<h3 className="font-semibold mb-1">{feature.title}</h3>
<p className="text-sm text-gray-600">{feature.description}</p>
</div>
</div>
))}
</div>
</CollapsibleContent>
</Collapsible>
</AlertDescription>
</Alert>
</CardContent>
</Card>
{errorMessage && (
<p className="text-red-600 text-sm mt-2">{errorMessage}</p>
)}
<div className='flex flex-col w-[100%]'>
<div className="space-y-1">
{/* Width Slider */}
<div className="space-y-1">
<Label className="text-xs">Width: {width}px</Label>
<Slider
min={300}
value={[width]}
max={2000}
step={10}
onValueChange={(value) => setWidth(value[0])}
/>
</div>
{/* Height Slider */}
<div className="space-y-1">
<Label className="text-xs">Height: {height}px</Label>
<Slider
min={300}
value={[height]}
max={2000}
step={10}
onValueChange={(value) => setHeight(value[0])}
/>
</div>
{/* Quality Slider */}
{
format === "JPEG" &&
<div className="space-y-1">
<Label className="text-xs">Quality: {quality}%</Label>
<Slider
value={[quality]}
max={100}
step={1}
onValueChange={(value) => setQuality(value[0])}
/>
</div>
}
<div className='grid grid-cols-2 gap-1 items-center'>
{/* Rotation */}
<div>
<Label className="text-xs">Rotation: {rotation}°</Label>
<Select value={rotation} onValueChange={(value) => setRotation(value)}>
<SelectTrigger className="w-full">
<SelectValue placeholder="Select rotation in degree" />
</SelectTrigger>
<SelectContent>
<SelectItem value="0">0</SelectItem>
<SelectItem value="45">45</SelectItem>
<SelectItem value="90">90</SelectItem>
<SelectItem value="180">180</SelectItem>
<SelectItem value="270">270</SelectItem>
</SelectContent>
</Select>
</div>
{/* Format Dropdown */}
<div>
<Label className="text-xs">Format</Label>
<Select value={format} onValueChange={(value) => setFormat(value)}>
<SelectTrigger className="w-full">
<SelectValue placeholder="Select format" />
</SelectTrigger>
<SelectContent>
<SelectItem value="JPEG">JPEG</SelectItem>
<SelectItem value="PNG">PNG</SelectItem>
<SelectItem value="WEBP">WEBP</SelectItem>
</SelectContent>
</Select>
</div>
</div>
</div>
<Button className="w-fit h-fit flex flex-wrap gap-1 relative py-4 my-4 mx-auto">
<HardDriveUpload className="cursor-pointer" />
Upload Image
<Input
className="cursor-pointer bg-white text-black absolute top-0 opacity-0"
type="file"
accept="image/*"
ref={fileInputRef}
onChange={fileHandler} />
</Button>
</div>
</div>
)
}
return (
<Card className="flex flex-col p-2">
<CollapsibleComponent text={"Insert Image"}>
{content()}
</CollapsibleComponent>
</Card>
);
};
export default AddImageIntoShape;

71
src/components/EachComponent/Customization/AddImageToText.jsx Normal file
View file

@ -0,0 +1,71 @@
import { useContext } from 'react';
import * as fabric from 'fabric'; // v6
import ActiveObjectContext from '@/components/Context/activeObject/ObjectContext';
import CanvasContext from '@/components/Context/canvasContext/CanvasContext';
import { Input } from '@/components/ui/input';
const AddImageText = () => {
const { activeObject } = useContext(ActiveObjectContext);
const { canvas } = useContext(CanvasContext);
// Handle user image upload
const handleImageUpload = (event) => {
const file = event.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = (e) => {
const imgElement = new Image();
imgElement.src = e.target.result;
imgElement.onload = () => {
// Check if the active object is an instance of 'i-text'
if (activeObject && activeObject.type === 'i-text') {
// Create a Fabric BaseImage object from the uploaded image
const image = new fabric.BaseImage(imgElement, {
left: 0, // Set the left position as needed
top: 0, // Set the top position as needed
width: activeObject.width, // Scale the image width to match text
height: activeObject.height, // Scale the image height to match text
});
// Set the text object as the clipping path for the image
image.clipPath = activeObject;
// Set the fill of the text to be transparent to only show the clipped path
activeObject.set({ fill: 'rgba(255, 255, 255, 0)' });
// Add the image to the canvas
canvas.add(image);
// Render the canvas
canvas.requestAll();
} else {
console.warn('No active text object found or active object is not of type i-text.');
}
};
imgElement.onerror = () => {
console.error('Failed to load the image.');
};
};
reader.readAsDataURL(file); // Convert image file to base64
}
};
return (
<div>
<div>
<Input
type="file"
accept="image/*"
onChange={handleImageUpload}
style={{ marginBottom: '10px' }}
/>
</div>
</div>
);
};
export default AddImageText;

25
src/components/EachComponent/Customization/CollapsibleComponent.jsx Normal file
View file

@ -0,0 +1,25 @@
import { Button } from "@/components/ui/button";
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
import { ChevronUp, ChevronDown } from "lucide-react";
import { useState } from "react";
const CollapsibleComponent = ({ children, text }) => {
const [isOpen, setIsOpen] = useState(true);
return (
<Collapsible open={isOpen} onOpenChange={setIsOpen}>
<CollapsibleTrigger asChild>
<div className={`flex items-center justify-between cursor-pointer ${!isOpen ? "my-2" : ""}`}>
<h2 className='font-bold'>{text}</h2>
<Button variant={"outline"}>
{isOpen ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
</Button>
</div>
</CollapsibleTrigger>
<CollapsibleContent>
{children}
</CollapsibleContent>
</Collapsible>
)
}
export default CollapsibleComponent

74
src/components/EachComponent/Customization/FlipCustomization.jsx Normal file
View file

@ -0,0 +1,74 @@
import ActiveObjectContext from '@/components/Context/activeObject/ObjectContext';
import CanvasContext from '@/components/Context/canvasContext/CanvasContext';
import { Label } from '@/components/ui/label';
import { Separator } from '@/components/ui/separator';
import { Switch } from '@/components/ui/switch';
import { FlipHorizontal, FlipVertical } from 'lucide-react';
import { useContext, useEffect, useState } from 'react'
const FlipCustomization = () => {
const { canvas } = useContext(CanvasContext);
const { activeObject } = useContext(ActiveObjectContext);
const [isFlippedHorizontal, setIsFlippedHorizontal] = useState(false);
const [isFlippedVertical, setIsFlippedVertical] = useState(false);
useEffect(() => {
if (activeObject) {
setIsFlippedHorizontal(activeObject.flipX || false);
setIsFlippedVertical(activeObject.flipY || false);
}
}, [activeObject])
useEffect(() => {
if (activeObject) {
activeObject.set({
flipX: isFlippedHorizontal,
flipY: isFlippedVertical,
});
canvas.renderAll();
}
}, [isFlippedHorizontal, isFlippedVertical, activeObject, canvas]);
const handleFlip = (direction) => {
if (direction === 'horizontal') {
setIsFlippedHorizontal(!isFlippedHorizontal);
} else {
setIsFlippedVertical(!isFlippedVertical);
}
}
return (
<div>
<Separator className="my-2" />
<div className="space-y-1">
<h2 className='font-bold'>Flip:</h2>
<div className="flex items-center justify-between">
<div className="flex items-center space-x-1">
<FlipHorizontal className="h-4 w-4" />
<Label htmlFor="flip-horizontal">Horizontal</Label>
</div>
<Switch
id="flip-horizontal"
checked={isFlippedHorizontal}
onCheckedChange={() => handleFlip('horizontal')}
/>
</div>
<div className="flex items-center justify-between">
<div className="flex items-center space-x-1">
<FlipVertical className="h-4 w-4" />
<Label htmlFor="flip-vertical">Vertical</Label>
</div>
<Switch
id="flip-vertical"
checked={isFlippedVertical}
onCheckedChange={() => handleFlip('vertical')}
/>
</div>
</div>
<Separator className="my-2" />
</div>
)
}
export default FlipCustomization

226
src/components/EachComponent/Customization/ImageCustomization.jsx Normal file
View file

@ -0,0 +1,226 @@
import { useContext, useState } from 'react'
import { ImageIcon, Wand2 } from 'lucide-react'
import { fabric } from 'fabric'
import CanvasContext from '@/components/Context/canvasContext/CanvasContext'
import { Label } from '@/components/ui/label'
import { Input } from '@/components/ui/input'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { Button } from '@/components/ui/button'
import { Slider } from '@/components/ui/slider'
import { Separator } from '@/components/ui/separator'
const ImageCustomization = () => {
const { canvas } = useContext(CanvasContext)
const [shadowColor, setShadowColor] = useState("#000000")
const [highlightColor, setHighlightColor] = useState("#ffffff")
const [blendMode, setBlendMode] = useState("multiply")
const [filterType, setFilterType] = useState("sepia")
const [filterIntensity, setFilterIntensity] = useState(0.5)
const applyDuotoneFilter = () => {
if (!canvas) return
const activeObject = canvas.getActiveObject()
if (!activeObject || activeObject.type !== "image") {
console.warn("No active image object selected.")
return
}
activeObject.filters = [
new fabric.Image.filters.BlendColor({
color: shadowColor,
mode: blendMode,
}),
new fabric.Image.filters.BlendColor({
color: highlightColor,
mode: "screen",
}),
]
activeObject.applyFilters()
canvas.renderAll()
}
const createFilter = (value) => {
let effect
switch (value) {
case 'sepia':
effect = new fabric.Image.filters.Sepia()
break
case 'contrast':
effect = new fabric.Image.filters.Contrast({ contrast: filterIntensity })
break
case 'brightness':
effect = new fabric.Image.filters.Brightness({ brightness: filterIntensity })
break
case 'grayscale':
effect = new fabric.Image.filters.Grayscale()
break
case 'invert':
effect = new fabric.Image.filters.Invert()
break
case 'blur':
effect = new fabric.Image.filters.Blur({
blur: filterIntensity,
})
break
case 'pixelate':
effect = new fabric.Image.filters.Pixelate({
blocksize: filterIntensity * 10,
})
break
case 'huerotation':
effect = new fabric.Image.filters.HueRotation({
rotation: filterIntensity * 360,
})
break
case 'noise':
effect = new fabric.Image.filters.Noise({
noise: filterIntensity * 100,
})
break
default:
effect = null
}
return effect
}
const applyFilter = () => {
if (!canvas) return
const activeObject = canvas.getActiveObject()
if (!activeObject || activeObject.type !== "image") {
console.warn("No active image object selected.")
return
}
const filter = createFilter(filterType)
if (filter) {
activeObject.filters = [filter]
activeObject.applyFilters()
canvas.renderAll()
}
}
const revertFilters = () => {
if (!canvas) return
const image = canvas.getActiveObject()
if (image) {
image.filters = []
image.applyFilters()
canvas.renderAll()
}
}
return (
<div className="space-y-2">
<h2 className="font-semibold my-2">Blend filter</h2>
<div className="grid grid-cols-1 gap-4">
<div className="space-y-2">
<Label>Shadow Color</Label>
<div className="flex items-center space-x-2">
<Input
type="color"
value={shadowColor}
onChange={(e) => setShadowColor(e.target.value)}
className="w-12 h-12 p-1 rounded-md"
/>
<Input
type="text"
value={shadowColor}
onChange={(e) => setShadowColor(e.target.value)}
className="flex-grow"
/>
</div>
</div>
<div className="space-y-2">
<Label>Highlight Color</Label>
<div className="flex items-center space-x-2">
<Input
type="color"
value={highlightColor}
onChange={(e) => setHighlightColor(e.target.value)}
className="w-12 h-12 p-1 rounded-md"
/>
<Input
type="text"
value={highlightColor}
onChange={(e) => setHighlightColor(e.target.value)}
className="flex-grow"
/>
</div>
</div>
</div>
<div className="space-y-2">
<Label>Blend Mode</Label>
<Select value={blendMode} onValueChange={setBlendMode}>
<SelectTrigger>
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="multiply">Multiply</SelectItem>
<SelectItem value="screen">Screen</SelectItem>
<SelectItem value="overlay">Overlay</SelectItem>
<SelectItem value="darken">Darken</SelectItem>
<SelectItem value="lighten">Lighten</SelectItem>
</SelectContent>
</Select>
</div>
<div className="grid gap-2">
<Button onClick={applyDuotoneFilter} className="flex-1">
<Wand2 className="mr-2" />
Apply Duotone
</Button>
<Button variant="outline" onClick={revertFilters} className="flex-1">
<ImageIcon className="mr-2" />
Revert Filters
</Button>
</div>
<div>
<Separator className="mt-4" />
<h2 className="font-semibold my-2">Apply filter</h2>
<div className='grid gap-4'>
<div className="space-y-2">
<Label>Filter Type</Label>
<Select value={filterType} onValueChange={setFilterType}>
<SelectTrigger>
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="sepia">Sepia</SelectItem>
<SelectItem value="contrast">Contrast</SelectItem>
<SelectItem value="brightness">Brightness</SelectItem>
<SelectItem value="grayscale">Grayscale</SelectItem>
<SelectItem value="invert">Invert</SelectItem>
<SelectItem value="blur">Blur</SelectItem>
<SelectItem value="pixelate">Pixelate</SelectItem>
<SelectItem value="huerotation">Hue Rotation</SelectItem>
<SelectItem value="noise">Noise</SelectItem>
</SelectContent>
</Select>
</div>
<div className="space-y-2">
<Label>Filter Intensity</Label>
<Slider
min={0}
max={1}
step={0.01}
value={[filterIntensity]}
onValueChange={([value]) => setFilterIntensity(value)}
/>
</div>
<div className="grid gap-2">
<Button onClick={applyFilter} className="flex-1">
<Wand2 className="mr-2" />
Apply Filter
</Button>
<Button variant="outline" onClick={revertFilters} className="flex-1">
<ImageIcon className="mr-2" />
Revert Filters
</Button>
</div>
</div>
</div>
</div>
)
}
export default ImageCustomization

46
src/components/EachComponent/Customization/OpacityCustomization.jsx Normal file
View file

@ -0,0 +1,46 @@
import ActiveObjectContext from '@/components/Context/activeObject/ObjectContext';
import CanvasContext from '@/components/Context/canvasContext/CanvasContext';
import { Label } from '@/components/ui/label';
import { Slider } from '@/components/ui/slider';
import { useContext, useEffect, useState } from 'react'
const OpacityCustomization = () => {
const { activeObject } = useContext(ActiveObjectContext);
const { canvas } = useContext(CanvasContext);
const [opacity, setOpacity] = useState(0);
useEffect(() => {
if (activeObject) {
setOpacity(activeObject?.opacity);
}
}, [activeObject])
const adjustBackgroundOpacity = (value) => {
setOpacity(value);
if (activeObject) {
activeObject.set("opacity", opacity); // Update the opacity
canvas.renderAll(); // Re-render the canvas
}
};
return (
<div className='grid gap-2 pt-1'>
<Label>
Adjust Opacity:
</Label>
<Slider
value={[opacity]}
min={0.0}
max={1.0}
step={0.01} // Step size for fine control
onValueChange={(value) => {
const newOpacity = value[0]; // Extract slider value
adjustBackgroundOpacity(newOpacity); // Adjust Fabric.js background opacity
}}
/>
</div>
)
}
export default OpacityCustomization

162
src/components/EachComponent/Customization/PositionCustomization.jsx Normal file
View file

@ -0,0 +1,162 @@
import ActiveObjectContext from '@/components/Context/activeObject/ObjectContext';
import CanvasContext from '@/components/Context/canvasContext/CanvasContext';
import { Card, CardContent } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Slider } from '@/components/ui/slider';
import { useContext, useEffect, useState } from 'react';
import { ArrowUp, ArrowDown, ArrowLeft, ArrowRight, ChevronUp, ChevronDown } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
import CollapsibleComponent from './CollapsibleComponent';
const PositionCustomization = () => {
const { canvas } = useContext(CanvasContext)
const { activeObject } = useContext(ActiveObjectContext)
const [objectPosition, setObjectPosition] = useState({ left: 50, top: 50 })
const [isOpen, setIsOpen] = useState(true);
useEffect(() => {
if (activeObject) {
setObjectPosition({
left: Math.round(activeObject.left || 0),
top: Math.round(activeObject.top || 0),
})
}
}, [activeObject])
const updateObjectPosition = (key, value) => {
const updatedPosition = { ...objectPosition, [key]: value }
setObjectPosition(updatedPosition)
if (canvas && activeObject) {
activeObject.set(updatedPosition)
canvas.renderAll()
}
}
const handleInputChange = (key, value) => {
const numValue = parseInt(value, 10)
if (!isNaN(numValue)) {
updateObjectPosition(key, numValue)
}
}
const handleSliderChange = (key, value) => {
updateObjectPosition(key, value[0])
}
const adjustPosition = (key, delta) => {
const newValue = objectPosition[key] + delta
updateObjectPosition(key, newValue)
}
const content = () => {
return (
<CardContent className="space-y-6 p-0">
<div className="space-y-4">
<div className="space-y-1">
<Label htmlFor="position-left">Left</Label>
<div className="flex items-center space-x-2">
<Input
id="position-left"
type="number"
value={objectPosition.left}
onChange={(e) => handleInputChange('left', e.target.value)}
className="w-20"
/>
<Slider
min={0}
max={canvas ? canvas.width : 1000}
step={1}
value={[objectPosition.left]}
onValueChange={(value) => handleSliderChange('left', value)}
className="flex-grow"
/>
</div>
</div>
<div className="space-y-1">
<Label htmlFor="position-top">Top</Label>
<div className="flex items-center space-x-2">
<Input
id="position-top"
type="number"
value={objectPosition.top}
onChange={(e) => handleInputChange('top', e.target.value)}
className="w-20"
/>
<Slider
min={0}
max={canvas ? canvas.height : 1000}
step={1}
value={[objectPosition.top]}
onValueChange={(value) => handleSliderChange('top', value)}
className="flex-grow"
/>
</div>
</div>
</div>
<div className="w-32 h-32 grid grid-cols-3 gap-1 p-2 mx-auto">
<div className="col-start-2">
<Button
onClick={() => adjustPosition('top', -1)}
aria-label="Move up"
variant="outline"
size="icon"
className="w-full h-full"
>
<ArrowUp className="w-4 h-4" />
</Button>
</div>
<div className="col-start-1 row-start-2">
<Button
onClick={() => adjustPosition('left', -1)}
aria-label="Move left"
variant="outline"
size="icon"
className="w-full h-full"
>
<ArrowLeft className="w-4 h-4" />
</Button>
</div>
<div className="col-start-3 row-start-2">
<Button
onClick={() => adjustPosition('left', 1)}
aria-label="Move right"
variant="outline"
size="icon"
className="w-full h-full"
>
<ArrowRight className="w-4 h-4" />
</Button>
</div>
<div className="col-start-2 row-start-3">
<Button
onClick={() => adjustPosition('top', 1)}
aria-label="Move down"
variant="outline"
size="icon"
className="w-full h-full"
>
<ArrowDown className="w-4 h-4" />
</Button>
</div>
</div>
</CardContent>
)
}
return (
<Card className="p-2">
<CollapsibleComponent text={"Position Control"}>
{content()}
</CollapsibleComponent>
</Card>
)
}
export default PositionCustomization

44
src/components/EachComponent/Customization/RotateCustomization.jsx Normal file
View file

@ -0,0 +1,44 @@
import ActiveObjectContext from '@/components/Context/activeObject/ObjectContext';
import CanvasContext from '@/components/Context/canvasContext/CanvasContext';
import { Label } from '@/components/ui/label';
import { Slider } from '@/components/ui/slider';
import { useContext, useState, useEffect } from 'react'
const RotateCustomization = () => {
const { canvas } = useContext(CanvasContext);
const { activeObject } = useContext(ActiveObjectContext);
const [rotationAngle, setRotationAngle] = useState(0);
useEffect(() => {
if (activeObject) {
setRotationAngle(activeObject?.angle)
}
}, [activeObject])
const handleRotation = (e) => {
activeObject.set({ angle: e });
setRotationAngle(e);
canvas.remove(activeObject);
canvas.add(activeObject);
canvas.setActiveObject(activeObject);
canvas.renderAll();
}
return (
<div className="grid gap-2 pb-1">
<Label className="">Rotation Angle: {rotationAngle}°</Label>
<Slider
min={0}
max={360}
step={1}
value={[rotationAngle]}
onValueChange={(value) =>
handleRotation(value[0])
}
/>
</div>
);
};
export default RotateCustomization

94
src/components/EachComponent/Customization/ScaleObjects.jsx Normal file
View file

@ -0,0 +1,94 @@
import ActiveObjectContext from "@/components/Context/activeObject/ObjectContext";
import CanvasContext from "@/components/Context/canvasContext/CanvasContext";
import { Card } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { useContext, useEffect, useState } from "react";
import CollapsibleComponent from "./CollapsibleComponent";
const ScaleObjects = () => {
const { canvas } = useContext(CanvasContext); // Access Fabric.js canvas from context
const { activeObject } = useContext(ActiveObjectContext);
const [scaleX, setScaleX] = useState(1);
const [scaleY, setScaleY] = useState(1);
useEffect(() => {
if (activeObject) {
setScaleX(activeObject?.scaleX);
setScaleY(activeObject?.scaleY);
}
}, [activeObject])
// Handle scaleX changes
const handleScaleXChange = (value) => {
const newScaleX = Math.max(0.001, Math.min(value)); // Clamp scaleX between 0.001 and 3
setScaleX(newScaleX);
if (canvas && activeObject) {
activeObject.scaleX = newScaleX;
canvas.discardActiveObject();
canvas.setActiveObject(activeObject);
canvas.renderAll(); // Re-render the canvas
}
};
// Handle scaleY changes
const handleScaleYChange = (value) => {
const newScaleY = Math.max(0.001, Math.min(value)); // Clamp scaleY between 0.001 and 3
setScaleY(newScaleY);
if (canvas && activeObject) {
activeObject.scaleY = newScaleY;
canvas.discardActiveObject();
canvas.setActiveObject(activeObject);
canvas.renderAll(); // Re-render the canvas
}
};
const content = () => {
return (
<div className="grid grid-cols-2 items-center gap-1">
{/* Scale X Input */}
<div className="flex flex-col space-y-1">
<label className="text-xs font-medium">X: {scaleX.toFixed(3)}</label>
<Input
type="number"
step="0.010"
min="0.001"
value={scaleX}
onChange={(e) => {
const inputValue = parseFloat(e.target.value);
if (!isNaN(inputValue)) {
handleScaleXChange(inputValue);
}
}}
/>
</div>
{/* Scale Y Input */}
<div className="flex flex-col space-y-1">
<label className="text-xs font-medium">Y: {scaleY.toFixed(3)}</label>
<Input
type="number"
step="0.010"
min="0.001"
value={scaleY}
onChange={(e) => {
const inputValue = parseFloat(e.target.value);
if (!isNaN(inputValue)) {
handleScaleYChange(inputValue);
}
}}
/>
</div>
</div>
)
}
return (
<Card className="grid items-center gap-2 p-2">
<CollapsibleComponent text={"Scale Control"}>
{content()}
</CollapsibleComponent>
</Card>
);
};
export default ScaleObjects;

143
src/components/EachComponent/Customization/ShadowCustomization.jsx Normal file
View file

@ -0,0 +1,143 @@
import ActiveObjectContext from "@/components/Context/activeObject/ObjectContext";
import CanvasContext from "@/components/Context/canvasContext/CanvasContext";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Slider } from "@/components/ui/slider";
import { useContext, useEffect, useState } from "react";
import CollapsibleComponent from "./CollapsibleComponent";
const ShadowCustomization = () => {
// get values from context
const { activeObject } = useContext(ActiveObjectContext);
const { canvas } = useContext(CanvasContext);
// state to handle shadow inputs
const [shadowColor, setShadowColor] = useState("");
const [offsetX, setOffsetX] = useState(5);
const [offsetY, setOffsetY] = useState(5);
const [blur, setBlur] = useState(0.5);
const [opacity, setOpacity] = useState(0.5);
useEffect(() => {
if (activeObject) {
setShadowColor(activeObject?.shadow?.color || "#ffffff");
setOffsetX(activeObject?.shadow?.offsetX || 5);
setOffsetY(activeObject?.shadow?.offsetY || 5);
setBlur(activeObject?.shadow?.blur || 0.5);
setOpacity(activeObject?.shadow?.opacity || 0.5);
}
}, [activeObject])
const handleApplyShadow = () => {
if (activeObject && canvas) {
const shadow = {
color: shadowColor,
blur: blur,
offsetX: offsetX,
offsetY: offsetY,
opacity: opacity,
};
activeObject.set("shadow", shadow);
// Ensure object updates and renders
activeObject.dirty = true; // Mark the object as dirty for re-render
canvas.renderAll(); // Trigger canvas re-render
}
}
const handleDisableShadow = () => {
if (activeObject && canvas) {
activeObject.set("shadow", null)
canvas.renderAll()
}
}
const content = () => {
return (
<div>
<div className="space-y-2">
<div>
<Label htmlFor="shadowColor">Shadow Color</Label>
<div className="flex items-center space-x-2">
<Input
id="shadowColor"
type="color"
value={shadowColor}
onChange={(e) => setShadowColor(e.target.value)}
className="w-16 h-10"
/>
<span>{shadowColor}</span>
</div>
</div>
<div>
<Label>Offset X: {offsetX}px</Label>
<Slider
value={[offsetX]}
onValueChange={(value) => setOffsetX(value[0])}
max={50}
min={-50}
step={1}
/>
</div>
<div>
<Label>Offset Y: {offsetY}px</Label>
<Slider
value={[offsetY]}
onValueChange={(value) => setOffsetY(value[0])}
max={50}
min={-50}
step={1}
/>
</div>
<div>
<Label>Blur: {blur}px</Label>
<Slider
value={[blur]}
onValueChange={(value) => setBlur(value[0])}
max={50}
min={0}
step={1}
/>
</div>
<div>
<Label>Opacity: {opacity}</Label>
<Slider
value={[opacity]}
onValueChange={(value) => setOpacity(value[0])}
max={1}
min={0}
step={0.1}
/>
</div>
</div>
<div className="w-32 h-32 bg-white rounded-md flex items-center justify-center mx-auto border-2 my-4" style={{
boxShadow: `${offsetX}px ${offsetY}px ${blur}px ${shadowColor}${Math.round(opacity * 255).toString(16).padStart(2, '0')}`
}}>
<span className="text-4xl">A</span>
</div>
<div className="grid gap-2">
<Button onClick={handleApplyShadow}>Apply Shadow</Button>
<Button variant="outline" onClick={handleDisableShadow}>Disable Shadow</Button>
</div>
</div>
)
}
return (
<Card className='p-2'>
<CollapsibleComponent text={"Shadow Control"}>
{content()}
</CollapsibleComponent>
</Card>
);
};
export default ShadowCustomization;

85
src/components/EachComponent/Customization/SkewCustomization.jsx Normal file
View file

@ -0,0 +1,85 @@
import ActiveObjectContext from '@/components/Context/activeObject/ObjectContext';
import CanvasContext from '@/components/Context/canvasContext/CanvasContext';
import { Card } from '@/components/ui/card';
import { Label } from '@/components/ui/label';
import { Slider } from '@/components/ui/slider';
import { useContext, useEffect, useState } from 'react'
import CollapsibleComponent from './CollapsibleComponent';
const SkewCustomization = () => {
const { canvas } = useContext(CanvasContext);
const { activeObject } = useContext(ActiveObjectContext);
const [skewX, setSkewX] = useState(0);
const [skewY, setSkewY] = useState(0);
useEffect(() => {
if (activeObject) {
setSkewX(activeObject?.skewX);
setSkewY(activeObject?.skewY);
}
}, [activeObject])
// Update skewX directly
const handleSkewXChange = (value) => {
setSkewX(value[0]);
if (activeObject && canvas) {
activeObject.set({ skewX: value[0] });
canvas.discardActiveObject();
canvas.setActiveObject(activeObject);
canvas.renderAll();
}
};
// Update skewY directly
const handleSkewYChange = (value) => {
setSkewY(value[0]);
if (activeObject && canvas) {
activeObject.set({ skewY: value[0] });
canvas.discardActiveObject();
canvas.setActiveObject(activeObject);
canvas.renderAll();
}
};
const content = () => {
return (
<div>
<div className="w-full">
<Label className="mb-2">X: {skewX}°</Label>
<Slider
min={-90}
max={90}
step={1}
value={[skewX]}
onValueChange={(value) => {
handleSkewXChange(value)
}}
/>
</div>
<div className="w-full">
<Label className="mb-2">Y: {skewY}°</Label>
<Slider
min={-90}
max={90}
step={1}
value={[skewY]}
onValueChange={(value) => {
handleSkewYChange(value)
}}
/>
</div>
</div>
)
}
return (
<Card className="p-2">
<CollapsibleComponent text={"Skew Control"}>
{content()}
</CollapsibleComponent>
</Card>
)
}
export default SkewCustomization

367
src/components/EachComponent/Customization/StrokeCustomization.jsx Normal file
View file

@ -0,0 +1,367 @@
import { useContext, useState, useRef, useEffect } from 'react'
import { fabric } from 'fabric'
import ActiveObjectContext from '@/components/Context/activeObject/ObjectContext'
import CanvasContext from '@/components/Context/canvasContext/CanvasContext'
import { Card, CardContent } from '@/components/ui/card'
import { Label } from '@/components/ui/label'
import { Input } from '@/components/ui/input'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { Slider } from '@/components/ui/slider'
import { Button } from '@/components/ui/button'
import { Paintbrush, ContrastIcon as Gradient } from 'lucide-react'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import CollapsibleComponent from './CollapsibleComponent'
const StrokeCustomization = () => {
const { activeObject } = useContext(ActiveObjectContext);
const { canvas } = useContext(CanvasContext);
const previewRef = useRef(null);
const [strokeWidth, setStrokeWidth] = useState(0);
const [strokeColor, setStrokeColor] = useState("#000000");
const [gradientStrokeColors, setGradientStrokeColors] = useState({
color1: "#f97316",
color2: "#e26286",
});
const [colorType, setColorType] = useState("color");
const [gradientDirection, setGradientDirection] = useState("to bottom");
// Utility function to handle styles of objects
const handleObjectStyle = (object) => {
// Determine fill type (solid or gradient)
if (object.stroke) {
if (typeof object.stroke === "string") {
setColorType("color");
setStrokeColor(object.stroke); // Solid color fill
} else if (object.stroke.colorStops) {
setColorType("gradient");
setGradientStrokeColors({
color1: object.stroke.colorStops[0]?.color || "#f97316",
color2: object.stroke.colorStops[1]?.color || "#e26286",
});
}
}
// Handle stroke width
if (object.strokeWidth) {
setStrokeWidth(object.strokeWidth || 0);
}
};
// Recursively process group objects
const processGroupObjects = (group) => {
group._objects.forEach((obj) => {
if (obj.type === "group") {
processGroupObjects(obj); // Handle nested groups
} else {
handleObjectStyle(obj); // Apply styles to each object
}
});
};
// Effect to get previous values from active object
useEffect(() => {
if (activeObject) {
if (activeObject.type === "group") {
processGroupObjects(activeObject); // Process grouped objects
} else {
handleObjectStyle(activeObject); // Process single object
}
}
}, [activeObject]);
const updatePreview = () => {
if (!previewRef.current) return;
const previewStyle = {
width: '80px',
height: '80px',
border: `${strokeWidth}px solid`,
borderRadius: '4px',
};
if (colorType === "color") {
previewStyle.borderColor = strokeColor;
} else {
previewStyle.borderImage = `linear-gradient(${gradientDirection}, ${gradientStrokeColors.color1}, ${gradientStrokeColors.color2}) 1`;
}
Object.assign(previewRef.current.style, previewStyle);
};
useEffect(() => {
updatePreview();
}, [strokeWidth, strokeColor, gradientStrokeColors, colorType, gradientDirection]);
const handleStrokeWidthChange = (value) => {
setStrokeWidth(value);
};
const handleColorTypeChange = (type) => {
setColorType(type);
};
const handleStrokeColorChange = (e) => {
setStrokeColor(e.target.value);
};
const handleGradientColorChange = (key, e) => {
setGradientStrokeColors(prev => ({ ...prev, [key]: e.target.value }));
};
const applyStrokeStyle = () => {
if (!activeObject || activeObject.type === "line") return;
const width = activeObject?.width || 0;
const height = activeObject?.height || 0;
const coords = {
"to bottom": { x1: 0, y1: 0, x2: 0, y2: height },
"to top": { x1: 0, y1: height, x2: 0, y2: 0 },
"to right": { x1: 0, y1: 0, x2: width, y2: 0 },
"to left": { x1: width, y1: 0, x2: 0, y2: 0 },
};
const directionCoords = coords[gradientDirection];
const applyStrokeStyle = (object) => {
object.set("strokeWidth", strokeWidth);
if (colorType === "color") {
object.set("stroke", strokeColor);
} else if (colorType === "gradient") {
const gradient = new fabric.Gradient({
type: "linear",
gradientUnits: "pixels",
coords: directionCoords,
colorStops: [
{ offset: 0, color: gradientStrokeColors.color1 },
{ offset: 1, color: gradientStrokeColors.color2 },
],
});
object.set("stroke", gradient);
}
};
const processGroupObjects = (group) => {
group._objects.forEach((obj) => {
if (obj.type === "group") {
processGroupObjects(obj);
} else {
applyStrokeStyle(obj);
}
});
};
if (activeObject.type === "group") {
processGroupObjects(activeObject);
} else {
applyStrokeStyle(activeObject);
}
canvas.renderAll();
};
const revertStroke = () => {
if (!activeObject) return;
const revertObject = (object) => {
object.set("strokeWidth", 0);
object.set("stroke", null);
};
const processGroupObjects = (group) => {
group._objects.forEach((obj) => {
if (obj.type === "group") {
processGroupObjects(obj);
} else {
revertObject(obj);
}
});
};
if (activeObject.type === "group") {
processGroupObjects(activeObject);
} else {
revertObject(activeObject);
}
canvas.renderAll();
};
const content = () => {
return (
<CardContent className="p-0 mb-2">
<div className="space-y-2">
<div>
<Label htmlFor="stroke-width">Stroke Width</Label>
<div className="flex items-center space-x-2">
<Slider
id="stroke-width"
min={0}
max={50}
step={1}
value={[strokeWidth]}
onValueChange={([value]) => handleStrokeWidthChange(value)}
className="flex-grow"
/>
<Input
type="number"
min={0}
max={50}
value={strokeWidth}
onChange={(e) => handleStrokeWidthChange(Number(e.target.value))}
className="w-16"
/>
</div>
</div>
<div>
<Tabs value={colorType} onValueChange={(value) => handleColorTypeChange(value)}>
<TabsList className="grid w-full grid-cols-2">
<TabsTrigger value="color">
<Paintbrush className="w-4 h-4 mr-2" />
Solid
</TabsTrigger>
<TabsTrigger value="gradient">
<Gradient className="w-4 h-4 mr-2" />
Gradient
</TabsTrigger>
</TabsList>
<TabsContent value="color" className="space-y-4">
<div className="space-y-1">
<Label htmlFor="stroke-color">Stroke Color</Label>
<div className="flex items-center space-x-2">
<div className="relative">
<Input
id="stroke-color"
type="color"
value={strokeColor}
onChange={handleStrokeColorChange}
className="w-10 h-10 p-1 rounded-md cursor-pointer"
/>
<div
className="absolute inset-0 pointer-events-none"
style={{ backgroundColor: strokeColor, borderRadius: '0.375rem' }}
></div>
</div>
<Input
type="text"
value={strokeColor}
onChange={handleStrokeColorChange}
className="flex-grow"
/>
</div>
</div>
</TabsContent>
<TabsContent value="gradient" className="space-y-4">
<div className="space-y-1">
<Label htmlFor="gradient-direction">Gradient Direction</Label>
<Select value={gradientDirection} onValueChange={setGradientDirection}>
<SelectTrigger id="gradient-direction">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="to bottom">Top to Bottom</SelectItem>
<SelectItem value="to top">Bottom to Top</SelectItem>
<SelectItem value="to right">Left to Right</SelectItem>
<SelectItem value="to left">Right to Left</SelectItem>
</SelectContent>
</Select>
</div>
<div className="space-y-1">
<Label htmlFor="gradient-color-1">Gradient Color 1</Label>
<div className="flex items-center space-x-2">
<div className="relative">
<Input
id="gradient-color-1"
type="color"
value={gradientStrokeColors.color1}
onChange={(e) => handleGradientColorChange('color1', e)}
className="w-10 h-10 p-1 rounded-md cursor-pointer"
/>
<div
className="absolute inset-0 pointer-events-none"
style={{ backgroundColor: gradientStrokeColors.color1, borderRadius: '0.375rem' }}
></div>
</div>
<Input
type="text"
value={gradientStrokeColors.color1}
onChange={(e) => handleGradientColorChange('color1', e)}
className="flex-grow"
/>
</div>
</div>
<div className="space-y-1">
<Label htmlFor="gradient-color-2">Gradient Color 2</Label>
<div className="flex items-center space-x-2">
<div className="relative">
<Input
id="gradient-color-2"
type="color"
value={gradientStrokeColors.color2}
onChange={(e) => handleGradientColorChange('color2', e)}
className="w-10 h-10 p-1 rounded-md cursor-pointer"
/>
<div
className="absolute inset-0 pointer-events-none"
style={{ backgroundColor: gradientStrokeColors.color2, borderRadius: '0.375rem' }}
></div>
</div>
<Input
type="text"
value={gradientStrokeColors.color2}
onChange={(e) => handleGradientColorChange('color2', e)}
className="flex-grow"
/>
</div>
</div>
</TabsContent>
</Tabs>
</div>
<div className="space-y-1">
<Label>Preview</Label>
<div className="border rounded-md p-2 flex items-center justify-center" style={{ height: '120px' }}>
<div ref={previewRef} style={{ width: '80px', height: '80px' }}></div>
</div>
</div>
<div className="grid gap-1">
<Button onClick={applyStrokeStyle}>
Apply Stroke
</Button>
<Button onClick={revertStroke} variant="outline">
Revert Stroke
</Button>
</div>
</div>
</CardContent>
)
}
return (
<Card className="p-2">
<CollapsibleComponent text={"Stroke Control"}>
{content()}
</CollapsibleComponent>
</Card>
);
};
export default StrokeCustomization;

280
src/components/EachComponent/Customization/TextCustomization.jsx Normal file
View file

@ -0,0 +1,280 @@
import ActiveObjectContext from '@/components/Context/activeObject/ObjectContext';
import CanvasContext from '@/components/Context/canvasContext/CanvasContext';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Slider } from '@/components/ui/slider';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { useContext, useEffect, useState } from 'react'
import { AlignLeft, AlignCenter, AlignRight, Bold, Italic, Underline, Strikethrough } from "lucide-react";
import CollapsibleComponent from './CollapsibleComponent';
const fonts = [
'Roboto', 'Open Sans', 'Lato', 'Montserrat', 'Raleway', 'Poppins', 'Merriweather',
'Playfair Display', 'Nunito', 'Oswald', 'Source Sans Pro', 'Ubuntu', 'Noto Sans',
'Work Sans', 'Bebas Neue', 'Arimo', 'PT Sans', 'PT Serif', 'Titillium Web',
'Fira Sans', 'Karla', 'Josefin Sans', 'Cairo', 'Rubik', 'Mulish', 'IBM Plex Sans',
'Quicksand', 'Cabin', 'Heebo', 'Exo 2', 'Manrope', 'Jost', 'Anton', 'Asap',
'Baloo 2', 'Barlow', 'Cantarell', 'Chivo', 'Inter', 'Dosis', 'Crimson Text',
'Amatic SC', 'ABeeZee', 'Raleway Dots', 'Pacifico', 'Orbitron', 'Varela Round',
'Acme', 'Teko',
];
const TextCustomization = () => {
// get values from context
const { activeObject } = useContext(ActiveObjectContext);
const { canvas } = useContext(CanvasContext);
const [text, setText] = useState('');
const [fontFamily, setFontFamily] = useState('Arial');
const [fontSize, setFontSize] = useState(20);
const [fontStyle, setFontStyle] = useState('normal');
const [fontWeight, setFontWeight] = useState('normal');
const [lineHeight, setLineHeight] = useState(1.16);
const [charSpacing, setCharSpacing] = useState(0);
const [underline, setUnderline] = useState(false);
const [linethrough, setLinethrough] = useState(false);
const [textAlign, setTextAlign] = useState('left');
useEffect(() => {
if (activeObject?.type === "i-text") {
setText(activeObject?.text || '');
setFontFamily(activeObject?.fontFamily || 'Arial');
setFontSize(activeObject?.fontSize || 20);
setFontStyle(activeObject?.fontStyle || 'normal');
setFontWeight(activeObject?.fontWeight || 'normal');
setLineHeight(activeObject?.lineHeight || 1.16);
setCharSpacing(activeObject?.charSpacing || 0);
setUnderline(activeObject?.underline || false);
setLinethrough(activeObject?.linethrough || false);
setTextAlign(activeObject?.textAlign || 'left');
}
}, [activeObject])
const updateActiveObject = (properties) => {
if (activeObject?.type === "i-text") {
activeObject.set(properties)
canvas?.renderAll()
}
}
const handleTextChange = (newText) => {
setText(newText)
updateActiveObject({ text: newText })
}
const handleFontFamilyChange = (newFontFamily) => {
setFontFamily(newFontFamily)
updateActiveObject({ fontFamily: newFontFamily })
}
const handleFontSizeChange = (newFontSize) => {
setFontSize(newFontSize)
updateActiveObject({ fontSize: newFontSize })
}
const handleTextAlignChange = (newTextAlign) => {
setTextAlign(newTextAlign)
updateActiveObject({ textAlign: newTextAlign })
}
const handleFontStyleChange = () => {
const newFontStyle = fontStyle === 'normal' ? 'italic' : 'normal'
setFontStyle(newFontStyle)
updateActiveObject({ fontStyle: newFontStyle })
}
const handleFontWeightChange = () => {
const newFontWeight = fontWeight === 'normal' ? 'bold' : 'normal'
setFontWeight(newFontWeight)
updateActiveObject({ fontWeight: newFontWeight })
}
const handleLineHeightChange = (newLineHeight) => {
setLineHeight(newLineHeight)
updateActiveObject({ lineHeight: newLineHeight })
}
const handleCharSpacingChange = (newCharSpacing) => {
setCharSpacing(newCharSpacing)
updateActiveObject({ charSpacing: newCharSpacing })
}
const handleUnderlineChange = () => {
const newUnderline = !underline
setUnderline(newUnderline)
updateActiveObject({ underline: newUnderline })
}
const handleLinethroughChange = () => {
const newLinethrough = !linethrough
setLinethrough(newLinethrough)
updateActiveObject({ linethrough: newLinethrough })
}
const content = () => {
if (!(activeObject?.type === "i-text")) {
return (
<div className='mt-2'>
<Card>
<CardContent className="p-4">
<p className="text-center text-gray-500">Select a text object to customize</p>
</CardContent>
</Card>
</div>
)
}
else {
return (
<CardContent className="p-2">
<Tabs defaultValue="text" className="w-full">
<TabsList className="grid w-full grid-cols-2">
<TabsTrigger value="text">Text</TabsTrigger>
<TabsTrigger value="style">Style</TabsTrigger>
</TabsList>
<TabsContent value="text" className="space-y-1">
<div className="space-y-1">
<Label htmlFor="text-content">Text Content</Label>
<Input
id="text-content"
value={text}
onChange={(e) => handleTextChange(e.target.value)}
/>
</div>
<div className="space-y-1">
<Label>Font Family</Label>
<Select value={fontFamily} onValueChange={handleFontFamilyChange}>
<SelectTrigger>
<SelectValue placeholder="Select a font" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
{fonts.map((font) => (
<SelectItem style={{ fontFamily: font }} key={font} value={font}>
{font}
</SelectItem>
))}
</SelectGroup>
</SelectContent>
</Select>
</div>
<div className="space-y-1">
<Label>Font Size</Label>
<div className="flex items-center space-x-2">
<Slider
value={[fontSize]}
onValueChange={([value]) => handleFontSizeChange(value)}
min={8}
max={72}
step={1}
className="flex-grow"
/>
<Input
type="number"
value={fontSize}
onChange={(e) => handleFontSizeChange(parseInt(e.target.value, 10) || 16)}
className="w-16"
/>
</div>
</div>
</TabsContent>
<TabsContent value="style" className="space-y-4">
<div className="flex items-center justify-between">
<Label>Text Alignment</Label>
<div className="flex space-x-1">
<Button
variant={textAlign === 'left' ? 'default' : 'outline'}
size="icon"
onClick={() => handleTextAlignChange('left')}
>
<AlignLeft className="h-4 w-4" />
</Button>
<Button
variant={textAlign === 'center' ? 'default' : 'outline'}
size="icon"
onClick={() => handleTextAlignChange('center')}
>
<AlignCenter className="h-4 w-4" />
</Button>
<Button
variant={textAlign === 'right' ? 'default' : 'outline'}
size="icon"
onClick={() => handleTextAlignChange('right')}
>
<AlignRight className="h-4 w-4" />
</Button>
</div>
</div>
<div className="flex items-center justify-between">
<Label>Text Style</Label>
<div className="flex space-x-1">
<Button
variant={fontWeight === 'bold' ? 'default' : 'outline'}
size="icon"
onClick={handleFontWeightChange}
>
<Bold className="h-4 w-4" />
</Button>
<Button
variant={fontStyle === 'italic' ? 'default' : 'outline'}
size="icon"
onClick={handleFontStyleChange}
>
<Italic className="h-4 w-4" />
</Button>
<Button
variant={underline ? 'default' : 'outline'}
size="icon"
onClick={handleUnderlineChange}
>
<Underline className="h-4 w-4" />
</Button>
<Button
variant={linethrough ? 'default' : 'outline'}
size="icon"
onClick={handleLinethroughChange}
>
<Strikethrough className="h-4 w-4" />
</Button>
</div>
</div>
<div className="space-y-2">
<Label>Line Height</Label>
<Slider
value={[lineHeight]}
onValueChange={([value]) => handleLineHeightChange(value)}
min={0.5}
max={3}
step={0.1}
/>
</div>
<div className="space-y-2">
<Label>Character Spacing</Label>
<Slider
value={[charSpacing]}
onValueChange={([value]) => handleCharSpacingChange(value)}
min={-20}
max={100}
step={1}
/>
</div>
</TabsContent>
</Tabs>
</CardContent>
)
}
}
return (
<Card className="p-2">
<CollapsibleComponent text={"Text Control"}>
{content()}
</CollapsibleComponent>
</Card>
)
}
export default TextCustomization

86
src/components/EachComponent/CustomizeShape.jsx Normal file
View file

@ -0,0 +1,86 @@
import { Separator } from '../ui/separator';
import FlipCustomization from './Customization/FlipCustomization';
import RotateCustomization from './Customization/RotateCustomization';
import SkewCustomization from './Customization/SkewCustomization';
import ShadowCustomization from './Customization/ShadowCustomization';
import TextCustomization from './Customization/TextCustomization';
import AddImageIntoShape from './Customization/AddImageIntoShape';
import ScaleObjects from './Customization/ScaleObjects';
import ApplyColor from './ApplyColor';
import OpacityCustomization from './Customization/OpacityCustomization';
import StrokeCustomization from './Customization/StrokeCustomization';
import { useContext } from 'react';
import CanvasContext from '../Context/canvasContext/CanvasContext';
import { Card } from '../ui/card';
import PositionCustomization from './Customization/PositionCustomization';
import CollapsibleComponent from './Customization/CollapsibleComponent';
import ImageCustomization from './Customization/ImageCustomization';
const CustomizeShape = () => {
const { canvas } = useContext(CanvasContext);
const activeObject = canvas?.getActiveObject();
const activeObjectType = activeObject?.type;
const hasClipPath = !!activeObject?.clipPath;
const customClipPath = activeObject?.isClipPath;
// Return message if no active object is selected
if (!activeObject) {
return <p className='text-sm font-semibold'>No active object found</p>;
}
return (
<div className='p-1'>
{/* Apply fill and background color */}
{(!hasClipPath && activeObjectType !== 'group' && !customClipPath) && <ApplyColor />}
{/* Apply stroke and stroke color */}
{(activeObjectType !== 'group' && !customClipPath) && <><StrokeCustomization /><Separator className="my-2" /></>}
<PositionCustomization />
<Separator className="my-2" />
{/* Controls for opacity, flip, and rotation */}
<Card className="p-2">
<CollapsibleComponent text={"Opacity, Flip, Rotate Control"}>
<div className="space-y-2">
<OpacityCustomization />
<FlipCustomization />
<RotateCustomization />
</div>
</CollapsibleComponent>
</Card>
<Separator className="my-2" />
{/* Skew Customization */}
<SkewCustomization />
<Separator className="my-2" />
{/* Scale Objects */}
<ScaleObjects />
<Separator className="my-2" />
{/* Shadow Customization */}
{activeObjectType !== 'group' && <ShadowCustomization />}
<Separator className="my-2" />
{/* Text Customization */}
{activeObjectType === 'text' && <TextCustomization />}
<Separator className="my-2" />
{/* Add image into shape */}
<AddImageIntoShape />
<Separator className="my-2" />
{/* Image Customization */}
{(activeObjectType === 'image' || hasClipPath) && (
<Card className="p-2">
<CollapsibleComponent text={"Image Customization"}>
<ImageCustomization />
</CollapsibleComponent>
</Card>
)}
</div>
)
}
export default CustomizeShape

128
src/components/EachComponent/Icons/AllIcons.jsx Normal file
View file

@ -0,0 +1,128 @@
import { useContext, useState } from "react";
import { FixedSizeGrid as Grid } from "react-window";
import { Card, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import * as lucideIcons from "lucide-react";
import CanvasContext from "@/components/Context/canvasContext/CanvasContext";
import { fabric } from 'fabric';
import ActiveObjectContext from "@/components/Context/activeObject/ObjectContext";
const AllIconsPage = () => {
const [search, setSearch] = useState("");
const { canvas } = useContext(CanvasContext);
const { setActiveObject } = useContext(ActiveObjectContext);
// Assume icons is already defined as shown previously, and filtered is created based on the search query
const icons = Object.entries(lucideIcons)?.filter(([name, Icon]) =>
!name.includes("Icon") && Icon?.$$typeof
);
const filtered = icons.filter(([name, Icon]) =>
name.toLowerCase().includes(search.toLowerCase())
);
const handleSearch = (e) => {
setSearch(e.target.value);
};
const handleIcon = (e) => {
// Check if the target is an SVG or path
if (e.target.tagName.toLowerCase() === 'svg') {
// Serialize the SVG element to a string and pass it
const svgString = new XMLSerializer().serializeToString(e.target);
handleAddIcon(svgString);
} else {
window.alert('The target is a path element! Select the full icon.');
}
};
const handleAddIcon = (svgString) => {
if (!canvas) {
console.error("Canvas is not initialized.");
return;
}
if (!svgString) {
console.error("Failed to retrieve SVG string from the icon.");
return;
}
fabric.loadSVGFromString(svgString, (objects, options) => {
if (!objects || !options) {
console.error("Failed to parse SVG.");
return;
}
// Recursively set fill color for all objects
const setFillColor = (obj, color) => {
if (obj.type === 'group' && obj._objects) {
obj._objects.forEach((child) => setFillColor(child, color));
} else {
obj.set('stroke', color);
}
};
objects.forEach((obj) => setFillColor(obj, '#FFA500')); // Set fill color to orange
const iconGroup = fabric.util.groupSVGElements(objects, options);
iconGroup.set({
left: 100,
top: 100,
originX: 'center',
originY: 'center',
scaleX: 6,
scaleY: 6,
});
canvas.add(iconGroup);
canvas.setActiveObject(iconGroup);
setActiveObject(iconGroup);
canvas.renderAll();
});
};
// Cell component for rendering each icon
const Cell = ({ columnIndex, rowIndex, style }) => {
const index = rowIndex * 3 + columnIndex; // Adjust columns as needed (3 columns in this case)
if (index >= filtered.length) return null; // Handle out-of-bounds index
const [name, Icon] = filtered[index];
// Define cell-specific styles
return (
<div style={style}>
<div className="bg-red-50 rounded-md ml-1 p-1">
<Icon size={32} className="cursor-pointer bg-primary rounded-md text-white p-1" onClick={handleIcon} />
<p className="text-xs truncate w-full overflow-hidden whitespace-nowrap">{name}</p>
</div>
</div>
);
};
return (
<Card className="flex flex-col px-2 py-2 gap-1 scrollbar-thin scrollbar-thumb-secondary scrollbar-track-white">
<CardTitle className="flex items-center flex-wrap my-1">All Icons</CardTitle>
<Input
type="text"
placeholder="Search icons..."
onChange={handleSearch}
className="border p-2 mb-0 w-full"
/>
<Card className="flex items-center justify-center py-1">
<Grid
columnCount={4}
columnWidth={50}
height={380}
rowCount={Math.ceil(filtered.length / 4)}
rowHeight={70}
width={240}
className="scrollbar-thin scrollbar-thumb-secondary scrollbar-track-white"
>
{Cell}
</Grid>
</Card>
</Card>
)
};
export default AllIconsPage;

87
src/components/EachComponent/RoundedShapes/RoundedShape.jsx Normal file
View file

@ -0,0 +1,87 @@
import React, { useContext } from 'react'
import { ArrowBigRight, Diamond, Hexagon, Octagon, Pentagon, Sparkle, Square, Star, Triangle } from 'lucide-react'
import ReactDOMServer from "react-dom/server";
import { fabric } from 'fabric';
import CanvasContext from '@/components/Context/canvasContext/CanvasContext';
import ActiveObjectContext from '@/components/Context/activeObject/ObjectContext';
import { Card } from '@/components/ui/card';
import { Separator } from '@/components/ui/separator';
const RoundedShape = () => {
const { canvas } = useContext(CanvasContext);
const { setActiveObject } = useContext(ActiveObjectContext);
const shapes = [
{ icon: <ArrowBigRight />, name: 'Arrow' },
{ icon: <Diamond />, name: 'Diamond' },
{ icon: <Hexagon />, name: 'Hexagon' },
{ icon: <Octagon />, name: 'Octagon' },
{ icon: <Pentagon />, name: 'Pentagon' },
{ icon: <Sparkle />, name: 'Sparkle' },
{ icon: <Square />, name: 'Square' },
{ icon: <Star />, name: 'Star' },
{ icon: <Triangle />, name: 'Triangle' },
];
const addObject = (icon) => {
if (!canvas) {
console.error("Canvas is not initialized.");
return;
}
const svgString = ReactDOMServer.renderToStaticMarkup(icon);
if (!svgString) {
console.error("Failed to retrieve SVG string from icon.");
return;
}
// Load SVG onto the Fabric.js canvas
fabric.loadSVGFromString(svgString, (objects, options) => {
if (!objects || !options) {
console.error("Failed to parse SVG.");
return;
}
const iconGroup = fabric.util.groupSVGElements(objects, options);
iconGroup.set({
left: canvas.width / 2,
top: canvas.height / 2,
originX: 'center',
originY: 'center',
fill: "#f09b0a",
scaleX: 6,
scaleY: 6,
strokeWidth: 0,
// rx: 0,
// x: 0,
// y: 0,
});
canvas.add(iconGroup);
canvas.setActiveObject(iconGroup);
setActiveObject(iconGroup)
canvas.renderAll();
});
};
return (
<Card className="p-2 bg-gradient-to-br from-white to-gray-100 rounded-xl shadow-lg">
<h2 className="font-semibold text-sm mb-1">Rounded Shapes</h2>
<Separator className="my-2" />
<div className="grid grid-cols-3 gap-y-4 gap-x-2">
{shapes.map((shape, index) => (
<button
key={index}
className="group flex flex-col items-center justify-center p-1 bg-secondary rounded-lg shadow-md hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 hover:scale-105"
onClick={() => addObject(shape.icon)}
>
<div className="text-orange-600 group-hover:text-orange-500 transition-colors duration-300">
{React.cloneElement(shape.icon, { size: 36 })}
</div>
{/* <span className="text-xs font-bold text-gray-700 group-hover:text-blue-600 transition-colors duration-300">{shape.name}</span> */}
</button>
))}
</div>
</Card>
)
}
export default RoundedShape

174
src/components/EachComponent/Shapes/PlainShapes.jsx Normal file
View file

@ -0,0 +1,174 @@
import ActiveObjectContext from '@/components/Context/activeObject/ObjectContext';
import CanvasContext from '@/components/Context/canvasContext/CanvasContext';
import React, { useContext } from 'react'
import ReactDOMServer from "react-dom/server";
import { fabric } from 'fabric';
import { Card } from '@/components/ui/card';
import { Separator } from '@/components/ui/separator';
import { Badge, Circle, Heart, Shield } from 'lucide-react';
const PlainShapes = () => {
const { canvas } = useContext(CanvasContext);
const { setActiveObject } = useContext(ActiveObjectContext);
const shapes = [
{
icon: <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" className="lucide lucide-arrow-big-left" fill='orange'>
<path d="M18 15H12v4L5 12l7-7v4h6v6z" />
</svg>, name: 'Arrow'
},
{ icon: <Badge />, name: 'Badge' },
{ icon: <Circle />, name: 'Circle' },
{ icon: <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill='orange' className="lucide lucide-club"><path d="M17.28 9.05a5.5 5.5 0 1 0-10.56 0A5.5 5.5 0 1 0 12 17.66a5.5 5.5 0 1 0 5.28-8.6Z" /></svg>, name: 'Club' },
{
icon: <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#ea580c" strokeWidth="2" strokeLinecap="butt" strokeLinejoin="miter" className="lucide lucide-cross">
<path d="M4 12h16M12 4v16" />
</svg>, name: 'Cross'
},
{
icon: <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="orange" className="lucide lucide-diamond">
<path d="M12 2L22 12L12 22L2 12Z" />
</svg>, name: 'Diamond'
},
{ icon: <Heart />, name: 'Heart' },
{
icon: <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="orange" className="lucide lucide-hexagon">
<path d="M12 2L21 8v8l-9 6-9-6V8L12 2z" />
</svg>, name: 'Hexagon'
},
{
icon: <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="white" stroke="#ea580c" strokeWidth="2" strokeLinecap="butt" strokeLinejoin="miter" className="lucide lucide-arrow-right">
<path d="M5 12h14" />
</svg>, name: 'Line'
},
{
icon: <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="orange" stroke="#ec7e7e" strokeWidth="0" className="lucide lucide-octagon">
<path d="M4 8 L8 4 H16 L20 8 V16 L16 20 H8 L4 16 Z" />
</svg>, name: 'Octagon'
},
{
icon: <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="orange" className="lucide lucide-pentagon">
<path d="M2 11 L12 2 L22 11 L19 21 L5 21 Z" />
</svg>, name: 'Pentagon'
},
{
icon: <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill='orange' className="lucide lucide-rectangle-horizontal">
<path d="M2 6h20v12H2z" />
</svg>, name: 'Rectangle'
},
{
icon: <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="orange" className="lucide lucide-triangle-right">
<path d="M2 4 L22 20 L2 20 Z" />
</svg>, name: 'Right Triangle'
},
{
icon: <Shield fill="orange" stroke="0" />, name: 'Shield'
},
{
icon: <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="orange" className="lucide lucide-square">
<path d="M3 3h18v18H3z" />
</svg>, name: 'Rectangle Square'
},
{
icon: <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="orange" className="lucide lucide-star">
<path d="M12 2 L14.85 8.9 L22 10 L16.5 14.5 L18 21 L12 17.5 L6 21 L7.5 14.5 L2 10 L9.15 8.9 Z" />
</svg>, name: 'Star'
},
{
icon: <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="orange" className="lucide lucide-triangle">
<path d="M12 4L4 20h16L12 4Z" />
</svg>, name: 'Triangle'
},
{
icon: <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="orange" className="lucide lucide-rectangle-vertical scale-125">
<path d="M6 2h12v20H6z" />
</svg>, name: 'Rectangle Vertical'
},
];
const addObject = (icon, name) => {
if (!canvas) {
console.error("Canvas is not initialized.");
return;
}
const svgString = ReactDOMServer.renderToStaticMarkup(icon);
if (!svgString) {
console.error("Failed to retrieve SVG string from icon.");
return;
}
// Load SVG onto the Fabric.js canvas
fabric.loadSVGFromString(svgString, (objects, options) => {
if (!objects || !options) {
console.error("Failed to parse SVG.");
return;
}
const iconGroup = fabric.util.groupSVGElements(objects, options);
iconGroup.set({
left: canvas.width / 2,
top: canvas.height / 2,
originX: 'center',
originY: 'center',
fill: "#f09b0a",
scaleX: 6,
scaleY: 6,
strokeWidth: 0,
// rx: 0,
// x: 0,
// y: 0,
});
if (name === "Line") {
iconGroup.set({
strokeWidth: 2,
})
}
canvas.add(iconGroup);
canvas.setActiveObject(iconGroup);
setActiveObject(iconGroup)
canvas.renderAll();
});
};
return (
<Card className="p-2 bg-gradient-to-br from-white to-gray-100 rounded-xl shadow-lg">
<h2 className="font-semibold text-sm mb-1">Plain Shapes</h2>
<Separator className="my-2" />
<div className="grid grid-cols-3 gap-y-4 gap-x-2">
{shapes.map((shape, index) => (
<button
key={index}
className="group flex flex-col items-center justify-center p-1 bg-secondary rounded-lg shadow-md hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 hover:scale-105"
onClick={() => addObject(shape.icon, shape.name)}
>
<div className="text-orange-600 group-hover:text-orange-500 transition-colors duration-300">
{React.cloneElement(shape.icon, { size: 36, fill: "#ea580c" })}
</div>
{/* <span className="text-xs font-bold text-gray-700 group-hover:text-blue-600 transition-colors duration-300">{shape.name}</span> */}
</button>
))}
</div>
</Card>
)
}
export default PlainShapes

267
src/components/EachComponent/UploadImage.jsx Normal file
View file

@ -0,0 +1,267 @@
import { useContext, useRef, useState } from 'react'
import CanvasContext from '../Context/canvasContext/CanvasContext'
import { Button } from '@/components/ui/button'
import { fabric } from 'fabric'
import { ImageIcon, Trash2 } from 'lucide-react'
import { Label } from '@/components/ui/label'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import Resizer from "react-image-file-resizer"
import { Slider } from '@/components/ui/slider'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { useDropzone } from 'react-dropzone'
import ImageCustomization from './Customization/ImageCustomization'
import { Separator } from '../ui/separator'
import ActiveObjectContext from '../Context/activeObject/ObjectContext'
const UploadImage = () => {
const { canvas } = useContext(CanvasContext);
const [width, setWidth] = useState(1080);
const [height, setHeight] = useState(1080);
const [quality, setQuality] = useState(100);
const [rotation, setRotation] = useState("0");
const [format, setFormat] = useState('JPEG');
const fileInputRef = useRef(null);
const { setActiveObject } = useContext(ActiveObjectContext);
const [file, setFile] = useState(null);
const [preview, setPreview] = useState(null);
const { getRootProps, getInputProps, isDragActive } = useDropzone({
accept: {
'image/*': ['.jpeg', '.png', '.gif', '.jpg', '.webp', '.svg']
},
// maxSize: 5 * 1024 * 1024, // 5MB max file size
multiple: false,
onDrop: (acceptedFiles) => {
if (!acceptedFiles.length) {
console.error("No files were dropped.");
return;
}
const selectedFile = acceptedFiles[0];
// Create a preview URL
const blobUrl = URL.createObjectURL(selectedFile);
setFile(selectedFile);
setPreview(blobUrl);
if (selectedFile.type === "image/svg+xml") {
addImageToCanvas(selectedFile);
URL.revokeObjectURL(blobUrl);
} else {
const imgElement = new Image();
imgElement.src = blobUrl;
imgElement.onload = () => {
if (imgElement.width > 1080) {
handleResize(selectedFile, (compressedFile) => {
addImageToCanvas(compressedFile);
});
} else {
addImageToCanvas(selectedFile);
}
URL.revokeObjectURL(blobUrl); // Clean up
};
imgElement.onerror = () => {
console.error("Failed to load image.");
URL.revokeObjectURL(blobUrl); // Clean up
};
}
}
});
const removeFile = () => {
// Revoke the object URL to free up memory
if (preview) {
URL.revokeObjectURL(preview)
}
setFile(null)
setPreview(null)
if (fileInputRef.current) {
fileInputRef.current.value = ""
}
}
const handleResize = (file, callback) => {
Resizer.imageFileResizer(
file,
width,
height,
format,
quality,
parseInt(rotation),
(resizedFile) => {
callback(resizedFile)
},
'file',
)
}
const addImageToCanvas = (file) => {
const blobUrl = URL.createObjectURL(file)
fabric.Image.fromURL(blobUrl, (img) => {
img.set({
left: canvas.width / 4,
top: canvas.height / 4,
scaleX: 0.5,
scaleY: 0.5,
})
canvas.add(img)
canvas.setActiveObject(img);
// Update the active object state
setActiveObject(img);
canvas.renderAll();
URL.revokeObjectURL(blobUrl);
})
}
return (
<Card className="w-full mx-auto">
<CardHeader className="px-4 py-3">
<CardTitle>Image Upload & Editing</CardTitle>
<CardDescription>Upload, resize, and apply effects to your images</CardDescription>
</CardHeader>
<CardContent className="p-2">
<Tabs defaultValue="upload">
<TabsList className="grid w-full grid-cols-2">
<TabsTrigger value="upload">Upload</TabsTrigger>
<TabsTrigger value="effects">Effects</TabsTrigger>
</TabsList>
{/* Uploads */}
<TabsContent value="upload">
<div className="space-y-4">
<div className="grid grid-cols-2 gap-4">
<div className="space-y-2">
<Label>Width: {width}px</Label>
<Slider
value={[width]}
max={2000}
min={300}
step={10}
onValueChange={(value) => setWidth(value[0])}
/>
</div>
<div className="space-y-2">
<Label>Height: {height}px</Label>
<Slider
value={[height]}
max={2000}
min={300}
step={10}
onValueChange={(value) => setHeight(value[0])}
/>
</div>
</div>
{format === "JPEG" && (
<div className="space-y-2">
<Label>Quality: {quality}%</Label>
<Slider
value={[quality]}
max={100}
step={1}
onValueChange={(value) => setQuality(value[0])}
/>
</div>
)}
<div className="grid grid-cols-2 gap-4">
<div className="space-y-2">
<Label>Format</Label>
<Select value={format} onValueChange={setFormat}>
<SelectTrigger>
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="JPEG">JPEG</SelectItem>
<SelectItem value="PNG">PNG</SelectItem>
<SelectItem value="WEBP">WEBP</SelectItem>
</SelectContent>
</Select>
</div>
<div className="space-y-2">
<Label>Rotation</Label>
<Select value={rotation} onValueChange={setRotation}>
<SelectTrigger>
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="0">0°</SelectItem>
<SelectItem value="45">45°</SelectItem>
<SelectItem value="90">90°</SelectItem>
<SelectItem value="180">180°</SelectItem>
<SelectItem value="270">270°</SelectItem>
</SelectContent>
</Select>
</div>
</div>
{/* upload image */}
<div className="max-w-md mx-auto p-4">
<Card>
<CardContent className="p-6 space-y-4">
<div
{...getRootProps()}
className={`border-2 border-dashed rounded-lg p-8 text-center cursor-pointer transition-colors duration-300 ${isDragActive ? 'border-primary bg-primary/10' : 'border-gray-300 hover:border-primary'} ${preview ? 'hidden' : ''}`}
ref={fileInputRef}
>
<input {...getInputProps()} />
<div className="flex flex-col items-center justify-center space-y-4">
<ImageIcon
className={`h-12 w-12 ${isDragActive ? 'text-primary' : 'text-gray-400'}`}
/>
<p className="text-sm text-gray-600">
{isDragActive
? 'Drop file here'
: 'Drag \'n\' drop an image, or click to select a file'
}
</p>
<p className="text-xs text-gray-500">
(Max 5MB, image files only)
</p>
</div>
</div>
{preview && (
<div className="relative">
<div className="w-fit aspect-square relative">
<img
src={preview}
alt="Uploaded image"
className="object-cover rounded-lg"
/>
<Separator className="my-4" />
<div className="flex flex-col items-center gap-2">
<span className="text-sm text-gray-600">{file?.name}</span>
<Button
variant="destructive"
size="sm"
onClick={removeFile}
>
<Trash2 className="mr-2 h-4 w-4" />
Remove
</Button>
</div>
</div>
</div>
)}
</CardContent>
</Card>
</div>
</div>
</TabsContent>
{/* Effects */}
<TabsContent value="effects">
<ImageCustomization />
</TabsContent>
</Tabs>
</CardContent>
</Card>
)
}
export default UploadImage

378
src/components/EditPanel.jsx Normal file
View file

@ -0,0 +1,378 @@
import { Rnd } from 'react-rnd';
import { useCallback, useContext, useState } from "react"
import { Card, CardContent, CardHeader, CardTitle } from './ui/card';
import { Button } from './ui/button';
import { BringToFront, CopyPlus, GroupIcon, PencilRuler, Save, Settings, Shapes, SquareX, Store, Trash2, UngroupIcon, Upload, ChevronDown, ChevronUp, MoveIcon, Type, ImageDown, X } from 'lucide-react';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './ui/tooltip';
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from './ui/collapsible';
import { Tabs, TabsContent, TabsList, TabsTrigger } from './ui/tabs';
import OpenContext from './Context/openContext/OpenContext';
import CanvasContext from './Context/canvasContext/CanvasContext';
import ActiveObjectContext from './Context/activeObject/ObjectContext';
import { fabric } from 'fabric';
export function EditPanel() {
const [isCollapsed, setIsCollapsed] = useState(false);
const { setTabValue, setOpenSetting, setOpenObjectPanel, setCaptureOpen, setOpenPanel } = useContext(OpenContext);
const { canvas } = useContext(CanvasContext);
const { setActiveObject, activeObject } = useContext(ActiveObjectContext);
const groupSelectedObjects = () => {
const activeObjects = canvas.getActiveObjects(); // Get selected objects
if (activeObjects.length > 1) {
const group = new fabric.Group(activeObjects, {
left: canvas?.width / 2,
top: canvas?.height / 2,
originX: "center",
originY: "center",
})
canvas.remove(...activeObjects);
canvas.add(group);
canvas.renderAll();
} else {
console.log("Select at least two objects")
}
};
const ungroupSelectedObjects = () => {
const activeObject = canvas.getActiveObject();
if (activeObject && activeObject.type === "group") {
// Get the active group
const group = activeObject;
// Remove the group from the canvas
canvas.remove(group);
// Iterate through each object in the group and re-add to the canvas
group._objects.forEach((object) => {
// Ensure the object has a fresh state
object.set({
hasControls: true, // Allow resizing
selectable: true, // Make selectable
group: null, // Remove group reference
left: canvas?.width / 2,
top: canvas?.height / 2,
originX: "center",
originY: "center",
});
// Set the object's coordinates and transformation matrix
object.setCoords();
// Add the object back to the canvas
canvas.add(object);
});
// Render the canvas to reflect changes
canvas.renderAll();
}
};
// Bring Selected Object to Front
const bringToFront = () => {
if (activeObject) {
activeObject.bringToFront();
canvas.renderAll();
}
};
// Remove Selected Element
const removeSelected = useCallback(() => {
const activeObject = canvas?.getActiveObject();
const allObjects = canvas?.getObjects();
const textObjects = allObjects.filter((obj) => obj.type === 'textbox' || obj.type === 'text' ||
obj.type === 'i-text');
if (activeObject) {
canvas.remove(activeObject);
setActiveObject(null);
}
if (activeObject && textObjects?.length === 1) {
canvas.remove(activeObject);
setActiveObject(null);
}
if (activeObject.length > 1) {
canvas.remove(...activeObject);
setActiveObject(null);
}
}, [canvas, setActiveObject]);
const saveCanvasState = () => {
// Get the JSON representation of all objects
const json = canvas.toJSON(['id', 'selectable']); // Include any custom properties you need
console.log(json);
// Get background image data if it exists
let backgroundImageData = null;
if (canvas.backgroundImage) {
backgroundImageData = {
src: canvas.backgroundImage._element.src,
width: canvas.backgroundImage.width,
height: canvas.backgroundImage.height,
scaleX: canvas.backgroundImage.scaleX,
scaleY: canvas.backgroundImage.scaleY,
originX: canvas.backgroundImage.originX,
originY: canvas.backgroundImage.originY,
opacity: canvas.backgroundImage.opacity
};
}
// Create the complete canvas state
const canvasState = {
version: '1.0',
objects: json.objects,
background: backgroundImageData,
width: canvas.width,
height: canvas.height,
backgroundColor: canvas.backgroundColor
};
console.log('Canvas state saved:', canvasState);
// loadCanvasState(canvasState);
};
// duplicating current objects
const duplicating = () => {
// Clone the active object to create a true deep copy
activeObject.clone((clonedObject) => {
// Add the cloned object to the canvas
clonedObject.set("left", clonedObject?.left + 30)
canvas.add(clonedObject);
canvas.renderAll();
});
}
// for clear canvas
const clearCanvas = () => {
canvas.clear();
canvas.renderAll();
}
const addText = () => {
if (canvas) {
const text = new fabric.IText('Editable Text', {
left: 100,
top: 100,
fontFamily: 'Poppins',
fontSize: 16,
});
// Add the text to the canvas and re-render
canvas.add(text);
// canvas.clipPath = text;
canvas.setActiveObject(text);
setActiveObject(text);
canvas.renderAll();
}
};
return (
<Rnd
default={{
x: 0,
y: 20,
width: 300,
height: 'auto',
}}
minWidth={200}
maxWidth={300}
bounds="parent"
enableResizing={{ right: true }}
className="z-[1000]"
>
<Card className="w-full shadow-lg">
<CardHeader className="p-1 mr-12">
<div className="flex items-center justify-between">
<Button variant={"ghost"} onClick={() => setOpenPanel(false)}><X /></Button>
<CardTitle className="text-lg">Edit Panel</CardTitle>
</div>
</CardHeader>
<Collapsible open={!isCollapsed} onOpenChange={(open) => setIsCollapsed(!open)}>
<CollapsibleTrigger asChild>
<Button variant="ghost" size="sm" className="absolute top-1 right-2">
{isCollapsed ? <ChevronDown className="h-4 w-4" /> : <ChevronUp className="h-4 w-4" />}
</Button>
</CollapsibleTrigger>
<CollapsibleContent>
<CardContent className="p-2">
<Tabs defaultValue="edit" className="w-full">
<TabsList className="w-full flex justify-around gap-2">
<TabsTrigger value="edit">Edit</TabsTrigger>
<TabsTrigger value="add" className="block xl:hidden lg:hidden md:hidden">Add</TabsTrigger>
<TabsTrigger value="canvas">Canvas</TabsTrigger>
</TabsList>
<TabsContent value="edit" className="mt-2">
<TooltipProvider>
<div className="grid grid-cols-3 gap-2">
<ActionButton
icon={<GroupIcon className="h-4 w-4" />}
label="Group"
onClick={groupSelectedObjects}
tooltipContent={
<div className="text-sm">
<p className="font-semibold mb-1">Group selected objects</p>
<p>To select multiple objects:</p>
<ol className="list-decimal list-inside mt-1">
<li>Hold down the Shift key</li>
<li>Click and drag with the left mouse button to select objects</li>
<li>Release the Shift key and mouse button</li>
</ol>
<p className="mt-1">Then click this button to group the selected objects.</p>
</div>
}
/>
<ActionButton
icon={<UngroupIcon className="h-4 w-4" />}
label="Ungroup"
onClick={ungroupSelectedObjects}
tooltipContent="Ungroup selected objects"
/>
<ActionButton
icon={<CopyPlus className="h-4 w-4" />}
label="Duplicate"
onClick={duplicating}
tooltipContent="Duplicate selected objects"
/>
<ActionButton
icon={<BringToFront className="h-4 w-4" />}
label="To Front"
onClick={bringToFront}
tooltipContent="Bring selected objects to front"
/>
<ActionButton
icon={<MoveIcon className="h-4 w-4" />}
label="Move"
onClick={() => { }}
tooltipContent="Move selected objects"
/>
<ActionButton
icon={<Trash2 className="h-4 w-4" />}
label="Remove"
onClick={removeSelected}
tooltipContent="Remove selected objects"
/>
</div>
</TooltipProvider>
</TabsContent>
<TabsContent value="add" className="mt-2">
<TooltipProvider>
<div className="grid grid-cols-3 gap-2">
<ActionButton
icon={<Store className="h-4 w-4" />}
label="Icons"
onClick={() => {
setOpenObjectPanel(true);
setTabValue("icons");
}}
tooltipContent="Add icons to canvas"
/>
<ActionButton
icon={<Shapes className="h-4 w-4" />}
label="Shapes"
onClick={() => {
setTabValue("shapes");
setOpenObjectPanel(true);
}}
tooltipContent="Add shapes to canvas"
/>
<ActionButton
icon={<Type className="h-4 w-4" />}
label="Text"
onClick={() => {
addText();
setTabValue("customize"); setOpenObjectPanel(true);
}}
tooltipContent="Add text to canvas"
/>
<ActionButton
icon={<Upload className="h-4 w-4" />}
label="Image"
onClick={() => {
setTabValue("images"); setOpenObjectPanel(true);
}}
tooltipContent="Upload and add image to canvas"
/>
<ActionButton
icon={<PencilRuler className="h-4 w-4" />}
label="Customize"
onClick={() => {
setTabValue("customize"); setOpenObjectPanel(true);
}}
tooltipContent="Customize objects on canvas"
/>
</div>
</TooltipProvider>
</TabsContent>
<TabsContent value="canvas" className="mt-2">
<TooltipProvider>
<div className="grid grid-cols-3 gap-2">
<ActionButton
icon={<Save className="h-4 w-4" />}
label="Save"
onClick={saveCanvasState}
tooltipContent="Save current canvas state"
/>
<ActionButton
icon={<Settings className="h-4 w-4" />}
label="Settings"
onClick={() => setOpenSetting(true)}
tooltipContent="Open canvas settings"
/>
<ActionButton
icon={<SquareX className="h-4 w-4" />}
label="Clear"
onClick={clearCanvas}
tooltipContent="Clear entire canvas"
/>
<ActionButton
icon={<ImageDown className="h-4 w-4" />}
label="Capture"
onClick={() => setCaptureOpen(true)}
tooltipContent="Capture canvas"
/>
</div>
</TooltipProvider>
</TabsContent>
</Tabs>
</CardContent>
</CollapsibleContent>
</Collapsible>
</Card>
</Rnd>
)
}
function ActionButton({ icon, label, onClick, tooltipContent }) {
return (
<Tooltip>
<TooltipTrigger asChild>
<Button variant="outline" size="md" className="w-full" onClick={onClick}>
<div className="flex flex-col items-center gap-0 p-1">
{icon}
<span className="text-xs">{label}</span>
</div>
</Button>
</TooltipTrigger>
<TooltipContent side="bottom" align="center" className="max-w-xs">
<p>{tooltipContent}</p>
</TooltipContent>
</Tooltip>
)
}

69
src/components/FabricCanvas.jsx Normal file
View file

@ -0,0 +1,69 @@
import React, { useEffect, useRef, useState } from 'react';
import { fabric } from 'fabric';
const FabricCanvas = () => {
const canvasRef = useRef(null);
const [canvas, setCanvas] = useState(null);
// Canvas settings
const canvasSettings = {
width: 800,
height: 600,
};
useEffect(() => {
// Initialize the canvas
const newCanvas = new fabric.Canvas(canvasRef.current, {
backgroundColor: 'black',
selection: true,
height: canvasSettings.height,
width: canvasSettings.width,
controlsAboveOverlay: true,
preserveObjectStacking: true,
});
// Create the clipping path (rectangle)
const clipPath = new fabric.Rect({
width: 300,
height: 300,
left: (canvasSettings.width - 300) / 2, // Center horizontally
top: (canvasSettings.height - 300) / 2, // Center vertically
fill: 'transparent', // Transparent fill
stroke: 'red', // White outline
strokeWidth: 2,
absolutePositioned: true, // Important for clipping path
});
// Apply the clipPath to the canvas
newCanvas.clipPath = clipPath;
// Add the clipping path to visualize it
newCanvas.add(clipPath);
// Add a sample object to the canvas
const rect = new fabric.Rect({
width: 100,
height: 100,
fill: 'orange',
left: 200,
top: 150,
});
newCanvas.add(rect);
// Save the canvas instance
setCanvas(newCanvas);
// Clean up on unmount
return () => {
newCanvas.dispose();
};
}, []);
return (
<div>
<canvas ref={canvasRef} />
</div>
);
};
export default FabricCanvas;

28
src/components/Layouts/AddShapes.jsx Normal file
View file

@ -0,0 +1,28 @@
import RoundedShape from '../EachComponent/RoundedShapes/RoundedShape'
import PlainShapes from '../EachComponent/Shapes/PlainShapes'
import { Card } from '../ui/card'
import { Separator } from '../ui/separator'
import CustomShape from '../EachComponent/CustomShape/CustomShape'
const AddShapes = () => {
return (
<div className='flex gap-2 item-center flex-col justify-center p-1 overflow-hidden'>
<Card className='grid gap-0 p-2'>
<h2 className="font-semibold text-sm">Custom Shapes</h2>
<Separator className="my-2" />
<div>
<CustomShape />
</div>
</Card>
<div>
<RoundedShape />
</div>
<div>
<PlainShapes />
</div>
</div>
)
}
export default AddShapes

19
src/components/Layouts/Header.jsx Normal file
View file

@ -0,0 +1,19 @@
import { AlignLeft, AlignRight } from 'lucide-react';
import { useContext } from 'react';
import OpenContext from '../Context/openContext/OpenContext';
const Header = () => {
const { setRightPanelOpen, setLeftPanelOpen } = useContext(OpenContext)
return (
<div className='bg-[#f2e6f8] fixed top-0 w-[60px] z-[900] min-w-full flex items-center p-4 shadow-md'>
<p className='mr-auto flex-wrap gap-1 cursor-pointer text-xs items-center font-semibold xl:flex lg:flex md:flex hidden' onClick={() => setLeftPanelOpen(true)}><AlignLeft /><span className='hidden xl:block lg:block md:block sm:block'>Add Element</span></p>
<h1 className='font-semibold'>PlanPostAi Canvas</h1>
<p className='ml-auto flex-wrap gap-1 cursor-pointer text-xs items-center font-semibold xl:flex lg:flex md:flex hidden' onClick={() => setRightPanelOpen(true)}> <span className='hidden xl:block lg:block md:block sm:block'>Edit Panel</span><AlignRight /></p>
</div>
)
}
export default Header

77
src/components/Layouts/SheetLeftPanel.jsx Normal file
View file

@ -0,0 +1,77 @@
import { Sheet, SheetContent, SheetDescription } from '../ui/sheet';
import AddShapes from './AddShapes';
import { Separator } from '../ui/separator';
import { Button } from '../ui/button';
import { X, Store, Shapes, Upload, Type } from "lucide-react";
import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs';
import AllIconsPage from '../EachComponent/Icons/AllIcons';
import UploadImage from '../EachComponent/UploadImage';
import { useContext } from 'react';
import OpenContext from '../Context/openContext/OpenContext';
const left = "left";
const SheetLeftPanel = () => {
const { leftPanelOpen, setLeftPanelOpen } = useContext(OpenContext);
// Prevent closing on outside clicks
const handleOpenChange = (isOpen) => {
if (!isOpen) {
// Do nothing when clicking outside
return; // Sheet won't close
}
setLeftPanelOpen(isOpen); // Update only on valid trigger
};
// Function to handle closing the sheet
const handleClose = () => {
setLeftPanelOpen(false); // Close when button is clicked
};
return (
<Sheet onOpenChange={handleOpenChange} open={leftPanelOpen} modal={false}>
<SheetContent side={left} className="w-[300px] top-[60px]">
<SheetDescription className="text-left flex font-semibold">
<p>Your customizable open canvas playground.</p>
<Button variant={"outline"} onClick={handleClose}>
<X />
</Button>
</SheetDescription>
<Separator className="my-2" />
<Tabs defaultValue="shapes" className="w-full relative">
<TabsList className="grid w-full grid-cols-3 gap-1 h-fit">
<TabsTrigger value="shapes">
<Shapes className="h-4 w-4 mr-1" />Shapes
</TabsTrigger>
<TabsTrigger value="icons">
<Store className="h-4 w-4 mr-1" />Icons
</TabsTrigger>
<TabsTrigger value="image">
<Upload className="h-4 w-4 mr-1" />Image
</TabsTrigger>
</TabsList>
<Separator className="my-2" />
<TabsContent value="shapes" className="mt-2 h-[530px] overflow-y-scroll scrollbar-thin scrollbar-thumb-secondary scrollbar-track-white">
<AddShapes />
</TabsContent>
<TabsContent value="icons" className="mt-2">
<AllIconsPage />
</TabsContent>
<TabsContent value="image" className="mt-2 h-[530px] overflow-y-scroll px-1 scrollbar-thin scrollbar-thumb-secondary scrollbar-track-white">
<UploadImage />
</TabsContent>
</Tabs>
</SheetContent>
</Sheet>
)
}
export default SheetLeftPanel

71
src/components/Layouts/SheetRightPanel.jsx Normal file
View file

@ -0,0 +1,71 @@
import {
Sheet,
SheetContent,
SheetDescription,
SheetHeader,
SheetTitle,
} from "@/components/ui/sheet"
import CustomizeShape from "../EachComponent/CustomizeShape";
import { Separator } from "../ui/separator";
import { Button } from "../ui/button";
import { X } from "lucide-react";
import { useContext, useEffect, useState } from "react";
import ActiveObjectContext from "../Context/activeObject/ObjectContext";
import OpenContext from "../Context/openContext/OpenContext";
const SheetRightPanel = () => {
const { rightPanelOpen, setRightPanelOpen } = useContext(OpenContext)
const { activeObject } = useContext(ActiveObjectContext);
const [open, setOpen] = useState(false);
useEffect(() => {
if (activeObject) {
setOpen(true);
}
}, [activeObject])
// Prevent closing on outside clicks
const handleOpenChange = (isOpen) => {
if (!isOpen) {
// Do nothing when clicking outside
return; // Sheet won't close
}
setRightPanelOpen(isOpen); // Update only
};
// Function to handle closing the sheet
const handleClose = () => {
setRightPanelOpen(false); // Close when button is clicked
};
return (
<Sheet onOpenChange={handleOpenChange} open={rightPanelOpen} modal={false}>
<SheetContent className="w-[300px] top-[60px] overflow-y-scroll scrollbar-thin scrollbar-thumb-secondary scrollbar-track-white">
<SheetHeader>
<SheetTitle className="text-left flex items-center gap-1 flex-wrap justify-between">
<SheetDescription>Edit Customization</SheetDescription>
<Button variant={"outline"} onClick={handleClose}>
<X />
</Button>
</SheetTitle>
<SheetDescription className="text-left">
Customize each shapes, and text as per your choice.
</SheetDescription>
</SheetHeader>
<div className="my-2 mb-14">
<Separator className="my-2" />
{
open ? <CustomizeShape /> : <p className='text-sm font-semibold text-primary'>No active object found</p>
}
</div>
</SheetContent>
</Sheet>
)
}
export default SheetRightPanel;

124
src/components/ObjectPanel.jsx Normal file
View file

@ -0,0 +1,124 @@
import { Button } from './ui/button'
import { Card, CardContent, CardHeader, CardTitle } from './ui/card'
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from './ui/collapsible'
import { Tabs, TabsContent, TabsList, TabsTrigger } from './ui/tabs'
import { useContext, useState } from 'react'
import { PencilRuler, Shapes, Store, Upload, ChevronDown, ChevronUp, X } from 'lucide-react';
import { Rnd } from 'react-rnd';
import OpenContext from './Context/openContext/OpenContext';
import AllIconsPage from './EachComponent/Icons/AllIcons'
import { Separator } from './ui/separator'
import { ScrollArea } from './ui/scroll-area'
import AddShapes from './Layouts/AddShapes'
import UploadImage from './EachComponent/UploadImage'
import CustomizeShape from './EachComponent/CustomizeShape'
const ObjectPanel = () => {
const [isCollapsed, setIsCollapsed] = useState(false);
const { tabValue, setTabValue, setOpenObjectPanel } = useContext(OpenContext);
return (
<Rnd
default={{
x: 0,
y: 20,
width: 300,
height: 'auto',
}}
minWidth={270}
maxWidth={300}
maxHeight={500}
bounds="parent"
enableResizing={{ right: true }}
className="z-40"
>
<Card className="w-full shadow-lg">
<CardHeader className="p-1 mr-12">
<div className="flex items-center justify-between">
<Button variant={"ghost"} size={"sm"} onClick={() => setOpenObjectPanel(false)}><X /></Button>
<CardTitle className="text-lg">Object Panel</CardTitle>
</div>
</CardHeader>
<Collapsible open={!isCollapsed} onOpenChange={(open) => setIsCollapsed(!open)}>
<CollapsibleTrigger asChild>
<Button variant="ghost" size="sm" className="absolute top-1 right-2">
{isCollapsed ? <ChevronDown className="h-4 w-4" /> : <ChevronUp className="h-4 w-4" />}
</Button>
</CollapsibleTrigger>
<CollapsibleContent>
<CardContent className="p-2">
<Tabs className="w-full h-fit"
value={tabValue}
onValueChange={(value) => setTabValue(value)} // Sync tab state with context
>
<TabsList className="grid w-full grid-cols-4 h-fit gap-1">
<TabsTrigger value="icons" className="flex flex-col gap-1 text-xs" onClick={() => setTabValue("icons")}>
<Store className="h-4 w-4" />Icons
</TabsTrigger>
<TabsTrigger value="shapes" className="flex flex-wrap gap-1 text-xs" onClick={() => setTabValue("shapes")}><Shapes className="h-4 w-4" />Shapes</TabsTrigger>
<TabsTrigger value="images" className="flex flex-wrap gap-1 text-xs" onClick={() => setTabValue("images")}><Upload className="h-4 w-4" />Images</TabsTrigger>
<TabsTrigger value="customize" className="flex flex-wrap gap-1 text-xs" onClick={() => setTabValue("customize")}><PencilRuler className="h-4 w-4" />Customize</TabsTrigger>
</TabsList>
{/* All icons */}
<TabsContent value="icons" className="mt-2">
<div className="grid grid-cols-1">
<AllIconsPage />
</div>
</TabsContent>
{/* All shapes */}
<TabsContent value="shapes" className="mt-2">
<Card className="p-1">
<CardTitle className="p-1">Shapes </CardTitle>
<Separator className="my-2" />
<ScrollArea className="h-[450px]">
<AddShapes />
</ScrollArea>
</Card>
</TabsContent>
{/* Upload images */}
<TabsContent value="images" className="mt-2">
<Card className="p-1">
<CardTitle className="p-1">Upload</CardTitle>
<Separator className="my-2" />
<ScrollArea className="h-[450px]">
<Card>
<UploadImage />
</Card>
</ScrollArea>
</Card>
</TabsContent>
{/* Customization */}
<TabsContent value="customize" className="mt-2">
<Card className="p-1">
<CardTitle className="p-1">Object customization </CardTitle>
<Separator className="my-2" />
<ScrollArea className="h-[450px]">
<CustomizeShape />
</ScrollArea>
</Card>
</TabsContent>
</Tabs>
</CardContent>
</CollapsibleContent>
</Collapsible>
</Card>
</Rnd>
)
}
export default ObjectPanel

37
src/components/captureCanvas.js Normal file
View file

@ -0,0 +1,37 @@
const exportScaledCanvasImage = (scale = 2, clipRect = null) => {
if (canvas) {
// If a clipPath is provided, apply it to the canvas
if (clipRect) {
canvas.set("clipPath", clipRect);
}
// Export the image with the scale
const imageBase64 = canvas.toDataURL({
format: 'png', // or 'jpeg'
quality: 1, // (0 to 1) for JPEG compression, ignored for PNG
multiplier: scale, // Scale the canvas size
});
// Download the scaled image
const link = document.createElement('a');
link.href = imageBase64;
link.download = `canvas-image-${scale}x.png`;
link.click();
// After downloading, clear the clipping (optional)
if (clipRect) {
canvas.setClipPath(null);
}
}
};
// Example: Crop area and then export
const clipRect = new fabric.Rect({
left: canvas?.getWidth() / 2,
top: canvas?.getHeight() / 2,
originX: 'center', // Use center origin
originY: 'center',
width: 200, // Size of the clip area
height: 200, // Size of the clip area
absolutePositioned: true, // Ensure clipping path stays in place
});

107
src/components/loadCanvas.js Normal file
View file

@ -0,0 +1,107 @@
const loadCanvasState = (state) => {
if (!canvas2) {
console.error('Canvas2 is not initialized!');
return;
}
try {
const canvasData = typeof state === 'string' ? JSON.parse(state) : state;
// Clear the existing canvas
canvas2.clear();
// Set the background color if it exists
if (canvasData.backgroundColor) {
canvas2.set({ backgroundColor: canvasData.backgroundColor });
}
// Function to load background image
const loadBackgroundImage = () => {
return new Promise((resolve) => {
if (!canvasData.background) {
resolve();
return;
}
const imgElement = new Image();
imgElement.crossOrigin = 'anonymous'; // Handle CORS if needed
imgElement.onload = () => {
const imgInstance = new fabric.Image(imgElement, {
originX: canvasData.background.originX || 'left',
originY: canvasData.background.originY || 'top',
scaleX: canvasData.background.scaleX || canvas2.width / imgElement.width,
scaleY: canvasData.background.scaleY || canvas2.height / imgElement.height,
opacity: canvasData.background.opacity || 1,
});
// Set background image using the set method
canvas2.set({ backgroundImage: imgInstance });
resolve();
};
imgElement.onerror = () => {
console.error("Failed to load the background image");
resolve(); // Resolve anyway to continue loading objects
};
imgElement.src = canvasData.background.src;
});
};
// Function to load objects
const loadObjects = () => {
return new Promise((resolve) => {
canvas2.loadFromJSON({ objects: canvasData.objects }, () => {
resolve();
}, (obj, element) => {
return obj;
});
});
};
// Load background image and objects if they exist
const loadTasks = [];
if (canvasData.background || canvasData.objects?.length) {
if (canvasData.background) {
loadTasks.push(loadBackgroundImage());
}
if (canvasData.objects?.length) {
loadTasks.push(loadObjects());
}
Promise.all(loadTasks)
.then(() => {
canvas2.requestRenderAll(); // Ensure re-rendering
})
.catch((error) => {
console.error('Error during canvas loading:', error);
});
} else {
// If only background color exists
if (canvasData.backgroundColor) {
canvas2.requestRenderAll(); // Apply background color and render
}
}
} catch (error) {
console.error('Error loading canvas state:', error);
}
};
// for download image/canvas
const exportScaledCanvasImage = (scale = 2) => {
if (canvas) {
const imageBase64 = canvas.toDataURL({
format: 'png', // or 'jpeg'
quality: 1, // (0 to 1) for JPEG compression, ignored for PNG
multiplier: scale, // Scale the canvas size
});
// Download the scaled image
const link = document.createElement('a');
link.href = imageBase64;
link.download = `canvas-image-${scale}x.png`;
link.click();
}
};

47
src/components/ui/alert.jsx Normal file
View file

@ -0,0 +1,47 @@
import * as React from "react"
import { cva } from "class-variance-authority";
import { cn } from "@/lib/utils"
const alertVariants = cva(
"relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
{
variants: {
variant: {
default: "bg-background text-foreground",
destructive:
"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
},
},
defaultVariants: {
variant: "default",
},
}
)
const Alert = React.forwardRef(({ className, variant, ...props }, ref) => (
<div
ref={ref}
role="alert"
className={cn(alertVariants({ variant }), className)}
{...props} />
))
Alert.displayName = "Alert"
const AlertTitle = React.forwardRef(({ className, ...props }, ref) => (
<h5
ref={ref}
className={cn("mb-1 font-medium leading-none tracking-tight", className)}
{...props} />
))
AlertTitle.displayName = "AlertTitle"
const AlertDescription = React.forwardRef(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn("text-sm [&_p]:leading-relaxed", className)}
{...props} />
))
AlertDescription.displayName = "AlertDescription"
export { Alert, AlertTitle, AlertDescription }

5
src/components/ui/aspect-ratio.jsx Normal file
View file

@ -0,0 +1,5 @@
import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
const AspectRatio = AspectRatioPrimitive.Root
export { AspectRatio }

34
src/components/ui/badge.jsx Normal file
View file

@ -0,0 +1,34 @@
import * as React from "react"
import { cva } from "class-variance-authority";
import { cn } from "@/lib/utils"
const badgeVariants = cva(
"inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
{
variants: {
variant: {
default:
"border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
secondary:
"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
destructive:
"border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
outline: "text-foreground",
},
},
defaultVariants: {
variant: "default",
},
}
)
function Badge({
className,
variant,
...props
}) {
return (<div className={cn(badgeVariants({ variant }), className)} {...props} />);
}
export { Badge, badgeVariants }

48
src/components/ui/button.jsx Normal file
View file

@ -0,0 +1,48 @@
import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva } from "class-variance-authority";
import { cn } from "@/lib/utils"
const buttonVariants = cva(
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
{
variants: {
variant: {
default:
"bg-primary text-primary-foreground shadow hover:bg-primary/90",
destructive:
"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
outline:
"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
secondary:
"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
ghost: "hover:bg-accent hover:text-accent-foreground",
link: "text-primary underline-offset-4 hover:underline",
},
size: {
default: "h-9 px-4 py-2",
sm: "h-8 rounded-md px-3 text-xs",
lg: "h-10 rounded-md px-8",
icon: "h-9 w-9",
},
},
defaultVariants: {
variant: "default",
size: "default",
},
}
)
const Button = React.forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => {
const Comp = asChild ? Slot : "button"
return (
(<Comp
className={cn(buttonVariants({ variant, size, className }))}
ref={ref}
{...props} />)
);
})
Button.displayName = "Button"
export { Button, buttonVariants }

50
src/components/ui/card.jsx Normal file
View file

@ -0,0 +1,50 @@
import * as React from "react"
import { cn } from "@/lib/utils"
const Card = React.forwardRef(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn("rounded-xl border bg-card text-card-foreground shadow", className)}
{...props} />
))
Card.displayName = "Card"
const CardHeader = React.forwardRef(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn("flex flex-col space-y-1.5 p-6", className)}
{...props} />
))
CardHeader.displayName = "CardHeader"
const CardTitle = React.forwardRef(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn("font-semibold leading-none tracking-tight", className)}
{...props} />
))
CardTitle.displayName = "CardTitle"
const CardDescription = React.forwardRef(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn("text-sm text-muted-foreground", className)}
{...props} />
))
CardDescription.displayName = "CardDescription"
const CardContent = React.forwardRef(({ className, ...props }, ref) => (
<div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
))
CardContent.displayName = "CardContent"
const CardFooter = React.forwardRef(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn("flex items-center p-6 pt-0", className)}
{...props} />
))
CardFooter.displayName = "CardFooter"
export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

22
src/components/ui/checkbox.jsx Normal file
View file

@ -0,0 +1,22 @@
import * as React from "react"
import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
import { Check } from "lucide-react"
import { cn } from "@/lib/utils"
const Checkbox = React.forwardRef(({ className, ...props }, ref) => (
<CheckboxPrimitive.Root
ref={ref}
className={cn(
"peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
className
)}
{...props}>
<CheckboxPrimitive.Indicator className={cn("flex items-center justify-center text-current")}>
<Check className="h-4 w-4" />
</CheckboxPrimitive.Indicator>
</CheckboxPrimitive.Root>
))
Checkbox.displayName = CheckboxPrimitive.Root.displayName
export { Checkbox }

9
src/components/ui/collapsible.jsx Normal file
View file

@ -0,0 +1,9 @@
import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
const Collapsible = CollapsiblePrimitive.Root
const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
export { Collapsible, CollapsibleTrigger, CollapsibleContent }

Some files were not shown because too many files have changed in this diff Show more