[IMP] web_editor, mass_mailing, *: add shape clipping option on images

*: tools

The ImageOptimizer option can now set shapes on images to use those
shapes as clip path and background. It uses a flexible path so that the
shape will always fit the image proportionally. We also added an html
file alongside a javascript file to semi-convert the shape from
illustrator into a usable shape for this usecase (the clip path must
have values between one and zero therefore we must do some computation
before the shape is ready to use).

Thanks to Samuel for this specific shape-converter tool and other
technical points about svgs and clip-paths.

Thanks to Mehdi for remaining development post-testing and post-reviews
and for the many fixes.

Thanks to Brieuc for the actual shape SVG files.

Part of https://github.com/odoo/odoo/pull/69179
task-2327045

closes odoo/odoo#69179

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Co-authored-by: xO-Tx <mou@odoo.com>
Co-authored-by: Brieuc-brd <brd@odoo.com>
Co-authored-by: Samuel Degueldre <sad@odoo.com>
This commit is contained in:
Arthur Detroux
2021-06-21 16:31:07 +00:00
committed by qsm-odoo
co-authored by xO-Tx Brieuc-brd Samuel Degueldre
parent c1ab1beb0d
commit cd403480f9
67 changed files with 4247 additions and 22 deletions
@@ -2,6 +2,8 @@ odoo.define('mass_mailing.snippets.options', function (require) {
"use strict";
var options = require('web_editor.snippets.options');
const {ColorpickerWidget} = require('web.Colorpicker');
const {_t} = require('web.core');
// Snippet option for resizing image and column width inline like excel
options.registry.mass_mailing_sizing_x = options.Class.extend({
@@ -139,4 +141,60 @@ options.registry.BackgroundImage = options.registry.BackgroundImage.extend({
}
});
options.registry.ImageOptimize.include({
//--------------------------------------------------------------------------
// Public
//--------------------------------------------------------------------------
/**
* @override
*/
async updateUIVisibility() {
await this._super(...arguments);
// The image shape option should work correctly with this update of the
// ImageOptimize option but unfortunately, SVG support in mail clients
// prevents the final rendering of the image. For now, we disable the
// feature.
const imgShapeContainerEl = this.el.querySelector('.o_we_image_shape');
if (imgShapeContainerEl) {
imgShapeContainerEl.classList.toggle('d-none', !odoo.debug);
}
},
//--------------------------------------------------------------------------
// Private
//--------------------------------------------------------------------------
/**
* @override
*/
_getCSSColorValue(color) {
const doc = this.options.document;
if (doc && doc.querySelector('.o_mass_mailing_iframe') && !ColorpickerWidget.isCSSColor(color)) {
const tempEl = doc.body.appendChild(doc.createElement('div'));
tempEl.className = `bg-${color}`;
const colorValue = window.getComputedStyle(tempEl).getPropertyValue("background-color").trim();
tempEl.parentNode.removeChild(tempEl);
return ColorpickerWidget.normalizeCSSColor(colorValue).replace(/"/g, "'");
}
return this._super(...arguments);
},
/**
* @override
*/
async _renderCustomWidgets(uiFragment) {
await this._super(...arguments);
const imgShapeTitleEl = uiFragment.querySelector('.o_we_image_shape we-title');
if (imgShapeTitleEl) {
const warningEl = document.createElement('i');
warningEl.classList.add('fa', 'fa-exclamation-triangle', 'ml-1');
warningEl.title = _t("Be aware that this option may not work on many mail clients");
imgShapeTitleEl.appendChild(warningEl);
}
},
});
});
+2 -1
View File
@@ -485,7 +485,7 @@ class Web_Editor(http.Controller):
return View.render_public_asset(xmlid, {k: values[k] for k in values if k in trusted_value_keys})
@http.route('/web_editor/modify_image/<model("ir.attachment"):attachment>', type="json", auth="user", website=True)
def modify_image(self, attachment, res_model=None, res_id=None, name=None, data=None, original_id=None):
def modify_image(self, attachment, res_model=None, res_id=None, name=None, data=None, original_id=None, mimetype=None):
"""
Creates a modified copy of an attachment and returns its image_src to be
inserted into the DOM.
@@ -495,6 +495,7 @@ class Web_Editor(http.Controller):
'datas': data,
'type': 'binary',
'res_model': res_model or 'ir.ui.view',
'mimetype': mimetype or attachment.mimetype,
}
if fields['res_model'] == 'ir.ui.view':
fields['res_id'] = 0
@@ -0,0 +1,21 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
<defs>
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
<use xlink:href="#filterPath" fill="none"/>
</clipPath>
<path id="filterPath" d="M.9765.8495c-.1199.2462-.7298.1759-.9132-.1055c-.1833-.285.06-.7774.3632-.7422c.3068.0352.6699.6015.55.8477z">
<animate dur="12s" repeatCount="indefinite" attributeName="d" attributeType="XML"
values="
M.9765.8495c-.1199.2462-.7298.1759-.9132-.1055c-.1833-.285.06-.7774.3632-.7422c.3068.0352.6699.6015.55.8477z;
M.9525.7766c-.1661.2762-.7774.3023-.9187.0448c-.1413-.2612.1873-.8061.4947-.8211c.3039-.0149.5865.5038.424.7763z;
M.9837.8871c-.1025.2264-.7069.088-.9048-.2013c-.1979-.2893.0036-.7463.304-.6792c.3004.0671.7033.6541.6008.8805z;
M.9765.8495c-.1199.2462-.7298.1759-.9132-.1055c-.1833-.285.06-.7774.3632-.7422c.3068.0352.6699.6015.55.8477z"
calcMode="spline"
keySplines=".56 .37 .43 .58;.56 .37 .43 .58;.56 .37 .43 .58"/>
</path>
</defs>
<svg viewBox="0 0 1 1" id="preview" preserveAspectRatio="none">
<use xlink:href="#filterPath" fill="darkgrey"/>
</svg>
<image xlink:href="" clip-path="url(#clip-path)"/>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

@@ -0,0 +1,23 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
<defs>
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
<use xlink:href="#filterPath" fill="none"/>
</clipPath>
<path id="filterPath" d="M.9722.1661c.0598.1143.0141.2803-.0528.3799c-.0669.0996-.1584.1365-.2675.225c-.1091.0885-.2323.2361-.359.2287c-.1267-.0074-.2534-.1623-.2851-.332c-.0317-.1697.0353-.354.1479-.4794c.1126-.1254.271-.1881.4329-.1881c.1619-.0037.3238.0553.3836.1659z">
<animate dur="42s" repeatCount="indefinite" attributeName="d" attributeType="XML"
values="
M.9722.1661c.0598.1143.0141.2803-.0528.3799c-.0669.0996-.1584.1365-.2675.225c-.1091.0885-.2323.2361-.359.2287c-.1267-.0074-.2534-.1623-.2851-.332c-.0317-.1697.0353-.354.1479-.4794c.1126-.1254.271-.1881.4329-.1881c.1619-.0037.3238.0553.3836.1659z;
M.8281.029c.1059.0675.1871.2564.1695.4453c-.0177.1844-.1377.3688-.2895.4588c-.1518.09-.3354.09-.4695-.0045c-.1341-.0945-.2224-.2834-.2365-.4678c-.0142-.1799.0459-.3553.1341-.4183c.0883-.063.2083-.009.3318-.0135c.1271-.0045.2542-.063.3601-0z;
M.794.2409c.1273.138.2433.3007.1946.3962c-.0487.099-.2583.1344-.438.2052c-.1797.0743-.3294.1839-.4192.1521c-.0936-.0318-.1273-.2016-.131-.3467c-.0037-.1415.015-.2583.0824-.3821c.0674-.1238.1872-.2547.3144-.2653c.131-.0071.2695.1026.3968.2406z;
M.8977.2132c.0991.124.131.2915.0743.4054c-.0602.1106-.2124.1642-.361.2412c-.1486.077-.2937.1708-.3681.1306c-.0743-.0369-.0743-.2077-.1239-.3819c-.0496-.1742-.1557-.3417-.1061-.4556c.0496-.1139.2513-.1642.4354-.1508c.1841.0134.3503.0905.4494.2111z;
M.9616.0267c.0777.0784.0247.3529-.0459.5441c-.0742.1961-.1696.3088-.2756.3726c-.106.0637-.2261.0784-.3322.0196c-.106-.0539-.2049-.1814-.2615-.3677c-.0566-.1863-.0707-.4216.0106-.5049c.0742-.0735.2473.0098.4346-.0049c.1873-.0196.3922-.1373.47-.0588z;
M.9722.1661c.0598.1143.0141.2803-.0528.3799c-.0669.0996-.1584.1365-.2675.225c-.1091.0885-.2323.2361-.359.2287c-.1267-.0074-.2534-.1623-.2851-.332c-.0317-.1697.0353-.354.1479-.4794c.1126-.1254.271-.1881.4329-.1881c.1619-.0037.3238.0553.3836.1659z"
calcMode="spline"
keySplines=".56 .37 .43 .58;.56 .37 .43 .58;.56 .37 .43 .58;.56 .37 .43 .58;.56 .37 .43 .58"/>
</path>
</defs>
<svg viewBox="0 0 1 1" id="preview" preserveAspectRatio="none">
<use xlink:href="#filterPath" fill="darkgrey"/>
</svg>
<image xlink:href="" clip-path="url(#clip-path)"/>
</svg>

After

Width:  |  Height:  |  Size: 2.5 KiB

@@ -0,0 +1,23 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
<defs>
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
<use xlink:href="#filterPath" fill="none"/>
</clipPath>
<path id="filterPath" d="M.7562.1677c.0954.0186.2438.0186.2438.0651c0 .0465-.1484.1488-.212.251c-.0636.1023-.0353.2092-.0565.2557c-.0212.0465-.0919.0279-.1908.0837c-.0989.0558-.2297.1813-.3392.1767c-.1096-.0047-.2015-.1441-.2015-.2883c0-.1441.0919-.2975.1555-.4231c.0671-.1302.106-.2371.1696-.2743c.0636-.0372.1555.0046.2226.0511c.0707.0373.1131.0838.2085.1024z">
<animate dur="42s" repeatCount="indefinite" attributeName="d" attributeType="XML"
values="
M.7562.1677c.0954.0186.2438.0186.2438.0651c0 .0465-.1484.1488-.212.251c-.0636.1023-.0353.2092-.0565.2557c-.0212.0465-.0919.0279-.1908.0837c-.0989.0558-.2297.1813-.3392.1767c-.1096-.0047-.2015-.1441-.2015-.2883c0-.1441.0919-.2975.1555-.4231c.0671-.1302.106-.2371.1696-.2743c.0636-.0372.1555.0046.2226.0511c.0707.0373.1131.0838.2085.1024z;
M.6475.2223c.0775.0741.2008.0697.2712.1394c.0704.0653.0951.2047.074.3354c-.0211.1307-.0845.257-.1761.2919c-.0916.0349-.2043-.0174-.2783-.0915c-.074-.0741-.1021-.1655-.1655-.2135c-.0599-.0479-.1515-.0523-.236-.1176c-.0845-.0653-.1655-.196-.1268-.2527c.0422-.0609.2007-.0479.3029-.1132c.0986-.0653.1409-.2047.1796-.2004c.0388.0044.074.1481.155.2222z;
M.751 0c.0916 0 .1586.1255.2009.2689c.0423.1434.0635.3048.0353.4482c-.0317.1434-.1128.2734-.215.2824c-.1022.009-.2221-.0986-.3138-.1569c-.0917-.0583-.1445-.0627-.2397-.0717c-.0917-.0134-.2221-.0359-.2186-.0941c.0035-.0583.1445-.1569.2256-.2151c.0811-.0583.1058-.0807.1304-.1076c.0247-.0269.0494-.0583.1163-.1389c.0706-.0852.1869-.2152.2786-.2152z;
M.7922.0449c.0284.0718-.0355.2491.0035.3842c.039.1393.1846.2365.2023.3209c.0177.0844-.0923.1562-.1917.2027c-.0994.0464-.1917.0633-.2591.0296c-.071-.0338-.1207-.1224-.1881-.1773c-.071-.0549-.1633-.0844-.2413-.1647c-.0781-.0802-.1455-.2153-.1065-.2956c.039-.0802.1846-.1013.2875-.1436c.1029-.0422.1668-.1056.2591-.152c.0853-.0465.206-.0802.2343-.0042z;
M.8275.039c.0848.051.1378.1743.1626.2976c.0212.1233.0106.2508-.053.3146c-.0636.0638-.1838.0638-.265.1233c-.0777.0595-.1166.17-.1767.2083c-.0601.0383-.1484.0085-.2368-.0468c-.0919-.051-.1873-.1233-.2297-.2296c-.0424-.1063-.0353-.2423.0035-.3656c.0353-.119.1025-.2252.1873-.2763c.0848-.051.1908-.051.3004-.0553c.1095-.0084.2226-.0254.3074.0298z;
M.7562.1677c.0954.0186.2438.0186.2438.0651c0 .0465-.1484.1488-.212.251c-.0636.1023-.0353.2092-.0565.2557c-.0212.0465-.0919.0279-.1908.0837c-.0989.0558-.2297.1813-.3392.1767c-.1096-.0047-.2015-.1441-.2015-.2883c0-.1441.0919-.2975.1555-.4231c.0671-.1302.106-.2371.1696-.2743c.0636-.0372.1555.0046.2226.0511c.0707.0373.1131.0838.2085.1024z"
calcMode="spline"
keySplines=".56 .37 .43 .58;.56 .37 .43 .58;.56 .37 .43 .58;.56 .37 .43 .58;.56 .37 .43 .58"/>
</path>
</defs>
<svg viewBox="0 0 1 1" id="preview" preserveAspectRatio="none">
<use xlink:href="#filterPath" fill="darkgrey"/>
</svg>
<image xlink:href="" clip-path="url(#clip-path)"/>
</svg>

After

Width:  |  Height:  |  Size: 3.2 KiB

@@ -0,0 +1,21 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
<defs>
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
<use xlink:href="#filterPath" fill="none"/>
</clipPath>
<path id="filterPath" d="M1,1C0.669,0.9929,0.3345,0.9893,0,0.9821c0.0071-0.3214,0.0142-0.6429,0.0214-0.9643c0.3203-0.0071,0.6406-0.0143,0.9609-0.0179C0.9893,0.3321,0.9929,0.6679,1,1z">
<animate dur="18s" repeatCount="indefinite" attributeName="d" attributeType="XML"
values="
M1,1C0.669,0.9929,0.3345,0.9893,0,0.9821c0.0071-0.3214,0.0142-0.6429,0.0214-0.9643c0.3203-0.0071,0.6406-0.0143,0.9609-0.0179C0.9893,0.3321,0.9929,0.6679,1,1z;
M0.9822,0.9892c-0.3203,0.0036-0.6406,0.0072-0.9609,0.0108C0.0142,0.6655,0.0071,0.3309,0,0c0.3345,0.0036,0.6655,0.0072,1,0.0108C0.9929,0.3345,0.9893,0.6619,0.9822,0.9892z;
M0.9683,1c-0.3134-0.0106-0.6268-0.0176-0.9401-0.0282C0.0176,0.6549,0.0106,0.3415,0,0.0282C0.331,0.0176,0.6655,0.0106,1,0C0.9894,0.331,0.9789,0.6655,0.9683,1z;
M1,1C0.669,0.9929,0.3345,0.9893,0,0.9821c0.0071-0.3214,0.0142-0.6429,0.0214-0.9643c0.3203-0.0071,0.6406-0.0143,0.9609-0.0179C0.9893,0.3321,0.9929,0.6679,1,1z"
calcMode="spline"
keySplines=".56 .37 .43 .58; .56 .37 .43 .58; .56 .37 .43 .58"/>
</path>
</defs>
<svg viewBox="0 0 1 1" id="preview" preserveAspectRatio="none">
<use xlink:href="#filterPath" fill="darkgrey"/>
</svg>
<image xlink:href="" clip-path="url(#clip-path)"/>
</svg>

After

Width:  |  Height:  |  Size: 1.6 KiB

@@ -0,0 +1,21 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
<defs>
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
<use xlink:href="#filterPath" fill="none"/>
</clipPath>
<path id="filterPath" d="M1 1l-1 0 0-1 1 0 0 1z">
<animate dur="18s" repeatCount="indefinite" attributeName="d" attributeType="XML"
values="
M1 1l-1 0 0-1 1 0 0 1z;
M0.8799,1L0,0.8799L0.1201,0l0.8799,0.1201L0.8799,1z;
M1,0.9889L0,1L0.2297,0l0.6749,0.1778L1,0.9889z;
M1 1l-1 0 0-1 1 0 0 1z"
calcMode="spline"
keySplines=".56 .37 .43 .58; .56 .37 .43 .58; .56 .37 .43 .58"/>
</path>
</defs>
<svg viewBox="0 0 1 1" id="preview" preserveAspectRatio="none">
<use xlink:href="#filterPath" fill="darkgrey"/>
</svg>
<image xlink:href="" clip-path="url(#clip-path)"/>
</svg>

After

Width:  |  Height:  |  Size: 966 B

@@ -0,0 +1,22 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
<defs>
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
<use xlink:href="#filterPath" fill="none"/>
</clipPath>
<path id="filterPath" d="M1 .8282.03.97.0677 0l.8513.069L1 .8282z">
<animate dur="12s" repeatCount="indefinite" attributeName="d" attributeType="XML"
values="
M1 .8282.03.97.0677 0l.8513.069L1 .8282z;
M1 .97.0645.9083.03 0l.8313.0356L1 .97z;
M1 .97.03.9299.0528 0l.8445.0801L1 .97z;
M.9436.97.0703.9122.03 0l.97.1032L.9436.97z;
M1 .8282.03.97.0677 0l.8513.069L1 .8282z"
calcMode="spline"
keySplines=".45 .05 .55 .95;.45 .05 .55 .95;.45 .05 .55 .95;.45 .05 .55 .95"/>
</path>
</defs>
<svg viewBox="0 0 1 1" id="preview" preserveAspectRatio="none">
<use xlink:href="#filterPath" fill="darkgrey"/>
</svg>
<image xlink:href="" clip-path="url(#clip-path)"/>
</svg>

After

Width:  |  Height:  |  Size: 1.0 KiB

@@ -0,0 +1,21 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
<defs>
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
<use xlink:href="#filterPath" fill="none"/>
</clipPath>
<path id="filterPath" d="M.8728 1C.5654.9117.2792.8834 0 .8728C.0919.5654.1201.2792.1272 0c.3074.0919.5972.1201.8728.1272C.9117.4346.8834.7244.8728 1z">
<animate dur="12s" repeatCount="indefinite" attributeName="d" attributeType="XML"
values="
M.8728 1C.5654.9117.2792.8834 0 .8728C.0919.5654.1201.2792.1272 0c.3074.0919.5972.1201.8728.1272C.9117.4346.8834.7244.8728 1z;
M1 .8282c-.3233.0473-.6467.0945-.97.1418C.0426.6467.0551.3233.0677 0c.2838.023.5675.046.8513.069C.946.3221.973.5751 1 .8282z;
M0.9999,0.8621c-0.3003,0.0813-0.5865,0.1413-0.8621,0.1378C0.0565,0.7031,0,0.4134,0,0.1378C0.3003,0.0565,0.5865,0,0.8621,0C0.9433,0.3003,1.0034,0.5865,0.9999,0.8621z;
M.8728 1C.5654.9117.2792.8834 0 .8728C.0919.5654.1201.2792.1272 0c.3074.0919.5972.1201.8728.1272C.9117.4346.8834.7244.8728 1z"
calcMode="spline"
keySplines=".45 .05 .55 .95;.45 .05 .55 .95;.45 .05 .55 .95"/>
</path>
</defs>
<svg viewBox="0 0 1 1" id="preview" preserveAspectRatio="none">
<use xlink:href="#filterPath" fill="darkgrey"/>
</svg>
<image xlink:href="" clip-path="url(#clip-path)"/>
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

@@ -0,0 +1,20 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
<defs>
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
<use xlink:href="#filterPath" fill="none"/>
</clipPath>
<path id="filterPath" d="M1 .7827 0 1 0 0 1 0Z">
<animate dur="6s" repeatCount="indefinite" attributeName="d" attributeType="XML"
values="
M1 .7827 0 1 0 0 1 0Z;
M1 .8027 0 .95 0 0 1 0Z;
M1 .7827 0 1 0 0 1 0Z"
calcMode="spline"
keySplines=".56 .37 .43 .58; .56 .37 .43 .58"/>
</path>
</defs>
<svg viewBox="0 0 1 1" id="preview" preserveAspectRatio="none">
<use xlink:href="#filterPath" fill="darkgrey"/>
</svg>
<image xlink:href="" clip-path="url(#clip-path)"/>
</svg>

After

Width:  |  Height:  |  Size: 857 B

@@ -0,0 +1,20 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
<defs>
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
<use xlink:href="#filterPath" fill="none"/>
</clipPath>
<path id="filterPath" d="M0 .2169 1 0 1 1 0 1Z">
<animate dur="6s" repeatCount="indefinite" attributeName="d" attributeType="XML"
values="
M0 .2169 1 0 1 1 0 1Z;
M0 .1569 1 .05 1 1 0 1Z;
M0 .2169 1 0 1 1 0 1Z"
calcMode="spline"
keySplines=".56 .37 .43 .58; .56 .37 .43 .58"/>
</path>
</defs>
<svg viewBox="0 0 1 1" id="preview" preserveAspectRatio="none">
<use xlink:href="#filterPath" fill="darkgrey"/>
</svg>
<image xlink:href="" clip-path="url(#clip-path)"/>
</svg>

After

Width:  |  Height:  |  Size: 857 B

@@ -0,0 +1,21 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
<defs>
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
<use xlink:href="#filterPath" fill="none"/>
</clipPath>
<path id="filterPath" d="M0.9047,0.9991c-0.2698-0.0566-0.5397-0.1088-0.8095-0.1655c-0.0612-0.0087-0.1043-0.0566-0.0935-0.1088c0.036-0.1611,0.0684-0.3222,0.1043-0.4964C0.1168,0.1805,0.1636,0.1326,0.2067,0.1196C0.4046,0.0804,0.5989,0.0412,0.7932,0.002c0.0432-0.0131,0.0899,0.0392,0.1007,0.1219c0.036,0.2482,0.0684,0.5007,0.1043,0.7576C1.009,0.9555,0.9695,1.0078,0.9047,0.9991z">
<animate dur="15s" repeatCount="indefinite" attributeName="d" attributeType="XML"
values="
M0.9047,0.9991c-0.2698-0.0566-0.5397-0.1088-0.8095-0.1655c-0.0612-0.0087-0.1043-0.0566-0.0935-0.1088c0.036-0.1611,0.0684-0.3222,0.1043-0.4964C0.1168,0.1805,0.1636,0.1326,0.2067,0.1196C0.4046,0.0804,0.5989,0.0412,0.7932,0.002c0.0432-0.0131,0.0899,0.0392,0.1007,0.1219c0.036,0.2482,0.0684,0.5007,0.1043,0.7576C1.009,0.9555,0.9695,1.0078,0.9047,0.9991z;
M0.9048,0.743c-0.2324,0.0574-0.4647,0.1987-0.6894,0.2517c-0.0533,0.0177-0.099-0.0088-0.1105-0.0839c-0.0305-0.2208-0.0648-0.5079-0.1028-0.7905C-0.0094,0.0408,0.0287-0.0078,0.0896,0.001c0.259,0.0309,0.518-0.0177,0.7809,0.0442c0.0609,0.0088,0.1105,0.0486,0.1143,0.0927c0.0076,0.1413,0.0114,0.3312,0.0152,0.5035C1,0.6944,0.9581,0.7297,0.9048,0.743z;
M0.8069,0.9949c-0.2256-0.0785-0.455,0.0646-0.6844-0.0323c-0.0535-0.0231-0.0956-0.1016-0.0994-0.1616c-0.0076-0.1893-0.0153-0.3831-0.0229-0.577C-0.0036,0.164,0.0461,0.1363,0.1073,0.1455c0.2676,0.0277,0.5353-0.1985,0.7991-0.1339c0.0612,0.0138,0.1032,0.1062,0.0918,0.1754c-0.0268,0.24-0.0535,0.4801-0.0803,0.7201C0.9064,0.9811,0.8605,1.0134,0.8069,0.9949z;
M0.9047,0.9991c-0.2698-0.0566-0.5397-0.1088-0.8095-0.1655c-0.0612-0.0087-0.1043-0.0566-0.0935-0.1088c0.036-0.1611,0.0684-0.3222,0.1043-0.4964C0.1168,0.1805,0.1636,0.1326,0.2067,0.1196C0.4046,0.0804,0.5989,0.0412,0.7932,0.002c0.0432-0.0131,0.0899,0.0392,0.1007,0.1219c0.036,0.2482,0.0684,0.5007,0.1043,0.7576C1.009,0.9555,0.9695,1.0078,0.9047,0.9991z"
calcMode="spline"
keySplines=".45 .05 .55 .95;.45 .05 .55 .95;.45 .05 .55 .95"/>
</path>
</defs>
<svg viewBox="0 0 1 1" id="preview" preserveAspectRatio="none">
<use xlink:href="#filterPath" fill="darkgrey"/>
</svg>
<image xlink:href="" clip-path="url(#clip-path)"/>
</svg>

After

Width:  |  Height:  |  Size: 2.5 KiB

@@ -0,0 +1,20 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
<defs>
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
<use xlink:href="#filterPath" fill="none"/>
</clipPath>
<path id="filterPath" d="M0.8143,0.9966c-0.2118,0.0134-0.4236-0.0134-0.6354-0.0671c-0.0467-0.0134-0.1005-0.0761-0.1185-0.1342c-0.0503-0.1924-0.0682-0.3848-0.0574-0.5727c0.0036-0.0582,0.0574-0.1208,0.1149-0.1342C0.3692,0.0168,0.624-0.0101,0.8789,0.0033C0.9364,0.0033,0.9902,0.0704,0.9938,0.142c0.0179,0.2416-0.0036,0.4787-0.0574,0.7114C0.9184,0.9295,0.861,0.9921,0.8143,0.9966z">
<animate dur="15s" repeatCount="indefinite" attributeName="d" attributeType="XML"
values="
M0.8143,0.9966c-0.2118,0.0134-0.4236-0.0134-0.6354-0.0671c-0.0467-0.0134-0.1005-0.0761-0.1185-0.1342c-0.0503-0.1924-0.0682-0.3848-0.0574-0.5727c0.0036-0.0582,0.0574-0.1208,0.1149-0.1342C0.3692,0.0168,0.624-0.0101,0.8789,0.0033C0.9364,0.0033,0.9902,0.0704,0.9938,0.142c0.0179,0.2416-0.0036,0.4787-0.0574,0.7114C0.9184,0.9295,0.861,0.9921,0.8143,0.9966z;
M0.8798,0.9998c-0.2544-0.0125-0.5124-0.0669-0.7703-0.1589c-0.0565-0.0209-0.1095-0.0795-0.1095-0.1255c0-0.1506,0.0247-0.3095,0.0777-0.4684c0.0177-0.0502,0.0707-0.1046,0.1131-0.1213c0.2014-0.0711,0.4028-0.1129,0.6042-0.1255c0.0459-0.0042,0.1025,0.0586,0.1237,0.1297c0.0636,0.2426,0.0919,0.4852,0.0777,0.7319C0.9929,0.9412,0.9399,1.004,0.8798,0.9998z;
M0.8143,0.9966c-0.2118,0.0134-0.4236-0.0134-0.6354-0.0671c-0.0467-0.0134-0.1005-0.0761-0.1185-0.1342c-0.0503-0.1924-0.0682-0.3848-0.0574-0.5727c0.0036-0.0582,0.0574-0.1208,0.1149-0.1342C0.3692,0.0168,0.624-0.0101,0.8789,0.0033C0.9364,0.0033,0.9902,0.0704,0.9938,0.142c0.0179,0.2416-0.0036,0.4787-0.0574,0.7114C0.9184,0.9295,0.861,0.9921,0.8143,0.9966z"
calcMode="spline"
keySplines=".45 .05 .55 .95;.45 .05 .55 .95"/>
</path>
</defs>
<svg viewBox="0 0 1 1" id="preview" preserveAspectRatio="none">
<use xlink:href="#filterPath" fill="darkgrey"/>
</svg>
<image xlink:href="" clip-path="url(#clip-path)"/>
</svg>

After

Width:  |  Height:  |  Size: 2.1 KiB

@@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>SVGs to Clip Path converter</title>
</head>
<body>
<p>This tool is made to help designers import shapes that have a clip path component.</p>
<p>The shape must have at least one path set with an <code>id="filterPath"</code> and a maximum of 5 background colors</p>
<input id="svgPicker" type="file" multiple>
<button id="submitButton" type="button" name="convert">convert</button>
<div id="downloadArea">
<p>Your download link will appear here</p>
</div>
<script src="./convert-to-percentages.js" charset="utf-8"></script>
</body>
</html>
@@ -0,0 +1,159 @@
// The goal of this script is to have a shape ready for use with the
// "Shape on Image" feature of Odoo.
// Therefor we need to rearrange the file a little.
// Marks which axis each parameter of a command belongs to, as well as whether
// It's a positional measurement (x/y), a distance (dx/dy) or none (angles, flags)
const commandAxes = {
'M': ['x', 'y'],
'm': ['dx', 'dy'],
'L': ['x', 'y'],
'l': ['dx', 'dy'],
'H': ['x'],
'h': ['dx'],
'V': ['y'],
'v': ['dy'],
'Z': [],
'z': [],
'C': ['x', 'y', 'x', 'y', 'x', 'y'],
'c': ['dx', 'dy', 'dx', 'dy', 'dx', 'dy'],
'S': ['x', 'y', 'x', 'y'],
's': ['dx', 'dy', 'dx', 'dy'],
'Q': ['x', 'y', 'x', 'y'],
'q': ['dx', 'dy', 'dx', 'dy'],
'T': ['x', 'y'],
't': ['dx', 'dy'],
'A': ['dx', 'dy', 'none', 'none', 'none', 'x', 'y'],
'a': ['dx', 'dy', 'none', 'none', 'none', 'dx', 'dy'],
};
const toUserSpace = (x, y, width, height, precision = 4) => ({
x: val => +((parseFloat(val) - x) / width).toFixed(precision),
dx: val => +(parseFloat(val) / width).toFixed(precision),
y: val => +((parseFloat(val) - y) / height).toFixed(precision),
dy: val => +(parseFloat(val) / height).toFixed(precision),
none: val => val,
});
const filePicker = document.getElementById('svgPicker');
const submitButton = document.getElementById('submitButton');
submitButton.addEventListener('click', async (ev) => {
if (!filePicker.files.length > 0) {
alert('Please select files using the file picker first');
return;
}
Array.from(filePicker.files).forEach(async file => {
const fileReader = new FileReader();
const readerPromise = new Promise((resolve, reject) => {
fileReader.addEventListener('load', () => resolve(fileReader.result));
fileReader.addEventListener('error', () => reject(fileReader.error));
});
fileReader.readAsText(file, 'utf-8');
const svgString = await readerPromise;
const parser = new DOMParser();
const svg = parser.parseFromString(svgString, 'image/svg+xml');
const path = svg.getElementById('filterPath');
const svgDocumentElement = svg.documentElement;
// Some SVGs come without xlink
svgDocumentElement.setAttribute('xmlns:xlink', 'http://www.w3.org/1999/xlink');
// We add the SVG to the body so we can take measurements of its
// original size
document.body.appendChild(svg.documentElement);
const { x, y, width, height } = svgDocumentElement.getBBox();
const scalers = toUserSpace(x, y, width, height);
// Converts the clipPath in values between 0 and 1 so we can use
// object bounding box as clip path units. It will make the clip path
// always adapt to the size of the picture.
const commands = path.getAttribute('d').match(/[a-z][^a-z]*/ig).map(c => {
return c.split(/[, ]|(?=-)|(?<=[a-z])(?=[0-9])/i).filter(part => !!part.length);
});
const relSpaceCommands = commands.map(([command, ...nums]) => {
const axes = commandAxes[command];
const relSpaceNums = nums.map((n, i) => {
const scaler = scalers[axes[i % axes.length]];
return scaler(n);
});
return `${command}${relSpaceNums.join(',')}`.replace(/,-/g, '-');
});
path.setAttribute('d', relSpaceCommands.join(''));
path.removeAttribute('fill');
svgDocumentElement.removeAttribute('viewBox');
let defsEl = svgDocumentElement.querySelector('defs');
if (!defsEl) {
defsEl = svg.createElementNS('http://www.w3.org/2000/svg', 'defs');
svgDocumentElement.appendChild(defsEl);
}
let clipPathEl = svgDocumentElement.querySelector('clipPath');
if (!clipPathEl) {
clipPathEl = svg.createElementNS('http://www.w3.org/2000/svg', 'clipPath');
clipPathEl.setAttribute('id', 'clip-path');
defsEl.appendChild(clipPathEl);
}
clipPathEl.setAttribute('clipPathUnits', 'objectBoundingBox');
const backgroundEls = svgDocumentElement.getElementsByClassName('background');
// We set the BG elements into their own svg so that when the total
// space gets stretched out, so does the backgrounds elements
Array.from(backgroundEls).forEach(el => {
const bgBbox = el.getBBox();
const svgBackground = document.createElement('svg');
const strokeWidth = el.getAttribute('stroke-width');
// If the background has a strokeWidth, the viewBox need to take it
// into account
if (strokeWidth) {
const adj = parseFloat(strokeWidth) / 2;
svgBackground.setAttributeNS('http://www.w3.org/2000/svg', 'viewBox',
`${bgBbox.x - adj} ${bgBbox.y - adj} ${bgBbox.width + (adj * 2)} ${bgBbox.height + (adj * 2)}`);
} else {
svgBackground.setAttributeNS('http://www.w3.org/2000/svg', 'viewBox', `${bgBbox.x} ${bgBbox.y} ${bgBbox.width} ${bgBbox.height}`);
}
svgBackground.setAttributeNS('http://www.w3.org/2000/svg', 'preserveAspectRatio', 'none');
svgBackground.appendChild(el);
svgDocumentElement.appendChild(svgBackground);
});
defsEl.appendChild(path);
// Setting the clip path for use and for preview
const useClipPathEl = document.createElementNS('http://www.w3.org/2000/svg', 'use');
useClipPathEl.setAttributeNS('http://www.w3.org/1999/xlink', 'href', '#filterPath');
useClipPathEl.setAttribute('fill', 'none');
clipPathEl.appendChild(useClipPathEl);
const svgPreviewEl = svg.createElementNS('http://www.w3.org/2000/svg', 'svg');
svgPreviewEl.setAttributeNS('http://www.w3.org/2000/svg', 'viewBox', '0 0 1 1');
svgPreviewEl.setAttribute('width', '800');
svgPreviewEl.setAttribute('height', '600');
svgPreviewEl.setAttribute('id', 'preview');
svgPreviewEl.setAttributeNS('http://www.w3.org/2000/svg', 'preserveAspectRatio', 'none');
const previewUseEl = useClipPathEl.cloneNode(true);
previewUseEl.setAttribute('fill', 'darkgrey');
svgPreviewEl.appendChild(previewUseEl);
svgDocumentElement.appendChild(svgPreviewEl);
const imageEl = document.createElement('image');
imageEl.setAttribute('xlink:href', '');
imageEl.setAttribute('clip-path', 'url(#clip-path)');
svgDocumentElement.appendChild(imageEl);
// Give a default size to the SVGs for an easier preview on disk
svgDocumentElement.setAttribute('width', '800');
svgDocumentElement.setAttribute('height', '600');
const outFile = new File([svgDocumentElement.outerHTML], filePicker.files[0].name, { type: 'image/svg+xml' });
const outFileReader = new FileReader();
const outReaderPromise = new Promise((resolve, reject) => {
outFileReader.addEventListener('load', () => resolve(outFileReader.result));
outFileReader.addEventListener('error', () => reject(outFileReader.error));
});
outFileReader.readAsDataURL(outFile);
const dataURL = await outReaderPromise;
const downloadLinkEl = document.createElement('a');
downloadLinkEl.href = dataURL;
downloadLinkEl.innerText = 'Download';
downloadLinkEl.setAttribute('download', file.name);
downloadLinkEl.classList.add('dl_link');
document.getElementById('downloadArea').appendChild(downloadLinkEl);
});
});
@@ -0,0 +1,106 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="shape" width="800" height="600">
<defs>
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
<use xlink:href="#filterPath" fill="none"/>
</clipPath>
<path id="filterPath" d="M.7306.2009c.0859.0167.2194.0167.2194.0586c0 .0418-.1336.1339-.1908.2259c-.0572.0921-.0318.1883-.0508.2301c-.0191.0418-.0827.0251-.1717.0753c-.089.0502-.2067.1632-.3053.159c-.0986-.0042-.1814-.1297-.1814-.2595c0-.1297.0827-.2677.1399-.3808c.0604-.1172.0954-.2134.1526-.2469c.0572-.0335.1399.0041.2003.046c.0636.0336.1018.0754.1876.0922z">
<animate dur="100s" repeatCount="indefinite" attributeName="d" attributeType="XML"
values="
M.7306.2009c.0859.0167.2194.0167.2194.0586c0 .0418-.1336.1339-.1908.2259c-.0572.0921-.0318.1883-.0508.2301c-.0191.0418-.0827.0251-.1717.0753c-.089.0502-.2067.1632-.3053.159c-.0986-.0042-.1814-.1297-.1814-.2595c0-.1297.0827-.2677.1399-.3808c.0604-.1172.0954-.2134.1526-.2469c.0572-.0335.1399.0041.2003.046c.0636.0336.1018.0754.1876.0922z;
M.6328.2501c.0698.0667.1807.0627.2441.1255c.0634.0588.0856.1842.0666.3019c-.019.1176-.0761.2313-.1585.2627c-.0824.0314-.1839-.0157-.2505-.0824c-.0666-.0667-.0919-.1489-.1489-.1921c-.0539-.0431-.1363-.0471-.2124-.1058c-.0761-.0588-.1489-.1764-.1141-.2274c.038-.0548.1806-.0431.2726-.1019c.0887-.0588.1268-.1842.1616-.1804c.0349.004.0666.1333.1395.2z;
M.7259.05c.0824 0 .1427.113.1808.242c.0381.1291.0571.2743.0318.4034c-.0285.1291-.1015.2461-.1935.2542c-.092.0081-.1999-.0887-.2824-.1412c-.0825-.0525-.13-.0564-.2157-.0645c-.0825-.0121-.1999-.0323-.1967-.0847c.0032-.0525.13-.1412.203-.1936c.073-.0525.0952-.0726.1174-.0968c.0222-.0242.0445-.0525.1047-.125c.0635-.0767.1682-.1937.2507-.1937z;
M.763.0904c.0256.0646-.0319.2242.0032.3458c.0351.1254.1661.2128.1821.2888c.0159.076-.0831.1406-.1725.1824c-.0895.0418-.1725.057-.2332.0266c-.0639-.0304-.1086-.1102-.1693-.1596c-.0639-.0494-.147-.076-.2172-.1482c-.0703-.0722-.1309-.1938-.0959-.266c.0351-.0722.1661-.0912.2587-.1292c.0926-.038.1501-.095.2332-.1368c.0768-.0418.1854-.0722.2109-.0038z;
M.7948.0851c.0763.0459.124.1569.1463.2678c.0191.111.0095.2257-.0477.2831c-.0572.0574-.1654.0574-.2385.111c-.0699.0536-.1049.153-.159.1875c-.0541.0345-.1336.0077-.2131-.0421c-.0827-.0459-.1686-.111-.2067-.2066c-.0382-.0957-.0318-.2181.0032-.329c.0318-.1071.0922-.2027.1686-.2487c.0763-.0459.1717-.0459.2704-.0498c.0985-.0076.2003-.0229.2767.0268z;
M.7306.2009c.0859.0167.2194.0167.2194.0586c0 .0418-.1336.1339-.1908.2259c-.0572.0921-.0318.1883-.0508.2301c-.0191.0418-.0827.0251-.1717.0753c-.089.0502-.2067.1632-.3053.159c-.0986-.0042-.1814-.1297-.1814-.2595c0-.1297.0827-.2677.1399-.3808c.0604-.1172.0954-.2134.1526-.2469c.0572-.0335.1399.0041.2003.046c.0636.0336.1018.0754.1876.0922z"
calcMode="spline"
keySplines=".56 .37 .43 .58;.56 .37 .43 .58;.56 .37 .43 .58;.56 .37 .43 .58;.56 .37 .43 .58"/>
</path>
<g id="animation">
<animateTransform xlink:href="#shape" attributeName="transform" attributeType="XML" type="translate" dur="6s" values="0 0;0 8;0 0" repeatCount="indefinite" calcMode="spline" keySplines=".45 .05 .55 .95;.45 .05 .55 .95"/>
<animateTransform xlink:href="#group_1" attributeName="transform" attributeType="XML" type="translate" dur="30s" values="0 0;0 30;0 0" repeatCount="indefinite" calcMode="spline" keySplines=".56 .37 .43 .58;.56 .37 .43 .58"/>
<animateTransform xlink:href="#group_2" attributeName="transform" attributeType="XML" type="translate" dur="30s" begin="2s" values="0 0;0 30;0 0" repeatCount="indefinite" calcMode="spline" keySplines=".56 .37 .43 .58;.56 .37 .43 .58"/>
<animateTransform xlink:href="#group_3" attributeName="transform" attributeType="XML" type="translate" dur="30s" values="0 0;10 30;0 0" repeatCount="indefinite" calcMode="spline" keySplines=".56 .37 .43 .58;.56 .37 .43 .58"/>
<animateTransform xlink:href="#group_3" attributeName="transform" attributeType="XML" type="rotate" dur="30s" values="0;5;0" repeatCount="indefinite" calcMode="spline" keySplines=".56 .37 .43 .58;.56 .37 .43 .58" additive="sum"/>
<animateTransform xlink:href="#group_4" attributeName="transform" attributeType="XML" type="translate" dur="30s" begin="3s" values="0 0;10 30;0 0" repeatCount="indefinite" calcMode="spline" keySplines=".56 .37 .43 .58;.56 .37 .43 .58"/>
<animateTransform xlink:href="#group_4" attributeName="transform" attributeType="XML" type="rotate" dur="30s" begin="3s" values="0;-5;0" repeatCount="indefinite" calcMode="spline" keySplines=".56 .37 .43 .58;.56 .37 .43 .58" additive="sum"/>
<animateTransform xlink:href="#group_5" attributeName="transform" attributeType="XML" type="translate" dur="30s" begin="2s" values="0 0;20 30;0 0" repeatCount="indefinite" calcMode="spline" keySplines=".56 .37 .43 .58;.56 .37 .43 .58"/>
<animateTransform xlink:href="#group_5" attributeName="transform" attributeType="XML" type="rotate" dur="30s" begin="2s" values="0;5;0" repeatCount="indefinite" calcMode="spline" keySplines=".56 .37 .43 .58;.56 .37 .43 .58" additive="sum"/>
<animateTransform xlink:href="#group_6" attributeName="transform" attributeType="XML" type="translate" dur="30s" values="0 0;-10 -30;0 0" repeatCount="indefinite" calcMode="spline" keySplines=".56 .37 .43 .58;.56 .37 .43 .58"/>
<animateTransform xlink:href="#group_6" attributeName="transform" attributeType="XML" type="rotate" dur="30s" values="0;-5;0" repeatCount="indefinite" calcMode="spline" keySplines=".56 .37 .43 .58;.56 .37 .43 .58" additive="sum"/>
</g>
</defs>
<svg viewBox="0 0 1 1" id="preview" preserveAspectRatio="none">
<use xlink:href="#filterPath" fill="darkgrey"/>
</svg>
<image xlink:href="" clip-path="url(#clip-path)"/>
<svg class="background" viewBox="0 0 1134.56 934.14" preserveAspectRatio="xMidYMid meet">
<g id="group_1">
<path d="M710.39,2.56a97,97,0,0,1,21.9,41.7,1.5,1.5,0,0,0,2.9-.8,100.31,100.31,0,0,0-22.6-43c-1.3-1.4-3.5.7-2.2,2.1Z" fill="#383E45" opacity=".1"/>
<path d="M736.09,15.36a126.56,126.56,0,0,1,10.7,41.4c.2,1.9,3.2,1.9,3,0a127.66,127.66,0,0,0-11.1-42.9c-.8-1.8-3.4-.3-2.6,1.5Z" fill="#383E45" opacity=".1"/>
</g>
<g id="group_2">
<path d="M49.79,417.86c-3.5,10-7.2,20-14,28.3-1.2,1.5.9,3.6,2.1,2.1,7.1-8.7,11.1-19.1,14.8-29.6.6-1.8-2.3-2.6-2.9-.8Z" fill="#383E45" opacity=".1"/>
<path d="M49.79,418.66c2.2,4.9,2.9,10.6,4.6,15.7a117.9,117.9,0,0,0,5.7,13.8c.8,1.7,3.4.2,2.6-1.5a115.28,115.28,0,0,1-6.5-16.5c-1.3-4.3-2-8.9-3.8-13-.8-1.8-3.3-.2-2.6,1.5Z" fill="#383E45" opacity=".1"/>
<path d="M36.49,448.16c2.9,1.2,4.9,6.9,6.1,9.6a63.87,63.87,0,0,1,4.1,12.1,1.5,1.5,0,0,0,2.9-.8,78,78,0,0,0-5.4-14.9c-1.6-3.3-3.3-7.4-6.9-8.9-1.8-.8-2.5,2.1-.8,2.9Z" fill="#383E45" opacity=".1"/>
<path d="M49.69,470.46a170.94,170.94,0,0,1,12.2-22.2c1.1-1.6-1.5-3.1-2.6-1.5A170.94,170.94,0,0,0,47.09,469c-.8,1.8,1.8,3.3,2.6,1.5Z" fill="#383E45" opacity=".1"/>
<path d="M2,535.76c-4.6,4.4-.5,11.2,5.1,11.8,3.8.4,12.8-4,12.8,2.3,0,3.1-.8,6.3.9,9.1a7.16,7.16,0,0,0,6.6,3.3c4-.1,7.7-4,10,.8,1.3,2.8,1.5,5.3,4.7,6.7a5.21,5.21,0,0,0,7-2c2.2-3.2-3-6.2-5.2-3,.7-1-1.7-6.5-2.5-7.5a7.11,7.11,0,0,0-4.6-2.9,12,12,0,0,0-5.9.8c-3,.9-5.4,1.6-5.3-2.4s.6-8.6-3.4-11.2a10,10,0,0,0-6.1-1.3,22,22,0,0,0-3.7.6c-.9.2-8.3,1.1-6.2-.9,2.8-2.6-1.4-6.8-4.2-4.2Z" fill="#3AADAA"/>
<path d="M33.09,532.46c.6,3.4,1.3,6.9,1.9,10.3a3,3,0,0,0,2.9,2.2c3.8-.1,5.9-2,9.1-3.6,5.3-2.7,3.7,2.2,4.5,5.7a7,7,0,0,0,4.5,5.3c4.7,1.6,8.7,1.5,12.8,4.9,3,2.4,7.2-1.8,4.2-4.2a24.91,24.91,0,0,0-11.1-5.6,11.09,11.09,0,0,1-3.5-.8c-1.6-.9-1.2-1.4-1.2-3.3a15.94,15.94,0,0,0-.7-4.8,6.85,6.85,0,0,0-7-4c-4.4.3-7.3,4.6-11.6,4.6,1,.7,1.9,1.5,2.9,2.2-.6-3.4-1.3-6.9-1.9-10.3-.7-4-6.5-2.4-5.8,1.4Z" fill="#3AADAA"/>
</g>
<g id="group_3" transform-origin="center">
<polygon points="1015.78 359.26 1005.49 355.26 996.38 361.36 996.99 350.36 988.28 343.56 998.99 340.76 1002.78 330.36 1008.78 339.76 1019.78 340.16 1012.78 348.66 1015.78 359.26" fill="none" stroke="#383E45" stroke-miterlimit="10" stroke-width="3" opacity=".1"/>
<path d="M998.19,324.56a316.39,316.39,0,0,1,55.6-69.6c1.4-1.3-.7-3.4-2.1-2.1a317.27,317.27,0,0,0-56.1,70.2,1.5,1.5,0,0,0,2.6,1.5Z" fill="#383E45" opacity=".1"/>
<path d="M1019.79,319.56a372.21,372.21,0,0,1,90.6-94.2c1.5-1.1.1-3.7-1.5-2.6a375.54,375.54,0,0,0-91.6,95.3c-1.2,1.6,1.4,3.1,2.5,1.5Z" fill="#383E45" opacity=".1"/>
<path d="M1025.19,348.36c11.8-14.5,24.4-28.5,37.5-41.8,1.4-1.4-.8-3.5-2.1-2.1-13.2,13.3-25.7,27.3-37.5,41.8-1.2,1.4.9,3.6,2.1,2.1Z" fill="#383E45" opacity=".1"/>
<ellipse cx="1016.99" cy="94.36" rx="53" ry="52.1" fill="#7C6576"/>
<ellipse cx="992.79" cy="258.56" rx="28.7" ry="29.4" fill="#3AADAA"/>
<path d="M882.09,129.76c7.7,0,7.7-12,0-12s-7.7,12,0,12Z" fill="#3AADAA"/>
<path d="M1089.49,212.66c-4.2-4.1-2.5-12.6,3.2-14.6,7.1-2.4,12.9,7,9.6,12.9a1.5,1.5,0,0,0,2.6,1.5c4.5-7.9-2.8-19.7-12.3-17.5-8.4,2-11.3,14-5.3,19.8,1.4,1.3,3.5-.8,2.2-2.1Z" fill="#7C6576"/>
</g>
<g id="group_4">
<path d="M389.89,749.46a49.52,49.52,0,0,1-13.4,27.8c-1.3,1.4.8,3.5,2.1,2.1a52.18,52.18,0,0,0,14.1-29.2c.3-1.8-2.6-2.6-2.8-.7Z" fill="#383E45" opacity=".1"/>
<path d="M390.29,751.16a92.08,92.08,0,0,0,15,23.5c1.3,1.5,3.4-.7,2.1-2.1a84.57,84.57,0,0,1-14.5-22.9c-.7-1.8-3.3-.3-2.6,1.5Z" fill="#383E45" opacity=".1"/>
<path d="M379.39,778.76c-.1-.2-.3-.5-.4-.7l-2.4,1.8a63,63,0,0,1,15.5,20c.8,1.7,3.4.2,2.6-1.5a65.55,65.55,0,0,0-15.9-20.7,1.52,1.52,0,0,0-2.4,1.8c.1.2.3.5.4.7.9,1.8,3.5.3,2.6-1.4Z" fill="#383E45" opacity=".1"/>
<path d="M395,799a135.48,135.48,0,0,1,12.1-23.3c1-1.6-1.5-3.1-2.6-1.5a140.6,140.6,0,0,0-12.4,24.1c-.7,1.7,2.2,2.5,2.9.7Z" fill="#383E45" opacity=".1"/>
<path d="M282.69,713.56c1.9,3,5.1,1.9,6.5-1,3.2-6.5,3-14.2,10.2-18.3,7.5-4.3,12.3,2.8,19.4,3.6,5.5.6,10.9-2.3,14.6-6.1,4.5-4.7,6.9-10.9,10-16.6,1.8-3.3,4.2-5,7.6-2.3,1.1.9,2,2,3,2.9a16.4,16.4,0,0,0,4.7,3,19.23,19.23,0,0,0,23.8-7.8,1.5,1.5,0,0,0-2.6-1.5,15.78,15.78,0,0,1-13.8,7.8c-6.6,0-9.2-3.9-14.1-7.4-9.2-6.6-13.2,8.4-16.6,14.2-3.9,6.5-10.7,13-18.9,10.2-4.6-1.6-8.1-5-13.3-4.3a15.66,15.66,0,0,0-10.5,6.6,30.07,30.07,0,0,0-3.3,6.1c-.6,1.5-1.1,3-1.6,4.6-.2.5-1.9,5.5-2.4,4.8-1.2-1.6-3.8-.1-2.7,1.5Z" fill="#383E45" opacity=".1"/>
<path d="M346.69,701.66c1.4-11.3,17.6-3.2,23.6-2.6,5.6.6,10.4-1.3,13.1-6.4,1.8-3.5,2.4-7.8,6.8-9.3,3.6-1.2,7.9-.4,11.6-.9a43.81,43.81,0,0,0,19-7.6c1.6-1.1.1-3.7-1.5-2.6a42.34,42.34,0,0,1-13,6.3c-4.6,1.2-9,1.1-13.7,1.5-7.4.7-8.6,5.4-11.7,11.2-5.7,10.5-17.7,1.2-26.3,1.5-5.4.2-10.1,3.5-10.8,9-.4,1.8,2.6,1.8,2.9-.1Z" fill="#383E45" opacity=".1"/>
<path d="M306.59,811.46c-6-6.9-2.5-19,7.7-18.6,8.9.4,11.9,12.4,3.9,16.6-1.7.9-.2,3.5,1.5,2.6,10.2-5.4,6.8-21-4.6-22.1-13.3-1.3-18.6,14.4-10.7,23.6,1.3,1.5,3.4-.6,2.2-2.1Z" fill="#7C6576"/>
<path d="M293.39,672.56c-3.4-2.7-10.4-9.8-1.2-11.9,1.8-.4,3.5.4,5.3-.3,3.6-1.4,4.8-5.3,4.7-8.9a41.32,41.32,0,0,0-1.4-7c-.6-2.7-1.8-5.8,2-5.9.7,0,1.4.3,2.2.3,3.5,0,6-2.4,7.2-5.5.7-1.8-2.2-2.6-2.9-.8-2.4,6.6-10.3-1.2-11.8,6.4-1.1,5.9,6.6,18.1-3.7,18.7-4.1.2-7.7.1-8.8,5-1.1,5.1,2.8,8.9,6.4,11.8,1.3,1.4,3.5-.7,2-1.9Z" fill="#7C6576"/>
<path d="M315.59,658.56c-1.5-2.5-4-6.9-2.9-10,1.2-3.3,6.8-3,9.4-5.2a11.21,11.21,0,0,0,3.6-11.8,1.5,1.5,0,0,0-2.9.8,8,8,0,0,1-1.6,7.7c-1.9,2.1-4,2-6.4,2.9a7.73,7.73,0,0,0-4.5,3.4c-2.2,4.4.4,9.9,2.7,13.7,1,1.6,3.6.1,2.6-1.5Z" fill="#7C6576"/>
</g>
<g id="group_5">
<path d="M174.29,247.46a56.67,56.67,0,0,1-11.7,21.9c-1.3,1.5.9,3.6,2.1,2.1a59.57,59.57,0,0,0,12.5-23.2c.5-1.8-2.4-2.6-2.9-.8Z" fill="#383E45" opacity=".1"/>
<path d="M174.09,249c1.8,7.5,3.6,16.3,8.6,22.4,1.2,1.5,3.3-.6,2.1-2.1-4.6-5.5-6.2-14.2-7.8-21-.4-2-3.3-1.2-2.9.7Z" fill="#383E45" opacity=".1"/>
<path d="M161.89,272.26c2.7,1.5,4.9,7.5,6.2,10.3a71.47,71.47,0,0,1,4.3,11.7,1.5,1.5,0,0,0,2.9-.8,86.5,86.5,0,0,0-5.3-13.9c-1.5-3.1-3.4-8.2-6.6-10-1.7-.8-3.2,1.7-1.5,2.7Z" fill="#383E45" opacity=".1"/>
<path d="M175.49,293.56a146.53,146.53,0,0,1,9.3-22c.9-1.7-1.7-3.2-2.6-1.5a156,156,0,0,0-9.6,22.7c-.6,1.8,2.3,2.6,2.9.8Z" fill="#383E45" opacity=".1"/>
<path d="M339.49,59.26c-1.9-13.1,14.5-16.9,23.4-21.1a106,106,0,0,0,12.9-7.9c2.1-1.4,4.2-2.8,6.4-4,2.6-1.4,5.8-3.6,8-.8,1.6,2,.9,2.5-.1,4.7-.5,1-1,2.1-1.6,3.1a35,35,0,0,1-5,7.1c-4.1,4.3-10,4.9-15.3,7a72.22,72.22,0,0,0-11.8,5.9c-4.7,3-10.6,9.7-16.6,6.3a1.5,1.5,0,0,0-1.5,2.6c5.3,3,10.3.3,14.8-2.9a75.65,75.65,0,0,1,22.4-11.1c6.5-2,10.6-5.3,14.3-11.1,2.1-3.3,6.9-10.1,3.8-14.1-2.8-3.5-8.2-1.6-11.5,0-7,3.6-13,8.8-20.1,12.3-10.7,5.2-27.7,9.4-25.5,24.9.4,1.8,3.3,1,3-.9Z" fill="#383E45" opacity=".1"/>
<path d="M174.79,327.66c-3.1,5-1.6,11.6,3,15.3,6.8,5.4,14.1-.4,19.9-4.3,4.8-3.3,11.7-5.5,15,.9,1.5,3,2,6.5,3.4,9.6a9.28,9.28,0,0,0,4.8,5.3c4.6,2,9.1-1.5,13.8-.8,1.9.3,2.7-2.6.8-2.9-3.4-.5-6.1.7-9.4,1.2-5.6.7-7.1-3-8.5-7.4s-2.7-9.5-7.3-11.5c-5.9-2.6-11.9,1.6-16.6,4.8-3.8,2.7-8.8,6.1-13.5,3.2a8.81,8.81,0,0,1-2.8-11.8,1.53,1.53,0,0,0-2.6-1.6Z" fill="#383E45" opacity=".1"/>
<path d="M232.39,321.76c-2,5.3,1.8,9.7,6.6,11.5,4.2,1.6,26.2,2.7,25,9.5-.3,1.9,2.5,2.7,2.9.8,2.9-15.5-37.1-6.5-31.6-21,.7-1.8-2.2-2.6-2.9-.8Z" fill="#383E45" opacity=".1"/>
<path d="M127.49,310.76a1.5,1.5,0,0,0,0-3,1.5,1.5,0,0,0,0,3Z" fill="#3AADAA"/>
<path d="M126.19,315.26c7.7,0,7.7-12,0-12s-7.7,12,0,12Z" fill="#3AADAA"/>
<path d="M253.49,181.16c-6-3.9-11.1-9.4-12.8-16.6-1.6-6.7.7-14.6,6.6-18.6s13.9-2.3,20.7-2.8a48.33,48.33,0,0,0,15.9-4c22.7-9.7,36.6-31.3,53.7-47.9,8.7-8.4,19.1-16.6,31.2-19.3,11.2-2.5,26.1.2,28.9,13.3,3.3,15.3-10.9,26.6-22,34.1-12.7,8.5-25.4,16.9-38.1,25.4-13.8,9.2-27.4,18.9-41.6,27.5-13.2,8.1-29.9,14.5-44.5,5.9a1.5,1.5,0,0,0-1.5,2.6c12,7.1,26.3,5,38.4-.8,15.6-7.4,29.9-18.7,44.2-28.2,14.9-9.9,29.8-19.7,44.7-29.7,10.9-7.3,22.4-16.4,23.7-30.5,1.1-11.8-6.9-20.8-18.3-22.8-12.3-2.2-24.4,2.9-34.3,9.8-24.3,17-38.5,47.4-67,58.6a47.83,47.83,0,0,1-13.3,3.2c-4.4.3-8.8-.2-13.2.3-6.6.7-12,3.9-15.1,9.8-6.7,12.8,1.3,26.3,12.3,33.4,1.5.9,3-1.6,1.4-2.7Z" fill="#383E45" opacity=".1"/>
<path d="M258.59,163.06c-3.1-.5-2.7-3.2-2-5,.9-2.2,2.8-3,5-3.7a48,48,0,0,1,7.6-1.1,74.83,74.83,0,0,0,16.2-4.5,113.6,113.6,0,0,0,27.5-16.7c9.5-7.6,18.1-16.1,27-24.4,8.7-8.2,18.4-18.5,31.3-18.1l-1.5-1.5c1.1,11.7-9.7,19.5-18.2,25.5-10.2,7.2-20.3,14.5-30.5,21.7-9.4,6.7-18.7,13.7-28.3,20a79.16,79.16,0,0,1-15.2,8.1c-5.2,1.9-13.3,4.8-17.6-.1-1.3-1.4-3.4.7-2.1,2.1,6.8,7.7,20.5,1.4,27.8-2.4,12.6-6.5,23.9-15.8,35.5-24,12-8.6,24.3-16.9,36.2-25.8,8.1-6.1,16.6-14.2,15.6-25.2a1.54,1.54,0,0,0-1.5-1.5c-13.5-.4-23.7,9.8-32.8,18.4-11.5,10.8-22.6,22.1-35.6,31a99.22,99.22,0,0,1-19.8,10.6c-6.8,2.6-13.6,3.4-20.7,4.8-4.1.8-8.3,2.7-9.1,7.2-.6,3.4,1,7,4.7,7.6,1.6.2,2.5-2.7.5-3Z" fill="#383E45" opacity=".1"/>
<path d="M374.29,122.16c1.8-2.4,3.8-2.8,6-1a7.68,7.68,0,0,1,1.8,5c.1,1.8-.7,3.5-.8,5.3-.1,1.6.1,3.1,1.4,4.1,2.8,2.1,6.6-.5,8.3-2.8.8-1.1,1.5-3.2,2.6-3.9,4.4-2.9,4.1,1.3,4.9,3.1a5.75,5.75,0,0,0,2.8,3.3c4.9,2.4,8.9-2.4,11.2-6.1,1-1.6-1.6-3.1-2.6-1.5-1.5,2.3-5.3,8.5-8.8,2.9-.6-1-.5-2.5-1.1-3.6a4.9,4.9,0,0,0-3.6-2.8c-2-.2-3.7,1.1-5,2.5-1.8,1.9-6.6,10.9-6.9,3.2-.1-4.6,1-10-4.3-12.3a6.55,6.55,0,0,0-9,3.7c-.4,1.9,2.5,2.7,3.1.9Z" fill="#7C6576"/>
<path d="M375.59,109.36a7.35,7.35,0,0,1,10.8,1.4c1.4,2.2.4,5.1,1.9,7.2a3.18,3.18,0,0,0,3.6,1.4,7.72,7.72,0,0,0,2.4-1.2c3.2-2,6-2.8,9,.4,1.3,1.4,3.4-.7,2.1-2.1a9.12,9.12,0,0,0-9.3-2.8c-1.8.6-4.5,3.3-5.5,1.3-.7-1.3-.3-3.3-.9-4.7-2.8-6-11.3-7.4-16-3-1.7,1.3.5,3.4,1.9,2.1Z" fill="#7C6576"/>
<ellipse cx="126.69" cy="158.06" rx="62.1" ry="60.9" fill="#3AADAA"/>
<path d="M72.89,218.36c-2.8,1.9-7.9,5.9-11.6,3.3-4.1-2.8.5-10.2,2-13.1a104.36,104.36,0,0,1,12.3-18.5c9.5-11.6,20.8-21.6,32.2-31.3,2.9-2.5-1.3-6.7-4.2-4.2-15.7,13.4-31.4,27.5-42.3,45.4-3.7,6.1-10.6,16.3-6.4,23.6,4.8,8.3,14.9,4.2,20.9.1,3.3-2.3.3-7.5-2.9-5.3Z" fill="#383E45"/>
<path d="M130.09,139.46l27-21.9c3-2.4-1.3-6.7-4.2-4.2l-27,21.9c-3.1,2.4,1.2,6.6,4.2,4.2Z" fill="#383E45"/>
<path d="M181.39,105.66c4.6-2.4,21.3-12.2,24.3-4.3,2.6,6.8-3.8,16.7-7.9,21.7-2.4,3,1.8,7.2,4.2,4.2,6-7.3,14-20.8,8.2-30.4-6.6-10.8-24.1-.5-31.9,3.6-3.4,1.8-.3,7,3.1,5.2Z" fill="#383E45"/>
<path d="M97.29,189.76a290.88,290.88,0,0,1,45.4-41.9c3.1-2.3.1-7.5-3-5.2a295.85,295.85,0,0,0-46.6,42.9c-2.6,2.8,1.6,7.1,4.2,4.2Z" fill="#383E45"/>
</g>
<g id="group_6">
<path d="M984.59,762.66a47.4,47.4,0,0,1-9.2,16c-1.3,1.5.9,3.6,2.1,2.1a50.88,50.88,0,0,0,10-17.3c.6-1.8-2.3-2.6-2.9-.8Z" fill="#383E45" opacity=".1"/>
<path d="M984.39,765.16c1.4,2.6,1.7,5.7,2.9,8.5a35.43,35.43,0,0,0,4.2,7.3c1.1,1.5,3.7,0,2.6-1.5a31.14,31.14,0,0,1-4.5-8.2c-.9-2.5-1.3-5.2-2.6-7.6-.9-1.7-3.5-.2-2.6,1.5Z" fill="#383E45" opacity=".1"/>
<path d="M975.49,780a45.32,45.32,0,0,1,5.7,12.2,1.48,1.48,0,0,0,2.7.4,27.39,27.39,0,0,1,8.9-10.5c1.6-1.1.1-3.7-1.5-2.6a31.94,31.94,0,0,0-10,11.6,25.12,25.12,0,0,1,2.7.4,50.56,50.56,0,0,0-6-12.9c-1-1.7-3.6-.2-2.5,1.4Z" fill="#383E45" opacity=".1"/>
<path d="M794.49,670.16c-.8,6.2,4.4,10.8,10.4,11.3,10.5.7,16.8-10.7,26.6-12.5,7.3-1.3,10,4.5,13.9,9.3A17.9,17.9,0,0,0,854,684a19.15,19.15,0,0,0,19.5-5.2c1.3-1.4-.8-3.5-2.1-2.1a16,16,0,0,1-20.2,2.7c-5.7-3.6-7.2-11.4-14.1-13.3-6.2-1.7-12.4,1.8-17.2,5.3-3.1,2.3-6.2,4.8-9.9,6.1-4.6,1.6-13.4.3-12.4-6.6,0-1.8-2.8-2.6-3.1-.7Z" fill="#383E45" opacity=".1"/>
<path d="M830.09,700.36a27.56,27.56,0,0,1,23.3-1c5.5,2.4,9.6,6.7,16,6.4,5.7-.2,10.8-3.3,15.7-6,6.1-3.3,17.9-7.6,21.1,1.9.6,1.8,3.5,1,2.9-.8-1.8-5.1-6.6-7.9-11.9-8.1-8.2-.2-14.7,5.9-22,8.6-5.6,2.1-10,1.3-15.1-1.7a35.59,35.59,0,0,0-10.3-4.7,31.38,31.38,0,0,0-21.3,2.7c-1.6,1-.1,3.5,1.6,2.7Z" fill="#383E45" opacity=".1"/>
<path d="M713.09,875.86a31.73,31.73,0,0,1-8.9,24.1l2.4,1.8a49.25,49.25,0,0,0,6.2-12.6c.6-1.8-2.3-2.6-2.9-.8a44.08,44.08,0,0,1-5.9,11.9c-1,1.4,1.2,3,2.4,1.8a35,35,0,0,0,9.7-26.2c-.1-1.9-3.1-1.9-3,0Z" fill="#383E45" opacity=".1"/>
<path d="M713.19,876.26a44.56,44.56,0,0,0,11.6,21.8c1.3,1.4,3.5-.7,2.1-2.1a42.48,42.48,0,0,1-10.8-20.5c-.4-1.9-3.3-1.1-2.9.8Z" fill="#383E45" opacity=".1"/>
<path d="M703.79,904.46a73,73,0,0,1,12.9,19.1c.8,1.8,3.4.2,2.6-1.5a71.56,71.56,0,0,0-13.4-19.7c-1.3-1.5-3.4.7-2.1,2.1Z" fill="#383E45" opacity=".1"/>
<path d="M719,923.56c3.2-7.6,6.5-15.1,9.7-22.7.8-1.8-1.8-3.3-2.6-1.5-3.2,7.6-6.5,15.1-9.7,22.7-.7,1.8,1.9,3.3,2.6,1.5Z" fill="#383E45" opacity=".1"/>
<ellipse cx="858.59" cy="756.06" rx="58.6" ry="57.7" fill="#7C6576"/>
<path d="M822.69,706.46c1.5-11.2,16.7-6.4,22.9-3.5a107.67,107.67,0,0,1,17.6,10.5,123.44,123.44,0,0,1,30.5,33.1,164.7,164.7,0,0,1,19.4,44.2c2,7.1,14.4,49.7-3.3,45.1-3.7-1-5.3,4.8-1.6,5.8,5.8,1.5,11.4-1.2,14.6-6.2,3.8-6,2.8-13.6,1.7-20.2a202.48,202.48,0,0,0-13.3-47.7c-11.8-28.1-31.7-53.6-59.1-67.9-7-3.6-15.2-7.6-23.3-5.9a14.74,14.74,0,0,0-12.2,12.8c-.4,3.8,5.6,3.7,6.1-.1Z" fill="#383E45"/>
<path d="M890.79,762.86a91.19,91.19,0,0,1,14.8,53c-.1,3.9,5.9,3.9,6,0a95.66,95.66,0,0,0-15.6-56c-2.1-3.3-7.3-.3-5.2,3Z" fill="#383E45"/>
<path d="M835,685.66a45.57,45.57,0,0,1,27,13.2c2.7,2.7,7-1.5,4.2-4.2a51.66,51.66,0,0,0-31.2-15c-3.8-.4-3.8,5.6,0,6Z" fill="#383E45"/>
</g>
</svg>
</svg>

After

Width:  |  Height:  |  Size: 19 KiB

@@ -0,0 +1,106 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="shape" width="800" height="600">
<style>
@keyframes scale_1 {
0%, 100% {transform: scale(1);}
50% {transform: scale(.3);}
}
@keyframes scale_2 {
0%, 100% {transform: scale(.3);}
50% {transform: scale(1.5);}
}
.circle_scale {
transform-box: fill-box;
transform-origin: center;
}
#element_1_2 {animation: scale_1 5s linear infinite;}
#element_1_3 {animation: scale_2 5s linear infinite;}
#element_1_4 {animation: scale_2 5s linear infinite;}
#element_1_6 {animation: scale_2 5s linear infinite;}
#element_1_7 {animation: scale_1 5s linear infinite;}
#element_1_8 {animation: scale_1 5s linear infinite;}
#element_1_9 {animation: scale_2 5s linear infinite;}
</style>
<defs>
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
<use xlink:href="#filterPath" fill="none"/>
</clipPath>
<path id="filterPath" d="M.8777.3843c.0549.1858.0061.4094-.1174.507c-.1242.0977-.323.0679-.4655-.0477c-.1417-.1152-.2278-.3163-.1829-.4867C.1568.1864.3322.0469.499.0501C.6651.0537.8235.1994.8777.3843z">
<animate dur="30s" repeatCount="indefinite" attributeName="d" attributeType="XML"
values="
M.8777.3843c.0549.1858.0061.4094-.1174.507c-.1242.0977-.323.0679-.4655-.0477c-.1417-.1152-.2278-.3163-.1829-.4867C.1568.1864.3322.0469.499.0501C.6651.0537.8235.1994.8777.3843z;
M.878.2951c.0628.1874-.0152.4925-.1548.6035c-.1396.111-.3412.0279-.4684-.11C.1276.6507.0735.4592.1123.3121c.0384-.1455.1692-.2452.336-.2602C.6151.0369.8164.1067.878.2951z;
M.8841.4163c.0439.1606-.001.2795-.1563.3829c-.1553.1034-.4207.1921-.5427.1305c-.122-.0617-.1006-.275-.0118-.4796C.2621.2449.4184.0469.5629.05C.7074.0532.8402.2556.8841.4163z;
M.8767.3493c.0618.1835-.0037.4234-.1495.5308c-.1458.1085-.3738.0842-.5012-.027C.0996.7428.0729.5454.1254.3753c.0526-.1709.1846-.3163.3442-.3248C.6294.0411.8158.1666.8767.3493z;
M.8777.3843c.0549.1858.0061.4094-.1174.507c-.1242.0977-.323.0679-.4655-.0477c-.1417-.1152-.2278-.3163-.1829-.4867C.1568.1864.3322.0469.499.0501C.6651.0537.8235.1994.8777.3843z"
calcMode="spline"
keySplines=".56 .37 .43 .58;.56 .37 .43 .58;.56 .37 .43 .58;.56 .37 .43 .58"/>
</path>
<g id="animation">
<animateTransform xlink:href="#shape" attributeName="transform" attributeType="XML" type="translate" dur="6s" values="0 0;0 8;0 0" repeatCount="indefinite" calcMode="spline" keySplines=".45 .05 .55 .95;.45 .05 .55 .95"/>
<animateTransform xlink:href="#group_1_1" attributeName="transform" attributeType="XML" type="translate" dur="10s" values="0 0;20 -20;0 0" repeatCount="indefinite" calcMode="spline" keySplines=".56 .37 .43 .58;.56 .37 .43 .58"/>
<animateTransform xlink:href="#group_1_2" attributeName="transform" attributeType="XML" type="translate" dur="10s" values="0 0;0 20;0 0" repeatCount="indefinite" calcMode="spline" keySplines=".56 .37 .43 .58;.56 .37 .43 .58"/>
<animateTransform xlink:href="#group_2_1" attributeName="transform" attributeType="XML" type="translate" dur="5s" values="0 0;-10 10;0 0" repeatCount="indefinite" calcMode="spline" keySplines=".56 .37 .43 .58;.56 .37 .43 .58"/>
<animateTransform xlink:href="#group_2_1" attributeName="transform" attributeType="XML" type="rotate" dur="5s" values="0;-10;0" repeatCount="indefinite" calcMode="spline" keySplines=".56 .37 .43 .58;.56 .37 .43 .58" additive="sum"/>
<animateTransform xlink:href="#group_2_2" attributeName="transform" attributeType="XML" type="translate" dur="10s" values="5 -5;15 -15;5 -5" repeatCount="indefinite" calcMode="spline" keySplines=".56 .37 .43 .58;.56 .37 .43 .58"/>
<animateTransform xlink:href="#element_1_1" attributeName="transform" attributeType="XML" type="translate" dur="5s" values="0 0;-10 -10;0 0" repeatCount="indefinite" calcMode="spline" keySplines=".56 .37 .43 .58;.56 .37 .43 .58"/>
<animateMotion xlink:href="#element_1_5" dur="10s" repeatCount="indefinite" path="M0-0.5l26.6,24z" calcMode="spline" keyTimes="0;1" keySplines=".56 .37 .43 .58"/>
<animateTransform xlink:href="#element_2_1" attributeName="transform" attributeType="XML" type="scale" dur="5s" values=".75;1;.75" repeatCount="indefinite" calcMode="spline" keySplines=".56 .37 .43 .58;.56 .37 .43 .58"/>
<animateTransform xlink:href="#element_2_1" attributeName="transform" attributeType="XML" type="rotate" dur="5s" values="0;15;0" repeatCount="indefinite" calcMode="spline" keySplines=".56 .37 .43 .58;.56 .37 .43 .58" additive="sum"/>
<animateTransform xlink:href="#element_2_2" attributeName="transform" attributeType="XML" type="scale" dur="5s" values="1;1.25;1" repeatCount="indefinite" calcMode="spline" keySplines=".56 .37 .43 .58;.56 .37 .43 .58"/>
<animateTransform xlink:href="#element_2_2" attributeName="transform" attributeType="XML" type="rotate" dur="5s" values="0;-15;0" repeatCount="indefinite" calcMode="spline" keySplines=".56 .37 .43 .58;.56 .37 .43 .58" additive="sum"/>
<animateMotion xlink:href="#element_2_3" dur="6s" repeatCount="indefinite" path="M0,23.31,31.76,0z" calcMode="spline" keyTimes="0;1" keySplines=".56 .37 .43 .58"/>
<animateMotion xlink:href="#element_2_4" dur="10s" repeatCount="indefinite" path="M41.36,0,0,30.35z" calcMode="spline" keyTimes="0;1" keySplines=".56 .37 .43 .58"/>
</g>
</defs>
<svg viewBox="0 0 1 1" id="preview" preserveAspectRatio="none">
<use xlink:href="#filterPath" fill="darkgrey"/>
</svg>
<image xlink:href="" clip-path="url(#clip-path)"/>
<svg viewBox="0 0 429.59 217.18" width="50%" preserveAspectRatio="xMidYMin meet">
<path id="element_1_1" d="M384.7,31.56c-2.91,2.77-2.63,6.93-.13,10,3.62,4.49,9.74,3.69,14.76,5,3.45,1,4.9,3.08,6.53,5.9.85,1.45.08,1.56,1.35,2.84A4.79,4.79,0,0,0,411,56.65c4.11.07,6.62-.62,9.83,2.69,2.84,3,4.46,7,5.85,10.68.66,1.8,3.51.88,2.86-.93-1.56-4.24-3.42-8.75-6.7-12s-5.82-3.24-10-3.74a2.33,2.33,0,0,1-2.45-.87,2.13,2.13,0,0,1-2-2.21s0-.11,0-.17c-.53-.75-.72-1.59-1.32-2.41a11.62,11.62,0,0,0-5.21-3.63,27.18,27.18,0,0,0-6.73-1.36,18.26,18.26,0,0,1-5.87-1.4c-2.69-1.35-5.42-4.9-2.31-7.89C388.35,32.3,386.12,30.29,384.7,31.56Z" fill="#3AADAA"/>
<g id="group_1_1">
<circle id="element_1_2" cx="114.58" cy="209.58" r="7.6" fill="#3AADAA" class="circle_scale"/>
<path d="M.49,113.59l29.75,26.89a1.5,1.5,0,1,0,2-2.22L2.51,111.37a1.5,1.5,0,1,0-2,2.22Z" fill="#383E45"/>
<circle id="element_1_3" cx="44.74" cy="147.12" r="7" fill="#3AADAA" class="circle_scale"/>
<path d="M59.25,165.36l27,24.41a1.5,1.5,0,1,0,2-2.23l-27-24.41a1.5,1.5,0,0,0-2,2.23Z" fill="#383E45"/>
<circle id="element_1_4" cx="93.49" cy="195.63" r="3.8" fill="#7C6576" class="circle_scale"/>
</g>
<g>
<path d="M212,64.2l24.34,22a1.5,1.5,0,0,0,2-2.22L214.05,62a1.5,1.5,0,0,0-2,2.23Z" fill="#383E45"/>
<circle id="element_1_5" cx="211.93" cy="61.55" r="15.9" fill="#7C6576"/>
</g>
<g>
<path d="M147.8,4.92,194.39,47a1.5,1.5,0,1,0,2-2.22L149.81,2.69a1.5,1.5,0,0,0-2,2.23Z" fill="#383E45"/>
<circle id="element_1_6" cx="162.83" cy="16.48" r="7" fill="#7C6576" class="circle_scale"/>
<circle id="element_1_7" cx="185.37" cy="36.73" r="5.4" fill="#3AADAA" class="circle_scale"/>
</g>
<g id="group_1_2">
<path d="M294.67,2.61,321,26.42a1.5,1.5,0,0,0,2-2.23L296.68.39a1.5,1.5,0,1,0-2,2.22Z" fill="#383E45"/>
<circle id="element_1_8" cx="329.88" cy="31.21" r="5.4" fill="#3AADAA" class="circle_scale"/>
<path d="M339.85,42.25l20.92,18.91a1.5,1.5,0,0,0,2-2.23h0L341.87,40a1.5,1.5,0,0,0-2,2.23Z" fill="#383E45"/>
<circle id="element_1_9" cx="380.2" cy="74.41" r="7.6" fill="#7C6576" class="circle_scale"/>
</g>
</svg>
<svg viewBox="0 0 327.27 193.34" width="40%" height="100%" x="60%" preserveAspectRatio="xMidYMax meet">
<path id="element_2_1" d="M199,104.05c-6.79-2.33-13.27,1.19-15.44,7.86-1.84,5.94-7.07,2.71-10.2,6.38-1.14,1.33-1.12,3-1.85,4.58-1.8,3.8-6.31,4.25-10.09,4.68a1.5,1.5,0,1,0,.33,3h0c3.56-.38,7.65-.9,10.45-3.33a10.94,10.94,0,0,0,2.58-3.76,13.39,13.39,0,0,1,1-2.57c1.24-1.52,2-1.2,4-1.54,2.78-.43,4.77-1.27,6-3.93,1.16-2.47,1.05-5,3.35-6.93a9.19,9.19,0,0,1,8.84-1.65C199.6,107.44,200.81,104.69,199,104.05Z" fill="#3AADAA" style="transform-box: fill-box" transform-origin="center"/>
<path id="element_2_2" d="M53.84,33.07a11.7,11.7,0,0,0-7.75,1.6c-2.7,1.73-3.82,5.78-7,6.37-2.29.43-3.58,0-5.56,1.72s-5.36,9.76-9.08,7.41c-1.63-1-3.49,1.32-1.86,2.36,4.49,2.9,8.17-1,10.65-4.59,1.93-2.78,3.75-3,7-3.65a7.19,7.19,0,0,0,2.14-.46c1.41-.78,1.6-2,2.29-3.3a8.33,8.33,0,0,1,8.65-4.61C55.29,36.22,55.76,33.15,53.84,33.07Z" fill="#3AADAA" style="transform-box: fill-box" transform-origin="center"/>
<g id="group_2_1" style="transform-box: fill-box" transform-origin="center">
<path d="M170.32.29,140.25,22.36A1.5,1.5,0,1,0,142,24.78L172.1,2.71A1.5,1.5,0,0,0,170.32.29Z" fill="#383E45"/>
<path d="M121,37.64,85.73,63.5a1.5,1.5,0,0,0,1.77,2.42l35.23-25.86A1.5,1.5,0,0,0,121,37.64Z" fill="#383E45"/>
<circle cx="130.49" cy="32.38" r="16.6" fill="#3AADAA"/>
</g>
<g id="group_2_2" style="transform-box: fill-box" transform-origin="center">
<path d="M118.08,103l-44,32.3a1.5,1.5,0,1,0,1.77,2.42l44-32.3a1.5,1.5,0,1,0-1.78-2.42Z" fill="#383E45"/>
<path d="M37.77,159.73,16.49,175.35a1.5,1.5,0,0,0,1.77,2.42l21.29-15.62a1.5,1.5,0,0,0-1.78-2.42Z" fill="#383E45"/>
<circle cx="11.4" cy="181.94" r="11.4" fill="#3AADAA"/>
<circle cx="50.87" cy="151.73" r="7.8" fill="#7C6576"/>
</g>
<g>
<circle cx="222.42" cy="156.44" r="5.4" fill="#3AADAA"/>
<path d="M262.92,123.23l-29.34,21.54a1.5,1.5,0,1,0,1.77,2.42l29.35-21.54a1.5,1.5,0,1,0-1.78-2.42Z" fill="#383E45"/>
<circle id="element_2_3" cx="232.96" cy="146.87" r="7.7" fill="#7C6576" transform="translate(0 -22)"/>
<path d="M315.72,84.48l-38.93,28.58a1.5,1.5,0,1,0,1.77,2.41L317.5,86.89a1.5,1.5,0,1,0-1.78-2.41Z" fill="#383E45"/>
<circle id="element_2_4" cx="276.17" cy="115.24" r="7.7" fill="#7C6576" transform="translate(0 -29)"/>
</g>
</svg>
</svg>

After

Width:  |  Height:  |  Size: 10 KiB

@@ -0,0 +1,49 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="shape" width="800" height="600">
<style>
@keyframes rotate {
from {transform: rotate(45deg) scale(.7);}
to {transform: rotate(405deg) scale(.7);}
}
#diamond {
transform: rotate(45deg) scale(.7);
transform-box: fill-box;
transform-origin: center;
animation: rotate 80s linear infinite;
}
</style>
<defs>
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
<use xlink:href="#filterPath" fill="none"/>
</clipPath>
<path id="filterPath" preserveAspectRatio="none" d="M.826.2725c.0765.1205.1182.2347.0904.333c-.0278.0951-.1286.1713-.2468.2347c-.1182.0603-.2572.1078-.3824.073c-.1252-.0349-.2364-.149-.2572-.2728c-.0243-.1237.0452-.257.1426-.3806c.0974-.1237.2225-.2379.3442-.2347C.6313.0282.746.1519.826.2725z">
<animate dur="20s" repeatCount="indefinite" attributeName="d" attributeType="XML"
values="
M.826.2725c.0765.1205.1182.2347.0904.333c-.0278.0951-.1286.1713-.2468.2347c-.1182.0603-.2572.1078-.3824.073c-.1252-.0349-.2364-.149-.2572-.2728c-.0243-.1237.0452-.257.1426-.3806c.0974-.1237.2225-.2379.3442-.2347C.6313.0282.746.1519.826.2725z;
M.8352.1556c.0762.0943.1112.2467.0762.3627c-.0349.1197-.1366.2031-.2574.283c-.1208.0798-.2574.1524-.3781.1124c-.1239-.0363-.2319-.185-.2479-.341c-.0191-.1524.054-.3119.1493-.4099c.0953-.0979.2161-.1342.3368-.1379C.6349.0286.7557.0649.8352.1556z;
M.8837.2442c.0634.1251.0444.2662.0063.3848c-.0411.1219-.1013.2213-.1931.2662c-.0918.0449-.2058.0353-.3452-.0032c-.1362-.0385-.2977-.1058-.323-.2084C.0034.5809.1142.443.2218.3082c.1076-.1347.2121-.2694.3357-.2822C.681.0132.8203.119.8837.2442z;
M.826.2725c.0765.1205.1182.2347.0904.333c-.0278.0951-.1286.1713-.2468.2347c-.1182.0603-.2572.1078-.3824.073c-.1252-.0349-.2364-.149-.2572-.2728c-.0243-.1237.0452-.257.1426-.3806c.0974-.1237.2225-.2379.3442-.2347C.6313.0282.746.1519.826.2725z"
calcMode="spline"
keySplines=".45 .05 .55 .95;.45 .05 .55 .95;.45 .05 .55 .95"/>
</path>
<g id="animation">
<animateTransform xlink:href="#shape" attributeName="transform" attributeType="XML" type="translate" dur="6s" values="0 0;0 8;0 0" repeatCount="indefinite" calcMode="spline" keySplines=".45 .05 .55 .95;.45 .05 .55 .95"/>
<animateTransform xlink:href="#points" attributeName="transform" attributeType="XML" type="rotate" dur="15s" values="0;100;0" repeatCount="indefinite" additive="sum"/>
<animateTransform xlink:href="#points" attributeName="transform" attributeType="XML" type="translate" dur="15s" values="0 0;-10 -10;0 0;" repeatCount="indefinite" additive="sum"/>
<animateTransform xlink:href="#triangle" attributeName="transform" attributeType="XML" type="rotate" dur="20s" values="0;-20;0" repeatCount="indefinite" additive="sum"/>
<animateTransform xlink:href="#triangle" attributeName="transform" attributeType="XML" type="translate" dur="20s" values="0 0;-1.5 1;0 0;" repeatCount="indefinite" additive="sum"/>
</g>
</defs>
<svg viewBox="0 0 1 1" id="preview" preserveAspectRatio="none">
<use xlink:href="#filterPath" fill="darkgrey"/>
</svg>
<image xlink:href="" clip-path="url(#clip-path)"/>
<svg class="points" viewBox="0 0 66.3 66.3" width="25%" height="25%" x="0%" y="10%">
<path id="points" fill="#383E45" transform="scale(.6)" transform-origin="center" d="M3.9 2c0 1.1-.9 2-2 2S0 3 0 2s.9-2 2-2S3.9.9 3.9 2zM22.8 0c-1.1 0-2 .9-2 2s.9 2 2 2c1.1 0 2-.9 2-2S23.8 0 22.8 0zM43.6 0c-1.1 0-2 .9-2 2s.9 2 2 2c1.1 0 2-.9 2-2S44.6 0 43.6 0zM64.4 0c-1.1 0-2 .9-2 2s.9 2 2 2s2-.9 2-2S65.4 0 64.4 0zM2 20.8c-1.1 0-2 .9-2 2c0 1.1.9 2 2 2s2-.9 2-2C3.9 21.7 3 20.8 2 20.8zM22.8 20.8c-1.1 0-2 .9-2 2c0 1.1.9 2 2 2c1.1 0 2-.9 2-2C24.7 21.7 23.8 20.8 22.8 20.8zM43.6 20.8c-1.1 0-2 .9-2 2c0 1.1.9 2 2 2c1.1 0 2-.9 2-2C45.5 21.7 44.6 20.8 43.6 20.8zM64.4 20.8c-1.1 0-2 .9-2 2c0 1.1.9 2 2 2s2-.9 2-2C66.3 21.7 65.4 20.8 64.4 20.8zM2 41.6c-1.1 0-2 .9-2 2c0 1.1.9 2 2 2s2-.9 2-2C3.9 42.5 3 41.6 2 41.6zM22.8 41.6c-1.1 0-2 .9-2 2c0 1.1.9 2 2 2c1.1 0 2-.9 2-2C24.7 42.5 23.8 41.6 22.8 41.6zM43.6 41.6c-1.1 0-2 .9-2 2c0 1.1.9 2 2 2c1.1 0 2-.9 2-2C45.5 42.5 44.6 41.6 43.6 41.6zM64.4 41.6c-1.1 0-2 .9-2 2c0 1.1.9 2 2 2s2-.9 2-2C66.3 42.5 65.4 41.6 64.4 41.6zM2 62.4c-1.1 0-2 .9-2 2s.9 2 2 2s2-.9 2-2S3 62.4 2 62.4zM22.8 62.4c-1.1 0-2 .9-2 2s.9 2 2 2c1.1 0 2-.9 2-2S23.8 62.4 22.8 62.4zM43.6 62.4c-1.1 0-2 .9-2 2s.9 2 2 2c1.1 0 2-.9 2-2S44.6 62.4 43.6 62.4zM64.4 62.4c-1.1 0-2 .9-2 2s.9 2 2 2s2-.9 2-2S65.4 62.4 64.4 62.4z"/>
</svg>
<svg viewBox="0 0 10 10" class="diamond" width="30%" height="30%" x="66%" y="65%">
<rect id="diamond" x="0.5" y="0.5" width="9" height="9" fill="none" stroke="#7C6576" stroke-miterlimit="10" stroke-width="1" opacity=".8"/>
</svg>
<svg class="triangle" viewBox="0 0 10 10" width="40%" height="40%" x="5%" y="55%">
<polygon id="triangle" points="10 10 0 10 0 0 10 10" fill="#3AADAA" transform="scale(.6)" transform-origin="center" opacity=".66"/>
</svg>
</svg>

After

Width:  |  Height:  |  Size: 5.0 KiB

@@ -0,0 +1,63 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="shape" width="800" height="600">
<style>
@keyframes rotate {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
@keyframes rotate_lines {
from {transform: rotate(0deg) translate(0, 0) scale(.75);}
to {transform: rotate(360deg) translate(-10%, 10%) scale(.75);}
}
#lines {
transform-box: fill-box;
transform-origin: center;
animation: rotate_lines 65s linear infinite;
}
#circle_1 {animation: rotate 120s linear infinite;}
#circle_2 {animation: rotate 90s linear infinite;}
#circle_3 {animation: rotate 60s linear infinite;}
</style>
<defs>
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
<use xlink:href="#filterPath" fill="none"/>
</clipPath>
<path id="filterPath" preserveAspectRatio="none" d="M.8845.2598c.0824.1416.0888.3504.0095.4884c-.0793.1381-.2442.2018-.4091.2018C.3199.95.1549.8863.0883.7553C.0186.6279.0503.4332.1328.2917c.0825-.1416.2156-.2336.3615-.2407C.6434.0404.802.1182.8845.2598z">
<animate dur="12s" repeatCount="indefinite" attributeName="d" attributeType="XML"
values="
M.8845.2598c.0824.1416.0888.3504.0095.4884c-.0793.1381-.2442.2018-.4091.2018C.3199.95.1549.8863.0883.7553C.0186.6279.0503.4332.1328.2917c.0825-.1416.2156-.2336.3615-.2407C.6434.0404.802.1182.8845.2598z;
M.8356.2785c.0889.135.1492.3268.0921.4618c-.0603.135-.2381.2131-.4127.2096c-.1746-.0035-.3397-.0888-.4159-.2345c-.0761-.1456-.0603-.3516.0254-.4866C.2101.1009.3593.0406.4959.0512C.6324.0618.7467.1436.8356.2785z;
M.8825.3393c.0833.1495.0908.3021.0151.4166c-.0757.1176-.2385.1972-.3974.194C.3412.9468.1898.864.1141.7464c-.0795-.1176-.087-.2671-.0113-.4134C.1784.1868.3375.05.4926.05C.6478.05.7993.1931.8825.3393z;
M.8845.2598c.0824.1416.0888.3504.0095.4884c-.0793.1381-.2442.2018-.4091.2018C.3199.95.1549.8863.0883.7553C.0186.6279.0503.4332.1328.2917c.0825-.1416.2156-.2336.3615-.2407C.6434.0404.802.1182.8845.2598z"
calcMode="spline"
keySplines=".45 .05 .55 .95;.45 .05 .55 .95;.45 .05 .55 .95"/>
</path>
<g id="animation">
<animateTransform xlink:href="#shape" attributeName="transform" attributeType="XML" type="translate" dur="6s" values="0 0;0 8;0 0" repeatCount="indefinite" calcMode="spline" keySplines=".45 .05 .55 .95;.45 .05 .55 .95"/>
</g>
</defs>
<svg viewBox="0 0 1 1" id="preview" preserveAspectRatio="none">
<use xlink:href="#filterPath" fill="darkgrey"/>
</svg>
<image xlink:href="" clip-path="url(#clip-path)"/>
<svg class="lines" viewBox="0 0 57.65 57.65" width="35%" height="35%" x="70%" y="15%" opacity=".5">
<path id="lines" d="M16.44,22.68,11.22,6.6M21.73,17,26,.61M29.27,15,41.72,3.58m-5,13.86,16.65-2.88M41.57,23.49l15.58,6.58M52,45.18,42.43,31.23m-3.46,7,.49,16.89m-15.9,1.58L32.29,42.2M9.34,49.42,24.5,42m-6.41-4.42L1.3,35.61m13.79-5.26L2,19.65" fill="none" stroke="#383E45" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.5" transform-origin="center" transform="scale(.75)"/>
</svg>
<svg class="donut" viewBox="0 0 39.7 39.7" width="30%" height="30%" x="60%" y="70%" opacity=".5">
<path id="donut" d="M19.8,0C8.9,0,0,8.9,0,19.8c0,11,8.9,19.8,19.8,19.8c11,0,19.8-8.9,19.8-19.8C39.7,8.9,30.8,0,19.8,0z M19.8,36.5 c-9.2,0-16.7-7.5-16.7-16.7c0-9.2,7.5-16.7,16.7-16.7c9.2,0,16.7,7.5,16.7,16.7C36.6,29,29.1,36.5,19.8,36.5z" fill="#3AADAA" transform="scale(.75)" transform-origin="center">
<animate xlink:href="#donut" dur="30s" repeatCount="indefinite" attributeName="d" attributeType="XML"
values="
M19.8,0C8.9,0,0,8.9,0,19.8c0,11,8.9,19.8,19.8,19.8c11,0,19.8-8.9,19.8-19.8C39.7,8.9,30.8,0,19.8,0z M19.8,36.5 c-9.2,0-16.7-7.5-16.7-16.7c0-9.2,7.5-16.7,16.7-16.7c9.2,0,16.7,7.5,16.7,16.7C36.6,29,29.1,36.5,19.8,36.5z;
M19.8,0C8.9,0,0,8.9,0,19.8c0,11,8.9,19.8,19.8,19.8c11,0,19.8-8.9,19.8-19.8C39.7,8.9,30.8,0,19.8,0z M19.8,29.7 c-5.4,0-9.9-4.4-9.9-9.9c0-5.4,4.4-9.9,9.9-9.9c5.4,0,9.9,4.4,9.9,9.9C29.7,25.3,25.3,29.7,19.8,29.7z;
M19.8,0C8.9,0,0,8.9,0,19.8c0,11,8.9,19.8,19.8,19.8c11,0,19.8-8.9,19.8-19.8C39.7,8.9,30.8,0,19.8,0z M19.8,36.5 c-9.2,0-16.7-7.5-16.7-16.7c0-9.2,7.5-16.7,16.7-16.7c9.2,0,16.7,7.5,16.7,16.7C36.6,29,29.1,36.5,19.8,36.5z"
calcMode="spline"
keySplines=".45 .05 .55 .95;.45 .05 .55 .95"/>
<animateTransform attributeName="transform" attributeType="XML" type="scale" dur="30s" values="1;.75;1" repeatCount="indefinite" additive="sum"/>
<animateTransform attributeName="transform" attributeType="XML" type="translate" dur="30s" values="0 0;15 0;0 0" repeatCount="indefinite" additive="sum"/>
</path>
</svg>
<svg class="circles" viewBox="0 0 28.68 28.68" width="45%" height="45%" y="50%" opacity=".75">
<path id="circle_1" d="M13.53,28.18A13.86,13.86,0,1,1,28.18,13.53" fill="none" stroke="#7C6576" stroke-linecap="round" stroke-miterlimit="10" transform-origin="center"/>
<path id="circle_2" d="M21.72,22.9A11.28,11.28,0,0,1,3.07,14.36,11.27,11.27,0,0,1,21.72,5.82" fill="none" stroke="#7C6576" stroke-linecap="round" stroke-miterlimit="10" transform-origin="center"/>
<path id="circle_3" d="M23,15.19a8.71,8.71,0,1,1-9.5-9.5" fill="none" stroke="#7C6576" stroke-linecap="round" stroke-miterlimit="10" transform-origin="center"/>
</svg>
</svg>

After

Width:  |  Height:  |  Size: 5.4 KiB

@@ -0,0 +1,40 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
<defs>
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
<use xlink:href="#filterPath" fill="none"/>
</clipPath>
<path id="filterPath" d="M.7.8H.2V0H.7Z">
<animate class="animation" dur="30s" repeatCount="indefinite" attributeName="d" attributeType="XML"
values="
M.7.8H.2V0H.7Z;
M.8 1H.2V.3H.8Z;
M.7.8H.2V0H.7Z"
calcMode="spline"
keySplines=".56 .37 .43 .58;.56 .37 .43 .58"/>
</path>
<g id="animation">
<animateTransform xlink:href="#pill" attributeName="transform" attributeType="XML" type="translate" dur="30s" values="0 0;0 -400;0 0" repeatCount="indefinite" calcMode="spline" keySplines=".56 .37 .43 .58;.56 .37 .43 .58"/>
<animateTransform xlink:href="#pill" attributeName="transform" attributeType="XML" type="rotate" dur="30s" values="0;-45;0" repeatCount="indefinite" calcMode="spline" keySplines=".56 .37 .43 .58;.56 .37 .43 .58" additive="sum"/>
<animateTransform xlink:href="#circles" attributeName="transform" attributeType="XML" type="translate" dur="30s" values="0 0;0 -70;0 0" repeatCount="indefinite" calcMode="spline" keySplines=".56 .37 .43 .58;.56 .37 .43 .58"/>
<animateMotion xlink:href="#little_circle" dur="30s" repeatCount="indefinite" path="M389,194.52C389,302,302,389,194.52,389S0,302,0,194.52,87.09,0,194.52,0,389,87.09,389,194.52Z"/>
<animateTransform xlink:href="#triangle" attributeName="transform" attributeType="XML" type="rotate" dur="30s" values="0;-30;0" repeatCount="indefinite" calcMode="spline" keySplines=".56 .37 .43 .58;.56 .37 .43 .58"/>
<animateTransform xlink:href="#triangle" attributeName="transform" attributeType="XML" type="translate" dur="30s" values="0 -35;-220 -200;0 -35" repeatCount="indefinite" calcMode="spline" keySplines=".56 .37 .43 .58;.56 .37 .43 .58" additive="sum"/>
</g>
</defs>
<svg viewBox="0 0 1 1" id="preview" preserveAspectRatio="none">
<use xlink:href="#filterPath" fill="darkgrey"/>
</svg>
<image xlink:href="" clip-path="url(#clip-path)"/>
<svg class="pill" viewBox="0 0 572.73 850.39" preserveAspectRatio="xMinYMid meet">
<path id="pill" d="M411.81,839.82,79.49,653.56A83.51,83.51,0,0,1,47.56,540.2h0a83.51,83.51,0,0,1,113.36-31.93L493.24,694.53a83.51,83.51,0,0,1,31.93,113.36h0A83.51,83.51,0,0,1,411.81,839.82Z" fill="#3AADAA" opacity=".2" transform-origin="center" style="transform-box: fill-box"/>
</svg>
<svg viewBox="0 0 666.32 671.29" preserveAspectRatio="xMidYMin meet" width="70%" x="34%">
<g id="circles">
<circle cx="344.84" cy="354.58" r="194.52" fill="#7C6576" opacity=".2"/>
<circle id="little_circle" cx="217.45" cy="212.68" r="90.5" fill="#3AADAA" opacity=".2" transform="translate(-70 -70)"/>
</g>
</svg>
<svg viewBox="0 0 666.32 671.29">
<polygon id="triangle" points="379.36 384.33 545.03 218.66 605.67 444.97 666.32 671.29 440 610.65 213.68 550 379.36 384.33" fill="none" stroke="#F6F6F6" stroke-width="50" transform-origin="center" style="transform-box: fill-box" opacity=".2"/>
</svg>
</svg>

After

Width:  |  Height:  |  Size: 3.3 KiB

@@ -0,0 +1,61 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="shape" width="800" height="600">
<defs>
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
<use xlink:href="#filterPath" fill="none"/>
</clipPath>
<path id="filterPath" d="M.8925.85 0 .85 0 0 .8925.1844Z">
<animate dur="6s" repeatCount="indefinite" attributeName="d" attributeType="XML"
values="
M.8925.85 0 .85 0 0 .8925.1844Z;
M.8925.85 0 .85 0 .05.8925.1644Z;
M.8925.85 0 .85 0 0 .8925.1844Z"
calcMode="spline"
keySplines=".56 .37 .43 .58; .56 .37 .43 .58"/>
<animateTransform attributeName="transform" attributeType="XML" type="translate" dur="6s" values="0 .02;0 0;0 .02" repeatCount="indefinite" calcMode="spline" keySplines=".45 .05 .55 .95;.45 .05 .55 .95"/>
</path>
<g id="animation">
<animateTransform xlink:href="#shape" attributeName="transform" attributeType="XML" type="translate" dur="6s" values="0 0;0 8;0 0" repeatCount="indefinite" calcMode="spline" keySplines=".45 .05 .55 .95;.45 .05 .55 .95"/>
<animateTransform xlink:href="#dots_grp_1" attributeName="transform" attributeType="XML" type="translate" dur="6s" values="0 0;0 -5;0 0" repeatCount="indefinite" calcMode="spline" keySplines=".45 .05 .55 .95;.45 .05 .55 .95"/>
<animateTransform xlink:href="#dots_grp_2" attributeName="transform" attributeType="XML" type="translate" dur="6s" begin="0.3s" values="0 0;0 -5;0 0" repeatCount="indefinite" calcMode="spline" keySplines=".45 .05 .55 .95;.45 .05 .55 .95"/>
<animateTransform xlink:href="#dots_grp_3" attributeName="transform" attributeType="XML" type="translate" dur="6s" begin="0.6s" values="0 0;0 -5;0 0" repeatCount="indefinite" calcMode="spline" keySplines=".45 .05 .55 .95;.45 .05 .55 .95"/>
<animateTransform xlink:href="#dots_grp_4" attributeName="transform" attributeType="XML" type="translate" dur="6s" begin="0.9s" values="0 0;0 -5;0 0" repeatCount="indefinite" calcMode="spline" keySplines=".45 .05 .55 .95;.45 .05 .55 .95"/>
</g>
</defs>
<svg id="background" viewBox="0 0 28.35 28.35" preserveAspectRatio="none" width="90%" height="65%" x="7%" y="30%">
<rect width="28.35" height="28.35" fill="#7C6576"/>
</svg>
<svg viewBox="0 0 1 1" id="preview" preserveAspectRatio="none">
<use xlink:href="#filterPath" fill="darkgrey"/>
</svg>
<image xlink:href="" clip-path="url(#clip-path)"/>
<svg id="dots" viewBox="0 0 27.4 46.88" width="15%" height="30%" x="65%">
<g id="dots_grp_1">
<rect y="5.62" width="1.62" height="1.62" fill="#3AADAA"/>
<rect y="15.53" width="1.62" height="1.62" fill="#3AADAA"/>
<rect y="25.44" width="1.62" height="1.62" fill="#3AADAA"/>
<rect y="35.35" width="1.62" height="1.62" fill="#3AADAA"/>
<rect y="45.26" width="1.62" height="1.62" fill="#3AADAA"/>
</g>
<g id="dots_grp_2">
<rect x="8.59" y="5.62" width="1.62" height="1.62" fill="#3AADAA"/>
<rect x="8.59" y="15.53" width="1.62" height="1.62" fill="#3AADAA"/>
<rect x="8.59" y="25.44" width="1.62" height="1.62" fill="#3AADAA"/>
<rect x="8.59" y="35.35" width="1.62" height="1.62" fill="#3AADAA"/>
<rect x="8.59" y="45.26" width="1.62" height="1.62" fill="#3AADAA"/>
</g>
<g id="dots_grp_3">
<rect x="17.18" y="5.62" width="1.62" height="1.62" fill="#3AADAA"/>
<rect x="17.18" y="15.53" width="1.62" height="1.62" fill="#3AADAA"/>
<rect x="17.18" y="25.44" width="1.62" height="1.62" fill="#3AADAA"/>
<rect x="17.18" y="35.35" width="1.62" height="1.62" fill="#3AADAA"/>
<rect x="17.18" y="45.26" width="1.62" height="1.62" fill="#3AADAA"/>
</g>
<g id="dots_grp_4">
<rect x="25.78" y="5.62" width="1.62" height="1.62" fill="#3AADAA"/>
<rect x="25.78" y="15.53" width="1.62" height="1.62" fill="#3AADAA"/>
<rect x="25.78" y="25.44" width="1.62" height="1.62" fill="#3AADAA"/>
<rect x="25.78" y="35.35" width="1.62" height="1.62" fill="#3AADAA"/>
<rect x="25.78" y="45.26" width="1.62" height="1.62" fill="#3AADAA"/>
</g>
</svg>
</svg>

After

Width:  |  Height:  |  Size: 4.1 KiB

@@ -0,0 +1,50 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="shape" width="800" height="600">
<defs>
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
<use xlink:href="#filterPath" fill="none"/>
</clipPath>
<path id="filterPath" d="M1 .7642.0749.95.0749.095 1 .095Z">
<animate dur="6s" repeatCount="indefinite" attributeName="d" attributeType="XML"
values="
M1 .7642.0749.95.0749.095 1 .095Z;
M1 .7842.0749.935.0749.095 1 .095Z;
M1 .7642.0749.95.0749.095 1 .095Z"
calcMode="spline"
keySplines=".56 .37 .43 .58; .56 .37 .43 .58"/>
<animateTransform attributeName="transform" attributeType="XML" type="translate" dur="6s" values="0 -.02;0 0;0 -.02" repeatCount="indefinite" calcMode="spline" keySplines=".45 .05 .55 .95;.45 .05 .55 .95"/>
</path>
<g id="animation">
<animateTransform xlink:href="#shape" attributeName="transform" attributeType="XML" type="translate" dur="6s" values="0 0;0 8;0 0" repeatCount="indefinite" calcMode="spline" keySplines=".45 .05 .55 .95;.45 .05 .55 .95"/>
<animateTransform xlink:href="#dots_grp_1" attributeName="transform" attributeType="XML" type="scale" dur="6s" values="1;.9;1" repeatCount="indefinite" calcMode="spline" keySplines=".45 .05 .55 .95;.45 .05 .55 .95"/>
<animateTransform xlink:href="#dots_grp_2" attributeName="transform" attributeType="XML" type="scale" dur="6s" begin="0.3s" values="1;.9;1" repeatCount="indefinite" calcMode="spline" keySplines=".45 .05 .55 .95;.45 .05 .55 .95"/>
<animateTransform xlink:href="#dots_grp_3" attributeName="transform" attributeType="XML" type="scale" dur="6s" begin="0.6s" values="1;.9;1" repeatCount="indefinite" calcMode="spline" keySplines=".45 .05 .55 .95;.45 .05 .55 .95"/>
</g>
</defs>
<svg id="background" viewBox="0 0 28.35 28.35" preserveAspectRatio="none" width="90%" height="65%">
<rect width="28.35" height="28.35" fill="#383E45"/>
</svg>
<svg viewBox="0 0 1 1" id="preview" preserveAspectRatio="none">
<use xlink:href="#filterPath" fill="darkgrey"/>
</svg>
<image xlink:href="" clip-path="url(#clip-path)"/>
<svg id="dots" viewBox="0 0 31.35 18.81" width="15%" height="30%" x="70%" y="70%">
<g id="dots_grp_1" transform="scale(.5)">
<rect x="29.73" width="1.62" height="1.62" transform="translate(31.35 -29.73) rotate(90)" fill="#7C6576"/>
<rect x="19.82" width="1.62" height="1.62" transform="translate(21.44 -19.82) rotate(90)" fill="#7C6576"/>
<rect x="9.91" width="1.62" height="1.62" transform="translate(11.53 -9.91) rotate(90)" fill="#7C6576"/>
<rect width="1.62" height="1.62" transform="translate(1.62 0) rotate(90)" fill="#7C6576"/>
</g>
<g id="dots_grp_2">
<rect x="29.73" y="8.59" width="1.62" height="1.62" transform="translate(39.94 -21.14) rotate(90)" fill="#7C6576"/>
<rect x="19.82" y="8.59" width="1.62" height="1.62" transform="translate(30.03 -11.23) rotate(90)" fill="#7C6576"/>
<rect x="9.91" y="8.59" width="1.62" height="1.62" transform="translate(20.12 -1.32) rotate(90)" fill="#7C6576"/>
<rect y="8.59" width="1.62" height="1.62" transform="translate(10.21 8.59) rotate(90)" fill="#7C6576"/>
</g>
<g id="dots_grp_3">
<rect x="29.73" y="17.18" width="1.62" height="1.62" transform="translate(48.54 -12.55) rotate(90)" fill="#7C6576"/>
<rect x="19.82" y="17.18" width="1.62" height="1.62" transform="translate(38.63 -2.64) rotate(90)" fill="#7C6576"/>
<rect x="9.91" y="17.18" width="1.62" height="1.62" transform="translate(28.72 7.27) rotate(90)" fill="#7C6576"/>
<rect y="17.18" width="1.62" height="1.62" transform="translate(18.81 17.18) rotate(90)" fill="#7C6576"/>
</g>
</svg>
</svg>

After

Width:  |  Height:  |  Size: 3.9 KiB

@@ -0,0 +1,57 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="shape" width="800" height="600">
<style>
@keyframes rotate {
from {transform: rotate(0deg);}
to {transform: rotate(-360deg);}
}
#triangles polygon {
transform-box: fill-box;
transform-origin: center;
}
</style>
<defs>
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
<use xlink:href="#filterPath" fill="none"/>
</clipPath>
<path id="filterPath" d="M0 .0975.95.0975.95.9525 0 .7667Z">
<animate dur="6s" repeatCount="indefinite" attributeName="d" attributeType="XML"
values="
M0 .0975.95.0975.95.9525 0 .7667Z;
M0 .0975.95.0975.95.9325 0 .7867Z;
M0 .0975.95.0975.95.9525 0 .7667Z"
calcMode="spline"
keySplines=".56 .37 .43 .58; .56 .37 .43 .58"/>
<animateTransform attributeName="transform" attributeType="XML" type="translate" dur="6s" values="0 -.02;0 0;0 -.02" repeatCount="indefinite" calcMode="spline" keySplines=".45 .05 .55 .95;.45 .05 .55 .95"/>
</path>
<g id="animation">
<animateTransform xlink:href="#shape" attributeName="transform" attributeType="XML" type="translate" dur="6s" values="0 0;0 8;0 0" repeatCount="indefinite" calcMode="spline" keySplines=".45 .05 .55 .95;.45 .05 .55 .95"/>
<animate xlink:href="#background" dur="12s" repeatCount="indefinite" attributeName="d" attributeType="XML"
values="
M0,0H28.35V28.35Z;
M0 0H28.35V25.515Z;
M0,0H28.35V28.35Z"
calcMode="spline"
keySplines=".56 .37 .43 .58; .56 .37 .43 .58"/>
</g>
</defs>
<svg class="background" viewBox="0 0 28.35 28.35" preserveAspectRatio="none" width="90%" height="75%" x="10%">
<path id="background" d="M0,0H28.35V28.35Z" fill="#3AADAA"/>
</svg>
<svg viewBox="0 0 1 1" id="preview" preserveAspectRatio="none">
<use xlink:href="#filterPath" fill="darkgrey"/>
</svg>
<image xlink:href="" clip-path="url(#clip-path)"/>
<svg viewBox="0 0 22.02 18.6" width="15%" heigth="15%" x="5%" y="30%">
<g id="triangles">
<polygon points="1.93 0.96 2.73 0.96 2.33 1.65 1.93 2.34 1.53 1.65 1.13 0.96 1.93 0.96" fill="#383E45" style="animation: rotate 6s linear infinite"/>
<polygon points="11.01 0.96 11.81 0.96 11.41 1.65 11.01 2.34 10.61 1.65 10.21 0.96 11.01 0.96" fill="#383E45" style="animation: rotate 6s .5s linear infinite"/>
<polygon points="20.09 0.96 20.89 0.96 20.49 1.65 20.09 2.34 19.69 1.65 19.29 0.96 20.09 0.96" fill="#383E45" style="animation: rotate 6s 1s linear infinite"/>
<polygon points="1.93 8.61 2.73 8.61 2.33 9.3 1.93 9.99 1.53 9.3 1.13 8.61 1.93 8.61" fill="#383E45" style="animation: rotate 6s 1.5s linear infinite"/>
<polygon points="11.01 8.61 11.81 8.61 11.41 9.3 11.01 9.99 10.61 9.3 10.21 8.61 11.01 8.61" fill="#383E45" style="animation: rotate 6s 2s linear infinite"/>
<polygon points="20.09 8.61 20.89 8.61 20.49 9.3 20.09 9.99 19.69 9.3 19.29 8.61 20.09 8.61" fill="#383E45" style="animation: rotate 6s 2.5s linear infinite"/>
<polygon points="1.93 16.26 2.73 16.26 2.33 16.95 1.93 17.65 1.53 16.95 1.13 16.26 1.93 16.26" fill="#383E45" style="animation: rotate 6s 3s linear infinite"/>
<polygon points="11.01 16.26 11.81 16.26 11.41 16.95 11.01 17.65 10.61 16.95 10.21 16.26 11.01 16.26" fill="#383E45" style="animation: rotate 6s 3.5s linear infinite"/>
<polygon points="20.09 16.26 20.89 16.26 20.49 16.95 20.09 17.65 19.69 16.95 19.29 16.26 20.09 16.26" fill="#383E45" style="animation: rotate 6s 4s linear infinite"/>
</g>
</svg>
</svg>

After

Width:  |  Height:  |  Size: 3.6 KiB

@@ -0,0 +1,69 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="shape" width="800" height="600">
<defs>
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
<use xlink:href="#filterPath" fill="none"/>
</clipPath>
<path id="filterPath" d="M.0025.2235.8425.05.8425.85.0025.85Z">
<animate dur="6s" repeatCount="indefinite" attributeName="d" attributeType="XML"
values="
M.0025.2235.8425.05.8425.85.0025.85Z;
M.0025.2035.8425.075.8425.85.0025.85Z;
M.0025.2235.8425.05.8425.85.0025.85Z"
calcMode="spline"
keySplines=".56 .37 .43 .58; .56 .37 .43 .58"/>
</path>
<g id="animation">
<animateTransform xlink:href="#shape" attributeName="transform" attributeType="XML" type="translate" dur="6s" values="0 0;0 8;0 0" repeatCount="indefinite" calcMode="spline" keySplines=".45 .05 .55 .95;.45 .05 .55 .95"/>
<animateTransform xlink:href="#filterPath" attributeName="transform" attributeType="XML" type="translate" dur="6s" values="0 -.02;0 0;0 -.02" repeatCount="indefinite" calcMode="spline" keySplines=".45 .05 .55 .95;.45 .05 .55 .95"/>
</g>
</defs>
<svg class="triangle" viewBox="0 0 28.35 28.35" width="95%" height="90%">
<path id="triangle" d="M28.35,28.35H0V0Z" fill="#7C6576"/>
</svg>
<svg id="dots" viewBox="0 0 71.53 49.13" width="45%" height="45%" x="53%" y="53%">
<rect x="5.39" y="3.7" width="1.62" height="1.62" fill="#383E45"/>
<rect x="13.83" y="3.7" width="1.62" height="1.62" fill="#383E45"/>
<rect x="22.28" y="3.7" width="1.62" height="1.62" fill="#383E45"/>
<rect x="30.73" y="3.7" width="1.62" height="1.62" fill="#383E45"/>
<rect x="39.18" y="3.7" width="1.62" height="1.62" fill="#383E45"/>
<rect x="47.63" y="3.7" width="1.62" height="1.62" fill="#383E45"/>
<rect x="56.08" y="3.7" width="1.62" height="1.62" fill="#383E45"/>
<rect x="64.53" y="3.7" width="1.62" height="1.62" fill="#383E45"/>
<rect x="5.39" y="13.73" width="1.62" height="1.62" fill="#383E45"/>
<rect x="13.83" y="13.73" width="1.62" height="1.62" fill="#383E45"/>
<rect x="22.28" y="13.73" width="1.62" height="1.62" fill="#383E45"/>
<rect x="30.73" y="13.73" width="1.62" height="1.62" fill="#383E45"/>
<rect x="39.18" y="13.73" width="1.62" height="1.62" fill="#383E45"/>
<rect x="47.63" y="13.73" width="1.62" height="1.62" fill="#383E45"/>
<rect x="56.08" y="13.73" width="1.62" height="1.62" fill="#383E45"/>
<rect x="64.53" y="13.73" width="1.62" height="1.62" fill="#383E45"/>
<rect x="5.39" y="23.76" width="1.62" height="1.62" fill="#383E45"/>
<rect x="13.83" y="23.76" width="1.62" height="1.62" fill="#383E45"/>
<rect x="22.28" y="23.76" width="1.62" height="1.62" fill="#383E45"/>
<rect x="30.73" y="23.76" width="1.62" height="1.62" fill="#383E45"/>
<rect x="39.18" y="23.76" width="1.62" height="1.62" fill="#383E45"/>
<rect x="47.63" y="23.76" width="1.62" height="1.62" fill="#383E45"/>
<rect x="56.08" y="23.76" width="1.62" height="1.62" fill="#383E45"/>
<rect x="64.53" y="23.76" width="1.62" height="1.62" fill="#383E45"/>
<rect x="5.39" y="33.78" width="1.62" height="1.62" fill="#383E45"/>
<rect x="13.83" y="33.78" width="1.62" height="1.62" fill="#383E45"/>
<rect x="22.28" y="33.78" width="1.62" height="1.62" fill="#383E45"/>
<rect x="30.73" y="33.78" width="1.62" height="1.62" fill="#383E45"/>
<rect x="39.18" y="33.78" width="1.62" height="1.62" fill="#383E45"/>
<rect x="47.63" y="33.78" width="1.62" height="1.62" fill="#383E45"/>
<rect x="56.08" y="33.78" width="1.62" height="1.62" fill="#383E45"/>
<rect x="64.53" y="33.78" width="1.62" height="1.62" fill="#383E45"/>
<rect x="5.39" y="43.81" width="1.62" height="1.62" fill="#383E45"/>
<rect x="13.83" y="43.81" width="1.62" height="1.62" fill="#383E45"/>
<rect x="22.28" y="43.81" width="1.62" height="1.62" fill="#383E45"/>
<rect x="30.73" y="43.81" width="1.62" height="1.62" fill="#383E45"/>
<rect x="39.18" y="43.81" width="1.62" height="1.62" fill="#383E45"/>
<rect x="47.63" y="43.81" width="1.62" height="1.62" fill="#383E45"/>
<rect x="56.08" y="43.81" width="1.62" height="1.62" fill="#383E45"/>
<rect x="64.53" y="43.81" width="1.62" height="1.62" fill="#383E45"/>
</svg>
<svg viewBox="0 0 1 1" id="preview" preserveAspectRatio="none">
<use xlink:href="#filterPath" fill="darkgrey"/>
</svg>
<image xlink:href="" clip-path="url(#clip-path)"/>
</svg>

After

Width:  |  Height:  |  Size: 4.7 KiB

@@ -0,0 +1,32 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80" height="60" id="shape">
<defs>
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
<use xlink:href="#filterPath" fill="none"/>
</clipPath>
<path id="filterPath" d="M0.947,0.9468L0.0495,1L0,0l1,0.1065L0.947,0.9468z">
<animateTransform attributeName="transform" attributeType="XML" type="scale" dur="12s" values="1;.95;1" repeatCount="indefinite" calcMode="spline" keySplines=".45 .05 .55 .95;.45 .05 .55 .95"/>
<animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="12s" values="0; -6;0" repeatCount="indefinite" calcMode="spline" keySplines=".45 .05 .55 .95;.45 .05 .55 .95" additive="sum"/>
</path>
<g id="animation">
<animateTransform xlink:href="#shape" attributeName="transform" attributeType="XML" type="translate" dur="6s" values="0 0;0 8;0 0" repeatCount="indefinite" calcMode="spline" keySplines=".45 .05 .55 .95;.45 .05 .55 .95"/>
</g>
</defs>
<svg viewBox="0 0 28.3 28.3" preserveAspectRatio="none">
<path id="background_1" d="M0.3,0.3l27.8,2.8l-1.5,21.6L1.7,26L0.3,0.3 M0,0l1.4,26.3l25.3-1.4l1.6-22.1L0,0L0,0z" fill="#7C6576">
<animateTransform attributeName="transform" attributeType="XML" begin="1.5s" type="scale" dur="12s" values="1;.95;1" repeatCount="indefinite" calcMode="spline" keySplines=".45 .05 .55 .95;.45 .05 .55 .95"/>
<animateTransform attributeName="transform" attributeType="XML" begin="1.5s" type="rotate" dur="12s" values="0; -6;0" repeatCount="indefinite" calcMode="spline" keySplines=".45 .05 .55 .95;.45 .05 .55 .95" additive="sum"/>
</path>
<path id="background_2" d="M0.3,0.3l27.8,2.8l-1.5,21.6L1.7,26L0.3,0.3 M0,0l1.4,26.3l25.3-1.4l1.6-22.1L0,0L0,0z" fill="#7C6576" opacity=".75">
<animateTransform attributeName="transform" attributeType="XML" begin="2.5s" type="scale" dur="12s" values="1;.95;1" repeatCount="indefinite" calcMode="spline" keySplines=".45 .05 .55 .95;.45 .05 .55 .95"/>
<animateTransform attributeName="transform" attributeType="XML" begin="2.5s" type="rotate" dur="12s" values="0; -6;0" repeatCount="indefinite" calcMode="spline" keySplines=".45 .05 .55 .95;.45 .05 .55 .95" additive="sum"/>
</path>
<path id="background_3" d="M0.3,0.3l27.8,2.8l-1.5,21.6L1.7,26L0.3,0.3 M0,0l1.4,26.3l25.3-1.4l1.6-22.1L0,0L0,0z" fill="#7C6576" opacity=".5">
<animateTransform attributeName="transform" attributeType="XML" begin="3.5s" type="scale" dur="12s" values="1;.95;1" repeatCount="indefinite" calcMode="spline" keySplines=".45 .05 .55 .95;.45 .05 .55 .95"/>
<animateTransform attributeName="transform" attributeType="XML" begin="3.5s" type="rotate" dur="12s" values="0; -6;0" repeatCount="indefinite" calcMode="spline" keySplines=".45 .05 .55 .95;.45 .05 .55 .95" additive="sum"/>
</path>
</svg>
<svg viewBox="0 0 1 1" id="preview" preserveAspectRatio="none">
<use xlink:href="#filterPath" fill="darkgrey"/>
</svg>
<image xlink:href="" clip-path="url(#clip-path)"/>
</svg>

After

Width:  |  Height:  |  Size: 3.1 KiB

@@ -0,0 +1,45 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
<style>
@keyframes rotate {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
#lines path {
transform-box: fill-box;
transform-origin: center;
}
#line_1 {animation: rotate 52s cubic-bezier(.56, .37, .43, .58) infinite;}
#line_2 {animation: rotate 54s cubic-bezier(.56, .37, .43, .58) infinite;}
#line_3 {animation: rotate 56s cubic-bezier(.56, .37, .43, .58) infinite;}
#line_4 {animation: rotate 58s cubic-bezier(.56, .37, .43, .58) infinite;}
#line_5 {animation: rotate 60s cubic-bezier(.56, .37, .43, .58) infinite;}
</style>
<defs>
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
<use xlink:href="#filterPath" fill="none"/>
</clipPath>
<path id="filterPath" d="M.7461.2174c.0794.0405.1403.1538.1271.2672c-.0133.1106-.1033.2213-.2171.2753c-.1138.054-.2515.054-.3521-.0027c-.1006-.0567-.1668-.17-.1774-.2807c-.0106-.1079.0344-.2132.1006-.251c.0662-.0378.1562-.0054.2488-.0081c.0953-.0027.1906-.0378.2701 0z">
<animate dur="60s" repeatCount="indefinite" attributeName="d" attributeType="XML"
values="
M.7461.2174c.0794.0405.1403.1538.1271.2672c-.0133.1106-.1033.2213-.2171.2753c-.1138.054-.2515.054-.3521-.0027c-.1006-.0567-.1668-.17-.1774-.2807c-.0106-.1079.0344-.2132.1006-.251c.0662-.0378.1562-.0054.2488-.0081c.0953-.0027.1906-.0378.2701 0z;
M.8462.216c.0583.047.0185.2117-.0344.3265c-.0557.1177-.1272.1853-.2067.2236c-.0795.0382-.1696.047-.2491.0118c-.0795-.0323-.1537-.1088-.1961-.2206c-.0425-.1118-.053-.253.008-.3029c.0557-.0441.1855.0059.3259-.0029c.1405-.0118.2942-.0824.3525-.0353z;
M.7205.3445c.0955.0828.1825.1804.1459.2377c-.0365.0594-.1937.0806-.3285.1231c-.1348.0446-.2471.1103-.3144.0913c-.0702-.0191-.0955-.121-.0983-.208c-.0028-.0849.0112-.155.0618-.2293c.0505-.0743.1404-.1528.2358-.1592c.0983-.0043.2021.0616.2976.1444z;
M.7461.2174c.0794.0405.1403.1538.1271.2672c-.0133.1106-.1033.2213-.2171.2753c-.1138.054-.2515.054-.3521-.0027c-.1006-.0567-.1668-.17-.1774-.2807c-.0106-.1079.0344-.2132.1006-.251c.0662-.0378.1562-.0054.2488-.0081c.0953-.0027.1906-.0378.2701 0z"
calcMode="spline"
keySplines=".56 .37 .43 .58;.56 .37 .43 .58;.56 .37 .43 .58"/>
</path>
</defs>
<svg viewBox="0 0 28.35 28.35" preserveAspectRatio="none">
<g id="lines" style="transform-box: fill-box">
<path id="line_1" d="M23.69,14.17c0,1.45-3.35,2-4,3.17s.47,4.38-.74,5.08-3.31-1.9-4.76-1.9-3.59,2.57-4.76,1.9,0-3.87-.73-5.08-4-1.72-4-3.17,3.35-2,4-3.17-.47-4.37.73-5.07,3.32,1.9,4.76,1.9,3.6-2.58,4.76-1.9,0,3.87.74,5.07S23.69,12.73,23.69,14.17Z" fill="none" stroke="#7C6576" stroke-miterlimit="10" stroke-width="0.25"/>
<path id="line_2" d="M24.8,14.17c0,1.62-3.73,2.24-4.49,3.55s.53,4.88-.82,5.66-3.7-2.12-5.32-2.12-4,2.87-5.31,2.12,0-4.32-.83-5.66-4.49-1.93-4.49-3.55S7.28,11.93,8,10.63,7.51,5.74,8.86,5s3.7,2.12,5.31,2.12,4-2.88,5.32-2.12,0,4.32.82,5.66S24.8,12.56,24.8,14.17Z" fill="none" stroke="#7C6576" stroke-miterlimit="10" stroke-width="0.25" opacity=".8"/>
<path id="line_3" d="M25.92,14.17c0,1.79-4.13,2.48-5,3.92s.58,5.39-.9,6.25S16,22,14.17,22,9.74,25.18,8.3,24.34s-.05-4.77-.91-6.25-5-2.13-5-3.92,4.13-2.47,5-3.91S6.81,4.86,8.3,4s4.09,2.35,5.87,2.35S18.61,3.17,20.05,4s0,4.78.9,6.26S25.92,12.39,25.92,14.17Z" fill="none" stroke="#7C6576" stroke-miterlimit="10" stroke-width="0.25" opacity=".6"/>
<path id="line_4" d="M27,14.17c0,2-4.52,2.71-5.43,4.29s.63,5.91-1,6.85-4.48-2.57-6.43-2.57-4.85,3.48-6.43,2.57,0-5.23-1-6.85-5.43-2.34-5.43-4.29,4.52-2.7,5.43-4.28S6.12,4,7.74,3s4.48,2.57,6.43,2.57S19,2.13,20.6,3s.06,5.22,1,6.85S27,12.22,27,14.17Z" fill="none" stroke="#7C6576" stroke-miterlimit="10" stroke-width="0.25" opacity=".4"/>
<path id="line_5" d="M28.14,14.17c0,2.12-4.91,2.94-5.9,4.66s.69,6.42-1.08,7.44-4.87-2.79-7-2.79-5.27,3.78-7,2.79-.06-5.68-1.08-7.44S.21,16.29.21,14.17s4.91-2.94,5.9-4.65S5.42,3.1,7.19,2.08s4.86,2.78,7,2.78,5.28-3.77,7-2.78.06,5.67,1.08,7.44S28.14,12.05,28.14,14.17Z" fill="none" stroke="#7C6576" stroke-miterlimit="10" stroke-width="0.25" opacity=".2"/>
</g>
</svg>
<svg viewBox="0 0 1 1" id="preview" preserveAspectRatio="none">
<use xlink:href="#filterPath" fill="darkgrey"/>
</svg>
<image xlink:href="" clip-path="url(#clip-path)"/>
</svg>

After

Width:  |  Height:  |  Size: 4.5 KiB

@@ -0,0 +1,69 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
<style>
@keyframes rotate {
from {transform: rotate(0deg);}
to {transform: rotate(-360deg);}
}
#lines {
transform-box: fill-box;
transform-origin: center;
animation: rotate 60s cubic-bezier(.56, .37, .43, .58) infinite;
}
</style>
<defs>
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
<use xlink:href="#filterPath" fill="none"/>
</clipPath>
<path id="filterPath" d="M.8406.2509c.0364.0999-.0392.2908-.1137.4054c-.0738.1156-.1466.1554-.2468.1789c-.1001.0235-.2279.0309-.2881-.0722c-.0602-.1031-.0542-.3175.0098-.441C.2654.1991.3858.1662.5209.1541C.6558.1422.8042.151.8406.2509z">
<animate xlink:href="#filterPath" dur="30s" repeatCount="indefinite" attributeName="d" attributeType="XML"
values="
M.8406.2509c.0364.0999-.0392.2908-.1137.4054c-.0738.1156-.1466.1554-.2468.1789c-.1001.0235-.2279.0309-.2881-.0722c-.0602-.1031-.0542-.3175.0098-.441C.2654.1991.3858.1662.5209.1541C.6558.1422.8042.151.8406.2509z;
M.7978.3155c.0658.1114.0707.2723.007.3781c-.0637.1065-.196.1586-.3251.1564C.3499.8485.2236.7925.1746.6958C.1256.5991.155.4602.2176.3504C.281.2405.379.1606.4912.1508C.6043.1419.7313.2041.7978.3155z;
M.8269.2535c.0535.0914.0073.2558-.0697.384c-.077.1282-.1848.2207-.2782.212c-.0941-.0087-.1736-.1191-.2391-.2402C.1749.4882.1245.3569.164.2744C.2039.1918.3345.1598.4766.1515C.6186.1442.7733.1621.8269.2535z;
M.8406.2509c.0364.0999-.0392.2908-.1137.4054c-.0738.1156-.1466.1554-.2468.1789c-.1001.0235-.2279.0309-.2881-.0722c-.0602-.1031-.0542-.3175.0098-.441C.2654.1991.3858.1662.5209.1541C.6558.1422.8042.151.8406.2509z"
calcMode="spline"
keySplines=".56 .37 .43 .58;.56 .37 .43 .58;.56 .37 .43 .58"/>
</path>
</defs>
<svg viewBox="0 0 28.35 28.35" width="100%" height="105%" y="-2.5%">
<g id="lines">
<animate dur="20s" repeatCount="indefinite" attributeName="stroke-dasharray" attributeType="XML"
values="
0.25 0.25 0.25 0.25;
0.5 0.5 0.5 0.5;
0.25 0.25 0.25 0.25"
calcMode="spline"
keySplines=".56 .37 .43 .58;.56 .37 .43 .58"/>
<line x1="6.67" y1="9.61" x2="1.8" y2="9.52" fill="none" stroke="#3AADAA" stroke-miterlimit="10" stroke-width="1"/>
<line x1="7.98" y1="7.94" x2="3.28" y2="6.69" fill="none" stroke="#3AADAA" stroke-miterlimit="10" stroke-width="1"/>
<line x1="9.65" y1="6.64" x2="5.38" y2="4.3" fill="none" stroke="#3AADAA" stroke-miterlimit="10" stroke-width="1"/>
<line x1="11.59" y1="5.78" x2="8" y2="2.48" fill="none" stroke="#3AADAA" stroke-miterlimit="10" stroke-width="1"/>
<line x1="13.67" y1="5.4" x2="10.98" y2="1.35" fill="none" stroke="#3AADAA" stroke-miterlimit="10" stroke-width="1"/>
<line x1="15.78" y1="5.54" x2="14.14" y2="0.95" fill="none" stroke="#3AADAA" stroke-miterlimit="10" stroke-width="1"/>
<line x1="17.8" y1="6.17" x2="17.3" y2="1.33" fill="none" stroke="#3AADAA" stroke-miterlimit="10" stroke-width="1"/>
<line x1="19.61" y1="7.28" x2="20.29" y2="2.45" fill="none" stroke="#3AADAA" stroke-miterlimit="10" stroke-width="1"/>
<line x1="21.11" y1="8.78" x2="22.91" y2="4.26" fill="none" stroke="#3AADAA" stroke-miterlimit="10" stroke-width="1"/>
<line x1="22.2" y1="10.59" x2="25.03" y2="6.64" fill="none" stroke="#3AADAA" stroke-miterlimit="10" stroke-width="1"/>
<line x1="22.82" y1="12.62" x2="26.52" y2="9.46" fill="none" stroke="#3AADAA" stroke-miterlimit="10" stroke-width="1"/>
<line x1="22.94" y1="14.73" x2="27.29" y2="12.55" fill="none" stroke="#3AADAA" stroke-miterlimit="10" stroke-width="1"/>
<line x1="22.55" y1="16.81" x2="27.3" y2="15.73" fill="none" stroke="#3AADAA" stroke-miterlimit="10" stroke-width="1"/>
<line x1="21.68" y1="18.74" x2="26.54" y2="18.83" fill="none" stroke="#3AADAA" stroke-miterlimit="10" stroke-width="1"/>
<line x1="20.36" y1="20.4" x2="25.07" y2="21.66" fill="none" stroke="#3AADAA" stroke-miterlimit="10" stroke-width="1"/>
<line x1="18.69" y1="21.71" x2="22.96" y2="24.05" fill="none" stroke="#3AADAA" stroke-miterlimit="10" stroke-width="1"/>
<line x1="16.76" y1="22.57" x2="20.34" y2="25.86" fill="none" stroke="#3AADAA" stroke-miterlimit="10" stroke-width="1"/>
<line x1="14.68" y1="22.94" x2="17.37" y2="27" fill="none" stroke="#3AADAA" stroke-miterlimit="10" stroke-width="1"/>
<line x1="12.56" y1="22.81" x2="14.21" y2="27.39" fill="none" stroke="#3AADAA" stroke-miterlimit="10" stroke-width="1"/>
<line x1="10.54" y1="22.17" x2="11.04" y2="27.02" fill="none" stroke="#3AADAA" stroke-miterlimit="10" stroke-width="1"/>
<line x1="8.73" y1="21.07" x2="8.06" y2="25.89" fill="none" stroke="#3AADAA" stroke-miterlimit="10" stroke-width="1"/>
<line x1="7.24" y1="19.57" x2="5.43" y2="24.09" fill="none" stroke="#3AADAA" stroke-miterlimit="10" stroke-width="1"/>
<line x1="6.15" y1="17.75" x2="3.31" y2="21.71" fill="none" stroke="#3AADAA" stroke-miterlimit="10" stroke-width="1"/>
<line x1="5.53" y1="15.73" x2="1.83" y2="18.89" fill="none" stroke="#3AADAA" stroke-miterlimit="10" stroke-width="1"/>
<line x1="5.41" y1="13.61" x2="1.05" y2="15.8" fill="none" stroke="#3AADAA" stroke-miterlimit="10" stroke-width="1"/>
<line x1="5.79" y1="11.53" x2="1.05" y2="12.61" fill="none" stroke="#3AADAA" stroke-miterlimit="10" stroke-width="1"/>
</g>
</svg>
<svg viewBox="0 0 1 1" id="preview" preserveAspectRatio="none">
<use xlink:href="#filterPath" fill="darkgrey"/>
</svg>
<image xlink:href="" clip-path="url(#clip-path)"/>
</svg>

After

Width:  |  Height:  |  Size: 5.9 KiB

@@ -0,0 +1,58 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
<style>
@keyframes rotate {
0%, 100% {transform: rotate(45deg) scale(.8);}
50% {transform: rotate(225deg) scale(.8);}
}
#triangles path {
transform-box: fill-box;
transform-origin: center;
transform: rotate(45deg) scale(.8);
}
#line_1 {animation: rotate 15s cubic-bezier(.45, .05, .55, .95) infinite;}
#line_2 {animation: rotate 15s .1s cubic-bezier(.45, .05, .55, .95) infinite;}
#line_3 {animation: rotate 15s .2s cubic-bezier(.45, .05, .55, .95) infinite;}
#line_4 {animation: rotate 15s .3s cubic-bezier(.45, .05, .55, .95) infinite;}
#line_5 {animation: rotate 15s .4s cubic-bezier(.45, .05, .55, .95) infinite;}
#line_6 {animation: rotate 15s .5s cubic-bezier(.45, .05, .55, .95) infinite;}
#line_7 {animation: rotate 15s .6s cubic-bezier(.45, .05, .55, .95) infinite;}
#line_8 {animation: rotate 15s .7s cubic-bezier(.45, .05, .55, .95) infinite;}
#line_9 {animation: rotate 15s .8s cubic-bezier(.45, .05, .55, .95) infinite;}
#line_10 {animation: rotate 15s .9s cubic-bezier(.45, .05, .55, .95) infinite;}
#line_11 {animation: rotate 15s 1s cubic-bezier(.45, .05, .55, .95) infinite;}
</style>
<defs>
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
<use xlink:href="#filterPath" fill="none"/>
</clipPath>
<path id="filterPath" d="M.7461.2174c.0794.0405.1403.1538.1271.2672c-.0133.1106-.1033.2213-.2171.2753c-.1138.054-.2515.054-.3521-.0027c-.1006-.0567-.1668-.17-.1774-.2807c-.0106-.1079.0344-.2132.1006-.251c.0662-.0378.1562-.0054.2488-.0081c.0953-.0027.1906-.0378.2701 0z">
<animate dur="12s" repeatCount="indefinite" attributeName="d" attributeType="XML"
values="
M.7461.2174c.0794.0405.1403.1538.1271.2672c-.0133.1106-.1033.2213-.2171.2753c-.1138.054-.2515.054-.3521-.0027c-.1006-.0567-.1668-.17-.1774-.2807c-.0106-.1079.0344-.2132.1006-.251c.0662-.0378.1562-.0054.2488-.0081c.0953-.0027.1906-.0378.2701 0z;
M.8462.216c.0583.047.0185.2117-.0344.3265c-.0557.1177-.1272.1853-.2067.2236c-.0795.0382-.1696.047-.2491.0118c-.0795-.0323-.1537-.1088-.1961-.2206c-.0425-.1118-.053-.253.008-.3029c.0557-.0441.1855.0059.3259-.0029c.1405-.0118.2942-.0824.3525-.0353z;
M.7205.3445c.0955.0828.1825.1804.1459.2377c-.0365.0594-.1937.0806-.3285.1231c-.1348.0446-.2471.1103-.3144.0913c-.0702-.0191-.0955-.121-.0983-.208c-.0028-.0849.0112-.155.0618-.2293c.0505-.0743.1404-.1528.2358-.1592c.0983-.0043.2021.0616.2976.1444z;
M.7461.2174c.0794.0405.1403.1538.1271.2672c-.0133.1106-.1033.2213-.2171.2753c-.1138.054-.2515.054-.3521-.0027c-.1006-.0567-.1668-.17-.1774-.2807c-.0106-.1079.0344-.2132.1006-.251c.0662-.0378.1562-.0054.2488-.0081c.0953-.0027.1906-.0378.2701 0z;
M.7461.2174c.0794.0405.1403.1538.1271.2672c-.0133.1106-.1033.2213-.2171.2753c-.1138.054-.2515.054-.3521-.0027c-.1006-.0567-.1668-.17-.1774-.2807c-.0106-.1079.0344-.2132.1006-.251c.0662-.0378.1562-.0054.2488-.0081c.0953-.0027.1906-.0378.2701 0z"
calcMode="spline" keySplines=".56 .37 .43 .58;.56 .37 .43 .58;.56 .37 .43 .58;.56 .37 .43 .58"/>
</path>
</defs>
<svg viewBox="0 0 28.35 28.35" preserveAspectRatio="none">
<g id="triangles">
<path id="line_1" d="M6.58,12.42,11.6,4A3.22,3.22,0,0,1,17.18,4L22,12.6l4.82,8.58A3.21,3.21,0,0,1,24,26l-9.84-.11-9.85-.11a3.22,3.22,0,0,1-2.73-4.86Z" fill="none" stroke="#3AADAA" stroke-width="1" stroke-miterlimit="10" opacity=".2"/>
<path id="line_2" d="M6.58,12.42,11.6,4A3.22,3.22,0,0,1,17.18,4L22,12.6l4.82,8.58A3.21,3.21,0,0,1,24,26l-9.84-.11-9.85-.11a3.22,3.22,0,0,1-2.73-4.86Z" fill="none" stroke="#3AADAA" stroke-width="1" stroke-miterlimit="10" opacity=".2"/>
<path id="line_3" d="M6.58,12.42,11.6,4A3.22,3.22,0,0,1,17.18,4L22,12.6l4.82,8.58A3.21,3.21,0,0,1,24,26l-9.84-.11-9.85-.11a3.22,3.22,0,0,1-2.73-4.86Z" fill="none" stroke="#3AADAA" stroke-width="1" stroke-miterlimit="10" opacity=".2"/>
<path id="line_4" d="M6.58,12.42,11.6,4A3.22,3.22,0,0,1,17.18,4L22,12.6l4.82,8.58A3.21,3.21,0,0,1,24,26l-9.84-.11-9.85-.11a3.22,3.22,0,0,1-2.73-4.86Z" fill="none" stroke="#3AADAA" stroke-width="1" stroke-miterlimit="10" opacity=".2"/>
<path id="line_5" d="M6.58,12.42,11.6,4A3.22,3.22,0,0,1,17.18,4L22,12.6l4.82,8.58A3.21,3.21,0,0,1,24,26l-9.84-.11-9.85-.11a3.22,3.22,0,0,1-2.73-4.86Z" fill="none" stroke="#3AADAA" stroke-width="1" stroke-miterlimit="10" opacity=".2"/>
<path id="line_6" d="M6.58,12.42,11.6,4A3.22,3.22,0,0,1,17.18,4L22,12.6l4.82,8.58A3.21,3.21,0,0,1,24,26l-9.84-.11-9.85-.11a3.22,3.22,0,0,1-2.73-4.86Z" fill="none" stroke="#3AADAA" stroke-width="1" stroke-miterlimit="10" opacity=".2"/>
<path id="line_7" d="M6.58,12.42,11.6,4A3.22,3.22,0,0,1,17.18,4L22,12.6l4.82,8.58A3.21,3.21,0,0,1,24,26l-9.84-.11-9.85-.11a3.22,3.22,0,0,1-2.73-4.86Z" fill="none" stroke="#3AADAA" stroke-width="1" stroke-miterlimit="10" opacity=".2"/>
<path id="line_8" d="M6.58,12.42,11.6,4A3.22,3.22,0,0,1,17.18,4L22,12.6l4.82,8.58A3.21,3.21,0,0,1,24,26l-9.84-.11-9.85-.11a3.22,3.22,0,0,1-2.73-4.86Z" fill="none" stroke="#3AADAA" stroke-width="1" stroke-miterlimit="10" opacity=".2"/>
<path id="line_9" d="M6.58,12.42,11.6,4A3.22,3.22,0,0,1,17.18,4L22,12.6l4.82,8.58A3.21,3.21,0,0,1,24,26l-9.84-.11-9.85-.11a3.22,3.22,0,0,1-2.73-4.86Z" fill="none" stroke="#3AADAA" stroke-width="1" stroke-miterlimit="10" opacity=".2"/>
<path id="line_10" d="M6.58,12.42,11.6,4A3.22,3.22,0,0,1,17.18,4L22,12.6l4.82,8.58A3.21,3.21,0,0,1,24,26l-9.84-.11-9.85-.11a3.22,3.22,0,0,1-2.73-4.86Z" fill="none" stroke="#3AADAA" stroke-width="1" stroke-miterlimit="10" opacity=".2"/>
<path id="line_11" d="M6.58,12.42,11.6,4A3.22,3.22,0,0,1,17.18,4L22,12.6l4.82,8.58A3.21,3.21,0,0,1,24,26l-9.84-.11-9.85-.11a3.22,3.22,0,0,1-2.73-4.86Z" fill="none" stroke="#3AADAA" stroke-width="1" stroke-miterlimit="10" opacity=".2"/>
</g>
</svg>
<svg viewBox="0 0 1 1" id="preview" preserveAspectRatio="none">
<use xlink:href="#filterPath" fill="darkgrey"/>
</svg>
<image xlink:href="" clip-path="url(#clip-path)"/>
</svg>

After

Width:  |  Height:  |  Size: 6.3 KiB

@@ -0,0 +1,31 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
<defs>
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
<use xlink:href="#filterPath" fill="none"/>
</clipPath>
<path id="filterPath" d="M.7618.393c.0772.1327.1644.2791.1308.3725c-.0336.0938-.1876.1346-.3409.1346c-.1536 0-.3069-.0421-.3873-.1666c-.08-.1245-.0876-.3313-.0112-.4644C.2297.1359.3901.0773.5038.108C.6182.1395.685.2594.7618.393z">
<animate dur="18s" repeatCount="indefinite" attributeName="d" attributeType="XML"
values="
M.7618.393c.0772.1327.1644.2791.1308.3725c-.0336.0938-.1876.1346-.3409.1346c-.1536 0-.3069-.0421-.3873-.1666c-.08-.1245-.0876-.3313-.0112-.4644C.2297.1359.3901.0773.5038.108C.6182.1395.685.2594.7618.393z;
M.8344.2313c.0943.1136.0847.3092-.0142.4568c-.0989.148-.2874.2468-.3849.2004c-.0966-.0464-.1016-.238-.1622-.366c-.061-.1284-.1763-.192-.1731-.2592c.0022-.068.1234-.1384.2824-.158C.5424.0861.7401.1173.8344.2313z;
M.7618.393c.0772.1327.1644.2791.1308.3725c-.0336.0938-.1876.1346-.3409.1346c-.1536 0-.3069-.0421-.3873-.1666c-.08-.1245-.0876-.3313-.0112-.4644C.2297.1359.3901.0773.5038.108C.6182.1395.685.2594.7618.393z"
calcMode="spline"
keySplines=".56 .37 .43 .58; .56 .37 .43 .58"/>
</path>
</defs>
<svg viewBox="0 0 1 1" id="preview" preserveAspectRatio="none">
<use xlink:href="#filterPath" fill="darkgrey"/>
</svg>
<image xlink:href="" clip-path="url(#clip-path)"/>
<svg viewBox="0 0 28.35 28.35" preserveAspectRatio="none">
<path id="line_1" d="M3,7.37A9.92,9.92,0,0,1,9.29,2.72M2,7A9.65,9.65,0,0,1,7,2.34" fill="none" stroke="#3AADAA" stroke-linecap="round" stroke-miterlimit="10" stroke-width="0.5">
<animate dur="18s" repeatCount="indefinite" attributeName="d" attributeType="XML"
values="
M3,7.37A9.92,9.92,0,0,1,9.29,2.72M2,7A9.65,9.65,0,0,1,7,2.34;
M2,6.87a9.9,9.9,0,0,1,6-5.09M1,6.58a9.71,9.71,0,0,1,4.61-5;
M3,7.37A9.92,9.92,0,0,1,9.29,2.72M2,7A9.65,9.65,0,0,1,7,2.34"
calcMode="spline"
keySplines=".56 .37 .43 .58; .56 .37 .43 .58"/>
</path>
</svg>
</svg>

After

Width:  |  Height:  |  Size: 2.2 KiB

@@ -0,0 +1,40 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
<defs>
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
<use xlink:href="#filterPath" fill="none"/>
</clipPath>
<path id="filterPath" d="M.526.4606c.0608.0582.1787.0394.2643.1009c.0856.0629.1371.2064.0944.2754c-.044.0699-.1835.0642-.2879.0619c-.1055-.0018-.1759-.001-.2043-.0506c-.0284-.0497-.0148-.1487-.0596-.2186C.2881.5597.1846.5198.1346.4273C.0846.3348.0878.1904.151.1322C.2134.073.3345.0989.3973.181C.4601.263.4644.4015.526.4606z">
<animate dur="32s" repeatCount="indefinite" attributeName="d" attributeType="XML"
values="
M.526.4606c.0608.0582.1787.0394.2643.1009c.0856.0629.1371.2064.0944.2754c-.044.0699-.1835.0642-.2879.0619c-.1055-.0018-.1759-.001-.2043-.0506c-.0284-.0497-.0148-.1487-.0596-.2186C.2881.5597.1846.5198.1346.4273C.0846.3348.0878.1904.151.1322C.2134.073.3345.0989.3973.181C.4601.263.4644.4015.526.4606z;
M.5883.3111c.0946.0524.2461.0628.2936.12c.0479.0576-.008.162-.0706.2592c-.0631.0972-.1334.1872-.2213.2056c-.087.0192-.1922-.0336-.2839-.0812c-.0922-.048-.1716-.0916-.1965-.1544c-.0249-.0628.0054-.1452.0122-.2404c.0059-.0952-.0101-.2028.0354-.264C.203.0959.3119.0827.3847.1235C.4575.1643.4941.2587.5883.3111z;
M.526.4606c.0608.0582.1787.0394.2643.1009c.0856.0629.1371.2064.0944.2754c-.044.0699-.1835.0642-.2879.0619c-.1055-.0018-.1759-.001-.2043-.0506c-.0284-.0497-.0148-.1487-.0596-.2186C.2881.5597.1846.5198.1346.4273C.0846.3348.0878.1904.151.1322C.2134.073.3345.0989.3973.181C.4601.263.4644.4015.526.4606z"
calcMode="spline"
keySplines=".56 .37 .43 .58; .56 .37 .43 .58"/>
</path>
</defs>
<svg viewBox="0 0 1 1" id="preview" preserveAspectRatio="none">
<use xlink:href="#filterPath" fill="darkgrey"/>
</svg>
<image xlink:href="" clip-path="url(#clip-path)"/>
<svg viewBox="0 0 28.35 28.35" preserveAspectRatio="none">
<path id="line_1" d="M4.87 16.53s3.84 2.34 3.81 5.25m.37-2.27c-.17-.7667-.54-1.5333-1.71-2.3" fill="none" stroke="#7C6576" stroke-linecap="round" stroke-miterlimit="10" stroke-width="0.5">
<animate dur="32s" repeatCount="indefinite" attributeName="d" attributeType="XML"
values="
M4.87 16.53s3.84 2.34 3.81 5.25m.37-2.27c-.17-.7667-.54-1.5333-1.71-2.3;
M1.39,19.51s-.7,3.55,4.78,5.79M5.41,24c-2.58-1.71-2.67-2.46-2.93-3.25;
M4.87 16.53s3.84 2.34 3.81 5.25m.37-2.27c-.17-.7667-.54-1.5333-1.71-2.3"
calcMode="spline"
keySplines=".56 .37 .43 .58; .56 .37 .43 .58"/>
</path>
<path id="line_2" d="M22.2,14.2c-2.2-2.2-3.4-1.6-4.7-2.6 M17.5,12.9c0.9,0.5,2,0.2,3,1.2" fill="none" stroke="#7C6576" stroke-linecap="round" stroke-miterlimit="10" stroke-width="0.5">
<animate dur="32s" repeatCount="indefinite" attributeName="d" attributeType="XML"
values="
M22.2,14.2c-2.2-2.2-3.4-1.6-4.7-2.6 M17.5,12.9c0.9,0.5,2,0.2,3,1.2;
M26.1,10.6c-1.3-2.1-3.2-2.6-4.6-2.9 M21.4,8.7c1.1,0.3,2.2,0.5,3,1.6;
M22.2,14.2c-2.2-2.2-3.4-1.6-4.7-2.6 M17.5,12.9c0.9,0.5,2,0.2,3,1.2"
calcMode="spline"
keySplines=".56 .37 .43 .58; .56 .37 .43 .58"/>
</path>
</svg>
</svg>

After

Width:  |  Height:  |  Size: 3.3 KiB

@@ -0,0 +1,38 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
<defs>
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
<use xlink:href="#filterPath" fill="none"/>
</clipPath>
<path id="filterPath" d="M.2524.6569c-.0028-.1018.1575-.1272.2785-.2374c.1182-.1074.1744-.277.2532-.2374c.0788.0396.1434.2544.1041.424c-.0422.1696-.1913.294-.3432.294C.3902.9028.2552.7586.2524.6569zM.3452.1028c.0872.017.166.1159.1631.1866c-.0028.0706-.1491.113-.225.1668c-.0759.0537-.0844.1215-.1322.082C.1033.5014.0808.3572.1202.2526C.1596.148.258.0858.3452.1028z">
<animate dur="9s" repeatCount="indefinite" attributeName="d" attributeType="XML"
values="
M.2524.6569c-.0028-.1018.1575-.1272.2785-.2374c.1182-.1074.1744-.277.2532-.2374c.0788.0396.1434.2544.1041.424c-.0422.1696-.1913.294-.3432.294C.3902.9028.2552.7586.2524.6569zM.3452.1028c.0872.017.166.1159.1631.1866c-.0028.0706-.1491.113-.225.1668c-.0759.0537-.0844.1215-.1322.082C.1033.5014.0808.3572.1202.2526C.1596.148.258.0858.3452.1028z;
M.2384.6578c-.0264-.1009.2085-.1009.2994-.2391C.6406.266.7286.1162.7933.1766c.0587.0547.138.2622.0939.4322c-.044.1729-.1732.291-.3318.291C.3969.9056.2648.7558.2384.6578zM.347.1046C.438.1219.532.2083.532.2804c-.003.072-.0352.0835-.141.1124c-.0939.0288-.2055.1873-.2554.147C.0857.5022.0945.3582.1238.24C.1532.1306.256.0845.347.1046z;
M.2524.6569c-.0028-.1018.1575-.1272.2785-.2374c.1182-.1074.1744-.277.2532-.2374c.0788.0396.1434.2544.1041.424c-.0422.1696-.1913.294-.3432.294C.3902.9028.2552.7586.2524.6569zM.3452.1028c.0872.017.166.1159.1631.1866c-.0028.0706-.1491.113-.225.1668c-.0759.0537-.0844.1215-.1322.082C.1033.5014.0808.3572.1202.2526C.1596.148.258.0858.3452.1028z"
calcMode="spline"
keySplines=".56 .37 .43 .58; .56 .37 .43 .58"/>
</path>
<g id="animation">
<animateTransform xlink:href="#lines_grp_1" attributeName="transform" attributeType="XML" type="translate" dur="9s" values="0 0;-.5 -.5;0 0" repeatCount="indefinite" calcMode="spline" keySplines=".45 .05 .55 .95;.45 .05 .55 .95" additive="sum"/>
<animateTransform xlink:href="#lines_grp_2" attributeName="transform" attributeType="XML" type="translate" dur="9s" values="0 0;0 1.5;0 0" repeatCount="indefinite" calcMode="spline" keySplines=".45 .05 .55 .95;.45 .05 .55 .95" additive="sum"/>
</g>
</defs>
<svg viewBox="0 0 1 1" id="preview" preserveAspectRatio="none">
<use xlink:href="#filterPath" fill="darkgrey"/>
</svg>
<image xlink:href="" clip-path="url(#clip-path)"/>
<svg viewBox="0 0 28.35 28.35" preserveAspectRatio="none">
<g id="lines_grp_1" style="transform-box: fill-box">
<path d="M3.14,5.57A4.37,4.37,0,0,1,6.36,2.91" fill="none" stroke="#3AADAA" stroke-linecap="round" stroke-miterlimit="10" stroke-width="0.35"/>
<path d="M3,4.74a4.1,4.1,0,0,1,2.5-2.07" fill="none" stroke="#3AADAA" stroke-linecap="round" stroke-miterlimit="10" stroke-width="0.27"/>
</g>
<g id="lines_grp_2" style="transform-box: fill-box" transform-origin="right bottom">
<path d="M26.31,18.63s-1.43,4.26-4,5.23" fill="none" stroke="#7C6576" stroke-linecap="round" stroke-miterlimit="10" stroke-width="0.47"/>
<path d="M26.31,20.05s-1.14,3-3.07,4.07" fill="none" stroke="#7C6576" stroke-linecap="round" stroke-miterlimit="10" stroke-width="0.37"/>
</g>
<g id="lines_grp_3" style="transform-box: fill-box" transform-origin="center">
<path d="M7.19,16.26a3.34,3.34,0,0,0-.89,3.56" fill="none" stroke="#383E45" stroke-linecap="round" stroke-miterlimit="10" stroke-width="0.33"/>
<path d="M6.19,16.59a3.52,3.52,0,0,0,.32,4.34" fill="none" stroke="#383E45" stroke-linecap="round" stroke-miterlimit="10" stroke-width="0.25"/>
</g>
</svg>
</svg>

After

Width:  |  Height:  |  Size: 3.8 KiB

@@ -0,0 +1,17 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
<defs>
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
<use xlink:href="#filterPath" fill="none"></use>
</clipPath>
<path id="filterPath"
d="M0.2142,0.096c-0.413,1.8378,1.2192,0.3258,0.6396,0.1988C0.6879,0.2584,0.2791-0.1927,0.2142,0.096Z"></path>
</defs><svg viewBox="75.05909729003906 83.49757385253906 154.99501037597656 130.04640197753906"
preserveAspectRatio="none">
<path class="background"
d="M223.45,129.45c-47.29,21.63-17.59,56.7-41.95,81.07-8,8-81.08-7.91-98.62-44.28-20.21-41.91,8.66-85.46,32.38-81.49C152.05,90.91,253.9,115.53,223.45,129.45Z"
fill="none" stroke="#3AADAA" stroke-miterlimit="10" stroke-width="2"></path>
</svg><svg viewBox="0 0 1 1" id="preview" preserveAspectRatio="none">
<use xlink:href="#filterPath" fill="darkgrey"></use>
</svg>
<image xlink:href="" clip-path="url(#clip-path)"></image>
</svg>

After

Width:  |  Height:  |  Size: 1006 B

@@ -0,0 +1,18 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
<defs>
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
<use xlink:href="#filterPath" fill="none"></use>
</clipPath>
<path id="filterPath"
d="M0.0814,0.6292l0.0883-0.4105a0.3491,0.2598,0,0,1,0.2461-0.2081h0A0.349,0.2597,0,0,1,0.8597,0.2225l0.087,0.4468a0.3491,0.2597,0,0,1-0.2018,0.2739L0.6442,0.977a0.3489,0.2596,0,0,1-0.4175-0.0757L0.1521,0.8312A0.3492,0.2599,0,0,1,0.0814,0.6292Z">
</path>
</defs><svg viewBox="68.3936538696289 35.054168701171875 176.3720703125 211.69915771484375"
preserveAspectRatio="none">
<path class="background"
d="M183.21,72.46C294.62,227.17,225,264.54,146.75,232.89c-31.16-12.62-32.39-28-56.92-68.26C33,71.32,124.18-9.51,183.21,72.46Z"
fill="none" stroke="#7C6576" stroke-miterlimit="10" stroke-width="7"></path>
</svg><svg viewBox="0 0 1 1" id="preview" preserveAspectRatio="none">
<use xlink:href="#filterPath" fill="darkgrey"></use>
</svg>
<image xlink:href="" clip-path="url(#clip-path)"></image>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

@@ -0,0 +1,51 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
<defs>
<pattern id="_10_lpi_80_2" data-name="10 lpi 80% 2" width="72" height="72" stroke="#3AADAA"
patternTransform="translate(0 432)" patternUnits="userSpaceOnUse" viewBox="0 0 72 72">
<line x1="71.75" y1="68.4" x2="144.25" y2="68.4" fill="none" stroke-width="5.76"></line>
<line x1="71.75" y1="54" x2="144.25" y2="54" fill="none" stroke-width="5.76"></line>
<line x1="71.75" y1="39.6" x2="144.25" y2="39.6" fill="none" stroke-width="5.76"></line>
<line x1="71.75" y1="25.2" x2="144.25" y2="25.2" fill="none" stroke-width="5.76"></line>
<line x1="71.75" y1="10.8" x2="144.25" y2="10.8" fill="none" stroke-width="5.76"></line>
<line x1="71.75" y1="61.2" x2="144.25" y2="61.2" fill="none" stroke-width="5.76"></line>
<line x1="71.75" y1="46.8" x2="144.25" y2="46.8" fill="none" stroke-width="5.76"></line>
<line x1="71.75" y1="32.4" x2="144.25" y2="32.4" fill="none" stroke-width="5.76"></line>
<line x1="71.75" y1="18" x2="144.25" y2="18" fill="none" stroke-width="5.76"></line>
<line x1="71.75" y1="3.6" x2="144.25" y2="3.6" fill="none" stroke-width="5.76"></line>
<line x1="-0.25" y1="68.4" x2="72.25" y2="68.4" fill="none" stroke-width="5.76"></line>
<line x1="-0.25" y1="54" x2="72.25" y2="54" fill="none" stroke-width="5.76"></line>
<line x1="-0.25" y1="39.6" x2="72.25" y2="39.6" fill="none" stroke-width="5.76"></line>
<line x1="-0.25" y1="25.2" x2="72.25" y2="25.2" fill="none" stroke-width="5.76"></line>
<line x1="-0.25" y1="10.8" x2="72.25" y2="10.8" fill="none" stroke-width="5.76"></line>
<line x1="-0.25" y1="61.2" x2="72.25" y2="61.2" fill="none" stroke-width="5.76"></line>
<line x1="-0.25" y1="46.8" x2="72.25" y2="46.8" fill="none" stroke-width="5.76"></line>
<line x1="-0.25" y1="32.4" x2="72.25" y2="32.4" fill="none" stroke-width="5.76"></line>
<line x1="-0.25" y1="18" x2="72.25" y2="18" fill="none" stroke-width="5.76"></line>
<line x1="-0.25" y1="3.6" x2="72.25" y2="3.6" fill="none" stroke-width="5.76"></line>
<line x1="-72.25" y1="68.4" x2="0.25" y2="68.4" fill="none" stroke-width="5.76"></line>
<line x1="-72.25" y1="54" x2="0.25" y2="54" fill="none" stroke-width="5.76"></line>
<line x1="-72.25" y1="39.6" x2="0.25" y2="39.6" fill="none" stroke-width="5.76"></line>
<line x1="-72.25" y1="25.2" x2="0.25" y2="25.2" fill="none" stroke-width="5.76"></line>
<line x1="-72.25" y1="10.8" x2="0.25" y2="10.8" fill="none" stroke-width="5.76"></line>
<line x1="-72.25" y1="61.2" x2="0.25" y2="61.2" fill="none" stroke-width="5.76"></line>
<line x1="-72.25" y1="46.8" x2="0.25" y2="46.8" fill="none" stroke-width="5.76"></line>
<line x1="-72.25" y1="32.4" x2="0.25" y2="32.4" fill="none" stroke-width="5.76"></line>
<line x1="-72.25" y1="18" x2="0.25" y2="18" fill="none" stroke-width="5.76"></line>
<line x1="-72.25" y1="3.6" x2="0.25" y2="3.6" fill="none" stroke-width="5.76"></line>
</pattern>
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
<use xlink:href="#filterPath" fill="none"></use>
</clipPath>
<path id="filterPath"
d="M0.5445,0.9688c-0.2063,0.0394-0.4415-0.1849-0.4528-0.5113-0.0071-0.2074,0.0673-0.3879,0.2684-0.4499C0.5331-0.0457,0.7045,0.1957,0.8386,0.3123,1.0825,0.5244,0.8744,0.9058,0.5445,0.9688Z">
</path>
</defs><svg viewBox="58.99126052856445 134.33645629882812 199.1487579345703 77.86276245117188"
preserveAspectRatio="none">
<path class="background"
d="M230.8,189.77c81.18-52.47-33.17-41.18-150.22-55.2-24.59-2.94-32.31,22.14-1,60.38C104.48,225.45,199.15,210.23,230.8,189.77Z"
fill="url(#_10_lpi_80_2)"></path>
</svg><svg viewBox="0 0 1 1" id="preview" preserveAspectRatio="none">
<use xlink:href="#filterPath" fill="darkgrey"></use>
</svg>
<image xlink:href="" clip-path="url(#clip-path)"></image>
</svg>

After

Width:  |  Height:  |  Size: 3.9 KiB

@@ -0,0 +1,662 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
<defs>
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
<use xlink:href="#filterPath" fill="none"></use>
</clipPath>
<pattern id="USGS_22_Gravel_Beach" data-name="USGS 22 Gravel Beach" width="72" height="72"
patternTransform="translate(0 792.01)" patternUnits="userSpaceOnUse" fill="#3AADAA" viewBox="0 0 72 72">
<g>
<path d="M21,3.1a.39.39,0,0,1-.25-.1.36.36,0,0,1,0-.5.36.36,0,0,1,.6.25.39.39,0,0,1-.1.25A.39.39,0,0,1,21,3.1Z">
</path>
<path
d="M20,8.35A.34.34,0,0,1,19.65,8a.33.33,0,0,1,.11-.25.37.37,0,0,1,.49,0,.36.36,0,0,1,.1.25.39.39,0,0,1-.1.25A.37.37,0,0,1,20,8.35Z">
</path>
<path d="M20.25,10.6A.35.35,0,0,1,20,10a.37.37,0,0,1,.5,0,.35.35,0,0,1-.25.6Z"></path>
<path d="M15.25,10.6a.34.34,0,0,1-.35-.35A.37.37,0,0,1,15,10a.38.38,0,0,1,.5,0,.35.35,0,0,1-.25.6Z"></path>
<path d="M22.75,20.1a.35.35,0,0,1-.25-.6.36.36,0,0,1,.6.25.34.34,0,0,1-.35.35Z"></path>
<path
d="M15.25,23.1a.34.34,0,0,1-.35-.35A.33.33,0,0,1,15,22.5a.37.37,0,0,1,.49,0,.36.36,0,0,1,.1.25.34.34,0,0,1-.35.35Z">
</path>
<path d="M14,24.1a.35.35,0,0,1-.25-.6.36.36,0,0,1,.6.25.39.39,0,0,1-.1.25A.37.37,0,0,1,14,24.1Z"></path>
<path
d="M24,27.1a.34.34,0,0,1-.35-.35.33.33,0,0,1,.11-.25.37.37,0,0,1,.49,0,.39.39,0,0,1,.1.25.35.35,0,0,1-.1.24A.36.36,0,0,1,24,27.1Z">
</path>
<path d="M30.75,25.85a.35.35,0,0,1-.25-.6.36.36,0,0,1,.6.25.34.34,0,0,1-.35.35Z"></path>
<path
d="M31.25,23.35A.34.34,0,0,1,30.9,23a.33.33,0,0,1,.11-.25.35.35,0,0,1,.59.25.39.39,0,0,1-.1.25A.37.37,0,0,1,31.25,23.35Z">
</path>
<path d="M29.25,18.35a.35.35,0,0,1-.25-.6.36.36,0,0,1,.6.25.34.34,0,0,1-.35.35Z"></path>
<path d="M34,19.85a.35.35,0,0,1-.25-.6.36.36,0,0,1,.6.25.34.34,0,0,1-.35.35Z"></path>
<path d="M31.5,14.85a.35.35,0,0,1-.25-.6.36.36,0,0,1,.6.25.34.34,0,0,1-.35.35Z"></path>
<path d="M31.75,11.85a.35.35,0,0,1-.25-.6.37.37,0,0,1,.5,0,.35.35,0,0,1-.25.6Z"></path>
<path d="M32.25,7.1A.35.35,0,0,1,32,6.5a.36.36,0,0,1,.6.25.34.34,0,0,1-.35.35Z"></path>
<path
d="M32,3.1a.39.39,0,0,1-.25-.1.39.39,0,0,1-.1-.25.33.33,0,0,1,.11-.25.35.35,0,0,1,.59.25.39.39,0,0,1-.1.25A.39.39,0,0,1,32,3.1Z">
</path>
<path
d="M34,1.35a.36.36,0,0,1-.25-.11.33.33,0,0,1-.1-.24.33.33,0,0,1,.11-.25.36.36,0,0,1,.49,0,.36.36,0,0,1,.1.25.34.34,0,0,1-.11.25A.35.35,0,0,1,34,1.35Z">
</path>
<path
d="M41.5,7.1a.39.39,0,0,1-.25-.1.35.35,0,0,1-.1-.25.39.39,0,0,1,.1-.25.35.35,0,0,1,.49,0,.36.36,0,0,1,.11.25.34.34,0,0,1-.35.35Z">
</path>
<path d="M45.5,6.85a.39.39,0,0,1-.25-.1.36.36,0,0,1,0-.5.36.36,0,0,1,.6.25.34.34,0,0,1-.35.35Z"></path>
<path d="M42.5,13.6a.34.34,0,0,1-.35-.35.33.33,0,0,1,.11-.25.35.35,0,0,1,.59.25.34.34,0,0,1-.35.35Z"></path>
<path
d="M47,14.35a.34.34,0,0,1-.35-.35.33.33,0,0,1,.11-.25.36.36,0,0,1,.49,0,.39.39,0,0,1,.1.25.33.33,0,0,1-.1.24A.36.36,0,0,1,47,14.35Z">
</path>
<path
d="M47,16.35a.34.34,0,0,1-.35-.35.33.33,0,0,1,.11-.25.36.36,0,0,1,.49,0,.39.39,0,0,1,.1.25.37.37,0,0,1-.1.24A.36.36,0,0,1,47,16.35Z">
</path>
<path d="M39,20.85a.35.35,0,0,1-.25-.6.36.36,0,0,1,.49,0,.34.34,0,0,1,.11.25.34.34,0,0,1-.35.35Z"></path>
<path d="M50.25,13.6a.39.39,0,0,1-.25-.1.36.36,0,0,1,0-.5.37.37,0,0,1,.5,0,.35.35,0,0,1-.25.6Z"></path>
<path
d="M52.25,12.1A.36.36,0,0,1,52,12a.35.35,0,0,1-.1-.24A.33.33,0,0,1,52,11.5a.37.37,0,0,1,.49,0,.36.36,0,0,1,.1.25.34.34,0,0,1-.35.35Z">
</path>
<path
d="M54.75,11.1A.36.36,0,0,1,54.5,11a.35.35,0,0,1-.1-.24.33.33,0,0,1,.11-.25.35.35,0,0,1,.59.25.34.34,0,0,1-.35.35Z">
</path>
<path
d="M56.5.85a.39.39,0,0,1-.25-.1.39.39,0,0,1-.1-.25.39.39,0,0,1,.1-.25.36.36,0,0,1,.5,0,.35.35,0,0,1,.1.24.39.39,0,0,1-.1.25A.39.39,0,0,1,56.5.85Z">
</path>
<path
d="M68,3.1a.39.39,0,0,1-.25-.1.39.39,0,0,1-.1-.25.33.33,0,0,1,.11-.25.37.37,0,0,1,.49,0,.36.36,0,0,1,.1.25.39.39,0,0,1-.1.25A.37.37,0,0,1,68,3.1Z">
</path>
<path
d="M68,10.35a.36.36,0,0,1-.25-.11.35.35,0,0,1-.1-.24.39.39,0,0,1,.1-.25.37.37,0,0,1,.5,0,.39.39,0,0,1,.1.25.34.34,0,0,1-.11.25A.35.35,0,0,1,68,10.35Z">
</path>
<path d="M64.25,12.35a.35.35,0,0,1-.25-.6.36.36,0,0,1,.6.25.34.34,0,0,1-.35.35Z"></path>
<path d="M65.25,15.85a.34.34,0,0,1-.35-.35.37.37,0,0,1,.1-.25.38.38,0,0,1,.5,0,.35.35,0,0,1-.25.6Z"></path>
<path
d="M64,19.85a.36.36,0,0,1-.25-.11.35.35,0,0,1-.1-.24.39.39,0,0,1,.1-.25.37.37,0,0,1,.5,0,.39.39,0,0,1,.1.25.34.34,0,0,1-.11.25A.35.35,0,0,1,64,19.85Z">
</path>
<path
d="M66.25,19.85a.34.34,0,0,1-.35-.35.33.33,0,0,1,.11-.25.37.37,0,0,1,.49,0,.36.36,0,0,1,.1.25.34.34,0,0,1-.35.35Z">
</path>
<path d="M68,21.35a.35.35,0,0,1-.25-.6.37.37,0,0,1,.5,0,.35.35,0,0,1-.25.6Z"></path>
<path d="M7,52.35a.35.35,0,0,1-.25-.6.38.38,0,0,1,.5,0,.35.35,0,0,1-.25.6Z"></path>
<path d="M7.25,54.6A.35.35,0,0,1,7,54a.37.37,0,0,1,.5,0,.35.35,0,0,1-.25.6Z"></path>
<path
d="M2.25,54.6A.39.39,0,0,1,2,54.5.36.36,0,0,1,2,54a.38.38,0,0,1,.5,0,.36.36,0,0,1,0,.5A.39.39,0,0,1,2.25,54.6Z">
</path>
<path d="M9.75,64.1a.35.35,0,0,1-.25-.6.36.36,0,0,1,.6.25.34.34,0,0,1-.35.35Z"></path>
<path d="M1,68.1A.39.39,0,0,1,.75,68a.36.36,0,0,1,0-.5.38.38,0,0,1,.5,0,.36.36,0,0,1,0,.5A.39.39,0,0,1,1,68.1Z">
</path>
<path d="M11,71.1a.35.35,0,0,1-.25-.6.38.38,0,0,1,.5,0,.35.35,0,0,1-.25.6Z"></path>
<path
d="M18.25,67.35A.34.34,0,0,1,17.9,67a.37.37,0,0,1,.1-.25.37.37,0,0,1,.49,0,.36.36,0,0,1,.11.25.34.34,0,0,1-.35.35Z">
</path>
<path d="M16.25,62.35a.35.35,0,0,1-.25-.6.37.37,0,0,1,.5,0,.35.35,0,0,1-.25.6Z"></path>
<path
d="M19.5,57.85a.34.34,0,0,1-.35-.35.33.33,0,0,1,.11-.25.37.37,0,0,1,.49,0,.36.36,0,0,1,.1.25.34.34,0,0,1-.35.35Z">
</path>
<path
d="M18.75,55.85a.34.34,0,0,1-.35-.35.33.33,0,0,1,.11-.25.37.37,0,0,1,.49,0,.36.36,0,0,1,.1.25.34.34,0,0,1-.35.35Z">
</path>
<path
d="M16.25,54.85a.34.34,0,0,1-.35-.35.33.33,0,0,1,.11-.25.37.37,0,0,1,.49,0,.36.36,0,0,1,.1.25.34.34,0,0,1-.35.35Z">
</path>
<path
d="M19.25,51.1a.34.34,0,0,1-.35-.35A.33.33,0,0,1,19,50.5a.37.37,0,0,1,.49,0,.36.36,0,0,1,.1.25.34.34,0,0,1-.35.35Z">
</path>
<path d="M19,47.1a.35.35,0,0,1-.25-.6.38.38,0,0,1,.5,0,.35.35,0,0,1-.25.6Z"></path>
<path d="M16.25,47.35a.35.35,0,0,1-.25-.6.37.37,0,0,1,.5,0,.35.35,0,0,1-.25.6Z"></path>
<path d="M32.5,50.85a.34.34,0,0,1-.35-.35.33.33,0,0,1,.11-.25.35.35,0,0,1,.59.25.34.34,0,0,1-.35.35Z"></path>
<path d="M27.25,54.35a.35.35,0,0,1-.25-.6.37.37,0,0,1,.5,0,.35.35,0,0,1-.25.6Z"></path>
<path d="M32,55.85a.35.35,0,0,1-.25-.6.37.37,0,0,1,.5,0,.35.35,0,0,1-.25.6Z"></path>
<path d="M32,57.6a.35.35,0,0,1-.24-.1.35.35,0,0,1,0-.5.37.37,0,0,1,.5,0,.36.36,0,0,1,.1.25.34.34,0,0,1-.35.35Z">
</path>
<path d="M34,58.35a.35.35,0,0,1-.25-.6.37.37,0,0,1,.5,0,.35.35,0,0,1-.25.6Z"></path>
<path d="M26,64.85a.35.35,0,0,1-.25-.6.36.36,0,0,1,.6.25.34.34,0,0,1-.35.35Z"></path>
<path d="M36,56.35a.35.35,0,0,1-.25-.6.36.36,0,0,1,.6.25.34.34,0,0,1-.35.35Z"></path>
<path
d="M39.25,56.1A.35.35,0,0,1,39,56a.36.36,0,0,1-.11-.25.39.39,0,0,1,.1-.25.37.37,0,0,1,.5,0,.35.35,0,0,1-.25.6Z">
</path>
<path d="M41.75,50.85a.35.35,0,0,1-.25-.6.37.37,0,0,1,.5,0,.35.35,0,0,1-.25.6Z"></path>
<path
d="M43.5,44.85a.36.36,0,0,1-.25-.11.35.35,0,0,1-.1-.24.39.39,0,0,1,.1-.25.37.37,0,0,1,.5,0,.35.35,0,0,1-.25.6Z">
</path>
<path
d="M51,50.6a.39.39,0,0,1-.25-.1.36.36,0,0,1-.1-.25.39.39,0,0,1,.1-.25.36.36,0,0,1,.5,0,.35.35,0,0,1-.25.6Z">
</path>
<path
d="M52,46.6a.36.36,0,0,1-.25-.11.35.35,0,0,1-.1-.24.33.33,0,0,1,.11-.25.37.37,0,0,1,.49,0,.36.36,0,0,1,.1.25.34.34,0,0,1-.35.35Z">
</path>
<path
d="M55,47.1a.33.33,0,0,1-.25-.11.35.35,0,0,1-.1-.24.37.37,0,0,1,.1-.25.36.36,0,0,1,.49,0,.34.34,0,0,1,.11.25.34.34,0,0,1-.35.35Z">
</path>
<path
d="M55,54.35a.33.33,0,0,1-.25-.11.35.35,0,0,1-.1-.24.33.33,0,0,1,.11-.25.37.37,0,0,1,.49,0,.36.36,0,0,1,.1.25.34.34,0,0,1-.35.35Z">
</path>
<path
d="M51.25,56.35a.35.35,0,0,1-.25-.6.37.37,0,0,1,.5,0,.35.35,0,0,1,.1.25.39.39,0,0,1-.1.25A.37.37,0,0,1,51.25,56.35Z">
</path>
<path
d="M51,63.85a.34.34,0,0,1-.35-.35.31.31,0,0,1,.1-.24.34.34,0,0,1,.49,0,.36.36,0,0,1,.11.25.39.39,0,0,1-.1.25A.37.37,0,0,1,51,63.85Z">
</path>
<path
d="M53.25,63.85a.34.34,0,0,1-.35-.35.33.33,0,0,1,.11-.25.36.36,0,0,1,.49,0,.31.31,0,0,1,.1.24.34.34,0,0,1-.35.35Z">
</path>
<path d="M56,63.1a.35.35,0,0,1-.25-.6.36.36,0,0,1,.6.25.34.34,0,0,1-.35.35Z"></path>
<path
d="M58.25,61.6a.36.36,0,0,1-.25-.11.35.35,0,0,1-.1-.24A.39.39,0,0,1,58,61a.37.37,0,0,1,.5,0,.37.37,0,0,1,.1.25.34.34,0,0,1-.35.35Z">
</path>
<path d="M21,27.1a.35.35,0,0,1-.25-.6.36.36,0,0,1,.6.25.34.34,0,0,1-.35.35Z"></path>
<path d="M22.75,24.1a.35.35,0,0,1-.25-.6.37.37,0,0,1,.5,0,.35.35,0,0,1-.25.6Z"></path>
<path d="M39,24.85a.35.35,0,0,1-.25-.6.37.37,0,0,1,.5,0,.35.35,0,0,1-.25.6Z"></path>
<path
d="M46.25,29.1A.39.39,0,0,1,46,29a.35.35,0,0,1,0-.49.34.34,0,0,1,.49,0,.36.36,0,0,1,.11.25.34.34,0,0,1-.35.35Z">
</path>
<path d="M55.25,28.1a.35.35,0,0,1-.25-.6.37.37,0,0,1,.5,0,.35.35,0,0,1-.25.6Z"></path>
<path d="M51.25,25.35a.35.35,0,0,1-.25-.6.37.37,0,0,1,.5,0,.35.35,0,0,1,.1.25.34.34,0,0,1-.35.35Z"></path>
<path d="M52,29.6a.37.37,0,0,1-.25-.1.36.36,0,0,1,0-.5.36.36,0,0,1,.6.25.34.34,0,0,1-.35.35Z"></path>
<path
d="M62.5,35.6a.34.34,0,0,1-.35-.35.33.33,0,0,1,.11-.25.36.36,0,0,1,.49,0,.31.31,0,0,1,.1.24.34.34,0,0,1-.35.35Z">
</path>
<path d="M56.75,39.1a.35.35,0,0,1-.25-.6.36.36,0,0,1,.6.25.34.34,0,0,1-.35.35Z"></path>
<path
d="M48.25,37.35a.35.35,0,0,1-.24-.1A.36.36,0,0,1,47.9,37a.39.39,0,0,1,.1-.25.36.36,0,0,1,.5,0,.33.33,0,0,1,.1.24.34.34,0,0,1-.35.35Z">
</path>
<path
d="M48,41.35a.33.33,0,0,1-.25-.11.35.35,0,0,1-.1-.24.39.39,0,0,1,.1-.25.38.38,0,0,1,.5,0,.35.35,0,0,1-.25.6Z">
</path>
<path
d="M53.5,45.1a.34.34,0,0,1-.25-.11.31.31,0,0,1-.1-.24.34.34,0,0,1,.11-.25.37.37,0,0,1,.49,0,.35.35,0,0,1-.25.6Z">
</path>
<path
d="M62.25,48.1a.34.34,0,0,1-.35-.35A.33.33,0,0,1,62,47.5a.36.36,0,0,1,.49,0,.31.31,0,0,1,.1.24.34.34,0,0,1-.35.35Z">
</path>
<path
d="M65,51.85a.34.34,0,0,1-.35-.35.33.33,0,0,1,.11-.25.37.37,0,0,1,.49,0,.36.36,0,0,1,.1.25.34.34,0,0,1-.35.35Z">
</path>
<path d="M69.5,45.1a.35.35,0,0,1-.25-.6.37.37,0,0,1,.5,0,.35.35,0,0,1-.25.6Z"></path>
<path
d="M60,39.1a.33.33,0,0,1-.25-.11.35.35,0,0,1-.1-.24.34.34,0,0,1,.11-.25.36.36,0,0,1,.49,0,.36.36,0,0,1,0,.5A.37.37,0,0,1,60,39.1Z">
</path>
<path d="M32.5,47.1a.35.35,0,0,1-.25-.6.36.36,0,0,1,.6.25.34.34,0,0,1-.35.35Z"></path>
<path d="M26.25,37.85a.35.35,0,0,1-.25-.6.36.36,0,0,1,.6.25.34.34,0,0,1-.35.35Z"></path>
<path
d="M29.75,35.6a.35.35,0,0,1-.24-.1.36.36,0,0,1-.11-.25.33.33,0,0,1,.11-.25A.37.37,0,0,1,30,35a.36.36,0,0,1,.1.25.34.34,0,0,1-.35.35Z">
</path>
<path d="M10.5,29.6a.35.35,0,0,1-.25-.6.37.37,0,0,1,.49,0,.33.33,0,0,1,.11.25.34.34,0,0,1-.35.35Z"></path>
<path
d="M6,31.6a.35.35,0,0,1-.25-.6.36.36,0,0,1,.49,0,.33.33,0,0,1,.11.25.37.37,0,0,1-.1.25A.39.39,0,0,1,6,31.6Z">
</path>
<path
d="M2.5,35.35a.39.39,0,0,1-.25-.1.36.36,0,0,1,0-.5.37.37,0,0,1,.5,0,.35.35,0,0,1,.1.25.33.33,0,0,1-.1.24A.36.36,0,0,1,2.5,35.35Z">
</path>
<path
d="M17,42.1a.34.34,0,0,1-.35-.35.33.33,0,0,1,.11-.25.35.35,0,0,1,.59.25.39.39,0,0,1-.1.25A.37.37,0,0,1,17,42.1Z">
</path>
<path
d="M12.75,36.1a.34.34,0,0,1-.35-.35.33.33,0,0,1,.11-.25.37.37,0,0,1,.49,0,.36.36,0,0,1,.1.25A.39.39,0,0,1,13,36,.37.37,0,0,1,12.75,36.1Z">
</path>
<path d="M26.5,30.35a.35.35,0,0,1-.25-.6.37.37,0,0,1,.5,0,.35.35,0,0,1-.25.6Z"></path>
<path d="M39.25,30.85a.35.35,0,0,1-.25-.6.37.37,0,0,1,.5,0,.36.36,0,0,1,0,.5A.37.37,0,0,1,39.25,30.85Z"></path>
<path d="M38.25,32.85a.35.35,0,0,1-.25-.6.37.37,0,0,1,.5,0,.35.35,0,0,1-.25.6Z"></path>
<path d="M28,42.1a.35.35,0,0,1-.25-.6.37.37,0,0,1,.5,0,.35.35,0,0,1-.25.6Z"></path>
<path d="M6.5,20.6a.35.35,0,0,1-.25-.6.37.37,0,0,1,.5,0,.35.35,0,0,1-.25.6Z"></path>
<path d="M9.75,18.85a.35.35,0,0,1-.25-.6.36.36,0,0,1,.6.25.34.34,0,0,1-.35.35Z"></path>
<path
d="M11.75,23.6a.34.34,0,0,1-.35-.35.33.33,0,0,1,.11-.25A.37.37,0,0,1,12,23a.36.36,0,0,1,.1.25.39.39,0,0,1-.1.25A.37.37,0,0,1,11.75,23.6Z">
</path>
<path
d="M3,25.85a.39.39,0,0,1-.25-.1.36.36,0,0,1,0-.5.38.38,0,0,1,.5,0,.36.36,0,0,1,0,.5A.39.39,0,0,1,3,25.85Z">
</path>
<path
d="M64.25,29.6a.35.35,0,0,1-.24-.1.36.36,0,0,1-.11-.25A.39.39,0,0,1,64,29a.36.36,0,0,1,.6.25.34.34,0,0,1-.35.35Z">
</path>
<path
d="M69.5,29.85a.34.34,0,0,1-.35-.35.34.34,0,0,1,.11-.25.37.37,0,0,1,.49,0,.36.36,0,0,1,.1.25.39.39,0,0,1-.1.25A.37.37,0,0,1,69.5,29.85Z">
</path>
<path
d="M1.5,9.1A.39.39,0,0,1,1.25,9a.36.36,0,0,1,0-.5.38.38,0,0,1,.5,0,.36.36,0,0,1,0,.5A.39.39,0,0,1,1.5,9.1Z">
</path>
<path d="M16.5,6.1a.34.34,0,0,1-.35-.35.37.37,0,0,1,.1-.25.38.38,0,0,1,.5,0,.35.35,0,0,1-.25.6Z"></path>
<path d="M3.75,6.1a.35.35,0,0,1-.25-.6.36.36,0,0,1,.6.25.34.34,0,0,1-.35.35Z"></path>
<path d="M12.75,14.35a.35.35,0,0,1-.25-.6.36.36,0,0,1,.6.25.34.34,0,0,1-.35.35Z"></path>
<path d="M18.5,19.35a.34.34,0,0,1-.35-.35.37.37,0,0,1,.1-.25.36.36,0,0,1,.6.25.34.34,0,0,1-.35.35Z"></path>
<path
d="M21.25,37.1a.34.34,0,0,1-.35-.35.37.37,0,0,1,.1-.25.37.37,0,0,1,.49,0,.36.36,0,0,1,.11.25.34.34,0,0,1-.35.35Z">
</path>
<path
d="M.75,44.35a.39.39,0,0,1-.25-.1A.39.39,0,0,1,.4,44a.33.33,0,0,1,.11-.25.37.37,0,0,1,.49,0,.36.36,0,0,1,.1.25.39.39,0,0,1-.1.25A.39.39,0,0,1,.75,44.35Z">
</path>
<path
d="M68,66.1a.34.34,0,0,1-.35-.35.33.33,0,0,1,.11-.25.37.37,0,0,1,.49,0,.36.36,0,0,1,.1.25.34.34,0,0,1-.35.35Z">
</path>
<path
d="M59.75,69.85a.39.39,0,0,1-.25-.1.35.35,0,0,1-.1-.25.39.39,0,0,1,.1-.25.37.37,0,0,1,.5,0,.36.36,0,0,1,.1.25.37.37,0,0,1-.1.25A.39.39,0,0,1,59.75,69.85Z">
</path>
<path d="M40.5,68.1a.35.35,0,0,1-.25-.6.37.37,0,0,1,.5,0,.36.36,0,0,1,0,.5A.37.37,0,0,1,40.5,68.1Z"></path>
<path d="M4.5,60.1a.35.35,0,0,1-.25-.6.36.36,0,0,1,.6.25.34.34,0,0,1-.35.35Z"></path>
<path d="M26.5,59.6a.35.35,0,0,1-.25-.6.36.36,0,0,1,.6.25.34.34,0,0,1-.35.35Z"></path>
<path
d="M37.25,48.6a.34.34,0,0,1-.35-.35A.37.37,0,0,1,37,48a.37.37,0,0,1,.5,0,.36.36,0,0,1,0,.5A.37.37,0,0,1,37.25,48.6Z">
</path>
<path d="M8.75,40.35a.35.35,0,0,1-.25-.6.36.36,0,0,1,.6.25.34.34,0,0,1-.35.35Z"></path>
<path
d="M52.25,38.1A.36.36,0,0,1,52,38a.35.35,0,0,1-.1-.24A.33.33,0,0,1,52,37.5a.37.37,0,0,1,.49,0,.36.36,0,0,1,.1.25.34.34,0,0,1-.35.35Z">
</path>
<path
d="M60.75,46.1a.34.34,0,0,1-.35-.35.33.33,0,0,1,.11-.25.37.37,0,0,1,.49,0,.36.36,0,0,1,.1.25.34.34,0,0,1-.35.35Z">
</path>
<path
d="M51.25,66.35a.35.35,0,0,1-.25-.6.37.37,0,0,1,.5,0,.39.39,0,0,1,.1.25.35.35,0,0,1-.1.25A.39.39,0,0,1,51.25,66.35Z">
</path>
<path d="M40,37.85a.35.35,0,0,1-.25-.6.36.36,0,0,1,.6.25.34.34,0,0,1-.35.35Z"></path>
<path d="M27.5,13.6a.35.35,0,0,1-.25-.6.36.36,0,0,1,.6.25.34.34,0,0,1-.35.35Z"></path>
<path
d="M19.75,26.6a.34.34,0,0,1-.35-.35.37.37,0,0,1,.1-.25A.37.37,0,0,1,20,26a.36.36,0,0,1,.11.25.34.34,0,0,1-.35.35Z">
</path>
<path
d="M11.75,1.85a.39.39,0,0,1-.25-.1.39.39,0,0,1-.1-.25.39.39,0,0,1,.1-.25.38.38,0,0,1,.5,0,.39.39,0,0,1,.1.25.39.39,0,0,1-.1.25A.39.39,0,0,1,11.75,1.85Z">
</path>
<path
d="M55.25,3.85a.34.34,0,0,1-.35-.35A.33.33,0,0,1,55,3.25a.37.37,0,0,1,.49,0,.36.36,0,0,1,.1.25.34.34,0,0,1-.35.35Z">
</path>
<path
d="M47.25,69.85a.39.39,0,0,1-.25-.1.37.37,0,0,1-.1-.25.39.39,0,0,1,.1-.25.36.36,0,0,1,.6.25.34.34,0,0,1-.35.35Z">
</path>
<path
d="M4.75,40.35A.34.34,0,0,1,4.4,40a.33.33,0,0,1,.11-.25.37.37,0,0,1,.49,0,.36.36,0,0,1,.1.25.34.34,0,0,1-.35.35Z">
</path>
<path d="M68.75,13.35a.35.35,0,0,1-.25-.6.37.37,0,0,1,.5,0,.36.36,0,0,1,0,.5A.39.39,0,0,1,68.75,13.35Z"></path>
<path d="M23.25,14.1a.35.35,0,0,1-.25-.6.36.36,0,0,1,.6.25.34.34,0,0,1-.35.35Z"></path>
<path d="M20.5,17.35a.35.35,0,0,1-.25-.6.37.37,0,0,1,.5,0,.35.35,0,0,1-.25.6Z"></path>
<path
d="M14.75,17.35A.34.34,0,0,1,14.4,17a.33.33,0,0,1,.11-.25.37.37,0,0,1,.49,0,.36.36,0,0,1,.1.25.34.34,0,0,1-.35.35Z">
</path>
<path d="M6,11.85a.35.35,0,0,1-.25-.6.36.36,0,0,1,.49,0,.33.33,0,0,1,.11.25.34.34,0,0,1-.35.35Z"></path>
<path
d="M7,2.85a.37.37,0,0,1-.24-.1.36.36,0,0,1-.11-.25.39.39,0,0,1,.1-.25.36.36,0,0,1,.6.25.39.39,0,0,1-.1.25A.39.39,0,0,1,7,2.85Z">
</path>
<path d="M10,8.35a.35.35,0,0,1-.25-.6.36.36,0,0,1,.6.25.34.34,0,0,1-.35.35Z"></path>
<path
d="M14.25,8.35A.34.34,0,0,1,13.9,8,.33.33,0,0,1,14,7.75a.37.37,0,0,1,.49,0,.36.36,0,0,1,.1.25.34.34,0,0,1-.35.35Z">
</path>
<path d="M25.75,7.1a.35.35,0,0,1-.25-.6.36.36,0,0,1,.6.25.34.34,0,0,1-.35.35Z"></path>
<path d="M37,7.6a.35.35,0,0,1-.25-.6.37.37,0,0,1,.5,0,.35.35,0,0,1-.25.6Z"></path>
<path d="M37.5,4.35A.34.34,0,0,1,37.15,4a.33.33,0,0,1,.11-.25.35.35,0,0,1,.59.25.34.34,0,0,1-.35.35Z"></path>
<path
d="M43.25,2.35a.39.39,0,0,1-.25-.1A.39.39,0,0,1,42.9,2a.39.39,0,0,1,.1-.25.37.37,0,0,1,.5,0,.39.39,0,0,1,.1.25.39.39,0,0,1-.1.25A.42.42,0,0,1,43.25,2.35Z">
</path>
<path d="M49.5,8.35a.39.39,0,0,1-.25-.1.36.36,0,0,1,0-.5.37.37,0,0,1,.5,0,.35.35,0,0,1-.25.6Z"></path>
<path d="M46,9.35a.35.35,0,0,1-.25-.6.37.37,0,0,1,.5,0,.36.36,0,0,1,0,.5A.37.37,0,0,1,46,9.35Z"></path>
<path d="M35.75,11.1a.34.34,0,0,1-.35-.35.37.37,0,0,1,.1-.25.36.36,0,0,1,.6.25.34.34,0,0,1-.35.35Z"></path>
<path d="M39.25,15.1a.35.35,0,0,1-.25-.6.36.36,0,0,1,.6.25.34.34,0,0,1-.35.35Z"></path>
<path d="M24.75,18.1a.35.35,0,0,1-.25-.6.36.36,0,0,1,.6.25.34.34,0,0,1-.35.35Z"></path>
<path d="M8.25,27.35a.35.35,0,0,1-.25-.6.36.36,0,0,1,.6.25.34.34,0,0,1-.35.35Z"></path>
<path d="M16,31.85a.35.35,0,0,1-.25-.6.38.38,0,0,1,.5,0,.35.35,0,0,1-.25.6Z"></path>
<path
d="M10.5,33.6a.34.34,0,0,1-.35-.35.33.33,0,0,1,.11-.25.37.37,0,0,1,.49,0,.36.36,0,0,1,.1.25.37.37,0,0,1-.1.25A.39.39,0,0,1,10.5,33.6Z">
</path>
<path d="M5.25,37.1A.35.35,0,0,1,5,36.5a.38.38,0,0,1,.5,0,.37.37,0,0,1,.1.25.34.34,0,0,1-.35.35Z"></path>
<path d="M3.25,20.6A.35.35,0,0,1,3,20a.38.38,0,0,1,.5,0,.35.35,0,0,1-.25.6Z"></path>
<path d="M20.5,30.85a.34.34,0,0,1-.35-.35.33.33,0,0,1,.11-.25.35.35,0,0,1,.59.25.34.34,0,0,1-.35.35Z"></path>
<path d="M17.5,35.6a.35.35,0,0,1-.25-.6.37.37,0,0,1,.5,0,.35.35,0,0,1-.25.6Z"></path>
<path
d="M16,39.1a.34.34,0,0,1-.35-.35.33.33,0,0,1,.11-.25.37.37,0,0,1,.49,0,.36.36,0,0,1,.1.25.39.39,0,0,1-.1.25A.37.37,0,0,1,16,39.1Z">
</path>
<path
d="M12.75,41.35A.34.34,0,0,1,12.4,41a.33.33,0,0,1,.11-.25.37.37,0,0,1,.49,0,.36.36,0,0,1,.1.25.34.34,0,0,1-.35.35Z">
</path>
<path
d="M12.75,46.6a.34.34,0,0,1-.35-.35.33.33,0,0,1,.11-.25A.37.37,0,0,1,13,46a.36.36,0,0,1,.1.25.34.34,0,0,1-.35.35Z">
</path>
<path d="M5.75,48.6A.35.35,0,0,1,5.5,48,.38.38,0,0,1,6,48a.35.35,0,0,1-.25.6Z"></path>
<path d="M11,54.6a.35.35,0,0,1-.25-.6.38.38,0,0,1,.5,0,.35.35,0,0,1-.25.6Z"></path>
<path d="M15.5,58.6a.35.35,0,0,1-.25-.6.37.37,0,0,1,.5,0,.35.35,0,0,1-.25.6Z"></path>
<path d="M6,63.6a.35.35,0,0,1-.25-.6.38.38,0,0,1,.5,0,.36.36,0,0,1,.1.25A.34.34,0,0,1,6,63.6Z"></path>
<path
d="M2.25,62.1A.39.39,0,0,1,2,62a.36.36,0,0,1,0-.5.37.37,0,0,1,.49,0,.34.34,0,0,1,.11.25.39.39,0,0,1-.1.25A.39.39,0,0,1,2.25,62.1Z">
</path>
<path d="M9,68.1a.35.35,0,0,1-.25-.6.36.36,0,0,1,.6.25.39.39,0,0,1-.1.25A.37.37,0,0,1,9,68.1Z"></path>
<path d="M13.5,69.6a.35.35,0,0,1-.25-.6.38.38,0,0,1,.5,0,.35.35,0,0,1-.25.6Z"></path>
<path d="M21.5,68.6a.34.34,0,0,1-.35-.35.33.33,0,0,1,.11-.25.35.35,0,0,1,.59.25.34.34,0,0,1-.35.35Z"></path>
<path d="M23,65.85a.35.35,0,0,1-.25-.6.37.37,0,0,1,.5,0,.36.36,0,0,1,0,.5A.37.37,0,0,1,23,65.85Z"></path>
<path d="M22.25,60.1a.35.35,0,0,1-.25-.6.38.38,0,0,1,.5,0,.36.36,0,0,1,0,.5A.37.37,0,0,1,22.25,60.1Z"></path>
<path
d="M24.25,57.6a.34.34,0,0,1-.35-.35A.37.37,0,0,1,24,57a.38.38,0,0,1,.5,0,.37.37,0,0,1,.1.25.39.39,0,0,1-.1.25A.37.37,0,0,1,24.25,57.6Z">
</path>
<path d="M26.25,47.85a.35.35,0,0,1-.25-.6.37.37,0,0,1,.5,0,.35.35,0,0,1-.25.6Z"></path>
<path d="M25.75,43.6a.35.35,0,0,1-.25-.6.37.37,0,0,1,.5,0,.35.35,0,0,1-.25.6Z"></path>
<path d="M32.25,31.1a.34.34,0,0,1-.35-.35A.33.33,0,0,1,32,30.5a.35.35,0,0,1,.59.25.34.34,0,0,1-.35.35Z"></path>
<path
d="M34.25,27.85a.34.34,0,0,1-.35-.35.35.35,0,0,1,.1-.25.37.37,0,0,1,.5,0,.36.36,0,0,1,0,.5A.37.37,0,0,1,34.25,27.85Z">
</path>
<path d="M41.75,25.85a.35.35,0,0,1-.25-.6.37.37,0,0,1,.5,0,.35.35,0,0,1-.25.6Z"></path>
<path
d="M43,20.85a.36.36,0,0,1-.25-.11.33.33,0,0,1-.1-.24.39.39,0,0,1,.1-.25.37.37,0,0,1,.5,0,.39.39,0,0,1,.1.25.34.34,0,0,1-.11.25A.35.35,0,0,1,43,20.85Z">
</path>
<path
d="M36.5,19.35a.39.39,0,0,1-.25-.1.36.36,0,0,1-.1-.25.31.31,0,0,1,.1-.24.35.35,0,0,1,.5,0,.35.35,0,0,1-.25.6Z">
</path>
<path d="M27.75,22.35a.35.35,0,0,1-.25-.6.37.37,0,0,1,.5,0,.35.35,0,0,1-.25.6Z"></path>
<path
d="M52,22.1a.33.33,0,0,1-.25-.11.35.35,0,0,1-.1-.24.39.39,0,0,1,.1-.25.36.36,0,0,1,.6.25.39.39,0,0,1-.1.25A.37.37,0,0,1,52,22.1Z">
</path>
<path d="M43.25,17.85a.37.37,0,0,1-.25-.1.36.36,0,0,1,0-.5.38.38,0,0,1,.5,0,.35.35,0,0,1-.25.6Z"></path>
<path d="M50.5,18.1a.37.37,0,0,1-.25-.1.36.36,0,0,1,0-.5.36.36,0,0,1,.6.25.34.34,0,0,1-.35.35Z"></path>
<path
d="M59.5,17.35a.34.34,0,0,1-.35-.35.33.33,0,0,1,.11-.25.37.37,0,0,1,.49,0,.36.36,0,0,1,.1.25.34.34,0,0,1-.35.35Z">
</path>
<path d="M58.25,14.1A.37.37,0,0,1,58,14a.36.36,0,0,1,0-.5.36.36,0,0,1,.6.25.34.34,0,0,1-.35.35Z"></path>
<path
d="M61.5,11.1a.34.34,0,0,1-.35-.35.33.33,0,0,1,.11-.25.36.36,0,0,1,.49,0,.31.31,0,0,1,.1.24.34.34,0,0,1-.35.35Z">
</path>
<path
d="M58.75,7.6a.39.39,0,0,1-.25-.1.35.35,0,0,1-.1-.25A.31.31,0,0,1,58.5,7a.35.35,0,0,1,.6.24.34.34,0,0,1-.35.35Z">
</path>
<path
d="M60,4.85a.34.34,0,0,1-.25-.11.35.35,0,0,1-.1-.24.33.33,0,0,1,.11-.25.37.37,0,0,1,.49,0,.36.36,0,0,1,.1.25.34.34,0,0,1-.35.35Z">
</path>
<path
d="M67.5,6.1a.39.39,0,0,1-.25-.1.36.36,0,0,1-.1-.25.37.37,0,0,1,.1-.25.38.38,0,0,1,.5,0,.35.35,0,0,1-.25.6Z">
</path>
<path
d="M70.75,8.6a.39.39,0,0,1-.25-.1.36.36,0,0,1-.1-.25A.37.37,0,0,1,70.5,8,.37.37,0,0,1,71,8a.36.36,0,0,1,.11.25.34.34,0,0,1-.35.35Z">
</path>
<path d="M65.75,9.85a.34.34,0,0,1-.35-.35.37.37,0,0,1,.1-.25.38.38,0,0,1,.5,0,.35.35,0,0,1-.25.6Z"></path>
<path d="M60.25,23.85a.35.35,0,0,1-.25-.6.37.37,0,0,1,.5,0,.35.35,0,0,1-.25.6Z"></path>
<path d="M55.5,23.85a.35.35,0,0,1-.25-.6.38.38,0,0,1,.5,0,.35.35,0,0,1-.25.6Z"></path>
<path
d="M55.5,18.85a.34.34,0,0,1-.25-.11.35.35,0,0,1-.1-.24.33.33,0,0,1,.11-.25.37.37,0,0,1,.49,0,.36.36,0,0,1,.1.25.34.34,0,0,1-.35.35Z">
</path>
<path
d="M65,25.85a.34.34,0,0,1-.35-.35.33.33,0,0,1,.11-.25.37.37,0,0,1,.49,0,.36.36,0,0,1,.1.25.34.34,0,0,1-.35.35Z">
</path>
<path
d="M57.75,30.85a.33.33,0,0,1-.25-.11.35.35,0,0,1-.1-.24.33.33,0,0,1,.11-.25.37.37,0,0,1,.49,0,.36.36,0,0,1,.1.25.34.34,0,0,1-.35.35Z">
</path>
<path
d="M52.75,32.85a.36.36,0,0,1-.25-.11.35.35,0,0,1-.1-.24.33.33,0,0,1,.11-.25.37.37,0,0,1,.49,0,.36.36,0,0,1,.1.25.34.34,0,0,1-.35.35Z">
</path>
<path
d="M47.5,33.85a.36.36,0,0,1-.25-.11.35.35,0,0,1-.1-.24.33.33,0,0,1,.11-.25.37.37,0,0,1,.49,0,.36.36,0,0,1,.1.25.34.34,0,0,1-.35.35Z">
</path>
<path
d="M44.25,39.35a.36.36,0,0,1-.25-.11.35.35,0,0,1-.1-.24.39.39,0,0,1,.1-.25.37.37,0,0,1,.5,0,.37.37,0,0,1,.1.25.33.33,0,0,1-.11.25A.35.35,0,0,1,44.25,39.35Z">
</path>
<path d="M34,41.6a.35.35,0,0,1-.25-.6.37.37,0,0,1,.5,0,.35.35,0,0,1-.25.6Z"></path>
<path d="M40.75,48.1a.35.35,0,0,1-.25-.6.36.36,0,0,1,.49,0,.34.34,0,0,1,.11.25.34.34,0,0,1-.35.35Z"></path>
<path d="M45.75,52.35A.34.34,0,0,1,45.4,52a.33.33,0,0,1,.11-.25.35.35,0,0,1,.59.25.34.34,0,0,1-.35.35Z"></path>
<path d="M46.5,56.85a.35.35,0,0,1-.25-.6.35.35,0,0,1,.49,0,.36.36,0,0,1,.11.25.34.34,0,0,1-.35.35Z"></path>
<path
d="M42,59.6a.35.35,0,0,1-.24-.1.36.36,0,0,1-.11-.25.39.39,0,0,1,.1-.25.37.37,0,0,1,.5,0,.35.35,0,0,1-.25.6Z">
</path>
<path d="M40,62.85a.35.35,0,0,1-.25-.6.37.37,0,0,1,.5,0,.36.36,0,0,1,0,.5A.37.37,0,0,1,40,62.85Z"></path>
<path d="M36,62.85a.34.34,0,0,1-.35-.35.33.33,0,0,1,.11-.25.35.35,0,0,1,.59.25.34.34,0,0,1-.35.35Z"></path>
<path
d="M36.5,52.85a.39.39,0,0,1-.25-.1.35.35,0,0,1-.1-.25.39.39,0,0,1,.1-.25.36.36,0,0,1,.5,0,.31.31,0,0,1,.1.24.34.34,0,0,1-.35.35Z">
</path>
<path
d="M30,63.6a.35.35,0,0,1-.24-.1.36.36,0,0,1-.11-.25.33.33,0,0,1,.11-.25.37.37,0,0,1,.49,0,.36.36,0,0,1,.1.25.34.34,0,0,1-.35.35Z">
</path>
<path d="M31.5,68.6a.35.35,0,0,1-.25-.6.37.37,0,0,1,.5,0,.35.35,0,0,1-.25.6Z"></path>
<path
d="M37,71.1a.39.39,0,0,1-.25-.1.37.37,0,0,1-.1-.25.33.33,0,0,1,.11-.25.37.37,0,0,1,.49,0,.36.36,0,0,1,.1.25.37.37,0,0,1-.1.25A.39.39,0,0,1,37,71.1Z">
</path>
<path
d="M63,57.1a.34.34,0,0,1-.35-.35.33.33,0,0,1,.11-.25.37.37,0,0,1,.49,0,.36.36,0,0,1,.1.25.34.34,0,0,1-.35.35Z">
</path>
<path
d="M60,50.85a.33.33,0,0,1-.25-.11.35.35,0,0,1-.1-.24.35.35,0,0,1,.59-.25.36.36,0,0,1,.11.25.39.39,0,0,1-.1.25A.37.37,0,0,1,60,50.85Z">
</path>
<path
d="M54.5,50.6a.39.39,0,0,1-.25-.1.37.37,0,0,1-.1-.25.35.35,0,0,1,.7,0,.35.35,0,0,1-.1.24A.34.34,0,0,1,54.5,50.6Z">
</path>
<path
d="M54.75,41.85a.36.36,0,0,1-.25-.11.33.33,0,0,1-.1-.24.39.39,0,0,1,.1-.25.37.37,0,0,1,.5,0,.39.39,0,0,1,.1.25.34.34,0,0,1-.11.25A.35.35,0,0,1,54.75,41.85Z">
</path>
<path d="M62.5,42.35a.35.35,0,0,1-.25-.6.37.37,0,0,1,.5,0,.35.35,0,0,1-.25.6Z"></path>
<path
d="M67,47.6a.35.35,0,0,1-.24-.1.36.36,0,0,1-.11-.25.39.39,0,0,1,.1-.25.36.36,0,0,1,.49,0,.32.32,0,0,1,.11.25.34.34,0,0,1-.35.35Z">
</path>
<path
d="M69.5,54.35a.35.35,0,0,1-.24-.1.36.36,0,0,1-.11-.25.39.39,0,0,1,.1-.25.36.36,0,0,1,.6.25.34.34,0,0,1-.35.35Z">
</path>
<path
d="M63.5,61.85a.35.35,0,0,1-.24-.1.36.36,0,0,1-.11-.25.39.39,0,0,1,.1-.25.36.36,0,0,1,.49,0,.32.32,0,0,1,.11.25.34.34,0,0,1-.35.35Z">
</path>
<path
d="M70.25,61.1a.34.34,0,0,1-.35-.35A.33.33,0,0,1,70,60.5a.37.37,0,0,1,.49,0,.36.36,0,0,1,.1.25.34.34,0,0,1-.35.35Z">
</path>
<path d="M64.75,65.6a.35.35,0,0,1-.25-.6.36.36,0,0,1,.5,0,.35.35,0,0,1,.1.24.34.34,0,0,1-.35.35Z"></path>
<path d="M65.75,68.35a.35.35,0,0,1-.25-.6.37.37,0,0,1,.5,0,.35.35,0,0,1-.25.6Z"></path>
<path
d="M62.5,70.35a.34.34,0,0,1-.35-.35.34.34,0,0,1,.11-.25.36.36,0,0,1,.49,0,.31.31,0,0,1,.1.24.34.34,0,0,1-.35.35Z">
</path>
<path
d="M52.75,69.85a.36.36,0,0,1-.25-.1.36.36,0,0,1,0-.5.36.36,0,0,1,.6.25.39.39,0,0,1-.1.25A.37.37,0,0,1,52.75,69.85Z">
</path>
<path
d="M44.75,66.6a.34.34,0,0,1-.25-.11.35.35,0,0,1-.1-.24.33.33,0,0,1,.11-.25A.37.37,0,0,1,45,66a.36.36,0,0,1,.1.25.34.34,0,0,1-.35.35Z">
</path>
<path
d="M28.5,71.35a.39.39,0,0,1-.25-.1.36.36,0,0,1-.1-.25.33.33,0,0,1,.11-.25.35.35,0,0,1,.59.25.33.33,0,0,1-.11.25A.35.35,0,0,1,28.5,71.35Z">
</path>
<path d="M3,29.6a.39.39,0,0,1-.25-.1.36.36,0,0,1,0-.5.38.38,0,0,1,.5,0,.36.36,0,0,1,0,.5A.39.39,0,0,1,3,29.6Z">
</path>
<path
d="M13.25,5.1A.36.36,0,0,1,13,5a.31.31,0,0,1-.1-.24A.37.37,0,0,1,13,4.5a.36.36,0,0,1,.6.25.33.33,0,0,1-.11.25A.35.35,0,0,1,13.25,5.1Z">
</path>
<path
d="M70.25,34.6a.34.34,0,0,1-.35-.35A.33.33,0,0,1,70,34a.37.37,0,0,1,.49,0,.36.36,0,0,1,.1.25.34.34,0,0,1-.35.35Z">
</path>
<path d="M71.25,41.35a.35.35,0,0,1-.25-.6.37.37,0,0,1,.5,0,.35.35,0,0,1-.25.6Z"></path>
<path
d="M1,51.85a.39.39,0,0,1-.25-.1.39.39,0,0,1-.1-.25.33.33,0,0,1,.11-.25.37.37,0,0,1,.49,0,.36.36,0,0,1,.1.25.39.39,0,0,1-.1.25A.39.39,0,0,1,1,51.85Z">
</path>
<path d="M72,23.6a.35.35,0,0,1-.25-.6.38.38,0,0,1,.5,0,.35.35,0,0,1-.25.6Z"></path>
<path
d="M69,26.6a.35.35,0,0,1-.25-.6.37.37,0,0,1,.5,0,.39.39,0,0,1,.1.25.35.35,0,0,1-.1.25A.39.39,0,0,1,69,26.6Z">
</path>
<path d="M68.5,60.35a.34.34,0,0,1-.35-.35.37.37,0,0,1,.1-.25.38.38,0,0,1,.5,0,.35.35,0,0,1-.25.6Z"></path>
<path
d="M71.5,68.35a.35.35,0,0,1-.25-.6.37.37,0,0,1,.5,0,.39.39,0,0,1,.1.25.35.35,0,0,1-.1.25A.39.39,0,0,1,71.5,68.35Z">
</path>
<path
d="M.5,57.85a.39.39,0,0,1-.25-.1.36.36,0,0,1,0-.5.38.38,0,0,1,.5,0,.36.36,0,0,1,0,.5A.39.39,0,0,1,.5,57.85Z">
</path>
<path
d="M2.75,71.35a.39.39,0,0,1-.25-.1.36.36,0,0,1,0-.5.36.36,0,0,1,.6.25.39.39,0,0,1-.1.25A.39.39,0,0,1,2.75,71.35Z">
</path>
<path
d="M70.25,24.1a.34.34,0,0,1-.35-.35A.33.33,0,0,1,70,23.5a.37.37,0,0,1,.49,0,.36.36,0,0,1,.1.25.34.34,0,0,1-.35.35Z">
</path>
<path
d="M1.25,16.85a.39.39,0,0,1-.25-.1.36.36,0,0,1,0-.5.38.38,0,0,1,.5,0,.36.36,0,0,1,0,.5A.39.39,0,0,1,1.25,16.85Z">
</path>
<path d="M18,13.15a.65.65,0,0,1-.65-.65.66.66,0,0,1,.19-.46.68.68,0,0,1,.92,0A.65.65,0,0,1,18,13.15Z"></path>
<path
d="M29.25,11.15a.66.66,0,0,1-.46-.19.68.68,0,0,1-.19-.46.66.66,0,0,1,.19-.46.67.67,0,0,1,.92,0,.66.66,0,0,1,.19.46.65.65,0,0,1-.65.65Z">
</path>
<path
d="M29.25,3.65A.65.65,0,0,1,28.6,3a.64.64,0,0,1,.19-.46.68.68,0,0,1,.92,0,.65.65,0,0,1,0,.92A.68.68,0,0,1,29.25,3.65Z">
</path>
<path
d="M40.25,10.65A.65.65,0,0,1,39.6,10a.66.66,0,0,1,.19-.46.68.68,0,0,1,.92,0,.63.63,0,0,1,.19.46.68.68,0,0,1-.19.46A.66.66,0,0,1,40.25,10.65Z">
</path>
<path
d="M45,12.15a.61.61,0,0,1-.46-.2.64.64,0,0,1-.19-.45.66.66,0,0,1,.19-.46.68.68,0,0,1,.92,0,.63.63,0,0,1,.19.46.61.61,0,0,1-.2.46A.6.6,0,0,1,45,12.15Z">
</path>
<path d="M47.25,23.15A.65.65,0,0,1,46.79,22a.68.68,0,0,1,.92,0,.65.65,0,0,1-.46,1.11Z"></path>
<path
d="M54.75,7.15A.64.64,0,0,1,54.29,7a.65.65,0,0,1,0-.92.68.68,0,0,1,.92,0,.64.64,0,0,1,.19.46.66.66,0,0,1-.19.46A.64.64,0,0,1,54.75,7.15Z">
</path>
<path d="M64,6.9a.65.65,0,0,1-.46-1.11.68.68,0,0,1,.92,0A.65.65,0,0,1,64,6.9Z"></path>
<path
d="M65,2.9a.66.66,0,0,1-.46-.19.68.68,0,0,1-.19-.46.66.66,0,0,1,.19-.46.68.68,0,0,1,.92,0,.68.68,0,0,1,.19.46.63.63,0,0,1-.18.45A.67.67,0,0,1,65,2.9Z">
</path>
<path d="M69.5,18.4A.65.65,0,0,1,69,17.29a.67.67,0,0,1,.92,0,.65.65,0,0,1-.46,1.11Z"></path>
<path
d="M8,47.4a.64.64,0,0,1-.46-.19.68.68,0,0,1-.19-.46.66.66,0,0,1,.19-.46.68.68,0,0,1,.92,0,.66.66,0,0,1,.19.46.68.68,0,0,1-.19.46A.64.64,0,0,1,8,47.4Z">
</path>
<path
d="M5,57.15A.64.64,0,0,1,4.54,57a.65.65,0,0,1,0-.92.67.67,0,0,1,.92,0,.65.65,0,0,1,0,.92A.64.64,0,0,1,5,57.15Z">
</path>
<path
d="M2.25,67.4a.66.66,0,0,1-.46-.19.68.68,0,0,1-.19-.46.66.66,0,0,1,.19-.46.68.68,0,0,1,.92,0,.66.66,0,0,1,.19.46.68.68,0,0,1-.19.46A.66.66,0,0,1,2.25,67.4Z">
</path>
<path
d="M17.75,70.15a.66.66,0,0,1-.46-.19.68.68,0,0,1-.19-.46.66.66,0,0,1,.19-.46.68.68,0,0,1,.92,0,.66.66,0,0,1,.19.46.68.68,0,0,1-.19.46A.66.66,0,0,1,17.75,70.15Z">
</path>
<path
d="M19.25,62.65A.65.65,0,0,1,18.6,62a.64.64,0,0,1,.19-.46.67.67,0,0,1,.92,0,.66.66,0,0,1,.19.46.68.68,0,0,1-.19.46A.66.66,0,0,1,19.25,62.65Z">
</path>
<path
d="M21,45.65a.65.65,0,0,1-.65-.65.64.64,0,0,1,.19-.46.67.67,0,0,1,.92,0,.66.66,0,0,1,.19.46.68.68,0,0,1-.19.46A.64.64,0,0,1,21,45.65Z">
</path>
<path
d="M28.5,51.4A.65.65,0,0,1,28,50.29a.67.67,0,0,1,.92,0,.66.66,0,0,1,.19.46.68.68,0,0,1-.19.46A.64.64,0,0,1,28.5,51.4Z">
</path>
<path
d="M34,60.65a.65.65,0,0,1-.65-.65.64.64,0,0,1,.19-.46.68.68,0,0,1,.92,0,.63.63,0,0,1,.19.46.64.64,0,0,1-.19.46A.66.66,0,0,1,34,60.65Z">
</path>
<path
d="M34.25,67.15a.64.64,0,0,1-.46-.19.65.65,0,0,1,0-.92.67.67,0,0,1,.92,0,.65.65,0,0,1,0,.92A.66.66,0,0,1,34.25,67.15Z">
</path>
<path d="M41.75,55.4a.65.65,0,0,1-.46-1.11.68.68,0,0,1,.92,0,.65.65,0,0,1-.46,1.11Z"></path>
<path d="M52.25,60.15A.65.65,0,0,1,51.79,59a.68.68,0,0,1,.92,0,.65.65,0,0,1-.46,1.11Z"></path>
<path
d="M55,65.65a.66.66,0,0,1-.46-.19.68.68,0,0,1-.19-.46.64.64,0,0,1,.19-.46.68.68,0,0,1,.92,0,.64.64,0,0,1,.19.46.68.68,0,0,1-.19.46A.66.66,0,0,1,55,65.65Z">
</path>
<path
d="M25.25,24.9a.66.66,0,0,1-.46-.19.68.68,0,0,1-.19-.46.66.66,0,0,1,.19-.46.68.68,0,0,1,.92,0,.66.66,0,0,1,.19.46.68.68,0,0,1-.19.46A.66.66,0,0,1,25.25,24.9Z">
</path>
<path d="M35.25,23.65a.64.64,0,0,1-.46-.19.65.65,0,0,1,0-.92.68.68,0,0,1,.92,0,.65.65,0,0,1-.46,1.11Z"></path>
<path
d="M45,29.9a.65.65,0,0,1-.46-1.11.68.68,0,0,1,.92,0,.63.63,0,0,1,.19.46.61.61,0,0,1-.2.46A.62.62,0,0,1,45,29.9Z">
</path>
<path d="M52,43.4a.65.65,0,0,1-.46-1.11.67.67,0,0,1,.92,0,.64.64,0,0,1,.19.46.65.65,0,0,1-.65.65Z"></path>
<path d="M67,52.15a.65.65,0,0,1-.65-.65.61.61,0,0,1,.2-.46.68.68,0,0,1,.91,0A.65.65,0,0,1,67,52.15Z"></path>
<path d="M47.25,48.15A.65.65,0,0,1,46.79,47a.68.68,0,0,1,.92,0,.65.65,0,0,1-.46,1.11Z"></path>
<path
d="M37,44.9a.66.66,0,0,1-.46-.19.68.68,0,0,1-.19-.46.66.66,0,0,1,.19-.46.68.68,0,0,1,.92,0,.66.66,0,0,1,.19.46.68.68,0,0,1-.19.46A.66.66,0,0,1,37,44.9Z">
</path>
<path d="M17,28.9a.65.65,0,0,1-.46-1.11.68.68,0,0,1,.92,0,.65.65,0,0,1,0,.92A.64.64,0,0,1,17,28.9Z"></path>
<path d="M11.25,37.15a.65.65,0,0,1-.65-.65.64.64,0,0,1,.19-.46.67.67,0,0,1,.92,0,.65.65,0,0,1-.46,1.11Z"></path>
<path
d="M67.5,31.15A.66.66,0,0,1,67,31a.68.68,0,0,1-.19-.46A.66.66,0,0,1,67,30,.68.68,0,0,1,68,30a.64.64,0,0,1,.19.46.65.65,0,0,1-.65.65Z">
</path>
<path
d="M7.25,16.15a.61.61,0,0,1-.46-.2.62.62,0,0,1-.19-.45A.66.66,0,0,1,6.79,15a.67.67,0,0,1,.92,0,.65.65,0,0,1,0,.92A.64.64,0,0,1,7.25,16.15Z">
</path>
<path
d="M8.5,5.65A.68.68,0,0,1,8,5.46.66.66,0,0,1,7.85,5,.64.64,0,0,1,8,4.54a.67.67,0,0,1,.92,0A.64.64,0,0,1,9.15,5a.65.65,0,0,1-.65.65Z">
</path>
<path
d="M3.5,2.9A.66.66,0,0,1,3,2.71a.68.68,0,0,1-.19-.46A.66.66,0,0,1,3,1.79a.68.68,0,0,1,.92,0,.66.66,0,0,1,.19.46A.68.68,0,0,1,4,2.71.66.66,0,0,1,3.5,2.9Z">
</path>
<path
d="M66.5,37.65A.65.65,0,0,1,66,36.54a.68.68,0,0,1,.92,0,.64.64,0,0,1,.19.46.66.66,0,0,1-.19.46A.64.64,0,0,1,66.5,37.65Z">
</path>
<path
d="M44,63.4a.66.66,0,0,1-.46-.19.68.68,0,0,1-.19-.46.66.66,0,0,1,.19-.46.67.67,0,0,1,.92,0,.66.66,0,0,1,.19.46.68.68,0,0,1-.19.46A.66.66,0,0,1,44,63.4Z">
</path>
<path
d="M25.75,70.4a.66.66,0,0,1-.46-.19.68.68,0,0,1-.19-.46.66.66,0,0,1,.19-.46.67.67,0,0,1,.92,0,.66.66,0,0,1,.19.46.68.68,0,0,1-.19.46A.66.66,0,0,1,25.75,70.4Z">
</path>
<path d="M22,42.15a.66.66,0,0,1-.46-.19.65.65,0,0,1,0-.92.68.68,0,0,1,.92,0A.65.65,0,0,1,22,42.15Z"></path>
<path
d="M24,29.4a.66.66,0,0,1-.46-.19.68.68,0,0,1-.19-.46.66.66,0,0,1,.19-.46.67.67,0,0,1,.92,0,.64.64,0,0,1,.19.46.65.65,0,0,1-.65.65Z">
</path>
<path
d="M41.5,34.9A.65.65,0,0,1,41,33.79a.68.68,0,0,1,.92,0,.66.66,0,0,1,.19.46.68.68,0,0,1-.19.46A.66.66,0,0,1,41.5,34.9Z">
</path>
<path
d="M67.5,44.15A.66.66,0,0,1,67,44a.68.68,0,0,1-.19-.46A.66.66,0,0,1,67,43,.68.68,0,0,1,68,43a.64.64,0,0,1,.19.46.65.65,0,0,1-.65.65Z">
</path>
<path
d="M53.25,15.4a.65.65,0,0,1-.46-1.11.68.68,0,0,1,.92,0,.66.66,0,0,1,.19.46.68.68,0,0,1-.19.46A.66.66,0,0,1,53.25,15.4Z">
</path>
<path
d="M34,16.4a.66.66,0,0,1-.46-.19.68.68,0,0,1-.19-.46.64.64,0,0,1,.19-.46.68.68,0,0,1,.92,0,.64.64,0,0,1,.19.46.65.65,0,0,1-.65.65Z">
</path>
<path d="M12.75,19.65a.65.65,0,0,1-.46-1.11.67.67,0,0,1,.92,0,.65.65,0,0,1-.46,1.11Z"></path>
<path d="M49.5,4.9A.65.65,0,0,1,49,3.79a.68.68,0,0,1,.92,0A.65.65,0,0,1,49.5,4.9Z"></path>
<path d="M59,21.15A.65.65,0,0,1,58.54,20a.68.68,0,0,1,.92,0,.64.64,0,0,1,.19.46.65.65,0,0,1-.65.65Z"></path>
<path
d="M67.5,57.65a.66.66,0,0,1-.46-.19.68.68,0,0,1-.19-.46.66.66,0,0,1,.19-.46.68.68,0,0,1,.92,0,.64.64,0,0,1,.19.46.65.65,0,0,1-.65.65Z">
</path>
<path
d="M5.25,70.15A.64.64,0,0,1,4.79,70a.65.65,0,0,1,0-.92.67.67,0,0,1,.92,0,.65.65,0,0,1,0,.92A.64.64,0,0,1,5.25,70.15Z">
</path>
<path
d="M2.75,13.65a.61.61,0,0,1-.46-.2A.62.62,0,0,1,2.1,13a.66.66,0,0,1,.19-.46.67.67,0,0,1,.92,0,.65.65,0,0,1,0,.92A.64.64,0,0,1,2.75,13.65Z">
</path>
<path d="M16.5,3.65A.65.65,0,0,1,16,2.54a.68.68,0,0,1,.92,0,.65.65,0,0,1-.46,1.11Z"></path>
<path d="M40.5,4.9A.65.65,0,0,1,40,3.79a.68.68,0,0,1,.92,0,.64.64,0,0,1,.19.46.65.65,0,0,1-.65.65Z"></path>
<path d="M2.75,32.4a.64.64,0,0,1-.46-.19.65.65,0,0,1,0-.92.68.68,0,0,1,.92,0,.65.65,0,0,1-.46,1.11Z"></path>
<path
d="M7.5,25.4A.64.64,0,0,1,7,25.21a.65.65,0,0,1,0-.92.68.68,0,0,1,.92,0,.64.64,0,0,1,.19.46.66.66,0,0,1-.19.46A.64.64,0,0,1,7.5,25.4Z">
</path>
<path
d="M4,47.15A.66.66,0,0,1,3.54,47a.68.68,0,0,1-.19-.46A.66.66,0,0,1,3.54,46a.67.67,0,0,1,.92,0,.66.66,0,0,1,.19.46.68.68,0,0,1-.19.46A.64.64,0,0,1,4,47.15Z">
</path>
<path
d="M11,50.9a.66.66,0,0,1-.46-.19.68.68,0,0,1-.19-.46.64.64,0,0,1,.19-.46.68.68,0,0,1,.92,0,.66.66,0,0,1,.19.46.68.68,0,0,1-.19.46A.66.66,0,0,1,11,50.9Z">
</path>
<path
d="M10,60.15A.64.64,0,0,1,9.54,60a.65.65,0,0,1,0-.92.68.68,0,0,1,.92,0,.65.65,0,0,1,0,.92A.64.64,0,0,1,10,60.15Z">
</path>
<path
d="M13.5,66.15A.66.66,0,0,1,13,66a.68.68,0,0,1-.19-.46A.64.64,0,0,1,13,65,.67.67,0,0,1,14,65a.66.66,0,0,1,.19.46A.68.68,0,0,1,14,66,.66.66,0,0,1,13.5,66.15Z">
</path>
<path
d="M22,53.65a.66.66,0,0,1-.46-.19.64.64,0,0,1-.19-.46.6.6,0,0,1,.2-.46.65.65,0,0,1,1.1.46.68.68,0,0,1-.19.46A.66.66,0,0,1,22,53.65Z">
</path>
<path
d="M31.25,37.9a.66.66,0,0,1-.46-.19.68.68,0,0,1-.19-.46.66.66,0,0,1,.19-.46.68.68,0,0,1,.92,0,.66.66,0,0,1,.19.46.68.68,0,0,1-.19.46A.66.66,0,0,1,31.25,37.9Z">
</path>
<path d="M26,34.4a.65.65,0,0,1-.46-1.11.67.67,0,0,1,.92,0A.65.65,0,0,1,26,34.4Z"></path>
<path
d="M37.25,28.9a.66.66,0,0,1-.46-.19.68.68,0,0,1-.19-.46.66.66,0,0,1,.19-.46.68.68,0,0,1,.92,0,.66.66,0,0,1,.19.46.68.68,0,0,1-.19.46A.66.66,0,0,1,37.25,28.9Z">
</path>
<path
d="M61.75,16.9a.66.66,0,0,1-.46-.19.68.68,0,0,1-.19-.46.66.66,0,0,1,.19-.46.68.68,0,0,1,.92,0,.64.64,0,0,1,.19.46.65.65,0,0,1-.65.65Z">
</path>
<path
d="M61.25,27.4a.64.64,0,0,1-.46-.19.68.68,0,0,1-.19-.46.66.66,0,0,1,.19-.46.68.68,0,0,1,.92,0,.65.65,0,0,1,0,.92A.64.64,0,0,1,61.25,27.4Z">
</path>
<path
d="M58.75,57.4a.66.66,0,0,1-.46-.19.68.68,0,0,1-.19-.46.66.66,0,0,1,.19-.46.68.68,0,0,1,.92,0,.66.66,0,0,1,.19.46.68.68,0,0,1-.19.46A.66.66,0,0,1,58.75,57.4Z">
</path>
<path
d="M59.25,44.65a.64.64,0,0,1-.46-.19.65.65,0,0,1,0-.92.68.68,0,0,1,.92,0,.65.65,0,0,1,0,.92A.64.64,0,0,1,59.25,44.65Z">
</path>
<path
d="M55.75,35.9a.66.66,0,0,1-.46-.19.68.68,0,0,1-.19-.46.66.66,0,0,1,.19-.46.68.68,0,0,1,.92,0,.66.66,0,0,1,.19.46.68.68,0,0,1-.19.46A.66.66,0,0,1,55.75,35.9Z">
</path>
<path d="M69.25,70.9a.68.68,0,0,1-.46-.19.65.65,0,0,1,0-.92.69.69,0,0,1,.92,0,.65.65,0,0,1-.46,1.11Z"></path>
<path d="M60.75,66.15A.65.65,0,0,1,60.29,65a.67.67,0,0,1,.92,0,.64.64,0,0,1,.19.46.65.65,0,0,1-.65.65Z"></path>
<path d="M44.5,71.65A.65.65,0,0,1,44,70.54a.68.68,0,0,1,.92,0,.65.65,0,0,1-.46,1.11Z"></path>
<path
d="M24.5,1.4a.65.65,0,0,1-.65-.65A.64.64,0,0,1,24,.29a.67.67,0,0,1,.92,0,.66.66,0,0,1,.19.46.68.68,0,0,1-.19.46A.64.64,0,0,1,24.5,1.4Z">
</path>
</g>
<path
d="M0,23.6a.39.39,0,0,1-.25-.1.36.36,0,0,1,0-.5.38.38,0,0,1,.5,0,.39.39,0,0,1,.1.25.39.39,0,0,1-.1.25A.39.39,0,0,1,0,23.6Z">
</path>
</pattern>
<path id="filterPath"
d="M0.2175,0.5483C-0.0375,0.6766-0.1162,0.9232,0.2487,0.9915c0.2025,0.0383,0.405-0.0716,0.4812-0.2616c0.1825-0.4515,0-1.058-0.2087-0.5165C0.465,0.3584,0.3575,0.4784,0.2175,0.5483z">
<animate class="animation" dur="40s" repeatCount="indefinite" attributeName="d" attributeType="XML"
values="
M0.2175,0.5483C-0.0375,0.6766-0.1162,0.9232,0.2487,0.9915c0.2025,0.0383,0.405-0.0716,0.4812-0.2616c0.1825-0.4515,0-1.058-0.2087-0.5165C0.465,0.3584,0.3575,0.4784,0.2175,0.5483z;
M.1593.4119c-.2149.0505-.2258.2767.0495.4236c.1534.0809.3236.0343.4064-.112c.1965-.346.1905-.8072-.1001-.4951C.4364.3127.2759.3843.1593.4119z;
M.3607.3185c-.1484.1398-.1828.3254.1205.4183c.1688.051.3595-.052.4345-.2034c.1784-.3584.0659-.6985-.265-.4462C.565.1529.4632.2223.3607.3185z;
M0.2175,0.5483C-0.0375,0.6766-0.1162,0.9232,0.2487,0.9915c0.2025,0.0383,0.405-0.0716,0.4812-0.2616c0.1825-0.4515,0-1.058-0.2087-0.5165C0.465,0.3584,0.3575,0.4784,0.2175,0.5483z"
calcMode="spline"
keySplines=".45 .05 .55 .95;.45 .05 .55 .95;.45 .05 .55 .95"/>
</path>
</defs><svg viewBox="80.50484466552734 103.7755126953125 152.5823974609375 116.601318359375"
preserveAspectRatio="none">
<path class="background"
d="M225.22,170.35c-41.14,44.84-136.64,65.54-140.56,36.78-3.16-23.09-11.4-5.54,10.61-54.88C138.44,55.48,265.78,126.14,225.22,170.35Z"
fill="url(#USGS_22_Gravel_Beach)"></path>
</svg><svg viewBox="0 0 1 1" id="preview" preserveAspectRatio="none">
<use xlink:href="#filterPath" fill="darkgrey"></use>
</svg>
<image xlink:href="" clip-path="url(#clip-path)"></image>
</svg>

After

Width:  |  Height:  |  Size: 44 KiB

@@ -0,0 +1,85 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
<defs>
<pattern id="Crosses_5" data-name="Crosses 5" stroke="#7C6576" width="57.6" height="57.6"
patternTransform="translate(0 691.2)" patternUnits="userSpaceOnUse" viewBox="0 0 57.6 57.6">
<line x1="52.5" y1="3.6" x2="55.5" y2="3.6" fill="none" stroke-width="0.3"></line>
<line x1="38.1" y1="3.6" x2="41.1" y2="3.6" fill="none" stroke-width="0.3"></line>
<line x1="23.7" y1="3.6" x2="26.7" y2="3.6" fill="none" stroke-width="0.3"></line>
<line x1="9.3" y1="3.6" x2="12.3" y2="3.6" fill="none" stroke-width="0.3"></line>
<line x1="45.3" y1="10.8" x2="48.3" y2="10.8" fill="none" stroke-width="0.3"></line>
<line x1="30.9" y1="10.8" x2="33.9" y2="10.8" fill="none" stroke-width="0.3"></line>
<line x1="16.5" y1="10.8" x2="19.5" y2="10.8" fill="none" stroke-width="0.3"></line>
<line x1="2.1" y1="10.8" x2="5.1" y2="10.8" fill="none" stroke-width="0.3"></line>
<line x1="52.5" y1="18" x2="55.5" y2="18" fill="none" stroke-width="0.3"></line>
<line x1="38.1" y1="18" x2="41.1" y2="18" fill="none" stroke-width="0.3"></line>
<line x1="23.7" y1="18" x2="26.7" y2="18" fill="none" stroke-width="0.3"></line>
<line x1="9.3" y1="18" x2="12.3" y2="18" fill="none" stroke-width="0.3"></line>
<line x1="45.3" y1="25.2" x2="48.3" y2="25.2" fill="none" stroke-width="0.3"></line>
<line x1="30.9" y1="25.2" x2="33.9" y2="25.2" fill="none" stroke-width="0.3"></line>
<line x1="16.5" y1="25.2" x2="19.5" y2="25.2" fill="none" stroke-width="0.3"></line>
<line x1="2.1" y1="25.2" x2="5.1" y2="25.2" fill="none" stroke-width="0.3"></line>
<line x1="52.5" y1="32.4" x2="55.5" y2="32.4" fill="none" stroke-width="0.3"></line>
<line x1="38.1" y1="32.4" x2="41.1" y2="32.4" fill="none" stroke-width="0.3"></line>
<line x1="23.7" y1="32.4" x2="26.7" y2="32.4" fill="none" stroke-width="0.3"></line>
<line x1="9.3" y1="32.4" x2="12.3" y2="32.4" fill="none" stroke-width="0.3"></line>
<line x1="45.3" y1="39.6" x2="48.3" y2="39.6" fill="none" stroke-width="0.3"></line>
<line x1="30.9" y1="39.6" x2="33.9" y2="39.6" fill="none" stroke-width="0.3"></line>
<line x1="16.5" y1="39.6" x2="19.5" y2="39.6" fill="none" stroke-width="0.3"></line>
<line x1="2.1" y1="39.6" x2="5.1" y2="39.6" fill="none" stroke-width="0.3"></line>
<line x1="52.5" y1="46.8" x2="55.5" y2="46.8" fill="none" stroke-width="0.3"></line>
<line x1="38.1" y1="46.8" x2="41.1" y2="46.8" fill="none" stroke-width="0.3"></line>
<line x1="23.7" y1="46.8" x2="26.7" y2="46.8" fill="none" stroke-width="0.3"></line>
<line x1="9.3" y1="46.8" x2="12.3" y2="46.8" fill="none" stroke-width="0.3"></line>
<line x1="45.3" y1="54" x2="48.3" y2="54" fill="none" stroke-width="0.3"></line>
<line x1="30.9" y1="54" x2="33.9" y2="54" fill="none" stroke-width="0.3"></line>
<line x1="16.5" y1="54" x2="19.5" y2="54" fill="none" stroke-width="0.3"></line>
<line x1="2.1" y1="54" x2="5.1" y2="54" fill="none" stroke-width="0.3"></line>
<line x1="54" y1="2.1" x2="54" y2="5.1" fill="none" stroke-width="0.3"></line>
<line x1="39.6" y1="2.1" x2="39.6" y2="5.1" fill="none" stroke-width="0.3"></line>
<line x1="25.2" y1="2.1" x2="25.2" y2="5.1" fill="none" stroke-width="0.3"></line>
<line x1="10.8" y1="2.1" x2="10.8" y2="5.1" fill="none" stroke-width="0.3"></line>
<line x1="46.8" y1="9.3" x2="46.8" y2="12.3" fill="none" stroke-width="0.3"></line>
<line x1="32.4" y1="9.3" x2="32.4" y2="12.3" fill="none" stroke-width="0.3"></line>
<line x1="18" y1="9.3" x2="18" y2="12.3" fill="none" stroke-width="0.3"></line>
<line x1="3.6" y1="9.3" x2="3.6" y2="12.3" fill="none" stroke-width="0.3"></line>
<line x1="54" y1="16.5" x2="54" y2="19.5" fill="none" stroke-width="0.3"></line>
<line x1="39.6" y1="16.5" x2="39.6" y2="19.5" fill="none" stroke-width="0.3"></line>
<line x1="25.2" y1="16.5" x2="25.2" y2="19.5" fill="none" stroke-width="0.3"></line>
<line x1="10.8" y1="16.5" x2="10.8" y2="19.5" fill="none" stroke-width="0.3"></line>
<line x1="46.8" y1="23.7" x2="46.8" y2="26.7" fill="none" stroke-width="0.3"></line>
<line x1="32.4" y1="23.7" x2="32.4" y2="26.7" fill="none" stroke-width="0.3"></line>
<line x1="18" y1="23.7" x2="18" y2="26.7" fill="none" stroke-width="0.3"></line>
<line x1="3.6" y1="23.7" x2="3.6" y2="26.7" fill="none" stroke-width="0.3"></line>
<line x1="54" y1="30.9" x2="54" y2="33.9" fill="none" stroke-width="0.3"></line>
<line x1="39.6" y1="30.9" x2="39.6" y2="33.9" fill="none" stroke-width="0.3"></line>
<line x1="25.2" y1="30.9" x2="25.2" y2="33.9" fill="none" stroke-width="0.3"></line>
<line x1="10.8" y1="30.9" x2="10.8" y2="33.9" fill="none" stroke-width="0.3"></line>
<line x1="46.8" y1="38.1" x2="46.8" y2="41.1" fill="none" stroke-width="0.3"></line>
<line x1="32.4" y1="38.1" x2="32.4" y2="41.1" fill="none" stroke-width="0.3"></line>
<line x1="18" y1="38.1" x2="18" y2="41.1" fill="none" stroke-width="0.3"></line>
<line x1="3.6" y1="38.1" x2="3.6" y2="41.1" fill="none" stroke-width="0.3"></line>
<line x1="54" y1="45.3" x2="54" y2="48.3" fill="none" stroke-width="0.3"></line>
<line x1="39.6" y1="45.3" x2="39.6" y2="48.3" fill="none" stroke-width="0.3"></line>
<line x1="25.2" y1="45.3" x2="25.2" y2="48.3" fill="none" stroke-width="0.3"></line>
<line x1="10.8" y1="45.3" x2="10.8" y2="48.3" fill="none" stroke-width="0.3"></line>
<line x1="46.8" y1="52.5" x2="46.8" y2="55.5" fill="none" stroke-width="0.3"></line>
<line x1="32.4" y1="52.5" x2="32.4" y2="55.5" fill="none" stroke-width="0.3"></line>
<line x1="18" y1="52.5" x2="18" y2="55.5" fill="none" stroke-width="0.3"></line>
<line x1="3.6" y1="52.5" x2="3.6" y2="55.5" fill="none" stroke-width="0.3"></line>
</pattern>
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
<use xlink:href="#filterPath" fill="none"></use>
</clipPath>
<path id="filterPath"
d="M0.5215,0.0129,0.6868,0.1038a0.0516,0.0762,0,0,1,0.0189,0.1247l-0.0307,0.0465a0.0515,0.0761,0,0,0-0.0084,0.0897l0.1024,0.2769a0.0515,0.0761,0,0,1-0.0211,0.1038L0.708,0.7767a0.0516,0.0762,0,0,0-0.0197,0.107h0c0.024,0.0582-0.0111,0.1264-0.0527,0.1151a0.436,0.644,0,0,0-0.0453-0.0076c-0.1379-0.0158-0.258-0.1001-0.3641-0.2359-0.0086-0.0111-0.0179-0.021-0.0271-0.0309a0.0516,0.0762,0,0,1-0.0183-0.0868l0.0021-0.0087a0.1341,0.198,0,0,1,0.0782-0.1194h0a0.0515,0.0761,0,0,0,0.0229-0.1164L0.2449,0.3166a0.0516,0.0762,0,0,1,0.0217-0.1158l0.0479-0.0291a0.0517,0.0763,0,0,0,0.0261-0.0353l0.009-0.0256A0.1389,0.2051,0,0,1,0.5215,0.0129Z">
</path>
</defs><svg viewBox="53.297725677490234 112.70590209960938 202.97454833984375 94.00445556640625"
preserveAspectRatio="none">
<path class="background"
d="M231.6,190.43c78.8,-50.94-47.83-112.69-145.82-53.58-70.92,42.77-4.06,57.14,-1,58.6C119.23,212,200.87,210.29,231.6,190.43Z"
fill="url(#Crosses_5)"></path>
</svg><svg viewBox="0 0 1 1" id="preview" preserveAspectRatio="none">
<use xlink:href="#filterPath" fill="darkgrey"></use>
</svg>
<image xlink:href="" clip-path="url(#clip-path)"></image>
</svg>

After

Width:  |  Height:  |  Size: 7.2 KiB

@@ -0,0 +1,166 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
<defs>
<pattern id="Capsules_2" data-name="Capsules 2" width="57.6" stroke="#3AADAA" height="57.6"
patternTransform="translate(-59.36 422.92) scale(1.09 1.17)" patternUnits="userSpaceOnUse"
viewBox="0 0 57.6 57.6">
<line x1="58.11" y1="14.48" x2="62.26" y2="13.45" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<g>
<line x1="25.8" y1="31.8" x2="23.59" y2="35.46" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="23.23" y1="24.91" x2="24.99" y2="28.13" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="21.75" y1="27.35" x2="21.97" y2="32.17" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="30.78" y1="44.12" x2="31.58" y2="48.31" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="17.5" y1="38.69" x2="16.71" y2="42.89" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="9.87" y1="39.16" x2="13.17" y2="41.87" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="17.5" y1="33.44" x2="20.8" y2="36.15" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="21.67" y1="43.39" x2="20.2" y2="39.38" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="9.45" y1="42.01" x2="5.25" y2="45.6" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="15.12" y1="31.3" x2="19.23" y2="30.12" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="23.79" y1="50.9" x2="27.23" y2="48.36" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="15.11" y1="52.77" x2="17.32" y2="49.11" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="33.75" y1="34.15" x2="35.43" y2="38.08" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="41.75" y1="24.85" x2="41.2" y2="30.6" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="30.57" y1="38.9" x2="28.44" y2="42.61" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="39.67" y1="38.73" x2="36.36" y2="41.44" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="38.59" y1="52.05" x2="41.91" y2="54.74" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="36.91" y1="32.47" x2="40.2" y2="35.2" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="30.08" y1="34.59" x2="31.57" y2="30.58" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="34.28" y1="30.47" x2="37.92" y2="28.22" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="10.02" y1="47.92" x2="12.5" y2="44.44" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="41" y1="20.38" x2="38.61" y2="23.93" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="14" y1="37.85" x2="12.28" y2="32.64" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="13.16" y1="17.15" x2="15.93" y2="13.89" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="34.69" y1="21.86" x2="34.25" y2="27.35" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="21.5" y1="23.35" x2="23.41" y2="18.74" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="25.72" y1="42.06" x2="24.3" y2="46.09" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="31.69" y1="41.64" x2="35" y2="44.35" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="16.34" y1="21.93" x2="19" y2="26.6" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="25.13" y1="55.12" x2="28.77" y2="52.87" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="14.98" y1="28.92" x2="10.85" y2="27.81" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="14.37" y1="20.32" x2="12.75" y2="23.35" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="45.75" y1="5.85" x2="46" y2="11" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="30.46" y1="3.36" x2="33.77" y2="6.07" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="25.25" y1="5.35" x2="20.96" y2="8.34" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="13.76" y1="2.28" x2="17.5" y2="4.85" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="27.85" y1="16.5" x2="30" y2="20.2" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="30" y1="9.1" x2="29.45" y2="12.48" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="33.31" y1="8.65" x2="37.23" y2="10.36" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="25.51" y1="9.77" x2="27.71" y2="6.11" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="48.25" y1="21.1" x2="44.41" y2="24.49" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="17.75" y1="19.6" x2="19.65" y2="14.7" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="16.67" y1="8.58" x2="19.71" y2="11.59" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="42.22" y1="4.71" x2="40" y2="8.6" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="44.5" y1="15.09" x2="44.59" y2="19.37" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="40.62" y1="12.39" x2="44.88" y2="12.6" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="25.86" y1="12.96" x2="22.56" y2="15.68" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="45.25" y1="30.68" x2="43.56" y2="34.61" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="50.08" y1="38.59" x2="50.8" y2="42.8" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="50.7" y1="33.6" x2="52.28" y2="37.58" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="50.74" y1="46.68" x2="47.45" y2="49.41" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="52.6" y1="50.24" x2="54.81" y2="46.58" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="43.48" y1="45.25" x2="44.5" y2="50.35" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="54.61" y1="23.34" x2="50.35" y2="23.02" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="56.36" y1="40.21" x2="53.08" y2="42.94" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="47.65" y1="36.43" x2="45.85" y2="40.31" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="53.43" y1="26.2" x2="56.59" y2="29.08" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="7.75" y1="5.35" x2="5.03" y2="8.35" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="14.01" y1="10.21" x2="10.71" y2="12.92" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="11.18" y1="2.54" x2="12.41" y2="6.64" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="47.75" y1="30.75" x2="52" y2="31.23" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="6.75" y1="47.81" x2="5.07" y2="51.74" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="8.29" y1="52.97" x2="5" y2="55.7" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="6.13" y1="29.9" x2="9.42" y2="32.64" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="48.93" y1="7.12" x2="52.57" y2="4.87" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="50.22" y1="9.62" x2="48.8" y2="13.65" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="0.51" y1="14.48" x2="4.66" y2="13.45" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="2.51" y1="28.91" x2="4.73" y2="25.25" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="5.56" y1="18.33" x2="2.28" y2="21.06" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="7.34" y1="14.93" x2="9.5" y2="18.6" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="5.75" y1="21.1" x2="8.49" y2="25.63" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="4.01" y1="32.39" x2="3.22" y2="36.59" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="9.5" y1="35.6" x2="5.49" y2="38.68" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="11.45" y1="49.91" x2="11.77" y2="54.17" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="34.75" y1="12.6" x2="30.81" y2="15.89" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="37.38" y1="13.27" x2="39.53" y2="16.97" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="33.31" y1="17.56" x2="37.13" y2="19.48" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="28.46" y1="36.85" x2="25.16" y2="39.56" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="20.2" y1="44.7" x2="16.23" y2="46.28" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="20" y1="50.1" x2="22" y2="54.35" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="36.25" y1="47.35" x2="40.26" y2="48.82" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="37" y1="3.1" x2="36.59" y2="7.48" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="40.85" y1="41.63" x2="39.8" y2="45.78" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="36.17" y1="49.7" x2="32.07" y2="50.93" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="32.5" y1="23.6" x2="28.66" y2="27.73" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="49.95" y1="51.35" x2="51.63" y2="55.28" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="56.21" y1="36.53" x2="59.51" y2="39.24" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="56.96" y1="46.23" x2="60.26" y2="48.94" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="54.21" y1="32.17" x2="58.32" y2="30.99" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="56.44" y1="21.41" x2="58.59" y2="25.1" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="58.11" y1="14.48" x2="62.26" y2="13.45" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="59" y1="51.6" x2="55.71" y2="54.33" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="51.15" y1="14.55" x2="52.83" y2="18.48" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="60.33" y1="42.9" x2="56.15" y2="43.82" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="50.93" y1="26.1" x2="45.75" y2="27.35" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="6.07" y1="11.21" x2="9.6" y2="8.8" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="45.04" y1="42.43" x2="48.04" y2="45.48" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="53.09" y1="8.66" x2="55.09" y2="12.44" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="59.06" y1="17.93" x2="54.8" y2="17.6" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="26.36" y1="19.81" x2="27.5" y2="24.85" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="42.16" y1="36.41" x2="43" y2="40.6" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="47.21" y1="17.96" x2="50.96" y2="20.03" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="35" y1="54.35" x2="31.97" y2="53.38" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="20.65" y1="1.85" x2="20.2" y2="6.1" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="2" y1="5.6" x2="3" y2="10.85" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="56.25" y1="8.1" x2="57.74" y2="4.1" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="47.75" y1="52.73" x2="46" y2="56.6" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="44.33" y1="59.77" x2="40.66" y2="57.58" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="29.5" y1="55.2" x2="27.71" y2="60.69" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="21.5" y1="56.45" x2="24.5" y2="60.7" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="50.93" y1="57.37" x2="47.63" y2="60.08" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="8.53" y1="55.83" x2="7.6" y2="60" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="15" y1="55.6" x2="11.75" y2="57.95" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="1.6" y1="55.4" x2="2.4" y2="59.6" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="54" y1="60.4" x2="56.21" y2="56.74" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="34" y1="60.7" x2="33.97" y2="57.43" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="16.91" y1="54.14" x2="17.62" y2="58.35" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="37.15" y1="55.8" x2="39" y2="59.1" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
</g>
<g>
<line x1="-1.39" y1="36.53" x2="1.91" y2="39.24" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="-0.64" y1="46.23" x2="2.66" y2="48.94" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="-3.38" y1="32.17" x2="0.72" y2="30.99" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="-1.16" y1="21.41" x2="0.99" y2="25.1" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="0.51" y1="14.48" x2="4.66" y2="13.45" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="1.4" y1="51.6" x2="-1.89" y2="54.33" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="2.73" y1="42.9" x2="-1.45" y2="43.82" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="1.46" y1="17.93" x2="-2.8" y2="17.6" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="-1.35" y1="8.1" x2="0.14" y2="4.1" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
</g>
<g>
<line x1="44.33" y1="2.17" x2="40.66" y2="-0.02" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="29.5" y1="-2.4" x2="27.71" y2="3.09" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="21.5" y1="-1.15" x2="24.5" y2="3.1" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="50.93" y1="-0.23" x2="47.63" y2="2.48" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="8.53" y1="-1.77" x2="7.6" y2="2.4" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="15" y1="-2" x2="11.75" y2="0.35" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="1.6" y1="-2.2" x2="2.4" y2="2" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="54" y1="2.8" x2="56.21" y2="-0.86" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="34" y1="3.1" x2="33.97" y2="-0.17" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="16.91" y1="-3.46" x2="17.62" y2="0.75" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
<line x1="37.15" y1="-1.8" x2="39" y2="1.5" fill="none" stroke-linecap="round" stroke-width="1.6"></line>
</g>
</pattern>
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
<use xlink:href="#filterPath" fill="none"></use>
</clipPath>
<path id="filterPath"
d="M0.9169,0.5177c0.2799-0.0623-0.2209,0.6845-0.4219,0.4287C0.4021,0.8282,0.0593,0.8098,0.0732,0.5177S0.4464-0.1551,0.6282,0.0661C0.7606,0.2271,0.6948,0.567,0.9169,0.5177Z">
</path>
</defs><svg viewBox="19.5201416015625 113.38225555419922 255.18698120117188 143.7227783203125"
preserveAspectRatio="none">
<path class="background" d="M162,234.3C-13.76,299.39,4.07,208.94,52.73,164.63,171.67,56.34,419.41,139,162,234.3Z"
fill="url(#Capsules_2)"></path>
</svg><svg viewBox="0 0 1 1" id="preview" preserveAspectRatio="none">
<use xlink:href="#filterPath" fill="darkgrey"></use>
</svg>
<image xlink:href="" clip-path="url(#clip-path)"></image>
</svg>

After

Width:  |  Height:  |  Size: 17 KiB

@@ -0,0 +1,86 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
<defs>
<pattern id="pattern" width="1634.68" height="1461.26" patternUnits="userSpaceOnUse" viewBox="0 0 1634.68 1461.26" patternTransform="scale(0.05)">
<rect width="1634.68" height="1461.26" fill="#FFFFFF"/>
<path d="M1617.34,1014.13c0,32-25.74,58-57.5,58s-57.5-26-57.5-58" fill="none" stroke="#3AADAA" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
<path d="M1617.34,170.13c-39.77,0-72-32.46-72-72.5s32.23-72.5,72-72.5" fill="none" stroke="#7C6576" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
<path d="M579.34,84a60,60,0,1,0,120,0V-44" fill="none" stroke="#3AADAA" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
<path d="M579.34,1450.22a60,60,0,1,1,120,0v128" fill="none" stroke="#3AADAA" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
<path d="M154.57,1427.13c-74.68,0-135.23-60.22-135.23-134.5s60.55-134.5,135.23-134.5H278.34" fill="none" stroke="#7C6576" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
<path d="M146.32,1335.13c-24.84,0-45-19.48-45-43.5s20.14-43.5,45-43.5h48" fill="none" stroke="#3AADAA" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
<path d="M1617.34,477.13V308.81a60,60,0,0,0-120,0v26.05" fill="none" stroke="#3AADAA" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
<path d="M585,1143.58H510.9c-45.23,0-81.89-36.47-81.89-81.46s36.66-81.46,81.89-81.46H690.34M585.49,1228.18a84.48,84.48,0,0,1-84.43,84.53H373.48a57.21,57.21,0,0,0,0,114.42h10.7M690.34,894.5a85.26,85.26,0,0,0-85.21-85.31H548.72c-78.22,0-141.62-63.47-141.62-141.78V603.13" fill="none" stroke="#3AADAA" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
<circle cx="605.34" cy="408.13" r="40" fill="none" stroke="#3AADAA" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
<ellipse cx="715.34" cy="1210.63" rx="58" ry="57.5" fill="none" stroke="#7C6576" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
<circle cx="201.34" cy="272.13" r="63" fill="none" stroke="#3AADAA" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
<path d="M201.84,409.13c77.59,0,140.5-62,140.5-138.5s-62.91-138.5-140.5-138.5-140.5,62-140.5,138.5" fill="none" stroke="#7C6576" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
<path d="M1328.55,1239.58c-21.35,79.82,24.83,161.56,103.14,182.58s159.09-26.64,180.44-106.46S1587.3,1154.15,1509,1133.13" fill="none" stroke="#3AADAA" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
<path d="M368,971.5a179.74,179.74,0,0,0-22.7,88.14c0,93,68.87,168.49,153.83,168.49M409.7,921.42C435,901.73,466,890.13,499.54,890.13h104.8" fill="none" stroke="#3AADAA" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
<path d="M345.84,429.13a57.5,57.5,0,1,0,57.5,57.5v-57.5" fill="none" stroke="#3AADAA" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
<path d="M88.84,881.71c-36.73,0-66.5-29.46-66.5-65.79s29.77-65.79,66.5-65.79,66.5,29.45,66.5,65.79v201.21" fill="none" stroke="#3AADAA" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
<path d="M1479.33,885.13c0,33.69,26.87,61,60,61s60-27.31,60-61-26.86-61-60-61h-201" fill="none" stroke="#3AADAA" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
<path d="M983.34,154.92c-35.35,0-64,28.25-64,63.1s28.65,63.11,64,63.11,64-28.26,64-63.11V15.13" fill="none" stroke="#7C6576" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
<path d="M932.26,1369.13c0-32,25.76-58,57.54-58s57.54,26,57.54,58-25.76,58-57.54,58H898.34" fill="none" stroke="#3AADAA" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
<path d="M1106.84,577.7a57.22,57.22,0,1,1-57.5,57.22V421.13" fill="none" stroke="#3AADAA" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
<path d="M79.84,583.83c-31.76,0-57.5,25.37-57.5,56.65s25.74,56.65,57.5,56.65,57.5-25.36,57.5-56.65V409.13" fill="none" stroke="#3AADAA" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
<path d="M706,409.13c0-56.89-45.37-103-101.35-103s-101.35,46.11-101.35,103,45.38,103,101.35,103H870.34" fill="none" stroke="#7C6576" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
<path d="M1516,742.13c56,0,101.36-46.12,101.36-103s-45.37-103-101.36-103H1250.34" fill="none" stroke="#3AADAA" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
<path d="M1124.34,190.63c0-53.3,42.74-96.5,95.46-96.5h98.08c52.72,0,95.46,43.2,95.46,96.5h0c0,53.29-42.74,96.5-95.46,96.5H1219.8c-52.72,0-95.46-43.21-95.46-96.5Z" fill="none" stroke="#3AADAA" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
<path d="M283.84,886.13a59.45,59.45,0,0,1-59.5-59.4V657.53a59.45,59.45,0,0,1,59.5-59.4h0a59.45,59.45,0,0,1,59.5,59.4v169.2a59.45,59.45,0,0,1-59.5,59.4Z" fill="none" stroke="#7C6576" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
<path d="M845.34,810.63V721.29a46.33,46.33,0,0,1,46.5-46.16h0a46.33,46.33,0,0,1,46.5,46.16V900a46.34,46.34,0,0,1-46.5,46.17h0A46.34,46.34,0,0,1,845.34,900V878.38" fill="none" stroke="#7C6576" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
<path d="M931.34,333.06v7.79a80.39,80.39,0,0,1-80.5,80.28h0a80.39,80.39,0,0,1-80.5-80.28V96.41a80.39,80.39,0,0,1,80.5-80.28h0a80.39,80.39,0,0,1,80.5,80.28V98.8" fill="none" stroke="#7C6576" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
<path d="M89.09,967.13H84.28a62,62,0,0,0-61.94,62h0a62,62,0,0,0,61.94,62H227.4a62,62,0,0,0,61.94-62h0a62,62,0,0,0-61.94-62h-4.81" fill="none" stroke="#7C6576" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
<path d="M768.34,675.13V906.76c0,69.24,56.63,125.37,126.5,125.37s126.5-56.13,126.5-125.37V852" fill="none" stroke="#3AADAA" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
<path d="M514.34,1067.13h207.8c79.09,0,143.2,64.47,143.2,144s-64.11,144-143.2,144H659.63" fill="none" stroke="#3AADAA" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
<path d="M603.34,716.13H554.15a60,60,0,0,1,0-120h98.38a59.9,59.9,0,0,1,59.81,60v5.33a54.59,54.59,0,0,1-54.5,54.67" fill="none" stroke="#7C6576" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
<path d="M1106.84,487.13H1163c37.73,0,68.32-28.88,68.32-64.5s-30.59-64.5-68.32-64.5H1050.66c-37.73,0-68.32,28.87-68.32,64.5" fill="none" stroke="#3AADAA" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
<path d="M692.34,218.13H557.66c-85.23,0-154.32,69.39-154.32,155" fill="none" stroke="#3AADAA" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
<path d="M1466.84,1222c31.76,0,57.5,25.56,57.5,57.08s-25.74,57.08-57.5,57.08-57.5-25.56-57.5-57.08V907.13" fill="none" stroke="#7C6576" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
<path d="M1036.34,1259.13c0-58.54,46.85-106,104.63-106h184.37" fill="none" stroke="#3AADAA" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
<path d="M764.34,596.13h98.37c66.07,0,119.63-53.73,119.63-120" fill="none" stroke="#7C6576" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
<path d="M1338.34,909.13v53.75a98.27,98.27,0,0,1-98.29,98.25h-76.71" fill="none" stroke="#7C6576" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
<path d="M1524.34,641.13h-84c-60.75,0-110,49.69-110,111" fill="none" stroke="#3AADAA" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
<path d="M235.34,1427.13V1336c0-52.46,41-96.41,96-107.88" fill="none" stroke="#3AADAA" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
<path d="M61.84,341.13v184" fill="none" stroke="#3AADAA" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
<path d="M1105.84,764.13v152" fill="none" stroke="#3AADAA" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
<path d="M951.84,1177.13v62" fill="none" stroke="#3AADAA" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
<path d="M1135.92,974.23h64.17a50.06,50.06,0,0,0,50.25-49.86v-9.31a40.71,40.71,0,0,0-40.87-40.55A40.71,40.71,0,0,1,1168.61,834v-8.41A40.71,40.71,0,0,1,1209.47,785a40.7,40.7,0,0,0,40.87-40.53V602.13m-152,404.93a100.12,100.12,0,0,1-100.19,100.07H971.34" fill="none" stroke="#7C6576" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
<path d="M1498.34,405.05v20.28a51.87,51.87,0,0,1-51.94,51.8h0a51.88,51.88,0,0,1-52-51.8v-16.8a51.47,51.47,0,0,0-51.54-51.4h0a51.48,51.48,0,0,0-51.56,51.4v20.68" fill="none" stroke="#7C6576" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
<path d="M1106.34,1301.09a73,73,0,0,1,73-73h0a73,73,0,0,1,73,73v53.07a73,73,0,0,1-73,73h0a73,73,0,0,1-73-73Z" fill="none" stroke="#7C6576" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
<line x1="1250.34" y1="59.01" x2="1250.34" y2="-43.43" fill="none" stroke="#3AADAA" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
<line x1="1363.34" y1="25.2" x2="1363.34" y2="-43.43" fill="none" stroke="#3AADAA" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
<path d="M1250.34,1461.26a56.5,56.5,0,0,1,113,0" fill="none" stroke="#3AADAA" stroke-linejoin="round" stroke-width="20"/>
<path d="M156.35,1427.13a34.53,34.53,0,0,1,34.54,34.54" fill="none" stroke="#7C6576" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
<path d="M363.34,92.63c0,42.25,34,76.5,76,76.5s76-34.25,76-76.5-34-76.5-76-76.5h-235a13.4,13.4,0,0,1-13.4-13.4V-91.92" fill="none" stroke="#7C6576" stroke-linecap="round" stroke-linejoin="round" stroke-width="20"/>
</pattern>
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
<use xlink:href="#filterPath" fill="none"/>
</clipPath>
<path id="filterPath" d="M.8.4673c0 .1991-.2988.3327-.4996.3327C.1008.8 0 .6667 0 .4673c0-.2003.1008-.4673.3004-.4673C.5012.0004.8.2674.8.4673z">
<animate dur="30s" repeatCount="indefinite" attributeName="d" attributeType="XML"
values="
M.8.4673c0 .1991-.2988.3327-.4996.3327C.1008.8 0 .6667 0 .4673c0-.2003.1008-.4673.3004-.4673C.5012.0004.8.2674.8.4673z;
M.9.6592c0 .1749-.1812.3408-.3812.3408C.3188 1 .1.8341.1.6592c0-.1761.2192-.3592.4188-.3592C.7184.3.9.4838.9.6592z;
M.8.4428c0 .1992-.1678.4572-.3686.4572c-.199 0-.4314-.258-.4314-.4572C.0005.242.2325.1.4314.1C.6326.1.8.242.8.4428z;
M.8.4673c0 .1991-.2988.3327-.4996.3327C.1008.8 0 .6667 0 .4673c0-.2003.1008-.4673.3004-.4673C.5012.0004.8.2674.8.4673z"
calcMode="spline"
keySplines=".56 .37 .43 .58;.56 .37 .43 .58;.56 .37 .43 .58"/>
</path>
</defs>
<svg viewBox="0 0 200 200" preserveAspectRatio="xMaxYMid meet">
<path id="background" d="M144.2 2.5c8.5 7.8 4.3 35.3 16 54.1C172 75.4 199.4 85.5 200 95.7c.4 10.3-26.5 20.9-48.2 22c-21.7 1.1-38.2-7-47.1-6.6c-8.9.2-10.2 8.9-23.2 29.6C68.5 161.4 44 193.9 25.7 199.3c-18.2 5.1-30-16.9-24.1-38.7c5.7-21.8 29.3-43.5 32.3-63.2c3-19.8-14.7-37.8-11.1-42.9c3.5-5.3 28.2 2.5 43.6-1.5c15.2-3.8 21-19 34.5-32.7C114.4 6.6 135.6-5.3 144.2 2.5z" fill="url(#pattern)">
<animate dur="15s" repeatCount="indefinite" attributeName="d" attributeType="XML"
values="
M144.2 2.5c8.5 7.8 4.3 35.3 16 54.1C172 75.4 199.4 85.5 200 95.7c.4 10.3-26.5 20.9-48.2 22c-21.7 1.1-38.2-7-47.1-6.6c-8.9.2-10.2 8.9-23.2 29.6C68.5 161.4 44 193.9 25.7 199.3c-18.2 5.1-30-16.9-24.1-38.7c5.7-21.8 29.3-43.5 32.3-63.2c3-19.8-14.7-37.8-11.1-42.9c3.5-5.3 28.2 2.5 43.6-1.5c15.2-3.8 21-19 34.5-32.7C114.4 6.6 135.6-5.3 144.2 2.5z;
M160.8 16.7c21.7 8.5 42.7 19.7 38.7 35.4c-4 15.7-32.9 35.7-38.1 53.4c-5.2 17.7 13.7 33.2 13.8 43.5c.3 10.4-18.2 15.7-34.8 22.8c-16.8 7.1-31.8 15.7-51.4 21.8c-19.4 6.2-43.5 9.9-57.8 1.7c-14.3-8.2-19-28.1-16.3-44.5c2.6-16.6 12.4-29.8 9.2-44.5c-3.4-14.6-20-30.9-23.5-48.5c-3.4-17.7 6.4-36.6 24.1-47c17.7-10.3 43.2-12 67.4-10C116.2 2.7 138.9 8.3 160.8 16.7z;
M107.4 55.5c7 18.1 11.9 23.4 32.6 29.1c20.7 5.6 57.1 11.5 59.9 18.4c2.6 7-28.2 15.2-39.4 32.5c-11.4 17.3-3.2 44-12.8 56.2c-9.6 12.2-37.3 10.1-57.3.5c-20-9.7-32.2-26.6-46.2-37.1c-13.8-10.4-29.4-14.3-32.7-22c-3.3-7.8 5.6-19.5 3.5-32.1C12.6 88.2-.7 74.6 0 63.6c.9-11 15.6-19.4 31.9-33.6C48 15.6 65.3-4.6 78.5.9C91.8 6.3 100.5 37.2 107.4 55.5z;
M144.2 2.5c8.5 7.8 4.3 35.3 16 54.1C172 75.4 199.4 85.5 200 95.7c.4 10.3-26.5 20.9-48.2 22c-21.7 1.1-38.2-7-47.1-6.6c-8.9.2-10.2 8.9-23.2 29.6C68.5 161.4 44 193.9 25.7 199.3c-18.2 5.1-30-16.9-24.1-38.7c5.7-21.8 29.3-43.5 32.3-63.2c3-19.8-14.7-37.8-11.1-42.9c3.5-5.3 28.2 2.5 43.6-1.5c15.2-3.8 21-19 34.5-32.7C114.4 6.6 135.6-5.3 144.2 2.5z"
calcMode="spline"
keySplines=".56 .37 .43 .58;.56 .37 .43 .58;.56 .37 .43 .58"/>
</path>
</svg>
<svg viewBox="0 0 1 1" id="preview" preserveAspectRatio="none">
<use xlink:href="#filterPath" fill="darkgrey"/>
</svg>
<image xlink:href="" clip-path="url(#clip-path)"/>
</svg>

After

Width:  |  Height:  |  Size: 13 KiB

@@ -0,0 +1,38 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
<defs>
<pattern id="pattern" width="4" height="4" viewBox="0 -4 4 4" patternUnits="userSpaceOnUse">
<circle cx="1" cy="-1" r="0.5" fill="#3AADAA"/>
</pattern>
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
<use xlink:href="#filterPath" fill="none"/>
</clipPath>
<path id="filterPath" d="M.6576.2997c.1024.0958.2115.1977.2171.3063c.0056.1078-.0922.2219-.1954.2566c-.1031.0347-.2104-.0107-.2926-.0366c-.0829-.0266-.1406-.0346-.1815-.0692C.1641.7228.1381.6616.1288.59C.1194.5184.1258.4377.1671.3426C.2087.2464.2852.1366.3718.1258C.4585.1155.5544.2046.6576.2997z">
<animate dur="40s" repeatCount="indefinite" attributeName="d" attributeType="XML"
values="
M.6576.2997c.1024.0958.2115.1977.2171.3063c.0056.1078-.0922.2219-.1954.2566c-.1031.0347-.2104-.0107-.2926-.0366c-.0829-.0266-.1406-.0346-.1815-.0692C.1641.7228.1381.6616.1288.59C.1194.5184.1258.4377.1671.3426C.2087.2464.2852.1366.3718.1258C.4585.1155.5544.2046.6576.2997z;
M.815.2132c.0607.081.0739.2228.0461.3288c-.0277.1061-.0953.1762-.1564.2184c-.0607.0432-.114.0584-.1852.082c-.0716.0231-.1605.054-.2422.0118C.196.8109.121.6951.1252.5841c.0045-.1119.087-.2169.1688-.2978c.0821-.081.1624-.1369.2572-.1551C.6459.113.7542.1327.815.2132z;
M.7127.3c.0818.0788.1703.1503.1617.2129c-.0094.0626-.1153.1162-.196.1638c-.0818.0473-.1376.0878-.2408.1324c-.1021.0446-.2521.0941-.2965.0465c-.0448-.0473.0148-.1915.0437-.3067c.0296-.1155.0281-.202.0733-.2819C.3028.1883.3928.1174.4758.1257C.5577.1336.6317.2205.7127.3z;
M.7971.1498c.0778.048.0933.1748.0644.2765c-.0284.1017-.1004.1774-.1782.2615c-.0787.0848-.1628.1778-.2577.1865c-.095.0086-.1991-.0664-.2531-.1512c-.054-.0844-.0581-.1778-.0313-.2476c.0268-.0698.0837-.1156.1376-.1639C.3327.2635.3837.2136.4803.1731C.577.1318.7184.1014.7971.1498z;
M.6576.2997c.1024.0958.2115.1977.2171.3063c.0056.1078-.0922.2219-.1954.2566c-.1031.0347-.2104-.0107-.2926-.0366c-.0829-.0266-.1406-.0346-.1815-.0692C.1641.7228.1381.6616.1288.59C.1194.5184.1258.4377.1671.3426C.2087.2464.2852.1366.3718.1258C.4585.1155.5544.2046.6576.2997z"
calcMode="spline"
keySplines=".56 .37 .43 .58;.56 .37 .43 .58;.56 .37 .43 .58;.56 .37 .43 .58"/>
</path>
</defs>
<svg viewBox="0 0 200 200">
<path id="background" d="M185.1.2c14.2 3 5.8 49.9-2.3 81.4c-7.9 31.5-15.6 47.8-15.6 63.9c0 16.3 7.9 32.6-1.2 34.5c-9.1 1.9-35-10.5-49-7.2c-14.2 3.3-16.3 22.1-21.2 26.3c-4.7 4.2-11.7-6.1-29.8-7c-18.2-.9-47.1 7.5-55.7 1.4c-8.9-6.3 2.8-27 18.9-38.7c15.9-11.9 36.1-14.2 47.8-15.4c11.7-.9 14.7-.7 16.8-10.7c2.1-9.8 3.5-29.8 22.1-60.4C134.8 37.9 171.1-2.9 185.1.2z" fill="url(#pattern)">
<animate dur="40s" repeatCount="indefinite" attributeName="d" attributeType="XML"
values="
M185.1.2c14.2 3 5.8 49.9-2.3 81.4c-7.9 31.5-15.6 47.8-15.6 63.9c0 16.3 7.9 32.6-1.2 34.5c-9.1 1.9-35-10.5-49-7.2c-14.2 3.3-16.3 22.1-21.2 26.3c-4.7 4.2-11.7-6.1-29.8-7c-18.2-.9-47.1 7.5-55.7 1.4c-8.9-6.3 2.8-27 18.9-38.7c15.9-11.9 36.1-14.2 47.8-15.4c11.7-.9 14.7-.7 16.8-10.7c2.1-9.8 3.5-29.8 22.1-60.4C134.8 37.9 171.1-2.9 185.1.2z;
M122.3,72.4c8.6,13.2,25.4,3.8,36.6,3.8c11.1,0.2,16.6,10,21.1,22.3c4.3,12.3,7.5,27.1,5.7,43.6 c-1.8,16.3-8.8,34.1-21.6,45.7c-12.9,11.6-31.6,16.8-45,7.3c-13.4-9.6-21.3-33.9-44.8-39.3c-23.4-5.5-62.3,8-60.4,1.1 c2-6.8,44.8-33.8,49.1-58.4C67.1,73.8,32.8,51.7,26.4,37C19.9,22.5,41.6,15.6,60.7,8.4C80,1.3,96.7-6.2,105.1,8.3 C113.7,22.7,113.9,59,122.3,72.4z;
M157.1 9.8c8.9 12.2 7.2 35.4.9 52.1c-6.1 16.7-17.1 27-17.2 37c-.3 10.2 10.3 20.1 14.7 33.7c4.4 13.5 2.9 30.9-5.7 44.7c-8.7 13.9-24.4 24.4-39 22.4c-14.5-2.1-27.8-16.8-40.3-28.5c-12.4-11.7-24-20.5-20.2-31.9c3.8-11.6 22.8-25.9 18.4-42.9C64.2 79.5 36.1 60 36.7 55.9c.7-4 29.8 7.6 46.8 0c17-7.6 21.6-34.3 33.5-47C129-3.7 148.3-2.4 157.1 9.8z;
M119 77.2c3.9 10.3 10.6 7.6 26.4 8.6c15.8 1 40.9 5.6 44.2 12c3.5 6.5-14.6 15-21 32.4c-6.4 17.4-1 43.5-8.3 58c-7.3 14.5-27.4 17.1-37.5-.1c-10-17.1-10.1-54.2-13.2-71.2c-2.9-17-8.5-13.9-24.6-14c-16-.1-42.3-3.6-58-16C11.4 74.5 6.6 53.2 12.2 35C17.9 16.9 34 2 52.5.2C71-1.7 92 9.5 103 26.6C114 43.7 115.1 66.9 119 77.2z;
M185.1.2c14.2 3 5.8 49.9-2.3 81.4c-7.9 31.5-15.6 47.8-15.6 63.9c0 16.3 7.9 32.6-1.2 34.5c-9.1 1.9-35-10.5-49-7.2c-14.2 3.3-16.3 22.1-21.2 26.3c-4.7 4.2-11.7-6.1-29.8-7c-18.2-.9-47.1 7.5-55.7 1.4c-8.9-6.3 2.8-27 18.9-38.7c15.9-11.9 36.1-14.2 47.8-15.4c11.7-.9 14.7-.7 16.8-10.7c2.1-9.8 3.5-29.8 22.1-60.4C134.8 37.9 171.1-2.9 185.1.2z"
calcMode="spline"
keySplines=".56 .37 .43 .58;.56 .37 .43 .58;.56 .37 .43 .58;.56 .37 .43 .58"/>
</path>
</svg>
<svg viewBox="0 0 1 1" id="preview" preserveAspectRatio="none">
<use xlink:href="#filterPath" fill="darkgrey"/>
</svg>
<image xlink:href="" clip-path="url(#clip-path)"/>
</svg>

After

Width:  |  Height:  |  Size: 4.9 KiB

@@ -0,0 +1,31 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
<defs>
<pattern id="pattern" width="6.24" height="6.24" viewBox="0 0 6.24 6.24" patternUnits="userSpaceOnUse">
<rect width="100%" height="100%" fill="#3AADAA"/>
<path id="patternLines" d="M0,1.7c1.56,0,1.56,2.84,3.12,2.84S4.68,1.7,6.24,1.7,7.8,4.54,9.36,4.54,10.92,1.7,12.48,1.7" fill="none" stroke="#FFFFFF" stroke-miterlimit="10" stroke-width=".5" transform="translate(-6.2)">
<animateTransform attributeName="transform" attributeType="XML" type="translate" dur="3s" values="-6.2;0;" repeatCount="indefinite"/>
</path>
</pattern>
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
<use xlink:href="#filterPath" fill="none"/>
</clipPath>
<path id="filterPath" d="M.815.2132c.0607.081.0739.2228.0461.3288c-.0277.1061-.0953.1762-.1564.2184c-.0607.0432-.114.0584-.1852.082c-.0716.0231-.1605.054-.2422.0118C.196.8109.121.6951.1252.5841c.0045-.1119.087-.2169.1688-.2978c.0821-.081.1624-.1369.2572-.1551C.6459.113.7542.1327.815.2132z">
<animate class="animation" dur="40s" repeatCount="indefinite" attributeName="d" attributeType="XML"
values="
M.815.2132c.0607.081.0739.2228.0461.3288c-.0277.1061-.0953.1762-.1564.2184c-.0607.0432-.114.0584-.1852.082c-.0716.0231-.1605.054-.2422.0118C.196.8109.121.6951.1252.5841c.0045-.1119.087-.2169.1688-.2978c.0821-.081.1624-.1369.2572-.1551C.6459.113.7542.1327.815.2132z;
M.7971.1498c.0778.048.0933.1748.0644.2765c-.0284.1017-.1004.1774-.1782.2615c-.0787.0848-.1628.1778-.2577.1865c-.095.0086-.1991-.0664-.2531-.1512c-.054-.0844-.0581-.1778-.0313-.2476c.0268-.0698.0837-.1156.1376-.1639C.3327.2635.3837.2136.4803.1731C.577.1318.7184.1014.7971.1498z;
M.6576.2997c.1024.0958.2115.1977.2171.3063c.0056.1078-.0922.2219-.1954.2566c-.1031.0347-.2104-.0107-.2926-.0366c-.0829-.0266-.1406-.0346-.1815-.0692C.1641.7228.1381.6616.1288.59C.1194.5184.1258.4377.1671.3426C.2087.2464.2852.1366.3718.1258C.4585.1155.5544.2046.6576.2997z;
M.7127.3c.0818.0788.1703.1503.1617.2129c-.0094.0626-.1153.1162-.196.1638c-.0818.0473-.1376.0878-.2408.1324c-.1021.0446-.2521.0941-.2965.0465c-.0448-.0473.0148-.1915.0437-.3067c.0296-.1155.0281-.202.0733-.2819C.3028.1883.3928.1174.4758.1257C.5577.1336.6317.2205.7127.3z;
M.815.2132c.0607.081.0739.2228.0461.3288c-.0277.1061-.0953.1762-.1564.2184c-.0607.0432-.114.0584-.1852.082c-.0716.0231-.1605.054-.2422.0118C.196.8109.121.6951.1252.5841c.0045-.1119.087-.2169.1688-.2978c.0821-.081.1624-.1369.2572-.1551C.6459.113.7542.1327.815.2132z"
calcMode="spline"
keySplines=".56 .37 .43 .58;.56 .37 .43 .58;.56 .37 .43 .58;.56 .37 .43 .58"/>
</path>
</defs>
<svg viewBox="0 0 200 200" preserveAspectRatio="xMaxYMid meet">
<path id="background" d="M140.2,1.6c10.3,6.5,7.2,34.6,17.6,54.5c10.3,19.7,34.2,31.2,40.4,45.9c6.3,14.9-5.2,33.3-23,40.4 c-17.9,7.2-42.4,3.3-58.9,14.2c-16.5,10.8-25.1,36.4-37.2,42.1s-27.6-8.5-29.8-27.4c-2.1-18.9,9.2-42.3,3-55 c-6.1-12.9-29.5-15.3-41.5-24.4C-1.3,82.9-1.8,67.3,2.4,51c4.1-16.2,12.8-33,26.9-37.4c14.2-4.4,33.8,3.7,55.4,0.3 C106.3,10.3,130-4.9,140.2,1.6z" fill="url(#pattern)"/>
</svg>
<svg viewBox="0 0 1 1" id="preview" preserveAspectRatio="none">
<use xlink:href="#filterPath" fill="darkgrey"/>
</svg>
<image xlink:href="" clip-path="url(#clip-path)"/>
</svg>

After

Width:  |  Height:  |  Size: 3.4 KiB

@@ -0,0 +1,42 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
<defs>
<pattern id="pattern" width="250" height="30" patternUnits="userSpaceOnUse" patternTransform="rotate(41) scale(0.3)">
<rect fill="#FFFFFF" width="250" height="30"/>
<path id="patternPath" data-color="outline" fill="none" stroke="#3AADAA" stroke-width="3.77" d="M-62.5-15C-31.3-15 0-7.5 0-7.5S31.3 0 62.5 0 125-7.5 125-7.5s31.3-7.5 62.5-7.5S250-7.5 250-7.5 281.3 0 312.5 0"/>
<use xlink:href="#patternPath" y="15"/>
<use xlink:href="#patternPath" y="30"/>
<use xlink:href="#patternPath" y="45"/>
</pattern>
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
<use xlink:href="#filterPath" fill="none"/>
</clipPath>
<path id="filterPath" d="M.875.2495c.0538.1029.0127.2523-.0475.3419c-.0602.0896-.1426.1229-.2408.2025c-.0982.0796-.2091.2125-.3231.2058c-.114-.0067-.2281-.1461-.2566-.2988c-.0285-.1527.0318-.3186.1331-.4315c.1013-.1129.2439-.1693.3896-.1693c.1457-.0033.2914.0498.3452.1493z">
<animate dur="30s" repeatCount="indefinite" attributeName="d" attributeType="XML"
values="
M.875.2495c.0538.1029.0127.2523-.0475.3419c-.0602.0896-.1426.1229-.2408.2025c-.0982.0796-.2091.2125-.3231.2058c-.114-.0067-.2281-.1461-.2566-.2988c-.0285-.1527.0318-.3186.1331-.4315c.1013-.1129.2439-.1693.3896-.1693c.1457-.0033.2914.0498.3452.1493z;
M.7453.1261c.0953.0608.1684.2308.1526.4008c-.0159.166-.1239.3319-.2606.4129c-.1366.081-.3019.081-.4225-.004c-.1207-.0851-.2002-.2551-.2128-.421c-.0128-.1619.0413-.3198.1207-.3765c.0795-.0567.1875-.0081.2986-.0121c.1144-.004.2288-.0567.3241 0z;
M.7146.3168c.1146.1242.219.2706.1751.3566c-.0438.0891-.2325.121-.3942.1847c-.1617.0669-.2965.1655-.3773.1369c-.0842-.0286-.1146-.1814-.1179-.312c-.0033-.1273.0135-.2325.0742-.3439c.0607-.1114.1685-.2292.283-.2388c.1179-.0064.2426.0923.3571.2165z;
M.8079.2919c.0892.1116.1179.2623.0669.3649c-.0542.0995-.1912.1478-.3249.2171c-.1337.0693-.2643.1537-.3313.1175c-.0669-.0332-.0669-.1869-.1115-.3437c-.0446-.1568-.1401-.3075-.0955-.41c.0446-.1025.2262-.1478.3919-.1357c.1657.0121.3153.0814.4045.19z;
M.8654.124c.0699.0706.0222.3176-.0413.4897c-.0668.1765-.1526.2779-.248.3353c-.0954.0573-.2035.0706-.299.0176c-.0954-.0485-.1844-.1633-.2354-.3309c-.0509-.1677-.0636-.3794.0095-.4544c.0668-.0662.2226.0088.3911-.0044c.1686-.0176.353-.1236.423-.0529z;
M.875.2495c.0538.1029.0127.2523-.0475.3419c-.0602.0896-.1426.1229-.2408.2025c-.0982.0796-.2091.2125-.3231.2058c-.114-.0067-.2281-.1461-.2566-.2988c-.0285-.1527.0318-.3186.1331-.4315c.1013-.1129.2439-.1693.3896-.1693c.1457-.0033.2914.0498.3452.1493z"
calcMode="spline"
keySplines=".56 .37 .43 .58;.56 .37 .43 .58;.56 .37 .43 .58;.56 .37 .43 .58;.56 .37 .43 .58"/>
</path>
</defs>
<svg viewBox="0 0 200 200" preserveAspectRatio="xMaxYMid meet">
<path id="background" d="M193.6 5.2c11 10.8 5.8 40.7-.1 61.6c-5.8 20.8-12.5 32.8-9.7 55.3c3 22.4 15.3 55.3 7.9 69.2c-7.6 13.9-35 9-55-1.3c-20-10.3-32.6-25.8-51.8-35.9c-19.1-10.3-44.7-15.1-51.2-27.9C27.2 113.4 39.8 92.8 51 75.7c11.1-17.2 20.8-30.7 33.6-40.9c12.8-10.2 28.6-17.2 50-24.8C156 2.6 182.8-5.6 193.6 5.2z" fill="url(#pattern)">
<animate dur="30s" repeatCount="indefinite" attributeName="d" attributeType="XML"
values="
M193.6 5.2c11 10.8 5.8 40.7-.1 61.6c-5.8 20.8-12.5 32.8-9.7 55.3c3 22.4 15.3 55.3 7.9 69.2c-7.6 13.9-35 9-55-1.3c-20-10.3-32.6-25.8-51.8-35.9c-19.1-10.3-44.7-15.1-51.2-27.9C27.2 113.4 39.8 92.8 51 75.7c11.1-17.2 20.8-30.7 33.6-40.9c12.8-10.2 28.6-17.2 50-24.8C156 2.6 182.8-5.6 193.6 5.2z;
M135.5,17.9c22.6,14.9,42.8,35,54.2,60.1c11.4,25.3,14.3,55.6,3.7,79.6c-10.7,23.8-34.8,41.3-59,42.3 c-24.2,1.1-48.2-14.3-70.4-16.9c-22.1-2.5-42.4,7.8-50.7,1.6c-8.1-6.2-4.1-28.9-5.4-46.6c-1.3-17.8-7.9-30.5-3.2-37.8 c4.9-7.3,21.1-9.2,32.6-27.7C48.7,54,55.5,18.6,71.4,5.8C87.5-6.9,112.8,3,135.5,17.9z;
M157.3,35c10.3,16.2,16.7,29,24.3,43.4c7.5,14.4,16.2,30.6,17.9,50.6c2,20.1-3,43.9-17.6,56.7 c-14.6,13-38.9,14.7-62.7,14.2c-24-0.4-47.6-2.8-67-14.2c-19.2-11.4-34.1-31.4-40.2-53.5c-5.9-22-3-46.2,9.9-60.9 c13.1-14.9,36.2-20.6,54-34.5C93.9,23.1,106.5,1.1,119.6,0C133-1,147.2,18.7,157.3,35z;
M193.6 5.2c11 10.8 5.8 40.7-.1 61.6c-5.8 20.8-12.5 32.8-9.7 55.3c3 22.4 15.3 55.3 7.9 69.2c-7.6 13.9-35 9-55-1.3c-20-10.3-32.6-25.8-51.8-35.9c-19.1-10.3-44.7-15.1-51.2-27.9C27.2 113.4 39.8 92.8 51 75.7c11.1-17.2 20.8-30.7 33.6-40.9c12.8-10.2 28.6-17.2 50-24.8C156 2.6 182.8-5.6 193.6 5.2z"
calcMode="spline"
keySplines=".56 .37 .43 .58;.56 .37 .43 .58;.56 .37 .43 .58"/>
</path>
</svg>
<svg viewBox="0 0 1 1" id="preview">
<use xlink:href="#filterPath" fill="darkgrey"/>
</svg>
<image xlink:href="" clip-path="url(#clip-path)"/>
</svg>

After

Width:  |  Height:  |  Size: 4.9 KiB

@@ -0,0 +1,42 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
<defs>
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
<use xlink:href="#filterPath" fill="none"/>
</clipPath>
<clipPath id="pattern">
<path id="patternPath" d="M1498.93 61.35c28.53 88.9-124.51 296.74-129.69 418.68c-3.46 121.94 140.06 159.78 198 219.85c57.94 60.07 31.12 144.77-19 251.69c-49.28 106.92-122.78 237.87-235.17 248.68c-112.39 10.81-263.71-97.91-360.54-186.81c-98.57-88.9-140.07-156.18-302.61-200C488.21 770.16 204.62 750.94 87 668.65C-32.28 587 13.55 444.59 110.38 326.86c96.84-118.94 245.55-211.45 412.41-256.5c165.14-45 349.3-42 544.7-54.66C1263.75 2.48 1472.12-27.55 1498.93 61.35Z">
<animate dur="30s" repeatCount="indefinite" attributeName="d" attributeType="XML"
values="
M1498.93 61.35c28.53 88.9-124.51 296.74-129.69 418.68c-3.46 121.94 140.06 159.78 198 219.85c57.94 60.07 31.12 144.77-19 251.69c-49.28 106.92-122.78 237.87-235.17 248.68c-112.39 10.81-263.71-97.91-360.54-186.81c-98.57-88.9-140.07-156.18-302.61-200C488.21 770.16 204.62 750.94 87 668.65C-32.28 587 13.55 444.59 110.38 326.86c96.84-118.94 245.55-211.45 412.41-256.5c165.14-45 349.3-42 544.7-54.66C1263.75 2.48 1472.12-27.55 1498.93 61.35Z;
M1397,283.18c66.12,116.45,90.78,172.27,125.52,222.69,37,50.42,80.69,96,77.33,141.06-1.12,45-51.55,90.63-100.86,152.46-49.31,63-99.75,142.86-229.75,237.09-131.12,93-340.69,201.08-423.62,152.46-80.69-48.62-34.74-254.5-204-359.54C471.28,725,84.65,720.16,24.13,675.14c-59.4-46.22,205.08-133.85,405.69-183.67,198.36-50.42,331.72-63,436-170.47C970,214.76,1046.2,13.08,1137,.47,1226.63-10.33,1333.09,166.74,1397,283.18Z;
M1263.18 22.12c172.19-12.88 358.06 76.44 340.36 210c-16.1 132.76-235.76 308.17-313.81 468.29c-78 159.32-15.29 304.15-49.08 393.46c-33.79 89.31-165 122.31-276.79 101.39c-112.65-20.12-206-94.14-262.31-167.37C643.61 954.68 622.69 881.46 486.71 842c-136-38.63-387.83-42.65-463.46-115.87c-76.44-72.42 20.92-212.42 88.5-370.94c66-159.31 99.78-335.53 206-354c104.6-17.7 280 123.11 447.37 136C932.49 150.08 1089.38 35 1263.18 22.12Z;
M1188 257.2c89.43 117.16 106.2 228.92 134.14 320.85c27 91.92 66.14 165.22 137.88 282.39c73.59 117.16 177.93 278.18 95 324.45c-82.91 47.46-354.93-19.83-545-50.47c-188.17-31.24-294.37-27-447.15-13.22c-152.78 13.78-354 37.85-431.32-12C54.23 1059.35 101.77 936.74 89.66 825C77.55 712 6.75 611.69 15.13 504.74c6.52-106.95 92.23-217.5 232-320.84C386.9 80.56 579.67-13.78 756.67 1.24C936.46 15.66 1098.55 138.83 1188 257.2Z;
M1498.93 61.35c28.53 88.9-124.51 296.74-129.69 418.68c-3.46 121.94 140.06 159.78 198 219.85c57.94 60.07 31.12 144.77-19 251.69c-49.28 106.92-122.78 237.87-235.17 248.68c-112.39 10.81-263.71-97.91-360.54-186.81c-98.57-88.9-140.07-156.18-302.61-200C488.21 770.16 204.62 750.94 87 668.65C-32.28 587 13.55 444.59 110.38 326.86c96.84-118.94 245.55-211.45 412.41-256.5c165.14-45 349.3-42 544.7-54.66C1263.75 2.48 1472.12-27.55 1498.93 61.35Z"
calcMode="spline"
keySplines=".56 .37 .43 .58;.56 .37 .43 .58;.56 .37 .43 .58;.56 .37 .43 .58"/>
</path>
</clipPath>
<path id="filterPath" d="M.7077.1505c.1004.0999.2105.2469.1898.3562c-.0203.1094-.1714.1813-.3131.2592c-.1417.0779-.274.1638-.3838.124C.09.85.0018.6852 0 .5353c-.0014-.1498.0842-.2833.1696-.3793s.1705-.1537.2591-.156C.5164-.0027.6078.0506.7077.1505z"/>
</defs>
<svg preserveAspectRatio="none" viewBox="0 0 1600 1201">
<g clip-path="url(#pattern)">
<path d="M-279.34,117.77c49.59,132.33,88.19,269.29,127.39,405C-110.16,667.37-110,819.53-94.31,967.3c9.43,89,27.91,174.86,86.84,245.64,41.26,49.52,90.75,82.87,152.16,102.11,85.55,26.81,178.62,27.36,262.49,58.66,19.41,7.24,39.05,17,51.93,33.84,10.69,14,15.79,31.58,22.87,47.12,6.31,13.83,17,19.34,30.45,20.8,41.15,4.44,94-20.32,136.74-27.87,9-1.6,20.58-3.29,28.52-8,5.66-3.4,5.49-8.23,5.19-12.44-2.36-32.65-.88-66.91-9.06-99.08-9.38-36.88-32.78-62.39-64.78-78.42-54.88-27.45-125.66-29.49-188-40.37-61.52-10.79-123.46-22.55-182.44-43.67-49.93-17.85-96.72-43.14-136-79-49.27-45-75.88-107.13-92.23-169.87C-29.86,762.38-26.53,597-64.88,440.41-84,362.49-108.13,285.22-132,208.65c-20.41-65.57-42.2-131.71-71.62-193.29C-211.87-2-222-25.32-240.41-34.64c-8.94-4.52-18-3.69-26.6-2.07-12.82,2.43-25.69,8.16-33.39,19-25.47,35.76,6.14,100.3,21.06,135.46" fill="#383E45"/>
<path d="M-181.44,11.76c30.4,70.35,54.26,143.29,76.74,216.4,14.76,48,28.94,96.31,43.21,144.52C-39.73,446.21-26.62,521.54-16,597.32-4.38,679.56,5,762.94,21.53,844c18.82,91.93,49.05,179.64,124.29,241.34,59.84,49,133.18,76,207.35,94.83,46.11,11.69,92.86,20.37,139.64,28.61,43.63,7.68,89.27,11.68,130.47,29,55.41,23.34,81.66,69.15,108.63,119.1,10,18.51,26.49,31.27,44.46,40.75,43.07,22.7,93.57,32.85,142.24,40.87,6.36,1,12.95,2.08,19.76,2.85a263.59,263.59,0,0,0,40.9,1.41c1,0,2-.06,2.94-.13,9.58-.72,20.94-1.31,29.37-6.75,5-3.21,4.83-8.47,3.93-13.66-17.59-97.72-41.82-200-127.64-257.51-51-34.2-114.89-38.81-175.06-48.26-69-10.79-138.32-21.89-206.35-36.64C423,1061.71,337,1039,262.21,995.54,183.94,950.06,142,881.47,113.43,798.37,76.84,691.92,61.22,578.27,39.76,467.26c-21.39-110.62-54.09-217.78-87.7-325-20.21-64.47-41.27-130-70.55-190-8.53-17.48-18.41-34.85-32.9-48.51-10.44-9.9-23.4-19.7-37.58-23-9-2.11-22.36.77-28.13,8.74-10.86,15-1.1,38.09,4.69,53.24,9,23.53,20.25,46.32,31,69.11" fill="#3AADAA"/>
<path d="M-112.09-68.59C-80.94-5.74-57.87,60.52-36.54,127.1c14.7,46.05,28.7,92.5,42.88,138.75,23,74.89,38.47,151.61,53.77,228.36C76.84,578,94.49,662.26,120.36,743.31c15.23,47.68,33.74,95.27,60.21,138.27,27,43.9,67.54,75.53,112.31,100,91.17,49.85,195.73,73.93,296.83,94.06,54.16,10.78,108.66,19.75,163.18,28.52,50.84,8.18,103.45,12.74,150.27,35.8,74.26,36.49,117,107.4,156.48,176.71,13.39,23.52,31,43.71,50.67,61.67,43.23,39.4,89,70.68,144.66,90.81a169.16,169.16,0,0,0,21.33,6.61c12.65,2.73,26,4.57,39,2,.76-.14,1.51-.33,2.23-.52,9.5-2.51,13.72-7.56,15.93-14.81,1.42-4.66-.31-11-2.77-17.47-45.09-119.3-89.41-254.31-194.88-331.79-54.45-40-119.88-45.54-185.76-55-81.8-11.76-163.8-23.58-244.89-38.5-103.79-19.09-211-41.08-307.46-85.83C351.65,912.4,308.06,883,277.65,841.59c-26-35.46-45.77-76.26-62.51-116.51-43.07-103.62-69.15-213.91-96.89-323C91.7,297.68,58.55,195.76,24.48,93.73,5.39,36.53-14-21.78-41-74.8-49.35-91.19-59.32-107-71.74-121c-15.19-17.13-32.44-36.65-52.7-45.77-8.19-3.67-21.11-9.21-29.41-4.26C-173-159.68-120.26-83.91-112.07-68.49" fill="#7C6576"/>
<path d="M-37.54-104.1C-4.88-47.61,18.64,13,40.06,74.37,55.75,119.26,70.59,164.8,85.41,210c24.82,75.64,42.71,153.86,62.87,230.89C171,527.79,197.86,614.32,232.64,697c19.46,46.21,41.51,92.72,71.08,133.77,34,47.23,82.84,79.08,135.7,101.74,111.83,47.92,235.22,69.76,354.55,89.66,62.67,10.44,125.57,19.47,188.44,28.43,48.54,6.93,100.7,9.49,146.38,28.51,90,37.49,145.87,125.52,193.37,205.75,15,25.31,31.31,49.79,48.61,73.64,32.7,45.11,67.33,102.76,118.9,128,4.91,2.42,10.15,4.83,15.16,5.88,10.58,2.3,18.64-1.5,22.67-7.67a17.63,17.63,0,0,0,1-1.55c4-7.79,2.44-20.17.83-28.18a95.21,95.21,0,0,0-7.17-20.59c-61.56-131.4-138.83-274.62-259-357.2-53.76-37-113.79-43.52-178.47-51.92-81.9-10.64-164.19-19.35-245.79-30.86-104.74-14.78-213.38-31.48-311.55-73.3-95.63-40.76-153-115.2-190.59-208.81C296.33,611.67,275.31,504,247.8,398.9c-26.46-100.8-64.49-196.81-102.33-293.6C124.46,51.57,102.72-3.14,74-52.23A259.09,259.09,0,0,0,40.41-97c-23.8-25.74-49.87-50.87-79.8-69.25C-52-174-66.1-182.68-80.46-186.52c-16.67-4.46,3.5,23.62,6,27.3C-62.19-140.84-49.12-123-37.58-104.1" fill="#F6F6F6"/>
<path d="M72.55-92.57C112.38-39.45,144.17,18.31,170.8,78.64c19.1,43.3,35.07,88.8,52.08,132.57,28.6,73.52,42.7,153.5,59.33,231.27,18.73,87.63,39,176.53,71.05,259.76,17.81,46.24,38.24,91.33,71.89,129,36.65,40.95,82.93,68.85,134.09,88,105.3,39.34,220.17,52.09,331.23,64.24,58.21,6.4,116.52,11.85,174.72,18.35,49,5.48,102.53,7.53,149.23,24.51,92.41,33.54,165.46,115.55,227.6,188.09,21,24.51,42.53,48.59,64,72.54,51.1,56.86,98.64,133.57,175.34,158.24,7.85,2.52,16.26,4.74,24.63,4.83,14.39.14,32-6,39.87-19.16a25.15,25.15,0,0,0,1.45-2.71c6.26-14.18.15-29.52-4.82-43.13-3-8.3-8.42-16.82-13.62-23.92-57-77.79-127.66-148.91-200.88-212.83-77.18-67.45-160.39-131.06-250.22-178.92-30.63-16.31-63-31.72-97.07-40.42-31.69-8.1-65.88-9.41-98.42-11.56-74.45-4.9-149.27-5.13-223.67-7.84-93.74-3.34-192.16-7.36-281.5-39.21-44.8-16-86.11-41.81-117.74-77.61-29.25-33.11-42.72-77-50.67-119.52C390.14,574,398,471.16,392.45,370.39c-2.78-50.26-8.33-100.77-21.7-149.41-12.3-44.73-33.12-86.53-54.06-127.51C290.22,41.64,260.6-9.93,224.45-54.67a265.81,265.81,0,0,0-41-40.4C149.3-122.36,112.28-148.66,71-164c-14.92-5.55-31.48-10.08-46.76-11.81-22.16-2.53-2.15,23,2.77,29.21,14.71,18.4,30.93,35.53,45.55,54" fill="#3AADAA"/>
<path d="M202.31-121.95c52.77,48.79,99.81,102.69,137,163.49,24.42,39.93,48.05,83.85,60.5,128.47,21.07,75.48,15.69,158.79,13.73,238.05-2.17,87.39-5.3,176.23,9.12,261.24,7.79,45.88,24.93,88.21,60.21,120.83,33.13,30.65,73.22,51.23,116.43,63.53,90.94,25.88,188.85,23.65,282.5,22.6,50.32-.57,100.65-1.68,151-.8,45.29.79,93.57.57,137.78,11.47,123.1,30.38,237.56,110,340.27,180.67,36.22,25,72.85,49.75,108.75,75.07,57.86,40.81,112.77,86.11,170.3,127.67,49.73,35.93,103.7,68.21,164.25,80.64,13.07,2.69,27.2,5,40,3.6,18-2,44.67-8.54,47.65-31.25a21.42,21.42,0,0,0,.19-3.92c-1-22.42-22.48-42.69-36.84-57.51a360,360,0,0,0-28.82-26.26c-103.35-85.72-220.93-158.11-338.18-225.44-119.85-68.71-243.79-133.59-371.87-183.56-71.33-27.82-139.68-46.79-217-46.06-64.95.63-129.71,8.63-194.16,14.7-79.89,7.53-165.08,15.77-243.39-7.44-41.59-12.33-80.35-36.1-109.47-68.39-29.42-32.54-37.83-77.34-37.47-118.88.83-98.73,35.63-198,53.57-296.7,8.5-46.79,14.83-94.72,11.31-142.34-3.43-46.27-20.09-85.92-40.81-126.45C460.73-20.08,427.39-73.86,387.19-120.21a283.18,283.18,0,0,0-45.44-41.94c-44.13-32.66-94.89-61.6-151.37-66.25-17.83-1.47-38.73-.67-55,7.23-46.11,22.35,50.42,84.6,66.95,99.22" fill="#7C6576"/>
<path d="M334-219.53c61.21,52.78,118.3,110.34,161.46,177.88,26,40.76,52.4,87.47,59.66,134.78,12.48,81.16-13.82,169.11-34,249.88-21.78,87.1-54.36,182.34-45.12,270.18,4.55,43.46,21.58,78.58,57.39,106.92A237.78,237.78,0,0,0,642,767.94c76.5,12.83,156.12-2.26,231.7-14.7,79.28-13,161.4-28.8,242-19.8,57.15,6.37,113.3,28.93,166.48,49.63,80.16,31.21,158.49,67.27,235.66,104.9,49.27,24,98.66,48.41,147.31,73.69,96.72,50.24,191.1,105.42,286.82,157.89,70.69,38.75,145.7,80.93,225,97.63,11,2.32,23.19,4,34.2,1.78,23.26-4.72,13.93-34.78,7.19-47.25a55.07,55.07,0,0,0-3.34-5.18c-20.33-28.91-51.57-51-80.35-70.36-13.42-9.06-27.52-17.84-41.46-26.36-132.41-81-271.83-152.61-412.32-219.73C1551,788,1418.64,727.86,1282.64,681.62c-67.37-22.9-130.61-40.56-202.31-35.17C1021.7,650.86,964,664,906.56,675.39c-71.88,14.24-148.9,29.59-221.9,13.17-39.33-8.83-77.25-29.56-105.58-58.31-31.49-31.94-39.81-75.35-38-117.29,4.37-98.63,48.46-197.56,78.67-294.26,15-47.87,29.12-97,33.35-147.19,3.73-43.84-4-81.42-23-120.24a603.79,603.79,0,0,0-101.4-147,487.88,487.88,0,0,0-45.9-42.59C431.08-280.78,369.93-318.17,304-334.46c-16.62-4.1-38.94-7.76-54.92,0C199.48-310.2,317.56-233.28,334-219.53" fill="#383E45"/>
<path d="M1119.44-438.64c58.67,39.54,76,95.49,87.17,162,13.74,81.29,34.18,160.94,70,234.76C1300.2,6.72,1331.36,67.61,1377.5,99.46c53.32,36.8,132.43,18.71,188.72,2.5,83.72-24.12,170.54-62.08,246.06-108,29.64-18,46.46-27.73,75.45-6.67,4.12,2.94,9.34,7.15,15,4.2,4.35-2.27,7.85-8.28,11.26-13.89a276.73,276.73,0,0,1,25-35.33c8.41-10,19-22.62,19-36.53,0-9.14-4.47-15.57-8.24-20.37-6.58-8.37-21-33.27-34.78-27.65-11.64,4.76-22.34,14.83-33.37,22.13-29,19.24-60,36.09-90.72,51.55-103.33,51.94-252.7,114.58-357.3,31.08-73.22-58.47-122-135.73-139.11-226.69-11.47-60.93-18.72-121.69-51.18-175.66-12.16-20.21-28.46-36.66-48.54-47.83-20.49-11.39-51.2-16.22-73.19-4.51C1102.46-482,1102.56-451.21,1119.44-438.64Z" fill="#3AADAA"/>
<path d="M1007.74-419c-14.71.27-24.41,15.32-19.41,28.26a17.78,17.78,0,0,0,4.3,6.22c32.47,29.48,59.44,67.33,73.45,108.62,6.17,18.2,11.15,37,15.82,55.77,8.83,35.45,17.94,71.1,26.13,106.69,9.11,39.52,17.66,79.54,27.46,118.86,4.32,17.22,8.92,34.57,13.73,51.64,15.07,52.92,33.61,105.46,58.55,154.2,18.38,36,40.26,67,82.67,75.46,42.8,8.58,90-1.36,131-11.66,113.36-28.53,224.37-81.17,333-127.17,19.31-8.17,41.62-20.08,61.6-18.11,16.67,1.65,32.36,10.24,48.32,18.26,3.36,1.68,7,3.4,10.61,3.79a8.6,8.6,0,0,0,7.18-2.22c3.34-3.15,5.06-9.89,6.42-16.58,2.18-10.78,4.25-21.65,6.27-32.48.72-3.79,1.41-7.54,2.15-11.2,2.77-13.84,5-29.31.65-43.12a54.66,54.66,0,0,0-13.08-21.56c-11.82-12.67-29.58-34.57-50-30.23-15.34,3.26-30,11.59-44.2,18.4-32,15.27-64.5,29.72-96.7,44.41-38.34,17.5-77.34,34.53-116.69,48.91-60,21.92-132.5,46.83-197.78,35.29-57.07-10.15-94.32-61.42-122.94-106.56C1218.42-24.61,1196.48-92,1181-161.26c-7.17-32.05-12.34-65.05-19.68-96.84-6.36-27.6-14.83-55.07-27.65-79.77a155.76,155.76,0,0,0-40.09-49.39C1070.88-405.83,1037.41-419.54,1007.74-419Z" fill="#7C6576"/>
<path d="M886.1-371.72c-10.09-1-28.2-.09-28.1,14.88a9.7,9.7,0,0,0,1.71,5c23.22,38.8,55.36,71,73.54,112.7,8.37,19.21,15.71,39.2,22.51,59.07,12.76,37.6,24.94,76.25,35.77,114.19,12.13,42.52,20.8,86.88,29.91,130.58,4.16,19.93,8.3,39.9,12.6,59.78,13.14,60.67,27.93,121.52,48.79,179.66,14.49,40.41,29.7,90.05,66.54,116.55,38.11,27.43,89.43,21.34,132.51,14.59,147-23.08,284.57-92.33,429.87-126.57,28.81-6.79,61.4-16.58,90.16-9.31,23.64,6,46.21,19.37,68.9,28.87,4.36,1.82,9.12,3.4,13.51,3.63,3.09.17,6-.58,8-3.11,2.81-3.43,3.65-10.34,3.67-17.44,0-11.83-.66-23.74-1.77-35.58-.38-4.14-.88-8.25-1.34-12.24-1.72-15-4.51-30.85-11.31-44.32a82.06,82.06,0,0,0-17.19-22.3c-19.14-17.44-39.86-36.61-67.73-35.28-19.63,1-38.67,8-57.17,14-36.48,11.67-72.4,24.32-108,38.4-42.14,16.66-84.42,34.22-126.88,49.77-67.42,24.68-144.3,52.58-217.59,49.91C1213.16,311,1183.23,251,1155.19,192.21c-38.68-81.05-61.48-169.12-81-257.29-8.21-37-17-74.12-26.38-110.74-7.44-29-15.77-58.29-27.94-85a198.05,198.05,0,0,0-35.72-53.44C959.16-341,921.39-368.42,886.1-371.72Z" fill="#383E45"/>
<path d="M757.68-346c-12.88-5.24-31-12.26-44.53-7.2a3,3,0,0,0-2,2.19c-2,15.58,20.6,35.31,29.72,46.34,17.39,21,35.44,41.82,50,64.65,12.75,19.93,24.8,40.74,35.7,61.7A886.29,886.29,0,0,1,880-51.73C894.84-7.4,906.14,35.44,911.51,82.08c2.35,20.49,4.08,41.33,5.64,62,4.69,62.07,7.58,125.2,19.32,185.86,8.83,45.56,21.39,95.92,46.45,136.15,26.66,42.8,70.63,65.33,118.05,70.52,171.91,18.9,347.07-81.6,519.2-99.45,57.71-6,114.16,7.51,166.88,30.43,51.26,22.27,100.26,56.24,153.15,75.47,6.21,2.26,11.63,3.52,15.25,2.68,2.53-.6,4-2.56,3.44-7.14-.62-5.38-4.1-14.31-8.18-23.63-6.64-15.16-13.73-30.3-20.94-45.19-2.47-5.08-4.91-10-7.28-14.69-8.1-16.29-16.3-33.4-27.13-47.57a162.31,162.31,0,0,0-22.78-24.66c-26.82-23.08-55.91-45.93-92.49-49.36-61.33-5.75-132.75,15-190.19,31.54-45.29,13-90.59,28.28-135.82,42.11-75.23,22.93-155,46.87-234.5,48.06-36.09.53-70.55-7.4-96.77-33.56-25.25-25.19-38.73-61.08-52.15-93.13-40.09-95.74-65.12-197.29-90.51-298.19C969.36-12.69,955.83-55,943.28-97.6,933.82-129.72,924-162.16,911-192.52a286.48,286.48,0,0,0-34.81-60.12C845.74-292.82,803.85-327.27,757.68-346Z" fill="#F6F6F6"/>
<path d="M603.66-360.51c-17.47-9.25-37.37-18.85-57.65-21.25a29.46,29.46,0,0,0-5.71-.17c-19.11.79,19.36,35.28,22.85,38.56,22.07,20.79,45.51,40.45,66.19,62.43,18.11,19.27,35.76,39.51,52,60.27,31,39.51,58.33,82.57,79.44,128S789-4,786,45.85c-1.28,21.46-4.07,43.4-7.35,64.82C768.63,176,752.47,241.78,745,307.3c-5.39,47.23-5.42,94.84,3.49,142.15,10,53,35.77,94.08,81.33,119.43,89.75,49.86,206.65,26.8,305.79,4.7,91.21-20.32,190.26-58.05,284.77-51.45,115.28,8,231.38,64.84,333.08,114.79,60.09,29.51,119.4,61.42,178.72,92.87,46.66,24.75,93.85,52.45,142.62,70.82,8.65,3.26,18.37,7.24,27.8,7.39,4.42.07,7.24-1.87,6.17-7.13-1.76-8.67-7.33-17.23-11.77-24.91-10.26-17.7-22.38-34.87-34.83-51.34q-6.68-8.82-13.24-17c-15-18.69-31-37.07-48.59-53.12a480.58,480.58,0,0,0-42.48-34.3c-68.72-49.43-143.18-92.06-221.88-121.58-42.69-16-87.89-29.2-134-32.72-41.46-3.17-84,3.68-124.2,12-45.4,9.37-90.79,22.12-135.93,33.83-75.9,19.71-153.87,39-232.93,38.58-37.61-.21-75.83-7.59-107.14-29.4-33.69-23.52-52.25-57.09-65.93-93.86C896.87,322.25,889,209.21,878,96.85,872.71,42.4,863.1-8.42,845-59.87c-12.75-36.08-27.37-72.13-45.17-105.7a472.39,472.39,0,0,0-42.71-66.15C716.05-285,662.32-329.48,603.66-360.51Z" fill="#3AADAA"/>
<path d="M674.23,37.79c-7.61,91.14-47.34,181.07-76.65,268.69-28.72,85.9-64.46,198.6-14.21,277C626.6,651,725.75,668,804.64,663c81.34-5.19,160.51-27.63,240-44.19,37-7.72,74.38-14.59,112.15-17.07,42.73-2.81,81.81,3.92,122.81,15.85,151.27,44.1,296.28,114.8,436.42,185.1,108,54.18,214.64,111.82,321.78,168.15,41,21.56,82,43.12,123.81,63.05,25,11.9,51.7,25.84,79.16,30.58,7,1.21,12.6.46,13.1-3.92,2.49-21.81-25-51.5-39.32-68.08-24.23-28-54.35-51.39-84.58-73.1-182.8-131.26-392.76-237.4-604.81-315.8-66.52-24.59-141.59-54.42-213.73-53.18-60.11,1-119.54,15.47-177.84,28.86C1007,608.35,780,661.93,728.17,502.63c-27.59-84.78-14.95-182.95-1.66-273.43C739,144.08,764.21,49.67,747.65-35.06c-13.18-67.48-58-133.93-102.42-185.87C593.85-281,527.33-328.63,455.78-362.11c-20-9.35-42.89-19.12-65.38-19.85-38.26-1.26-7,30,5.89,41,25.24,21.5,53.95,38.9,79.46,59.78,63.08,51.63,121.56,110.33,162.36,180.57C664.11-55.83,678.57-14.13,674.23,37.79Z" fill="#F6F6F6"/>
</g>
</svg>
<svg viewBox="0 0 1 1" id="preview" preserveAspectRatio="none">
<use xlink:href="#filterPath" fill="darkgrey"/>
</svg>
<image xlink:href="" clip-path="url(#clip-path)"/>
</svg>

After

Width:  |  Height:  |  Size: 17 KiB

@@ -0,0 +1,65 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
<defs>
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
<use xlink:href="#filterPath" fill="none"/>
</clipPath>
<clipPath id="pattern">
<path id="patternPath" d="M1287.58.7c82.33-12.93 80.89 155.17 144.44 337.64c62.1 182.47 189.2 379.3 164.65 554.59c-23.11 175.28-197.87 327.58-368.3 306c-169-20.12-332.2-214.08-564.74-274.42c-232.54-60.34-534.4 12.93-628.28-70.4c-93.88-84.77 18.78-324.71 122.77-508.62c104-182.47 199.32-307.46 316.31-287.35c117 18.68 257.09 181 410.19 165.23C1037.72 207.6 1205.26 13.63 1287.58.7Z">
<animate dur="30s" repeatCount="indefinite" attributeName="d" attributeType="XML"
values="
M1287.58.7c82.33-12.93 80.89 155.17 144.44 337.64c62.1 182.47 189.2 379.3 164.65 554.59c-23.11 175.28-197.87 327.58-368.3 306c-169-20.12-332.2-214.08-564.74-274.42c-232.54-60.34-534.4 12.93-628.28-70.4c-93.88-84.77 18.78-324.71 122.77-508.62c104-182.47 199.32-307.46 316.31-287.35c117 18.68 257.09 181 410.19 165.23C1037.72 207.6 1205.26 13.63 1287.58.7Z;
M1127.84 155.25c11 93-99.32 200.55 9.65 327.47c109 125.95 437.3 270.3 460.75 339.09c24.83 69.76-255.2 63-506.27 139.51C842.29 1037.86 618.81 1195.78 429.83 1190c-189-4.85-343.49-174.39-401.43-338.12C-30.92 688.11 7.71 530.19 133.24 444C258.77 357.81 469.83 343.21 605 265.7c133.81-77.51 191.75-218 285.55-249C985.75-15.26 1116.8 62.24 1127.84 155.25Z;
M1321.79,69.6c150.55,66.91,275,224.78,278.1,382.66,4.18,158.91-112.91,318.88-220.6,465.25-106.64,146.37-203.88,279.15-304.25,250.92-101.41-29.27-206-221.65-385.79-262.42-179.83-41.82-434.93,68-570.85,18.82C-18.56,874.64-35.29,666.59,60.9,539,156,411.48,364.1,365.48,509.42,297.52c144.28-68,225.83-157.87,355.48-214.33C993.49,25.69,1170.19,2.69,1321.79,69.6Z;
M1287.58.7c82.33-12.93 80.89 155.17 144.44 337.64c62.1 182.47 189.2 379.3 164.65 554.59c-23.11 175.28-197.87 327.58-368.3 306c-169-20.12-332.2-214.08-564.74-274.42c-232.54-60.34-534.4 12.93-628.28-70.4c-93.88-84.77 18.78-324.71 122.77-508.62c104-182.47 199.32-307.46 316.31-287.35c117 18.68 257.09 181 410.19 165.23C1037.72 207.6 1205.26 13.63 1287.58.7Z"/>
</path>
</clipPath>
<path id="filterPath" d="M.8278.3329c.0478.0914.0113.2242-.0422.3039c-.0535.0797-.1267.1092-.214.18c-.0873.0708-.1858.1889-.2872.183c-.1014-.0059-.2027-.1298-.2281-.2656c-.0254-.1358.0282-.2832.1183-.3835c.0901-.1003.2168-.1505.3463-.1505c.1295-.003.259.0442.3069.1327z"/>
</defs>
<svg preserveAspectRatio="none" viewBox="0 0 1600 1201">
<g clip-path="url(#pattern)">
<rect width="1600" height="1201" fill="#3AADAA"/>
<path d="M547.84,374.09c-.11-28.24-43.19-60-61.58-76.37C449.87,265.33,412,235.42,374.55,205s-75.08-60.69-110.82-94c-23.21-21.66-50.49-46-66.23-77C164-31.85,269.7-22.07,297.08-23.51c69.68-3.68,149.59-2,214.9-36.31,39-20.49,54.53-54.84,46.15-104.91-2.7-16.28-10.68-35-3.92-50.88,7.23-16.95,23.85-26.72,37.65-33.28,50.33-23.88,108.19-26.65,161.44-29.65,57.42-3.29,115.38-2.33,172.39-2.59,24.18-.1,49.43-10.7,72.45-19.32,30.18-11.29,60-24,89.93-36.24,65.85-26.92,133.7-55.26,203.36-62.1,43.63-4.28,91.31,1.51,125.2,38.76,17,18.7,25.92,46.51,35.76,71.21,11.91,29.84,23.35,60,36,89.34,40.85,94.59,99.15,187,193.8,191.68,14.31.7,28.38-1.58,42.63-2,9.07-.27,17.15,2.41,20.52,14,8.48,29.06-18.18,75-29.11,98-23.93,50.48-50.92,98.7-76.2,148.16-16.73,32.72-45.68,77.43-46,117.18-.27,35.41,38.32,61,59.33,78.45,19.69,16.34,55.36,39.19,57.52,72.42,1,16.11-7.65,29.46-16.74,39.82-15.93,18.12-34.29,30.9-48.62,51.58-23.5,33.91-43.13,80.58-39.94,126.29,2.21,31.66,17,52.4,35.85,72.23,7.91,8.33,14.34,14.23,14.75,27.76.68,21.49-6.22,44.23-11.9,64.16-20.32,71.3-49.19,140.24-81.29,204.62-16,32.17-33.38,64.24-54.66,91.69-13.93,18-32.72,39.46-54,39.44-24.61,0-50.65-10.84-74.57-18.94-44.67-15.15-88.8-32.66-132.76-50.62Q1094.58,1104.1,945,1031.66c-70.26-34.08-142-68.2-208.06-113.5a239.18,239.18,0,0,1-36.31-31c-12.05-12.29-27-17.8-42.15-21.9-94.05-25.46-197.1-5.91-291.54,6.34-24,3.11-47.95,6.23-72,8.41-20.67,1.86-45.41,7.23-65.49-.83-39.58-15.85-5-74.29,9.65-98.1C290.57,697.26,357,626.33,418.6,553.92c29.28-34.49,58.79-68.89,86.48-105.32C519.5,429.65,547.93,398.85,547.84,374.09Z" fill="none" stroke="#F6F6F6" stroke-miterlimit="10" stroke-width="5"/>
<path d="M565.58,369.33c-15.78-29.88-43.48-52-66.47-72.76-33.08-29.93-67.2-58.19-100.82-87.27-31.78-27.49-63.62-55.3-93.06-86.53-17.94-19-40.46-41.82-49-70C237.83-8.25,337,1,361.52-.59c60.88-3.95,129.9-4.86,186.23-37,35.17-20.07,49.62-53.35,42.11-99.56-2.59-16-7.26-29.64-1.35-45.55,6.84-18.41,22.57-29.88,37-38,45.17-25.38,98.57-30.78,147.54-35.26,50.6-4.64,103.31-7.91,152.27-4.52,19.58,1.35,42.12-6.31,61.5-12.19,29.81-9.05,59.32-19.5,89-29.22,60.3-19.75,122.16-38.79,184.88-40.95,45.28-1.57,92.5,6.91,130.18,39.69,38.18,33.23,55.12,84.75,76.29,133.73,36.57,84.67,86,187.62,170.56,205.51,12.83,2.72,25.16,1.24,38,1.91,6.59.34,14.09,1.41,17.43,9.34,8.68,20.58-15.09,58.21-23.09,74-22.11,43.56-47,85-70.13,127.73-18.4,33.92-41.72,71.62-48.83,111.84-8.64,48.8,47.78,83.53,67.63,117.89,34.4,59.59-30.78,93.54-62.91,122-36.9,32.62-67.35,92.13-34.28,142.59,12.66,19.3,28.23,30.8,33.88,56,8.83,39.39,2.15,84.4-5,123.33-10.8,58.53-27.9,116.42-51.14,169.31-16.65,37.87-44.27,97.26-84.72,92.8-27.23-3-54.91-13.83-81.43-23.43-39.7-14.36-78.9-30.74-117.89-47.75-90-39.15-179-82.32-266.29-129.81C889.35,951.36,723.26,818.9,710.76,814.18c-37.26-14.08-79.63-11.6-118-9.42-51.1,2.9-102,10.4-152.76,17.36-24.18,3.29-48.49,7.32-72.8,8.94-17.31,1.15-40,2.14-55.19-10.13C282.37,797,315.34,742.18,329,719c41.76-71.08,94.58-132.62,144.11-195.55,24.31-30.9,49-61.75,71.05-95.12C553,414.85,575.34,387.79,565.58,369.33Z" fill="none" stroke="#F6F6F6" stroke-miterlimit="10" stroke-width="5"/>
<path d="M587.42,354c-43.11-59.8-102.61-104.28-154-154.22-25.78-25.08-51.71-50.84-73.94-80.7-11.57-15.54-26-35.18-28.24-56.83C325.33,4.34,414.74,12.17,441.5,10c51.74-4.27,110.18-7.5,157.12-37.06,28.68-18.07,42.8-47.72,37.44-86.7-2.37-17.29-6.07-32,0-49,6.16-17.2,19-29.34,32-38.44,37.33-26.17,83.71-34.54,125.74-40.77a832.86,832.86,0,0,1,148.6-8.49c43.48,1.4,86.75-14.26,129.2-24.58,56.23-13.66,113.48-25.59,171-23.79,45.44,1.43,91.25,12.69,130.1,42.61,39.48,30.47,63.21,76.07,84.61,125.29C1489.66-56.53,1530,43.16,1601,71.42c10.32,4.12,19.94,4.57,30.59,5.29,5.17.34,11.85.45,14.41,7,6.17,15.84-16.64,46.56-23,57.26-20.32,34.18-42.34,66.82-63.17,100.54-19.44,31.48-40.62,64.29-52.7,101.18-19.22,58.76,42.23,93.11,40.51,149.1-1.07,34.76-28.35,59.69-50,76.94-26.6,21.2-64.89,35.14-78.21,73.84-9.91,28.82,5.65,45.6,17.63,67.47,20.31,37.06,21.69,87.29,19.58,130.19-2.85,58-14,116.79-32.93,170.07-8.59,24.15-19.11,49.27-34.59,68-14.51,17.59-28.24,22.09-47.63,18.49-59.35-11-119.28-41.79-176.2-69.26-71.51-34.52-142-72.64-210.45-115.52-46.66-29.24-94.37-60.18-135.32-100.58-10.67-10.53-21.6-22-29.4-35.87-5.9-10.44-8.41-19.06-18.35-25-29.48-17.66-70.47-13-102-11.2-50.5,2.92-100.75,10.7-150.94,17.71-29.28,4.12-84.45,17.07-107.84-14-20.18-26.83,4.18-72.58,16.62-96.21C459,587.12,499.49,534.66,537.06,480.65c17.21-24.75,35.1-49.7,49.32-77.22,3.63-7,9.45-16.31,10.45-24.84C598,368.83,592.72,361.37,587.42,354Z" fill="none" stroke="#F6F6F6" stroke-miterlimit="10" stroke-width="5"/>
<path d="M591.13,367.93c-39.84-52.88-87.83-96.32-130.59-145.8-19.18-22.19-38.54-45.46-53.15-72.53-7.86-14.55-16.21-32.87-14-51,6.22-51.92,79.75-47.23,109.46-50.27,44.14-4.47,94.86-9,133.89-37C662.27-6.93,671.85-34,667.08-68.94c-5.12-37.47,6.33-64.66,32.41-85.56,32.69-26.19,74-36.86,111.92-44.44a633.35,633.35,0,0,1,138.37-12c45.05,1,88.71-8.16,133.46-14.15,59.35-7.94,120.59-11.85,179.26,4.42,51.09,14.16,97.23,45.38,131.82,93.66,36.13,50.39,54,113.87,83.35,169.61,18.3,34.78,43.81,80.77,78,94.29,11.4,4.5,32.18-1.58,23.07,20.6-5.2,12.68-15,23.81-22.64,34.18-12.44,16.75-25.29,33-37.93,49.57-27,35.22-55.82,71.19-76,112.9-25.46,52.52,12.38,92.93,7.77,146.18-2.48,28.66-18.81,51.53-36.08,69.49-11.17,11.64-23.4,21.72-35.88,31.12-13,9.83-28.47,17.31-39.84,30-16.2,18.07-9.17,39.47-6.13,62.83a615.7,615.7,0,0,1,3.5,124.18c-3.7,50.76-12.38,103-30.65,149.1-7.11,18-16.12,37-29.5,49s-27.21,11.22-42.53,7.59c-45.46-10.71-90.83-35.64-134-59.27-54-29.58-106.89-62.63-157.42-100.24-34.88-26-69.88-54-99.06-89.2-8.48-10.25-16.56-21.22-23.09-33.46-4.48-8.4-6.89-19.24-13.38-25.55-20.32-19.71-61.13-13.82-85-12.68-47.57,2.29-94.38,13.14-141.89,15.78-25.93,1.44-66.53,5.07-85.57-21.88-17.91-25.32-1.69-65.21,9-89.61,21-48,49.29-90.73,74.62-135.33,10.41-18.36,21.82-37.56,28.56-58.52C611.69,395,601.34,381.48,591.13,367.93Z" fill="none" stroke="#F6F6F6" stroke-miterlimit="10" stroke-width="5"/>
<path d="M600.93,368.79C569.22,322.26,531,281,499.06,233.67c-18.7-27.69-50.89-74.25-36.43-113.29,15.86-42.9,71.14-44.07,103.1-47.52,38-4.12,82.71-9.74,115.26-36.53,10.29-8.47,19.06-19.67,22.78-34.44,4-15.8-.37-29.62-.94-45.44-1.19-33.18,15-59.82,36.53-78.12,30.36-25.86,68.32-38.09,104.17-46.62a524.16,524.16,0,0,1,123.31-14.15c39.55.16,78.67-.91,118.26-2.14,51.77-1.65,104.27,1,154.49,17.79,49.48,16.54,94.45,47.54,129.78,93.14,34.47,44.5,57.73,98.89,78.09,154.29,11.56,31.45,31.08,78.44,58.65,94.32,12.26,7.07,24.29,6.58,11.25,25-16.41,23.15-38.53,41.72-57.54,61.52-27.43,28.58-55.54,57.71-78.56,91.68C1366.56,374.82,1360,395.87,1361,424c.79,21.4,4.33,42.57,2.54,64.05-4.2,50.42-36.74,85-65.51,117.18-18.5,20.71-35.4,36.5-44.93,65.95-11.27,34.81-16,72.69-23.52,108.83-8.27,39.69-17.83,81-35.88,115.94C1177.65,927,1158.1,941,1128.85,932.6c-45.62-13.06-90.59-45.26-131.1-75-41.23-30.3-81.75-64.37-115.91-106-18.44-22.49-31-48.9-47.41-73.06-20.61-30.34-67.22-18.85-94.92-16.28-46,4.26-190.67,36.16-177.32-67.16,5.57-43.12,27.52-82.92,43.57-121,6.65-15.79,16.28-34.74,17.78-52.84C625.18,401.52,610.46,382.8,600.93,368.79Z" fill="none" stroke="#F6F6F6" stroke-miterlimit="10" stroke-width="5"/>
<path d="M617.67,372.74c-24.23-42.16-53.23-82-74-127.54-13.49-29.49-26.73-68.9-9.34-100.11,19.64-35.21,63-43.42,94.76-47.91C661.85,92.56,701,88.67,727.78,62c8.53-8.5,15.55-20,16.86-33.71,1.26-13.17-2.3-26.35-1.12-39.76,2.65-30.12,17.61-54.93,36.9-72.93,57.08-53.25,142-65.09,210.88-66.48,34.47-.7,69.94,2.94,104.63,5.54,45,3.37,90.1,10.62,133,28.08,91.28,37.12,152.46,119.44,195.19,221.88,13.45,32.24,23.74,67.13,44.81,93,10.87,13.38,8.49,23-2.61,35.19-17.37,19.07-38.55,33.65-57.82,49.56-27.42,22.64-55.42,45.61-79.66,72.72-16.71,18.7-28.58,36.7-32.18,64.73-2.57,20-2,40.35-3.51,60.45-2.94,38.2-13,76.11-30.83,107.79-14.17,25.12-31,47.94-48.45,69.7a525.68,525.68,0,0,0-59,90.75C1132.08,793,1100,875.14,1046.31,853.41c-59.25-24-114.79-84.9-152.8-143.93-12.77-19.82-23.25-44.13-40.47-58.74-25.77-21.84-51.93-21.08-82.58-21-45.9.13-145.78,12.29-146.86-71.63-.42-33.25,11.37-64.69,17-96.67C647,425.64,634.22,401.48,617.67,372.74Z" fill="none" stroke="#F6F6F6" stroke-miterlimit="10" stroke-width="5"/>
<path d="M635.72,376.5c-24-54.95-77.72-145.26-36.84-206.37,21.59-32.29,59.78-44.43,91.82-51.66,25.78-5.85,56.88-8,76.36-32.85,14.32-18.23,8-44.77,13.45-67.59,6.8-28.3,22.43-51.45,41.63-68.85,53.67-48.64,128.28-63.57,192.84-66.74,67-3.29,140.91,12.1,204,41.71C1297.65-38.91,1356.58,31,1397.79,119.6c7.61,16.34,14.52,33.12,21.82,49.67,4.9,11.1,12.18,21.84,16,33.51,6.44,19.47-1.14,35.38-13.3,48.07-17.49,18.27-39,31.27-58.92,45-27.26,18.76-55.14,37.19-80.5,59.2-17,14.81-34.89,30.76-41,56.46-4.16,17.52-5,36.09-4.87,54.24.32,38.92-1.35,70.39-16.24,106-24.49,58.52-62.16,111.14-101.95,154.92-31.23,34.36-80.64,87.74-126.14,64.76-40.82-20.57-64.7-69.8-91.59-109.61-13.08-19.35-27.77-37-45-50.79-21.76-17.36-42.25-24.64-68-27.48-43.39-4.78-108.83-6-122.24-69.54-5-23.44-2.12-47.72-4.72-71.47C657.73,431.14,647.81,404.22,635.72,376.5Z" fill="none" stroke="#F6F6F6" stroke-miterlimit="10" stroke-width="5"/>
<path d="M660.64,378.54c-17.07-60.14-39.49-135.92,1.73-189.36,20-25.89,48-40.36,75.23-51.18,19.47-7.75,50.38-10,62.32-33.86,8.76-17.54,10-41.73,17.91-60.52A172.24,172.24,0,0,1,864.6-20.15c50.45-43.4,116.16-60.17,176.09-65C1170.9-95.54,1303.39-12.55,1373.07,124c20.77,40.7,47.59,84,14,125.6-36.66,45.36-91.88,66.61-135.63,98.85-16.72,12.3-38,27.1-47.34,49.38-5.61,13.39-6,30.2-6.25,44.94-.68,37.55-3.23,71.33-15.61,106.37-19.11,54.15-49.58,104.11-84.11,145-30.12,35.68-73.06,77.62-116.8,51.9-33.53-19.77-54.8-61.73-80.86-92.66-29-34.45-64.85-57.67-104.23-69-38.31-11-80.33-18.42-100.52-65.18-6.92-16-14.16-36.8-16.75-54.55a646.83,646.83,0,0,0-18.35-86.12Z" fill="none" stroke="#F6F6F6" stroke-miterlimit="10" stroke-width="5"/>
<path d="M688.43,379c-7.9-60.72-8.78-124,27.91-171.89,17.12-22.33,38.76-38.19,60.65-52.56,16.1-10.57,32.73-19.49,44.75-36.83,11.14-16.05,19.61-34.69,30.37-51.16a235.39,235.39,0,0,1,50.28-56c47.92-38.12,106.2-55.95,162-62.14,27-3,56.28-4.57,83.09,3.63,25.89,7.9,51.5,20.41,75.31,35,50.61,31,94.47,76.3,126.27,133.62,21.81,39.31,33.6,77.54,5.36,117.42-31.83,45-81.74,69.77-122.88,98.95-28.22,20-59.84,39.63-65.11,82.15-4.2,33.84-7.61,66-18.46,97.95C1131.77,564.3,1108,607,1078.05,642.8c-27.39,32.58-62,60.23-101.22,42.82-31.05-13.81-55.13-44.75-82.25-66.87-30.23-24.7-63.44-38.33-98.41-49.28-31.43-9.88-61-25.07-81.33-57.31A161.23,161.23,0,0,1,703.11,491c-4.09-9.41-3.77-18.73-4.57-29.27C696.44,433.94,692,406.44,688.43,379Z" fill="none" stroke="#F6F6F6" stroke-miterlimit="10" stroke-width="5"/>
<path d="M719.07,374c.67-57.68,12-112.19,43.17-157.13,13.3-19.23,29.2-35.07,43.84-52.69,11.79-14.2,22.93-27.4,36.49-39.11,32.16-27.71,58.3-63.58,92.48-88.26,45.62-33,97.89-51.23,149.74-58.52,25.33-3.57,51.48-4.81,77.1-.79,22,3.46,43.08,15.59,62.63,28,38.31,24.32,75.51,58.88,100.39,102.6,54.84,96.41-53.29,166.5-108.79,207.54-25.53,18.88-64.53,40.75-75,78.15-7.48,26.72-12,53.89-21.65,79.78C1093.63,543.12,1041.15,624.91,971.2,614c-29.92-4.65-57.2-23.55-85.14-36.24-28.77-13.06-58.46-20.35-88.36-28.34-28-7.47-50.22-18.09-68.27-46.57-8.63-13.61-7.87-29.89-8.64-46.58C719.54,428.88,718.76,401.32,719.07,374Z" fill="none" stroke="#F6F6F6" stroke-miterlimit="10" stroke-width="5"/>
<path d="M747,366.61c11.23-87.06,53-182.1,114.33-232.65C933.48,74.48,1011.67,24.4,1097.91,10c40-6.68,83.79-10,121.51,11.87,28.72,16.6,62.07,41.42,77.87,76.32C1336,183.57,1250,251.53,1201,291c-26.38,21.26-60,42-79.83,73-11.54,18-17.43,41.81-26.74,61.59-28.22,59.91-74.67,108.24-132.53,116.88-26.76,4-53.71-.94-80.26-4.87-27.18-4-54.7-6.2-81.71-11.8-21.56-4.48-47-12.06-54.91-40.22C735,450.14,742.38,402.16,747,366.61Z" fill="none" stroke="#F6F6F6" stroke-miterlimit="10" stroke-width="5"/>
<path d="M774.32,352.62c16.39-81.84,51.09-161.68,109.43-210.54,30.94-25.91,66.85-43.8,101.33-61.47,39.08-20,79.92-35.57,121.62-43.28,51.93-9.61,136-18.26,163.16,53.94,26.93,71.68-41.11,135.11-81.35,171.26-25.8,23.16-53.41,44.41-78.06,69.73-13.37,13.72-23.66,29.58-35,45.68-31.26,44.6-75.83,79.91-121.26,98.76-44,18.27-98.48,26.36-145,20.32-20-2.59-34.38-11.35-40.45-36.24C760.41,426.17,767.55,386.43,774.32,352.62Z" fill="none" stroke="#F6F6F6" stroke-miterlimit="10" stroke-width="5"/>
<path d="M801.51,330.58c16.28-72.06,51.39-137.88,102.61-181.13C961.54,101,1035.47,74,1103.42,60.32c36.12-7.28,114.39-27,132.8,29.46s-34.81,112.11-65.44,142.75c-37.18,37.12-77.26,73-117.3,106.27-34.78,29-71.9,58.57-109.58,80.93a358.64,358.64,0,0,1-66.14,31c-16.85,5.8-38.28,14.47-56,10.14C777.24,449.91,793.72,365,801.51,330.58Z" fill="none" stroke="#F6F6F6" stroke-miterlimit="10" stroke-width="5"/>
<path d="M835.07,309C870.79,172.72,984,105.7,1092.92,82.33c25.33-5.42,96.31-25,110.46,16.66,13.72,40.36-29.9,88.23-50.32,110.91-63.28,70.27-141.46,122.38-215.54,174C914.39,400,872.69,435,844,418.85,812.86,401.3,827.67,337.26,835.07,309Z" fill="none" stroke="#F6F6F6" stroke-miterlimit="10" stroke-width="5"/>
<path d="M871.66,282.77c31.06-100.36,121.41-157.92,204.48-176.9,20.35-4.64,72-19.09,87.43,8.91,14.26,25.91-19.77,63.45-32.5,78.37-28.35,33.21-61.94,60.58-95.13,86.88-30.68,24.33-61.7,49.28-94,69.86-17,10.83-48.9,33.95-68.23,17.22C852.92,349.11,864.76,305.06,871.66,282.77Z" fill="none" stroke="#F6F6F6" stroke-miterlimit="10" stroke-width="5"/>
<path d="M912,253.45c23.68-65.54,87.09-108.1,143-122.24,15-3.8,47.58-13.65,60.28,3.85,11.69,16.12-7.15,39.75-15.51,50.67-37.06,48.37-91.32,91.58-141,118.12-12.5,6.67-35,19.77-47.83,6.3C897.7,296.32,906.54,268.5,912,253.45Z" fill="none" stroke="#F6F6F6" stroke-miterlimit="10" stroke-width="5"/>
<path d="M954.75,225.92c13.34-32.55,48.21-57.1,77.09-64.92,20.33-5.49,44.76-.74,27.05,27.58-17.6,28.12-50.26,53.79-77.93,65.18C959.84,262.44,943.29,253.87,954.75,225.92Z" fill="none" stroke="#F6F6F6" stroke-miterlimit="10" stroke-width="5"/>
<path d="M-127.15,451.32C-128,387-156,320.21-142.17,254.69c11.35-53.8,68.51-58.3,102.79-82.67,27.25-19.37,42.71-53.68,57.45-86.59,13.24-29.56,25.13-60,39.08-89.06,9-18.79,24.53-55.69,44.11-56.36,18.74-.64,35.93,28.11,46.82,45.11,14.19,22.16,26.78,45.78,40.57,68.29,23.23,38,51.1,66.07,83,92.67q54.48,45.39,110.76,87.69c27.62,20.82,55.43,41.49,82,64.37,16.65,14.36,53.41,41.29,53.58,67.76.08,12.63-9.72,26.62-16.33,36.71-11.19,17.09-23.93,32.71-36.72,48-23.82,28.47-48.65,55.65-73.21,83.17-31.87,35.7-62.32,70.82-90.34,111.36-29,42-56.65,85.3-84.89,128.05-19.13,29-38.24,61.48-65.83,79.25-34.56,22.21-62.92-1.21-97.87-1.48C22.75,850.72,25,765.68,21.14,742c-3.83-23.93-12.28-46.21-15.56-70.2C1.5,641.89,1.45,611.25.44,581c-1.22-37-1.7-72.26-34.12-86.38-18.44-8-38.4-9.71-57.49-14.51C-103.54,477-126.88,471.64-127.15,451.32Z" fill="none" stroke="#F6F6F6" stroke-miterlimit="10" stroke-width="5"/>
<path d="M-112.37,439.89c-3.15-53.9-21.76-122.88-4.16-178.52,15-47.54,62.08-53.7,93.75-78.68C3.37,162.09,15,128.39,28.08,95.27c10.49-26.56,20.66-53.38,32.56-79.1,8.77-19,22.17-50.95,40.41-54.87C117.44-42.22,135-14,144.23.39c13.43,21,24.92,43.76,36.78,66.07,20.84,39.18,42.19,74.41,72.69,103.19s64.17,50.52,98.05,73c26.5,17.6,52.87,35.71,78.06,56,18.76,15.13,45.73,34.49,54.31,61.47,6.79,21.34-27.67,56.75-37.83,69.25-20.92,25.7-43.08,49.83-65.29,73.81-27.07,29.21-55,54.76-78.92,88.09-42.76,59.59-78.5,133.8-133.52,178.09-33.19,26.71-70.12,33.54-107,29.54-14.61-1.58-18.12-26.77-20-41.46-3.06-24.4-3.44-49.23-5.8-73.73-2.21-22.94-7.1-44.74-11-67.23-4-22.79-5.12-46.14-8.06-69.09C14.83,533.18,13,516.6,5.06,505.15c-8.25-11.85-21.85-16.82-33.74-20.6C-51,477.53-110.14,477.92-112.37,439.89Z" fill="none" stroke="#F6F6F6" stroke-miterlimit="10" stroke-width="5"/>
<path d="M-93.34,417.32c-5.3-49.47-12.72-111.09,8.87-156.67,17.64-37.26,55.28-45.3,82.17-69.59,22.36-20.19,30.8-52.31,41.9-82.15,9.11-24.49,18.26-49.07,29.3-72.37,8.37-17.67,19.16-41.62,35.78-47.78C118.89-16.51,135,7.08,142.83,18.82c13.41,20,24.35,42.44,35.21,64.57,17.77,36.2,34.12,74.88,59.41,104.33C262,216.3,291.22,233.17,321,252.14c22.77,14.53,45.41,29.62,66.87,46.95,16.48,13.3,36.9,29.06,45.49,51.19,7.43,19.08-11.64,41.67-21.16,55.13C396.43,427.63,379,448,361.75,468.47c-18.58,22.08-39.15,42.45-57.13,65.07-37.81,47.6-68,100.31-114.61,136.78C159.83,694,119.22,715.41,83.55,711.55c-25.65-2.78-24-72.09-26.43-94.23-4-36.21-11.88-74.25-24.31-107.6-10.67-28.58-36-37.39-59.36-43.8-14.62-4-29.94-6.2-44.08-12.42C-87,446.29-91.12,438.06-93.34,417.32Z" fill="none" stroke="#F6F6F6" stroke-miterlimit="10" stroke-width="5"/>
<path d="M-75.6,394.13c-3.16-41.82-2.45-91.28,18-127.46,17.92-31.69,49.81-40,72.49-65,17.7-19.48,24.66-51.24,34.18-77C60.69,93.18,77,35,106.35,23.16c27.3-11,55.86,59.37,65.74,80.35,15.65,33.22,28.74,69.65,47.72,100.33,16.35,26.41,38.25,41,61.49,56.7,29.63,20,74.63,43.79,90.47,82.85,11.81,29.1-26.59,72.36-39.71,92.52-13.71,21.06-24,46-38.2,66.35-22.34,32.06-58.54,57.88-88.42,77.58C176.38,599,138.65,620.21,105.69,619c-21.66-.83-25.78-41.66-30.4-61.61C68.67,529,59.86,503.57,41,484.28,21.7,464.65-1,455.4-24.84,447.3-37.09,443.17-51,440-62,431.62-74.11,422.55-74.38,410.21-75.6,394.13Z" fill="none" stroke="#F6F6F6" stroke-miterlimit="10" stroke-width="5"/>
<path d="M-54,370c.17-36.14,6.94-74.67,27-102.54,16.72-23.22,42.88-31,58.89-54.72C44.59,194,51,167.61,59.53,145.79c10.38-26.74,25-73.46,50.86-82.74,25.19-9,47.47,42.42,57.13,62.78,14.14,29.85,25.59,61.49,39.86,91.26,11.18,23.36,24.86,38.41,43.06,53.47,21.37,17.68,51.19,37.27,62.6,66.52,8.23,21.18-11.69,55-18.92,73.68-4.85,12.53-9.29,25.26-11.73,38.84-1.9,10.58-2.09,20.37-7.59,29.45C261,501.9,230.57,504.88,210,512.41c-27.37,10-56.41,21.36-85.05,23.52-17.61,1.36-26.59-18.44-36.64-32.37-11.88-16.47-28.69-28.31-43.37-40.73C25.52,446.4,4.44,436.19-17.38,425.72c-9.84-4.72-21.39-9.35-29-18.74C-54.36,397.25-54,383.07-54,370Z" fill="none" stroke="#F6F6F6" stroke-miterlimit="10" stroke-width="5"/>
<path d="M-31.28,348.57c3.48-30.34,14.32-59.35,32.64-80.8C15.39,251.3,34,242,45.3,222.23c10.5-18.45,17.81-39.42,26.48-59.15,9.18-20.85,22.81-55.7,44-61.38,22.81-6.11,40.38,29.05,50.11,48.54,12.29,24.62,21.62,51.11,32.61,76.59a218.07,218.07,0,0,0,31.33,51.51c13.1,16,30.87,31.3,37.49,53.28,5.86,19.47-5.1,43-7,62.76-2.07,21.09,1.55,43.25-9.92,61.36-23.66,37.35-83.05,30.42-117,31.22-33.5.82-60.43-22-87.54-43.77C27.88,428.83,9.24,416.68-9.12,403.3-27.84,389.65-34.34,375.28-31.28,348.57Z" fill="none" stroke="#F6F6F6" stroke-miterlimit="10" stroke-width="5"/>
<path d="M-10.18,331.2c10.29-44,42.42-67.33,65.39-100.55,18.79-27.21,32.89-83.54,64.54-91,35.93-8.45,57.45,66.18,69.94,95,13.86,31.94,38.55,57.92,48.82,91.73,5.4,17.75.76,34.31-2.11,52.05-3.15,19.48-5.52,39.39-16.39,55.07C198.6,464.34,156.8,464.12,126.69,465c-31.17.89-58.74-20.26-83.57-41.36C16.78,401.27-20.72,376.29-10.18,331.2Z" fill="none" stroke="#F6F6F6" stroke-miterlimit="10" stroke-width="5"/>
<path d="M7.05,319.28C18.64,288,43,262.49,62.77,238.45c16.5-20,34.25-60.39,59.4-63.26,29.57-3.39,47.48,39.69,59.12,66.11,11.45,25.95,28,53.36,34.28,81.85,6.62,29.68-11,69.65-27.78,90.65-18.73,23.41-49.37,32.07-75.65,31.13-27.53-.95-52.79-20.3-73.63-40.38C16.22,383.09-6.43,355.65,7.05,319.28Z" fill="none" stroke="#F6F6F6" stroke-miterlimit="10" stroke-width="5"/>
<path d="M23,313.39c11.07-26.06,30.27-48.1,48-67.76,13.66-15.17,33.81-41,53.52-41.61,21.68-.7,40.05,21,48.66,43.16,8.5,21.9,17.45,49.36,18.72,73.39,2.76,52.32-53.46,110.93-95.68,106.16C56.2,422.2,1,365.3,23,313.39Z" fill="none" stroke="#F6F6F6" stroke-miterlimit="10" stroke-width="5"/>
<path d="M37.83,310.51C53.1,276.57,90.21,228.17,124.56,227c39.43-1.31,49.33,52.54,44.19,91.57-5.22,39.83-50.68,97.49-86.93,89.7C46.44,400.68,19.72,350.77,37.83,310.51Z" fill="none" stroke="#F6F6F6" stroke-miterlimit="10" stroke-width="5"/>
<path d="M53.44,305C66.37,276.6,94,241.1,122.76,240c34.29-1.28,33.65,44.19,25.87,72.49-8.09,29.38-43.71,79.57-73.74,71.64C45.69,376.43,41,332.26,53.44,305Z" fill="none" stroke="#F6F6F6" stroke-miterlimit="10" stroke-width="5"/>
<path d="M67,301.75c8.53-20.28,29.9-45.91,50.21-46.73,24.83-1,20,35.08,13.59,52.48-7.63,20.71-33.18,56.7-54.63,50.87C55.09,352.63,60,318.46,67,301.75Z" fill="none" stroke="#F6F6F6" stroke-miterlimit="10" stroke-width="5"/>
<path d="M1234.93,1460.51c-55,40.69-117.07,74.27-175.65,108.41-85.61,49.88-172.48,98.42-262.43,135.58-48.23,19.92-110.72,48.64-162.47,33-18.92-5.7-36.17-23-53.14-34.16-23.39-15.46-47.12-30.15-70.82-44.87-47.53-29.52-95.21-58.73-141.93-90.14-22.49-15.12-44.32-34.18-67.74-47.08-13.68-7.55-30.06-4-44.68-3.54-33.88,1.11-67.73,3.22-101.58,5-41.41,2.19-82.91,4.52-124.37,3.66-18.7-.4-64.49,3.65-74.78-16-5.54-10.59,7.51-29.67,13.56-38.5,11.11-16.23,23.88-30.86,36.48-45.34,29.14-33.48,60.08-65.36,86-102.76,13.3-19.22,30.74-42.71,22-69-8.77-26.5-24-49.46-33.22-75.88-10.68-30.4-15.1-62-20.14-94.27-3.73-23.83-12.42-44.94-20.58-66.9-9-24.28-18.38-48.77-24.64-74.37-4.15-16.91-10.83-47.34,3.66-58,20.58-15.22,59.19-2.89,82.65,1.59,32.43,6.19,64.63,14.07,97,20.86,23.48,4.94,47,10.36,70.91,10.93,38.48.93,77.09-2.28,115.47-5.28,71.06-5.55,141.62-13.07,212.92-13.07,62.48,0,206.84,88.2,240.63,103.73,67.45,31,136.7,60.39,200.53,101.64,17.26,11.17,43.84,26,52.92,49,5.61,14.16,3,22.35,16.25,31.48,18,12.45,41.15,17.34,61.11,22.91,32.16,9,64.56,16.57,96.86,24.69,65.33,16.39,130.22,34.92,195.28,52.76,19.67,5.39,43.47,6.58,62.22,16.08,12.09,6.1,10.83,13.77,1.48,23-16.41,16.26-39.41,25.29-58.8,34.57-28.4,13.58-57.27,25.71-86.15,37.66s-57.92,23.53-86.81,35.5C1273.85,1441.4,1252.08,1447.81,1234.93,1460.51Z" fill="none" stroke="#F6F6F6" stroke-miterlimit="10" stroke-width="5"/>
<path d="M1189.71,1451.56c-58.13,40.77-122.65,73.25-184.85,104.94-79.61,40.58-161,78.62-244.9,104-49.25,14.88-107.36,31.32-157.68,14.25-17.95-6.09-31.36-19.78-46.75-31.87-17.54-13.78-35.76-26.42-54-38.86q-56.25-38.4-113.68-74.17c-20.28-12.69-42.61-29.67-65.52-34.07-18.21-3.51-38.9,1.56-57.2,3-33,2.65-65.89,5.39-98.86,7.71-38,2.68-76.18,5.15-114.3,4.72-21.24-.24-57.71,3.71-72.74-13-13.1-14.62,34.62-67.5,43-77.55,26.21-31.37,53.78-61.24,78.17-94.78,14.42-19.78,32-43.84,38.05-70.06,5.18-22.34-4.81-47.8-10.7-68.45-7.38-25.87-13.33-52.69-21.89-78-7.63-22.57-19.78-42.67-30.44-63.18-11.74-22.57-23.62-45.51-32.33-70.12-5.33-15.15-14.16-40.52-3.56-55,12.25-16.65,50-5.77,65.54-3.4,31.5,4.88,62.75,12.14,94,18.63,52,10.78,101.48,20.21,154.37,18,68.89-3,137.71-9.89,206.59-13.73,25.43-1.43,51.27-4.32,76.73-2.76,14.59.9,25.7,6.34,34.19,18.61,11.59,16.75,38.28,26,56.85,35.63,28.95,15,58.26,28.9,87.5,43,64.17,31,129.57,60.86,190.43,100.94,19.26,12.68,41.31,26.81,55.55,47.75,8,11.68,5.94,22.93,10.79,35.34,6.43,16.33,27.54,23.7,40.16,29,24.37,10.32,49.73,17.23,74.89,23.71,56.94,14.66,114,24.29,171.88,31.39,13.56,1.65,67,7.36,38.91,34.88-31,30.43-75.72,45.34-112.2,62.48C1252.91,1416,1220,1430.3,1189.71,1451.56Z" fill="none" stroke="#F6F6F6" stroke-miterlimit="10" stroke-width="5"/>
<path d="M1109.38,1444c-54.64,35.87-115.17,62.63-174,88.23-71.41,31.06-144.61,58.75-219.5,74.26-47,9.74-98.91,17.22-145.64,1-31.91-11-56.6-40.9-84.63-61.44s-57.19-39.82-87.22-55.89c-18.64-10-38.69-20-59.43-18.7-50.43,3.19-100.8,10.8-151.29,14.5-33.39,2.47-66.86,4.5-100.36,3.89-20.2-.36-47.95,1.12-65.83-11.85C1.7,1463.72,107,1341.25,116.9,1327.47c24.95-34.56,55.15-80.43,50.33-129.58-4.62-47-24.61-82.07-47.22-118.88-12.83-21-54-76.89-38.73-104.13,8.71-15.57,37.43-10.18,51.07-9.12,26.89,2.09,53.62,6.58,80.37,10.48,39,5.66,79.06,14.39,118.23,17,27.27,1.78,54.71-.6,82-.65,39.18-.07,78.35.29,117.52.72,32.89.36,66.06,0,98.83,3.85,20.38,2.37,35.85,7.7,50.46,22.74,12.72,13.08,31.91,20.74,48.11,29.06,26.78,13.74,53.9,26.47,80.93,39.4,56.61,27.09,113.86,53.62,168,87.47,24.73,15.44,66.31,37.07,72.11,74.52,2.1,13.5,3.64,19.34,14.44,27,15.34,10.89,33.71,15.8,50.92,20.07,40.12,10,81.4,8.47,121.45,18.31,16.31,4.06,37.6,12.82,19,32.86-21.73,23.45-53.35,36.33-79.38,50.81-13,7.23-26.38,14-38.72,22.82C1127.18,1429,1119.07,1437.7,1109.38,1444Z" fill="none" stroke="#F6F6F6" stroke-miterlimit="10" stroke-width="5"/>
<path d="M1005.89,1432.82c-50.47,29.13-105.3,50.31-159.13,69.41-59.8,21.18-121,38.73-183.09,46.19-42.85,5.17-88.5,6.7-130.08-9.13-26.3-10-44.13-31.07-66.76-48.73-34.15-26.7-71.1-47.84-112.14-42.7q-69,8.64-138.45,13c-27.93,1.74-56,3-83.93,1.83-17.68-.76-40.46-2-55.84-11.81-20.58-13.09,56.72-112.7,66.36-127.22,23.89-36,41.41-73.78,51.65-118.39,8.35-36.4-8.71-65-26.3-92.24-10.94-16.91-46.28-59.44-35.21-81.4,6.07-12.11,26.07-11.48,36.81-12.1,20.47-1.17,41,0,61.5.59,30.23.82,62.41-4.85,92.38-.28,66.43,10.09,132.69,18.84,199.52,25.76,36.85,3.81,73.91,7.27,110.43,14.62,13.11,2.64,26.65,5.44,39.07,11.41,8,3.83,12.34,10.37,19.09,15.73,32.15,25.52,74.12,38.65,110.33,55,48.14,21.74,96.53,43.15,143.39,68.83,24.65,13.51,59.07,29,76,56.61,5.12,8.33,2.94,15,6.16,23,3.71,9.24,15,12,22.25,14.56,16.52,5.85,85.64,14.69,53.79,49-15.2,16.34-34.57,26.82-51.7,39.67-6.21,4.65-12.26,9.33-17.43,15.6C1025.94,1420.14,1017.42,1426.14,1005.89,1432.82Z" fill="none" stroke="#F6F6F6" stroke-miterlimit="10" stroke-width="5"/>
<path d="M895.63,1420.2c-99.65,47.14-216.44,79.25-325.08,73-36.13-2.08-75-9-106.32-32.72-18.47-14-33.23-29.82-55.41-34.88-16-3.65-33.26.49-49.37,2-23.33,2.18-46.67,4.12-70,5.69-29,1.92-58,3.41-87.05,2.62-20.74-.57-49.37.07-67.39-13.53-21.5-16.21,33.24-92.29,40.94-105.84,18.67-32.86,31.76-64.69,36.49-104.28,1.39-11.54,6.08-23.37,5.47-35-.63-11.88-6.62-22.45-12.16-31.79-7.23-12.23-32.34-41.26-25.15-56.18,4-8.24,18.88-9.28,26.61-11,14.5-3.3,29.21-5.07,43.8-7.69,24.75-4.47,49.33-19,74.16-18.6,66.8,1.09,134.56,26.37,200,40.25,38.91,8.28,78.09,15.8,116.53,27,12.16,3.56,24.69,7.23,36.25,13.26,8.07,4.2,13.25,11.69,20.72,16.39,28.66,18.07,61.61,29,92.39,41.2,39.94,15.83,80,31.17,119.7,48,24.86,10.56,56.83,19.85,78.26,39.43,15.65,14.29,5,18.57-3.3,31.89-4.22,6.79-3.25,13.48-5.08,21.16-2.61,11-10,18.88-16.94,26-9.56,9.81-22.3,17.89-30.11,29.93-2.76,4.23-2.63,9.49-4.86,13.18C922.21,1410.46,905,1415.77,895.63,1420.2Z" fill="none" stroke="#F6F6F6" stroke-miterlimit="10" stroke-width="5"/>
<path d="M789.68,1403.41c-80.88,29.64-170.87,46.51-256.36,38.68-29.75-2.73-59.67-9.07-87.38-23-12.61-6.32-22.07-13.36-35.88-13.74-32.06-.87-64.21,2.19-96.25,2.92-22.94.53-46,.72-68.86-1.53-15.3-1.5-36-3.3-48.52-14.75-18.21-16.67,14.66-73.36,21.36-89,11.08-26,22.08-54.85,17.69-84.91-1.35-9.19-3.74-17.31-4-26.68-.3-8.05.53-15.49-1.81-23.19-2.89-9.54-15.76-24.36-11.34-33.14,3-6,12-6.29,17.91-8.21a160.51,160.51,0,0,0,28.17-12.21c9.58-5.31,17.73-13.51,27.65-17.9,16.11-7.1,34.14-7.77,51.07-7.74,67.55.13,136,16.4,201.79,33.4,34.29,8.86,68.76,18.29,102.08,31.72,10.12,4.08,21.58,8.18,30.48,15.71,5.55,4.69,9.32,10.57,15.62,14.1,53.87,30.12,116.16,41.31,173.35,63.06,14.88,5.66,97.38,34.27,54.25,61.19-26.21,16.35-53.9,23.79-77.81,46.16-7.28,6.8-12.14,12.43-15,22.81-1.88,6.91,2.63,3.4-3.67,10.62C816.55,1396.45,799.1,1400,789.68,1403.41Z" fill="none" stroke="#F6F6F6" stroke-miterlimit="10" stroke-width="5"/>
<path d="M705.59,1385.89c-94.7,24.19-195,25.34-291.16,3.89-24.24-5.4-49.48-4.11-74-5.48-23.85-1.31-66.25,1.42-83.58-21-12.56-16.22,1.07-50.7,5.79-68.85,6-23.12,11.25-47,1.39-69.45-5.78-13.16-13.69-25.67-19.88-38.7-3-6.22-9.07-15.76-6.52-21.65,4.2-9.72,23.88-13.81,33.43-18.4,30.53-14.65,62.85-18.39,95.49-18.29,60.27.19,120.86,10.25,180,23.89,27.2,6.28,54.78,13,81,23.9,14.85,6.17,25.8,18.08,40,25.14,45.65,22.75,94.69,34.9,141.13,55.71,13.43,6,63.63,26.08,38.34,49.72-24.48,22.89-60.19,20.17-85.65,41.7-2.88,2.47-6.45,5.42-8.12,9.41-1,2.38.76,6.92,0,8.27C745.4,1380.48,717.6,1382.82,705.59,1385.89Z" fill="none" stroke="#F6F6F6" stroke-miterlimit="10" stroke-width="5"/>
<path d="M644.24,1369.9c-48.58,8.13-98.23,10.15-147.63,10.66-27,.28-56.66,2.38-83.08-6-16.23-5.14-31.9-9.64-48.63-12.88-18-3.49-47-6-57.95-24.92-8.19-14.12-2.57-43.16-2.28-60.33.32-18.83-2.84-32.8-13.74-46.27-6.85-8.49-38.27-39.3-34.64-48.18,3.46-8.46,25.35-9.76,34.82-12,29.92-7,60.24-9.4,90.68-9,47.14.58,94.45,6.44,140.85,16.53,19.19,4.19,39,8.52,57.34,16.89,12.34,5.65,22.63,15.66,34.89,21.49,35.11,16.73,72.23,28.1,107.46,45.14,11.31,5.47,48.15,20.06,39.32,42.54-7.37,18.76-32.41,24.47-44.72,37C696,1362.13,670.93,1365.44,644.24,1369.9Z" fill="none" stroke="#F6F6F6" stroke-miterlimit="10" stroke-width="5"/>
<path d="M613.63,1359.12A868.93,868.93,0,0,1,496.57,1367c-25.24.07-51.86.49-76.62-6.43-12.44-3.47-23.25-11.6-35-17.39-12.13-6-28.86-12.61-34.1-26.28-4.92-12.84-3.08-31.57-7.4-47-3.85-13.74-11.9-22.23-20.56-31.51-5.53-5.94-33.89-31.63-30.61-37.3,3.52-6.07,20.55-5.58,29.41-6.42a562.43,562.43,0,0,1,73.41-2.25c33.42,1.25,67.09,4.74,99.93,12.65,23.29,5.59,40.87,18.93,62.58,28.71,28.14,12.7,57.29,22.74,85.16,36.63,13.88,6.93,34.44,15.83,41.55,33.7,2.73,6.85,5.39,24.27,2.34,31.12-3.65,8.23-17.26,11.72-23.69,13.83C646.86,1354.26,630,1356.83,613.63,1359.12Z" fill="none" stroke="#F6F6F6" stroke-miterlimit="10" stroke-width="5"/>
</g>
</svg>
<svg viewBox="0 0 1 1" id="preview" preserveAspectRatio="none">
<use xlink:href="#filterPath" fill="darkgrey"/>
</svg>
<image xlink:href="" clip-path="url(#clip-path)"/>
</svg>

After

Width:  |  Height:  |  Size: 31 KiB

@@ -0,0 +1,18 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
<defs>
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
<use xlink:href="#filterPath" fill="none"></use>
</clipPath>
<path id="filterPath"
d="M0.0483,0.4143l0.0127-0.1106a0.2729,0.3029,0,0,1,0.2416-0.2628l0.3291-0.0392A0.2729,0.3029,0,0,1,0.8793,0.1215l0.0538,0.0799a0.2728,0.3028,0,0,1-0.0043,0.3689L0.8342,0.7036a0.2684,0.2979,0,0,1-0.0384,0.044l-0.1937,0.1812a0.2729,0.3029,0,0,1-0.3217,0.0243l-0.1409-0.0989A0.2728,0.3028,0,0,1,0.0313,0.4871h0A0.2736,0.3036,0,0,0,0.0483,0.4143Z">
</path>
</defs><svg viewBox="82.87645721435547 90.12640380859375 163.90713500976562 122.14910888671875"
preserveAspectRatio="none">
<path class="background"
d="M231.6,190.43C310.4,139.49,55.33,26.54,85.78,136.85c10.87,39.4-8.86,48.87-1,58.6C108.75,225.24,200.87,210.29,231.6,190.43Z"
fill="#7C6576"></path>
</svg><svg viewBox="0 0 1 1" id="preview" preserveAspectRatio="none">
<use xlink:href="#filterPath" fill="darkgrey"></use>
</svg>
<image xlink:href="" clip-path="url(#clip-path)"></image>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

@@ -0,0 +1,16 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
<defs>
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
<use xlink:href="#filterPath" fill="none"></use>
</clipPath>
<path id="filterPath"
d="M0.094,0.7176h0a0.3363,0.4178,0,0,1-0.0377-0.278h0A0.3365,0.418,0,0,1,0.1346,0.237C0.1753,0.1795,0.23,0.1405,0.2895,0.1203a0.3908,0.4855,0,0,0,0.1094-0.0619,0.2819,0.3502,0,0,1,0.1027-0.0518,0.3366,0.4182,0,0,1,0.1348,0.004h0c0.2176,0.0621,0.3421,0.3474,0.2648,0.6076-0.0759,0.2558-0.2172,0.3864-0.429,0.3817A0.4436,0.5511,0,0,1,0.094,0.7176Z">
</path>
</defs><svg viewBox="17.459999084472656 52.0099983215332 265.08001708984375 192" preserveAspectRatio="none">
<polygon class="background" points="263.34 213.81 32.64 244.01 17.46 52.01 282.54 78.24 263.34 213.81"
fill="#3AADAA"></polygon>
</svg><svg viewBox="0 0 1 1" id="preview" preserveAspectRatio="none">
<use xlink:href="#filterPath" fill="darkgrey"></use>
</svg>
<image xlink:href="" clip-path="url(#clip-path)"></image>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

@@ -0,0 +1,18 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
<defs>
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
<use xlink:href="#filterPath" fill="none"></use>
</clipPath>
<path id="filterPath"
d="M0.0442,0.7361c-0.0096-0.0683-0.0258-0.1816-0.0417-0.2932a0.3598,0.2985,0,0,1,0.3573-0.3335h0.1806a0.3599,0.2985,0,0,1,0.3539,0.2443l0.049,0.2205a0.3599,0.2985,0,0,1-0.2006,0.3244L0.555,0.9715A0.3598,0.2985,0,0,1,0.0941,0.8564h0A0.3593,0.2981,0,0,1,0.0442,0.7361Z">
</path>
</defs><svg viewBox="59.51575469970703 40.560211181640625 181.27603149414062 201.9112548828125"
preserveAspectRatio="none">
<path class="background"
d="M129.19,49.73c-70,34.82-101.39,77.6-26.43,153.1,58.35,58.77,88,35,91.3,34.33C278.42,219.07,243.66-7.23,129.19,49.73Z"
fill="#383E45"></path>
</svg><svg viewBox="0 0 1 1" id="preview" preserveAspectRatio="none">
<use xlink:href="#filterPath" fill="darkgrey"></use>
</svg>
<image xlink:href="" clip-path="url(#clip-path)"></image>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

@@ -0,0 +1,17 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
<defs>
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
<use xlink:href="#filterPath" fill="none"></use>
</clipPath>
<path id="filterPath"
d="M0.1831,0.3127C-0.5843,1.8563,1.3335,0.2534,0.9483,0.0368,0.847-0.0201,0.3686-0.061,0.1831,0.3127Z"></path>
</defs><svg viewBox="34.86399841308594 100.27824401855469 233.13612365722656 122.38334655761719"
preserveAspectRatio="none">
<path class="background"
d="M165,203.24C4.46,258.67,20.75,181.65,65.21,143.92,173.87,51.72,400.22,122.06,165,203.24Z" fill="#383E45">
</path>
</svg><svg viewBox="0 0 1 1" id="preview" preserveAspectRatio="none">
<use xlink:href="#filterPath" fill="darkgrey"></use>
</svg>
<image xlink:href="" clip-path="url(#clip-path)"></image>
</svg>

After

Width:  |  Height:  |  Size: 888 B

@@ -0,0 +1,37 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
<defs>
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
<use xlink:href="#filterPath" fill="none"/>
</clipPath>
<path id="filterPath" d="M.6535.4952c.121.1706.3056.288.2961.36c-.0095.072-.2165.0948-.3503.0948c-.1337 0-.1974-.0151-.2642-.0492c-.0669-.0341-.1337-.0758-.1942-.1819c-.0637-.1099-.121-.2804-.0733-.4282c.0414-.1517.1975-.2767.3025-.2312c.1051.0455.1625.2653.2834.4358z">
<animate dur="40s" repeatCount="indefinite" attributeName="d" attributeType="XML"
values="
M.6535.4952c.121.1706.3056.288.2961.36c-.0095.072-.2165.0948-.3503.0948c-.1337 0-.1974-.0151-.2642-.0492c-.0669-.0341-.1337-.0758-.1942-.1819c-.0637-.1099-.121-.2804-.0733-.4282c.0414-.1517.1975-.2767.3025-.2312c.1051.0455.1625.2653.2834.4358z;
M.7427.3117c.0826.0872.1971.2019.2066.3304c.0095.1285-.0922.2753-.1907.3029c-.1017.0275-.2035-.0643-.337-.1331c-.1336-.0688-.2957-.1102-.3497-.2478c-.054-.1377-.0032-.3717.0954-.4635c.0985-.0918.2448-.0413.3433.0138c.0985.0506.1493.1103.2319.1974z;
M.8612.1263c.073.0791.0985.2298.0857.3956c-.0158.1658-.073.3428-.1778.403c-.1048.0603-.2571.0038-.4064-.0791c-.1493-.0829-.2921-.1846-.3111-.3089c-.0158-.1243.0952-.275.2-.3616c.1048-.0867.2032-.1093.3111-.1205c.1079-.0113.2255-.0076.2986.0716z;
M.7518.2211c.101.0985.1982.2099.1982.3371c0 .1272-.101.267-.2603.3371c-.1593.07-.3691.0762-.4935-.0001c-.1243-.0763-.1632-.2321-.1399-.3402c.0233-.1112.1127-.1749.1865-.267c.0738-.0954.1321-.2162.2137-.2353c.0816-.0191.1904.0699.2953.1685z;
M.8832.3637c.0392.108.0536.1748.0607.2828c.0107.108.0143.2542-.05.2923c-.0678.0382-.207-.0286-.3783-.0858c-.1713-.0571-.3711-.0985-.4389-.2128c-.0677-.1145.0001-.2956.125-.4226c.1249-.1271.314-.197.4389-.1557c.1284.0413.1997.1906.2426.3019z;
M.6535.4952c.121.1706.3056.288.2961.36c-.0095.072-.2165.0948-.3503.0948c-.1337 0-.1974-.0151-.2642-.0492c-.0669-.0341-.1337-.0758-.1942-.1819c-.0637-.1099-.121-.2804-.0733-.4282c.0414-.1517.1975-.2767.3025-.2312c.1051.0455.1625.2653.2834.4358z"
calcMode="spline"
keySplines=".56 .37 .43 .58;.56 .37 .43 .58;.56 .37 .43 .58;.56 .37 .43 .58;.56 .37 .43 .58"/>
</path>
</defs>
<svg preserveAspectRatio="none" viewBox="0 0 28.5 28.5">
<path id="background" d="M23.9 3.7c2.9-.5 4.1 2.3 4.1 5.2c0 3.1-5.8 4.2-8.4 5.5c-2.6 1.3-3.3 2.2-4.7 4.2c-1.5 2-3.7 5.1-6.8 5.8c-3 .8-6.8-.8-7.8-3.5c-1-2.7.7-6.5 3-8.6c2.3-2.1 5.2-2.5 7.1-2.2c1.9.3 2.7 1.2 4.9-.4c2.2-1.4 5.7-5.5 8.6-6z" fill="#7C6576">
<animate dur="40s" repeatCount="indefinite" attributeName="d" attributeType="XML"
values="
M23.9 3.7c2.9-.5 4.1 2.3 4.1 5.2c0 3.1-5.8 4.2-8.4 5.5c-2.6 1.3-3.3 2.2-4.7 4.2c-1.5 2-3.7 5.1-6.8 5.8c-3 .8-6.8-.8-7.8-3.5c-1-2.7.7-6.5 3-8.6c2.3-2.1 5.2-2.5 7.1-2.2c1.9.3 2.7 1.2 4.9-.4c2.2-1.4 5.7-5.5 8.6-6z;
M18.1 7c1.1 1.7 2.6 2.1 4.4 3.7c1.9 1.6 4.1 4.5 4.3 8.2c.2 3.7-1.6 8.2-4.6 9.2c-3 1-7.2-1.5-10.9-3.6c-3.7-2.1-6.7-3.9-8.3-6.6c-1.7-2.7-1.9-6.3-1-9.5c1-3.1 2.9-5.7 5.4-7.2c2.5-1.5 5.4-1.7 7.2-.3c1.8 1.4 2.4 4.4 3.5 6.1z;
M20.4 7.4c2.3 1.7 4.5 3.5 4.9 5.7c.4 2.2-1.3 4.6-3 6.5c-1.7 1.9-3.6 3.1-6 4.9c-2.4 1.8-5.4 4.2-8.1 3.9c-2.7-.2-5.1-3-4.6-5.7c.5-2.7 3.8-5.4 3.4-9.7c-.3-4.3-4.4-10.1-3.9-12.1c.5-2 5.6-.1 9.2 1.6c3.6 1.7 5.8 3.2 8.1 4.9z;
M24.2 5.5c0 2.8-2.4 5.7-1.8 8.3c.6 2.6 4.2 4.7 4.9 6.6c.7 1.9-1.6 3.6-4.5 5.3c-2.8 1.8-6.3 3.6-7.9 2.2c-1.6-1.4-1.4-5.9-4.3-9.5c-2.9-3.5-9.1-6-9.6-8.1c-.5-2.2 4.6-4.2 8.6-6.2c4-2.1 6.8-4.3 9.4-4.1c2.7.2 5.2 2.7 5.2 5.5z;
M23.8 2.5c3 1.7 5.5 4.9 4.3 7.4c-1.2 2.5-6.1 4.2-8.2 7.2c-2.1 3-1.6 7.1-3 9.3c-1.5 2.1-5 2.1-8.2 1c-3.2-1.1-5.9-3.4-7.3-6.2c-1.4-2.8-1.4-6.3-1.1-10c.3-3.7.8-7.7 3.1-9.5c2.3-1.8 6.3-1.4 10.1-1.2c3.6.2 7.2.3 10.3 2z;
M23.9 3.7c2.9-.5 4.1 2.3 4.1 5.2c0 3.1-5.8 4.2-8.4 5.5c-2.6 1.3-3.3 2.2-4.7 4.2c-1.5 2-3.7 5.1-6.8 5.8c-3 .8-6.8-.8-7.8-3.5c-1-2.7.7-6.5 3-8.6c2.3-2.1 5.2-2.5 7.1-2.2c1.9.3 2.7 1.2 4.9-.4c2.2-1.4 5.7-5.5 8.6-6z"
calcMode="spline"
keySplines=".56 .37 .43 .58;.56 .37 .43 .58;.56 .37 .43 .58;.56 .37 .43 .58;.56 .37 .43 .58"/>
</path>
</svg>
<svg viewBox="0 0 1 1" id="preview" preserveAspectRatio="none">
<use xlink:href="#filterPath" fill="darkgrey"/>
</svg>
<image xlink:href="" clip-path="url(#clip-path)"/>
</svg>

After

Width:  |  Height:  |  Size: 4.4 KiB

@@ -0,0 +1,37 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
<defs>
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
<use xlink:href="#filterPath" fill="none"/>
</clipPath>
<path id="filterPath" d="M.9749.142c.054.0978.0127.2397-.0477.3248c-.0604.0851-.143.1168-.2414.1924c-.0984.0756-.2097.2019-.324.1955c-.1144-.0064-.2287-.1388-.2573-.2839c-.0286-.1451.0318-.3027.1335-.4099c.1016-.1073.2446-.1608.3907-.1608c.1461-.0031.2922.0473.3462.1418z">
<animate dur="42s" repeatCount="indefinite" attributeName="d" attributeType="XML"
values="
M.9749.142c.054.0978.0127.2397-.0477.3248c-.0604.0851-.143.1168-.2414.1924c-.0984.0756-.2097.2019-.324.1955c-.1144-.0064-.2287-.1388-.2573-.2839c-.0286-.1451.0318-.3027.1335-.4099c.1016-.1073.2446-.1608.3907-.1608c.1461-.0031.2922.0473.3462.1418z;
M.8449.0248c.0956.0578.1688.2193.153.3808c-.016.1577-.1243.3153-.2612.3923c-.137.077-.3027.077-.4237-.0038c-.121-.0808-.2007-.2423-.2135-.3999c-.0128-.1538.0414-.3038.121-.3577c.0797-.0539.188-.0077.2994-.0115c.1147-.0038.2294-.0539.325 0z;
M.8141.206c.1149.118.2195.2571.1757.3388c-.044.0846-.2331.1149-.3953.1755c-.1622.0636-.2973.1572-.3783.1301c-.0845-.0272-.1149-.1723-.1183-.2964c-.0033-.1209.0135-.2209.0744-.3267c.0608-.1058.1689-.2177.2838-.2269c.1183-.0061.2432.0877.3581.2057z;
M.9077.1823c.0894.106.1183.2492.0671.3467c-.0543.0945-.1917.1404-.3258.2062c-.1341.0658-.2651.146-.3322.1116c-.0671-.0315-.0671-.1776-.1118-.3265c-.0447-.149-.1405-.2921-.0958-.3895c.0447-.0974.2268-.1404.3929-.1289c.1662.0115.3162.0773.4056.1805z;
M.9653.0228c.0701.0671.0223.3017-.0414.4652c-.067.1677-.153.264-.2487.3185c-.0957.0544-.2041.0671-.2998.0167c-.0957-.0461-.185-.1551-.236-.3144c-.0511-.1593-.0638-.3604.0096-.4317c.067-.0629.2232.0084.3923-.0042c.169-.0167.354-.1174.4242-.0503z;
M.9749.142c.054.0978.0127.2397-.0477.3248c-.0604.0851-.143.1168-.2414.1924c-.0984.0756-.2097.2019-.324.1955c-.1144-.0064-.2287-.1388-.2573-.2839c-.0286-.1451.0318-.3027.1335-.4099c.1016-.1073.2446-.1608.3907-.1608c.1461-.0031.2922.0473.3462.1418z"
calcMode="spline"
keySplines=".56 .37 .43 .58;.56 .37 .43 .58;.56 .37 .43 .58;.56 .37 .43 .58;.56 .37 .43 .58"/>
</path>
</defs>
<svg viewBox="0 0 28.3 28.3" preserveAspectRatio="none">
<path id="shadow" d="M27.5 5.1c1.7 3.1.4 7.6-1.5 10.3c-1.9 2.7-4.5 3.7-7.6 6.1c-3.1 2.4-6.6 6.4-10.2 6.2c-3.6-.2-7.2-4.4-8.1-9C-.8 14.1 1.1 9.1 4.3 5.7C7.5 2.3 12 .6 16.6.6C21.2.5 25.8 2.1 27.5 5.1z" transform="scale(.85)" transform-origin="center bottom" fill="#3AADAA">
<animate xlink:href="#shadow" dur="42s" repeatCount="indefinite" attributeName="d" attributeType="XML"
values="
M27.5 5.1c1.7 3.1.4 7.6-1.5 10.3c-1.9 2.7-4.5 3.7-7.6 6.1c-3.1 2.4-6.6 6.4-10.2 6.2c-3.6-.2-7.2-4.4-8.1-9C-.8 14.1 1.1 9.1 4.3 5.7C7.5 2.3 12 .6 16.6.6C21.2.5 25.8 2.1 27.5 5.1z;
M23.5 3.7c3 1.5 5.3 5.7 4.8 9.9c-.5 4.1-3.9 8.2-8.2 10.2c-4.3 2-9.5 2-13.3-.1c-3.8-2.1-6.3-6.3-6.7-10.4C-.3 9.3 1.4 5.4 3.9 4c2.5-1.4 5.9-.2 9.4-.3C16.9 3.6 20.5 2.3 23.5 3.7z;
M22 6.8c3.4 3.9 6.5 8.5 5.2 11.2c-1.3 2.8-6.9 3.8-11.7 5.8c-4.8 2.1-8.8 5.2-11.2 4.3c-2.5-.9-3.4-5.7-3.5-9.8C.7 14.3 1.2 11 3 7.5C4.8 4 8 .3 11.4 0C14.9-.2 18.6 2.9 22 6.8z;
M24.8 6c2.7 3.5 3.5 8.3 2 11.5c-1.6 3.1-5.7 4.6-9.7 6.8c-4 2.2-7.9 4.8-9.9 3.7c-2-1-2-5.9-3.3-10.8C2.6 12.3-.2 7.6 1.1 4.3c1.3-3.3 6.7-4.6 11.7-4.3C17.8.3 22.2 2.6 24.8 6z;
M27.3 4.5c2.2 1.6.7 7.2-1.3 11.1c-2.1 4-4.8 6.3-7.8 7.6c-3 1.3-6.4 1.6-9.4.4c-3-1.1-5.8-3.7-7.4-7.5c-1.6-3.8-2-8.6.3-10.3C3.8 4.3 8.7 6 14 5.7C19.3 5.3 25.1 2.9 27.3 4.5z;
M27.5 5.1c1.7 3.1.4 7.6-1.5 10.3c-1.9 2.7-4.5 3.7-7.6 6.1c-3.1 2.4-6.6 6.4-10.2 6.2c-3.6-.2-7.2-4.4-8.1-9C-.8 14.1 1.1 9.1 4.3 5.7C7.5 2.3 12 .6 16.6.6C21.2.5 25.8 2.1 27.5 5.1z"
calcMode="spline"
keySplines=".56 .37 .43 .58;.56 .37 .43 .58;.56 .37 .43 .58;.56 .37 .43 .58;.56 .37 .43 .58"/>
</path>
</svg>
<svg viewBox="0 0 1 1" id="preview" preserveAspectRatio="none">
<use xlink:href="#filterPath" fill="darkgrey"/>
</svg>
<image xlink:href="" clip-path="url(#clip-path)"/>
</svg>

After

Width:  |  Height:  |  Size: 4.2 KiB

@@ -0,0 +1,59 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
<defs>
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
<use xlink:href="#filterPath" fill="none"/>
</clipPath>
<path id="filterPath" d="M.7458.2839c.1146.1335.226.2876.2005.4073c-.0255.1198-.191.202-.3343.2362c-.1433.0376-.261.0274-.3629-.0239c-.1019-.0513-.1847-.1437-.1974-.2464c-.0127-.0993.0446-.2054.1146-.3286c.07-.1232.1528-.2635.2547-.2773C.5166.0374.6311.1504.7458.2839z">
<animate dur="18s" repeatCount="indefinite" attributeName="d" attributeType="XML"
values="
M.7458.2839c.1146.1335.226.2876.2005.4073c-.0255.1198-.191.202-.3343.2362c-.1433.0376-.261.0274-.3629-.0239c-.1019-.0513-.1847-.1437-.1974-.2464c-.0127-.0993.0446-.2054.1146-.3286c.07-.1232.1528-.2635.2547-.2773C.5166.0374.6311.1504.7458.2839z;
M.8735.2091c.0705.0795.0822.1843.0743.3115c-.0117.1272-.047.2765-.1723.3591c-.1253.0826-.3406.0953-.4737.0222c-.1331-.0731-.184-.232-.2192-.3877C.0474.3585.0241.2124.1024.1296C.1845.0503.3725.0375.5251.0598C.6817.0788.807.1296.8735.2091z;
M.9181.3348c.0597.1296.0238.2466-.012.3542c-.0358.1075-.0796.2087-.1672.2435c-.0876.038-.2149.0095-.3424-.038c-.1234-.0443-.2468-.1043-.3065-.2087c-.0597-.1012-.0557-.2435.0319-.3794C.2175.1704.3887.0439.5518.0503C.7111.0597.8623.202.9181.3348z;
M.8913.1702c.0792.1064.0729.2944.0127.4149c-.0602.1241-.1712.1844-.2884.2518c-.1172.0674-.2314.1347-.3423.1064c-.1077-.0284-.2092-.1561-.2218-.2873C.0388.5248.1085.3901.1972.2801c.0856-.11.1902-.195.3233-.2199C.6505.0319.8153.0603.8913.1702z;
M.7458.2839c.1146.1335.226.2876.2005.4073c-.0255.1198-.191.202-.3343.2362c-.1433.0376-.261.0274-.3629-.0239c-.1019-.0513-.1847-.1437-.1974-.2464c-.0127-.0993.0446-.2054.1146-.3286c.07-.1232.1528-.2635.2547-.2773C.5166.0374.6311.1504.7458.2839z"
calcMode="spline"
keySplines=".45 .05 .55 .95;.45 .05 .55 .95;.45 .05 .55 .95;.45 .05 .55 .95"/>
</path>
</defs>
<svg viewBox="0 0 28.3 28.3" preserveAspectRatio="none">
<g id="backgrounds" transform-origin="center" transform="scale(.99)">
<path id="background_1" d="M22,7.9c3.6,3.9,7.1,8.4,6.3,11.9c-0.8,3.5-6,5.9-10.5,6.9c-4.5,1.1-8.2,0.8-11.4-0.7c-3.2-1.5-5.8-4.2-6.2-7.2 c-0.4-2.9,1.4-6,3.6-9.6c2.2-3.6,4.8-7.7,8-8.1C14.8,0.7,18.4,4,22,7.9z" fill="#7C6576" opacity=".33">
<animate dur="18s" begin="1.5s" repeatCount="indefinite" attributeName="d" attributeType="XML"
values="
M22,7.9c3.6,3.9,7.1,8.4,6.3,11.9c-0.8,3.5-6,5.9-10.5,6.9c-4.5,1.1-8.2,0.8-11.4-0.7c-3.2-1.5-5.8-4.2-6.2-7.2 c-0.4-2.9,1.4-6,3.6-9.6c2.2-3.6,4.8-7.7,8-8.1C14.8,0.7,18.4,4,22,7.9z;
M23.7 5c1.8 2.5 2.1 5.8 1.9 9.8c-.3 4-1.2 8.7-4.4 11.3c-3.2 2.6-8.7 3-12.1.7c-3.4-2.3-4.7-7.3-5.6-12.2C2.6 9.7 2 5.1 4 2.5C6.1 0 10.9-.4 14.8.3C18.8.9 22 2.5 23.7 5z;
M24.6,9c1.5,4.1,0.6,7.8-0.3,11.2c-0.9,3.4-2,6.6-4.2,7.7c-2.2,1.2-5.4,0.3-8.6-1.2c-3.1-1.4-6.2-3.3-7.7-6.6 c-1.5-3.2-1.4-7.7,0.8-12C7,3.8,11.3-0.2,15.4,0C19.4,0.3,23.2,4.8,24.6,9z;
M26.5 4.9c2.5 3 2.3 8.3.4 11.7c-1.9 3.5-5.4 5.2-9.1 7.1c-3.7 1.9-7.3 3.8-10.8 3c-3.4-.8-6.6-4.4-7-8.1C-.4 14.9 1.8 11.1 4.6 8c2.7-3.1 6-5.5 10.2-6.2C18.9 1 24.1 1.8 26.5 4.9z;
M22,7.9c3.6,3.9,7.1,8.4,6.3,11.9c-0.8,3.5-6,5.9-10.5,6.9c-4.5,1.1-8.2,0.8-11.4-0.7c-3.2-1.5-5.8-4.2-6.2-7.2 c-0.4-2.9,1.4-6,3.6-9.6c2.2-3.6,4.8-7.7,8-8.1C14.8,0.7,18.4,4,22,7.9z"
calcMode="spline"
keySplines=".45 .05 .55 .95;.45 .05 .55 .95;.45 .05 .55 .95;.45 .05 .55 .95"/>
</path>
<path id="background_2" d="M22,7.9c3.6,3.9,7.1,8.4,6.3,11.9c-0.8,3.5-6,5.9-10.5,6.9c-4.5,1.1-8.2,0.8-11.4-0.7c-3.2-1.5-5.8-4.2-6.2-7.2 c-0.4-2.9,1.4-6,3.6-9.6c2.2-3.6,4.8-7.7,8-8.1C14.8,0.7,18.4,4,22,7.9z" fill="#7C6576" opacity=".33">
<animate xlink:href="#background_2" dur="18s" begin="2s" repeatCount="indefinite" attributeName="d" attributeType="XML"
values="
M22,7.9c3.6,3.9,7.1,8.4,6.3,11.9c-0.8,3.5-6,5.9-10.5,6.9c-4.5,1.1-8.2,0.8-11.4-0.7c-3.2-1.5-5.8-4.2-6.2-7.2 c-0.4-2.9,1.4-6,3.6-9.6c2.2-3.6,4.8-7.7,8-8.1C14.8,0.7,18.4,4,22,7.9z;
M23.7 5c1.8 2.5 2.1 5.8 1.9 9.8c-.3 4-1.2 8.7-4.4 11.3c-3.2 2.6-8.7 3-12.1.7c-3.4-2.3-4.7-7.3-5.6-12.2C2.6 9.7 2 5.1 4 2.5C6.1 0 10.9-.4 14.8.3C18.8.9 22 2.5 23.7 5z;
M24.6,9c1.5,4.1,0.6,7.8-0.3,11.2c-0.9,3.4-2,6.6-4.2,7.7c-2.2,1.2-5.4,0.3-8.6-1.2c-3.1-1.4-6.2-3.3-7.7-6.6 c-1.5-3.2-1.4-7.7,0.8-12C7,3.8,11.3-0.2,15.4,0C19.4,0.3,23.2,4.8,24.6,9z;
M26.5 4.9c2.5 3 2.3 8.3.4 11.7c-1.9 3.5-5.4 5.2-9.1 7.1c-3.7 1.9-7.3 3.8-10.8 3c-3.4-.8-6.6-4.4-7-8.1C-.4 14.9 1.8 11.1 4.6 8c2.7-3.1 6-5.5 10.2-6.2C18.9 1 24.1 1.8 26.5 4.9z;
M22,7.9c3.6,3.9,7.1,8.4,6.3,11.9c-0.8,3.5-6,5.9-10.5,6.9c-4.5,1.1-8.2,0.8-11.4-0.7c-3.2-1.5-5.8-4.2-6.2-7.2 c-0.4-2.9,1.4-6,3.6-9.6c2.2-3.6,4.8-7.7,8-8.1C14.8,0.7,18.4,4,22,7.9z"
calcMode="spline"
keySplines=".45 .05 .55 .95;.45 .05 .55 .95;.45 .05 .55 .95;.45 .05 .55 .95"/>
</path>
<path id="background_3" d="M22,7.9c3.6,3.9,7.1,8.4,6.3,11.9c-0.8,3.5-6,5.9-10.5,6.9c-4.5,1.1-8.2,0.8-11.4-0.7c-3.2-1.5-5.8-4.2-6.2-7.2 c-0.4-2.9,1.4-6,3.6-9.6c2.2-3.6,4.8-7.7,8-8.1C14.8,0.7,18.4,4,22,7.9z" fill="#7C6576" opacity=".33">
<animate dur="18s" begin="2.5s" repeatCount="indefinite" attributeName="d" attributeType="XML"
values="
M22,7.9c3.6,3.9,7.1,8.4,6.3,11.9c-0.8,3.5-6,5.9-10.5,6.9c-4.5,1.1-8.2,0.8-11.4-0.7c-3.2-1.5-5.8-4.2-6.2-7.2 c-0.4-2.9,1.4-6,3.6-9.6c2.2-3.6,4.8-7.7,8-8.1C14.8,0.7,18.4,4,22,7.9z;
M23.7 5c1.8 2.5 2.1 5.8 1.9 9.8c-.3 4-1.2 8.7-4.4 11.3c-3.2 2.6-8.7 3-12.1.7c-3.4-2.3-4.7-7.3-5.6-12.2C2.6 9.7 2 5.1 4 2.5C6.1 0 10.9-.4 14.8.3C18.8.9 22 2.5 23.7 5z;
M24.6,9c1.5,4.1,0.6,7.8-0.3,11.2c-0.9,3.4-2,6.6-4.2,7.7c-2.2,1.2-5.4,0.3-8.6-1.2c-3.1-1.4-6.2-3.3-7.7-6.6 c-1.5-3.2-1.4-7.7,0.8-12C7,3.8,11.3-0.2,15.4,0C19.4,0.3,23.2,4.8,24.6,9z;
M26.5 4.9c2.5 3 2.3 8.3.4 11.7c-1.9 3.5-5.4 5.2-9.1 7.1c-3.7 1.9-7.3 3.8-10.8 3c-3.4-.8-6.6-4.4-7-8.1C-.4 14.9 1.8 11.1 4.6 8c2.7-3.1 6-5.5 10.2-6.2C18.9 1 24.1 1.8 26.5 4.9z;
M22,7.9c3.6,3.9,7.1,8.4,6.3,11.9c-0.8,3.5-6,5.9-10.5,6.9c-4.5,1.1-8.2,0.8-11.4-0.7c-3.2-1.5-5.8-4.2-6.2-7.2 c-0.4-2.9,1.4-6,3.6-9.6c2.2-3.6,4.8-7.7,8-8.1C14.8,0.7,18.4,4,22,7.9z"
calcMode="spline"
keySplines=".45 .05 .55 .95;.45 .05 .55 .95;.45 .05 .55 .95;.45 .05 .55 .95"/>
</path>
</g>
</svg>
<svg viewBox="0 0 1 1" id="preview" preserveAspectRatio="none">
<use xlink:href="#filterPath" fill="darkgrey"/>
</svg>
<image xlink:href="" clip-path="url(#clip-path)"/>
</svg>

After

Width:  |  Height:  |  Size: 6.8 KiB

@@ -0,0 +1,20 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600" id="shape">
<defs>
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
<use xlink:href="#filterPath" fill="none"/>
</clipPath>
<path id="filterPath" d="M.856.9025.094.7888 0 .1101l.95-.1101L.856.9025z"/>
<g id="animation">
<animateTransform xlink:href="#shape" attributeName="transform" attributeType="XML" type="translate" dur="6s" values="0 0;0 8;0 0" repeatCount="indefinite" calcMode="spline" keySplines=".45 .05 .55 .95;.45 .05 .55 .95"/>
</g>
</defs>
<svg viewBox="0 0 28.3 28.3" preserveAspectRatio="none">
<path id="shadow" d="M25.5,28.3L2.8,25.1L0,6l28.3-3.1L25.5,28.3z" fill="#7C6576" transform="scale(.97)">
<animateTransform attributeName="transform" attributeType="XML" type="translate" dur="6s" values=".8 0;.5 -.3;.8 0" repeatCount="indefinite" calcMode="spline" keySplines=".45 .05 .55 .95;.45 .05 .55 .95" additive="sum"/>
</path>
</svg>
<svg viewBox="0 0 1 1" id="preview" preserveAspectRatio="none">
<use xlink:href="#filterPath" fill="darkgrey"/>
</svg>
<image xlink:href="" clip-path="url(#clip-path)"/>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

@@ -0,0 +1,20 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80" height="60" id="shape">
<defs>
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
<use xlink:href="#filterPath" fill="none"/>
</clipPath>
<path id="filterPath" d="M.05 0 1 .113l-.094.6741L.144.9.05 0z"/>
<g id="animation">
<animateTransform xlink:href="#shape" attributeName="transform" attributeType="XML" type="translate" dur="6s" values="0 0;0 8;0 0" repeatCount="indefinite" calcMode="spline" keySplines=".45 .05 .55 .95;.45 .05 .55 .95"/>
</g>
</defs>
<svg viewBox="0 0 28.3 28.3" preserveAspectRatio="none">
<path id="shadow" d="M0,2.8L28.3,6l-2.8,19.1L2.8,28.3L0,2.8z" fill="#3AADAA" transform="scale(.97)">
<animateTransform attributeName="transform" attributeType="XML" type="translate" dur="6s" values="0 0;.3 -.3;0 0" repeatCount="indefinite" calcMode="spline" keySplines=".45 .05 .55 .95;.45 .05 .55 .95" additive="sum"/>
</path>
</svg>
<svg viewBox="0 0 1 1" id="preview" preserveAspectRatio="none">
<use xlink:href="#filterPath" fill="darkgrey"/>
</svg>
<image xlink:href="" clip-path="url(#clip-path)"/>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

@@ -0,0 +1,37 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="80" height="60" id="shape">
<defs>
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
<use xlink:href="#filterPath" fill="none"/>
</clipPath>
<path id="filterPath" d="M.14.1882.99.1l-.0421.8L.188.8574.14.1882z"/>
<g id="animation">
<animateTransform xlink:href="#shape" attributeName="transform" attributeType="XML" type="translate" dur="6s" values="0 0;0 8;0 0" repeatCount="indefinite" calcMode="spline" keySplines=".45 .05 .55 .95;.45 .05 .55 .95"/>
</g>
</defs>
<svg preserveAspectRatio="none" viewBox="0 0 1600 1201" width="96%" height="96%" x="2%" y="2%">
<path id="background_1" d="M1287.58.7c82.33-12.93 80.89 155.17 144.44 337.64c62.1 182.47 189.2 379.3 164.65 554.59c-23.11 175.28-197.87 327.58-368.3 306c-169-20.12-332.2-214.08-564.74-274.42c-232.54-60.34-534.4 12.93-628.28-70.4c-93.88-84.77 18.78-324.71 122.77-508.62c104-182.47 199.32-307.46 316.31-287.35c117 18.68 257.09 181 410.19 165.23C1037.72 207.6 1205.26 13.63 1287.58.7Z" fill="#7C6576">
<animate xlink:href="#background_1" dur="30s" repeatCount="indefinite" attributeName="d" attributeType="XML"
values="
M1287.58.7c82.33-12.93 80.89 155.17 144.44 337.64c62.1 182.47 189.2 379.3 164.65 554.59c-23.11 175.28-197.87 327.58-368.3 306c-169-20.12-332.2-214.08-564.74-274.42c-232.54-60.34-534.4 12.93-628.28-70.4c-93.88-84.77 18.78-324.71 122.77-508.62c104-182.47 199.32-307.46 316.31-287.35c117 18.68 257.09 181 410.19 165.23C1037.72 207.6 1205.26 13.63 1287.58.7Z;
M1127.84 155.25c11 93-99.32 200.55 9.65 327.47c109 125.95 437.3 270.3 460.75 339.09c24.83 69.76-255.2 63-506.27 139.51C842.29 1037.86 618.81 1195.78 429.83 1190c-189-4.85-343.49-174.39-401.43-338.12C-30.92 688.11 7.71 530.19 133.24 444C258.77 357.81 469.83 343.21 605 265.7c133.81-77.51 191.75-218 285.55-249C985.75-15.26 1116.8 62.24 1127.84 155.25Z;
M1321.79,69.6c150.55,66.91,275,224.78,278.1,382.66,4.18,158.91-112.91,318.88-220.6,465.25-106.64,146.37-203.88,279.15-304.25,250.92-101.41-29.27-206-221.65-385.79-262.42-179.83-41.82-434.93,68-570.85,18.82C-18.56,874.64-35.29,666.59,60.9,539,156,411.48,364.1,365.48,509.42,297.52c144.28-68,225.83-157.87,355.48-214.33C993.49,25.69,1170.19,2.69,1321.79,69.6Z;
M1287.58.7c82.33-12.93 80.89 155.17 144.44 337.64c62.1 182.47 189.2 379.3 164.65 554.59c-23.11 175.28-197.87 327.58-368.3 306c-169-20.12-332.2-214.08-564.74-274.42c-232.54-60.34-534.4 12.93-628.28-70.4c-93.88-84.77 18.78-324.71 122.77-508.62c104-182.47 199.32-307.46 316.31-287.35c117 18.68 257.09 181 410.19 165.23C1037.72 207.6 1205.26 13.63 1287.58.7Z"/>
</path>
</svg>
<svg viewBox="0 0 28.3 28.3" width="45%" height="45%" y="50%">
<path id="background_2" d="M22.6 9c1.6 4.2 1.2 8.1-.6 11.7c-1.8 3.6-4.9 6.9-9.2 7.6C8.5 29 3.1 27 1 23.2C-1.1 19.4.2 13.8 2.9 8.9C5.6 4.1 9.8-.2 13.6 0C17.4.2 21 4.8 22.6 9z" fill="#3AADAA">
<animate xlink:href="#background_2" dur="18s" repeatCount="indefinite" attributeName="d" attributeType="XML"
values="
M25 9c1.6 4.2 1.2 8.1-.6 11.7c-1.8 3.6-4.9 6.9-9.2 7.6C10.9 29 5.5 27 3.4 23.2C1.3 19.4 2.6 13.8 5.3 8.9C8 4.1 12.2-.2 16 0C19.8.2 23.4 4.8 25 9z;
M25.1,7.9c2.8,4.2,4.3,9.7,2.3,13.7c-2,4.1-7.5,6.7-12.5,6.4c-4.9-0.3-9.3-3.6-12.1-8.2 C0.1,15.3-1.1,9.6,1.1,5.7c2.2-3.9,7.7-5.8,12.5-5.4C18.4,0.8,22.4,3.7,25.1,7.9z;
M26.9 6.6c2.1 3.6 1.9 8.5-.3 12.9c-2.2 4.3-6.3 8.2-11.3 8.6c-5 .5-10.8-2.4-13.5-7C-.9 16.5-.5 9.9 2.4 5.8c2.9-4.1 8.3-5.8 13.2-5.5C20.5.6 24.8 2.9 26.9 6.6z;
M25 9c1.6 4.2 1.2 8.1-.6 11.7c-1.8 3.6-4.9 6.9-9.2 7.6C10.9 29 5.5 27 3.4 23.2C1.3 19.4 2.6 13.8 5.3 8.9C8 4.1 12.2-.2 16 0C19.8.2 23.4 4.8 25 9z"
calcMode="spline"
keySplines=".45 .05 .55 .95; .45 .05 .55 .95; .45 .05 .55 .95"/>
</path>
</svg>
<svg viewBox="0 0 1 1" id="preview" preserveAspectRatio="none">
<use xlink:href="#filterPath" fill="darkgrey"/>
</svg>
<image xlink:href="" clip-path="url(#clip-path)"/>
</svg>

After

Width:  |  Height:  |  Size: 4.1 KiB

@@ -0,0 +1,122 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
<defs>
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
<use xlink:href="#filterPath" fill="none"/>
</clipPath>
<path id="filterPath" d="M.8165.674c-.1345.2237-.6297.2449-.7441.0363c-.1145-.2116.1517-.6529.4007-.6651c.2462-.0121.4751.4081.3434.6288z"/>
</defs>
<svg viewBox="0 0 1600 1204.82" id="floating_shapes" preserveAspectRatio="xMaxYMid meet">
<g class="circuits">
<path d="M1107.75,280.11a45.36,45.36,0,1,0-4.11-82.28,20.62,20.62,0,1,1-19-36.62,87.2,87.2,0,0,1,73-3.27c44.44,18.07,66,68.6,47.88,113s-68.93,65.45-113.37,47.38a20.62,20.62,0,1,1,15.59-38.18Z" fill="#3AADAA"/>
<path d="M1551.29,477.11a34.42,34.42,0,1,0-34.42,34.43A34.41,34.41,0,0,0,1551.29,477.11Zm-34.42-75.73a75.74,75.74,0,1,1-75.71,75.73A75.71,75.71,0,0,1,1516.87,401.38Z" fill="#7C6576"/>
<path d="M1515.4,497.45A20.63,20.63,0,1,1,1536,476.82,20.63,20.63,0,0,1,1515.4,497.45Z" fill="#383E45"/>
<path d="M403.54,1014.73a20.63,20.63,0,0,0-20.63,20.63,34.38,34.38,0,0,1-34.38,34.38H285.27a34.38,34.38,0,0,1-34.38-34.38V896.46a74.27,74.27,0,0,0-74.12-74.26h-.15a20.63,20.63,0,0,0,0,41.25h0a33,33,0,0,1,33,33v138.9a34.38,34.38,0,0,1-34.38,34.38H111.3a20.63,20.63,0,0,0,0,41.26h64a75.42,75.42,0,0,0,55-23.72,75.4,75.4,0,0,0,55,23.72h63.26a75.64,75.64,0,0,0,75.64-75.64A20.63,20.63,0,0,0,403.54,1014.73Z" fill="#3AADAA"/>
<path d="M303.38,966.6A20.63,20.63,0,1,1,324,946,20.63,20.63,0,0,1,303.38,966.6Z" fill="#383E45"/>
<path d="M303.38,1022A20.63,20.63,0,1,1,324,1001.38,20.63,20.63,0,0,1,303.38,1022Z" fill="#383E45"/>
<path d="M458.93,1063.26a20.63,20.63,0,1,1,20.62-20.63A20.62,20.62,0,0,1,458.93,1063.26Z" fill="#7C6576"/>
<path d="M458.93,1118.07a20.63,20.63,0,1,1,20.62-20.62A20.62,20.62,0,0,1,458.93,1118.07Z" fill="#7C6576"/>
<path d="M1160.74,655.7a34.42,34.42,0,1,1,34.42,34.42,20.66,20.66,0,0,0,0,41.31,75.74,75.74,0,1,0-75.71-75.73,20.65,20.65,0,1,0,41.29,0Z" fill="#F6F6F6"/>
<path d="M1416.83,478.34A75.71,75.71,0,0,1,1341.1,554H1203.42a75.69,75.69,0,1,1,0-151.38h44.06V359.3a75.71,75.71,0,0,1,75.72-75.69h137.69a34.41,34.41,0,0,0,34.42-34.4V185.9a34.41,34.41,0,0,0-34.42-34.4,20.64,20.64,0,1,1,0-41.28,75.69,75.69,0,0,1,75.72,75.68v63.31a75.44,75.44,0,0,1-23.75,55,75.48,75.48,0,0,1,23.75,55.05v61.93a20.65,20.65,0,0,1-41.3,0V359.3a34.41,34.41,0,0,0-34.42-34.4H1323.2a34.42,34.42,0,0,0-34.42,34.4v43.35h52.32A75.71,75.71,0,0,1,1416.83,478.34Zm-213.41-34.41a34.41,34.41,0,1,0,0,68.81H1341.1a34.41,34.41,0,1,0,0-68.81Z" fill="#3AADAA"/>
<path d="M463.06,1157a94.87,94.87,0,0,0,94.86-94.89,20.63,20.63,0,1,1,41.25,0,136.13,136.13,0,0,1-136.11,136.15,20.63,20.63,0,0,1,0-41.26Z" fill="#F6F6F6"/>
<path d="M1121.8,712a20.63,20.63,0,1,0,20.63-20.62A20.63,20.63,0,0,0,1121.8,712Z" fill="#7C6576"/>
<path d="M1067,712a20.62,20.62,0,1,0,20.62-20.62A20.62,20.62,0,0,0,1067,712Z" fill="#7C6576"/>
<path d="M1471.5,1198.23a75.67,75.67,0,0,1-75.71-75.64V985.07a75.72,75.72,0,0,1,151.43,0v137.52A75.67,75.67,0,0,1,1471.5,1198.23Zm34.42-75.64V985.07a34.42,34.42,0,0,0-68.83,0v137.52a34.42,34.42,0,0,0,68.83,0Z" fill="#3AADAA"/>
<path d="M1287.08,1088.07a34.43,34.43,0,1,0,34.41,34.43A34.42,34.42,0,0,0,1287.08,1088.07Zm-75.72,34.43a75.72,75.72,0,1,1,75.72,75.73A75.73,75.73,0,0,1,1211.36,1122.5Z" fill="#3AADAA"/>
<path d="M874.34,989A20.65,20.65,0,0,1,895,1009.68a34.43,34.43,0,0,0,34.39,34.47h137.55a34.42,34.42,0,0,0,34.39-34.47,20.64,20.64,0,1,1,41.27,0A75.79,75.79,0,0,1,1111,1071.3c4.85,17.79,21.18,30.76,41.18,30.76H1232a20.68,20.68,0,0,1,0,41.36H1152.2c-37.32,0-69.38-24-80.1-58.08-1.71.11-3.44.17-5.19.17H929.36a75.74,75.74,0,0,1-75.65-75.83A20.66,20.66,0,0,1,874.34,989Z" fill="#F6F6F6"/>
<path d="M704.93,742.63a75.68,75.68,0,0,1,75.72,75.64V955.8a75.72,75.72,0,0,1-151.43,0V818.27A75.67,75.67,0,0,1,704.93,742.63Zm34.42,75.64a34.42,34.42,0,0,0-68.84,0V955.8a34.42,34.42,0,0,0,68.84,0Z" fill="#3AADAA"/>
<path d="M874.33,1030.26A20.64,20.64,0,0,0,895,1009.6a34.4,34.4,0,0,1,34.37-34.43h137.49a34.4,34.4,0,0,1,34.37,34.43,20.63,20.63,0,1,0,41.25,0,75.61,75.61,0,0,0-23.72-55.09,75.62,75.62,0,0,0,23.72-55.09V836.06a75.69,75.69,0,0,0-75.62-75.75,20.66,20.66,0,0,0,0,41.32,34.4,34.4,0,0,1,34.37,34.43v63.36a34.4,34.4,0,0,1-34.37,34.43H929.33a75.68,75.68,0,0,0-75.62,75.75A20.64,20.64,0,0,0,874.33,1030.26Z" fill="#3AADAA"/>
<path d="M966.78,840.18a34.42,34.42,0,1,0-34.41,34.42,20.66,20.66,0,0,1,0,41.31,75.74,75.74,0,1,1,75.71-75.73,20.65,20.65,0,0,1-41.3,0Z" fill="#383E45"/>
<path d="M684.6,951.8a45.37,45.37,0,1,0-74.68,35,20.65,20.65,0,0,1-26.77,31.46,87.21,87.21,0,0,1-30.53-66.43c0-48,38.68-87.16,86.61-87.16s86.62,39.11,86.62,87.16a20.63,20.63,0,1,1-41.25,0Z" fill="#7C6576"/>
<path d="M1308,1122.2a20.63,20.63,0,1,1-20.63-20.63A20.63,20.63,0,0,1,1308,1122.2Z" fill="#7C6576"/>
<path d="M932.06,916a95,95,0,0,0-94.94,95.07,75.67,75.67,0,1,1-151.34,0,20.64,20.64,0,1,1,41.28,0,34.4,34.4,0,1,0,68.79,0c0-75.33,61-136.4,136.21-136.4a20.67,20.67,0,0,1,0,41.33Z" fill="#7C6576"/>
<path d="M1281.48,994.3a94.87,94.87,0,0,0-94.86-94.89,20.63,20.63,0,1,1,0-41.26A136.13,136.13,0,0,1,1322.73,994.3a20.63,20.63,0,1,1-41.25,0Z" fill="#7C6576"/>
<path d="M50,1062.08A94.88,94.88,0,0,0,144.88,1157a20.63,20.63,0,0,1,0,41.26A136.13,136.13,0,0,1,8.77,1062.08a20.62,20.62,0,1,1,41.24,0Z" fill="#3AADAA"/>
<path d="M593.89,852.78A63.15,63.15,0,0,0,530.75,916a20.59,20.59,0,1,1-41.18,0A104.34,104.34,0,0,1,593.89,811.59a20.6,20.6,0,1,1,0,41.19Z" fill="#3AADAA"/>
<path d="M952.7,726.13a20.63,20.63,0,1,1-20.63-20.63A20.63,20.63,0,0,1,952.7,726.13Z" fill="#7C6576"/>
<path d="M952.7,670.73a20.63,20.63,0,1,1-20.63-20.63A20.63,20.63,0,0,1,952.7,670.73Z" fill="#7C6576"/>
<path d="M230.31,1178.78a20.62,20.62,0,1,0-20.62,20.63A20.63,20.63,0,0,0,230.31,1178.78Z" fill="#383E45"/>
<path d="M478.38,1177.6a20.63,20.63,0,1,0-20.63,20.63A20.63,20.63,0,0,0,478.38,1177.6Z" fill="#383E45"/>
<path d="M1008.08,895.28a20.62,20.62,0,1,1-20.62-20.62A20.62,20.62,0,0,1,1008.08,895.28Z" fill="#383E45"/>
<path d="M1062.88,895.28a20.62,20.62,0,1,1-20.62-20.62A20.62,20.62,0,0,1,1062.88,895.28Z" fill="#383E45"/>
<path d="M664,1195.28a20.6,20.6,0,0,1-20.62-20.58v-59a20.62,20.62,0,0,1,41.24,0v59A20.6,20.6,0,0,1,664,1195.28Z" fill="#3AADAA"/>
<path d="M1428.64,675.88a20.62,20.62,0,1,1,0-29.17A20.61,20.61,0,0,1,1428.64,675.88Z" fill="#383E45"/>
<path d="M1149.5,238.6a20.63,20.63,0,1,1-20.73-20.53A20.63,20.63,0,0,1,1149.5,238.6Z" fill="#7C6576"/>
<path d="M1149.5,31.13a20.63,20.63,0,1,1-20.73-20.52A20.64,20.64,0,0,1,1149.5,31.13Z" fill="#7C6576"/>
<path d="M1149.5,86a20.63,20.63,0,1,1-20.73-20.53A20.63,20.63,0,0,1,1149.5,86Z" fill="#7C6576"/>
<path d="M1556,681.93h-81.87a20.63,20.63,0,1,1,0-41.26H1556a20.63,20.63,0,1,1,0,41.26Z" fill="#F6F6F6"/>
<path d="M1457.7,41.31a34.43,34.43,0,0,0,0,68.85,20.66,20.66,0,0,1,0,41.31A75.74,75.74,0,0,1,1457.7,0a20.66,20.66,0,0,1,0,41.31Z" fill="#F6F6F6"/>
<path d="M1394.61,238.7A20.62,20.62,0,1,1,1374,218.07,20.63,20.63,0,0,1,1394.61,238.7Z" fill="#383E45"/>
<path d="M1449.41,238.7a20.63,20.63,0,1,1-20.62-20.63A20.63,20.63,0,0,1,1449.41,238.7Z" fill="#383E45"/>
<path d="M1481.23,74.85a20.63,20.63,0,1,1-20.63-20.63A20.63,20.63,0,0,1,1481.23,74.85Z" fill="#7C6576"/>
<path d="M1536,74.85a20.62,20.62,0,1,1-20.62-20.63A20.62,20.62,0,0,1,1536,74.85Z" fill="#7C6576"/>
<path d="M1591.41,74.85a20.62,20.62,0,1,1-20.62-20.63A20.63,20.63,0,0,1,1591.41,74.85Z" fill="#7C6576"/>
<path d="M1317.38,50.18a133.65,133.65,0,0,0-133.63,133.67,20.66,20.66,0,1,1-41.32,0c0-96.66,78.33-175,175-175a20.67,20.67,0,0,1,0,41.34Z" fill="#F6F6F6"/>
<path d="M1351.54,183.6A34.42,34.42,0,1,0,1317.13,218a20.66,20.66,0,0,1,0,41.31,75.74,75.74,0,1,1,75.71-75.73,20.65,20.65,0,1,1-41.3,0Z" fill="#383E45"/>
<path d="M1068.18,435.61c0,62.62-50.06,113-111.36,113a20.68,20.68,0,0,0,0,41.35c84.49,0,152.61-69.32,152.61-154.37a20.63,20.63,0,1,0-41.25,0Z" fill="#7C6576"/>
<path d="M1416.41,482.71a94.87,94.87,0,0,0,94.87,94.89,20.63,20.63,0,0,1,0,41.26,136.13,136.13,0,0,1-136.11-136.15,20.62,20.62,0,1,1,41.24,0Z" fill="#F6F6F6"/>
<path d="M1203.12,793.32a132,132,0,0,0,132-132,20.63,20.63,0,1,1,41.25,0c0,95.7-77.56,173.28-173.23,173.28a20.63,20.63,0,1,1,0-41.26Z" fill="#3AADAA"/>
<path d="M1566.63,753.31c-98.88,0-179,80.17-179,179.07a20.66,20.66,0,1,1-41.31,0c0-121.72,98.64-220.4,220.33-220.4a20.67,20.67,0,0,1,0,41.33Z" fill="#383E45"/>
<path d="M1492.54,930.09a75.68,75.68,0,0,1,75.83-75.53,20.6,20.6,0,1,0,0-41.2c-64.72,0-117.19,52.26-117.19,116.73a20.68,20.68,0,0,0,41.36,0Z" fill="#F6F6F6"/>
<path d="M709.35,742.63A156.75,156.75,0,0,0,866.08,585.85a20.63,20.63,0,0,1,41.25,0c0,109.38-88.64,198-198,198a20.63,20.63,0,0,1,0-41.26Z" fill="#F6F6F6"/>
<path d="M1068.15,661.3c-26.24,0-48.21,21.78-48.21,49.51s22,49.51,48.21,49.51a20.63,20.63,0,1,1,0,41.25c-49.83,0-89.53-41-89.53-90.76s39.7-90.77,89.53-90.77a20.63,20.63,0,1,1,0,41.26Z" fill="#F6F6F6"/>
<path d="M1142.48,1009.33a34.42,34.42,0,1,0,34.42-34.42,20.66,20.66,0,0,1,0-41.31,75.74,75.74,0,1,1-75.72,75.73,20.65,20.65,0,1,1,41.3,0Z" fill="#383E45"/>
<path d="M1025.8,1030.31a34.43,34.43,0,0,0,0,68.85,20.66,20.66,0,0,1,0,41.31,75.74,75.74,0,0,1,0-151.47,20.66,20.66,0,0,1,0,41.31Z" fill="#3AADAA"/>
<path d="M493.05,1035.6a34.42,34.42,0,0,0-68.83,0,20.65,20.65,0,0,1-41.3,0,75.72,75.72,0,0,1,151.43,0,20.65,20.65,0,0,1-41.3,0Z" fill="#383E45"/>
<path d="M358.47,924.11a34.43,34.43,0,1,0-34.42-34.42,20.65,20.65,0,0,1-41.3,0,75.72,75.72,0,1,1,75.72,75.73,20.66,20.66,0,0,1,0-41.31Z" fill="#F6F6F6"/>
<path d="M250.94,1178.78a20.63,20.63,0,0,1,20.62-20.63H395.3a20.63,20.63,0,0,1,0,41.26H271.56A20.63,20.63,0,0,1,250.94,1178.78Z" fill="#3AADAA"/>
<path d="M763,1178.78a20.64,20.64,0,0,1,20.64-20.63H947.37a20.63,20.63,0,1,1,0,41.26H783.61A20.64,20.64,0,0,1,763,1178.78Z" fill="#F6F6F6"/>
</g>
<g class="elements">
<path id="element_1" d="M1338.05,29.37a20.63,20.63,0,1,1-20.73-20.53A20.63,20.63,0,0,1,1338.05,29.37Z" fill="#7C6576" transform="translate(-155)">
<animateMotion dur="8s" repeatCount="indefinite" path="M0,154.22A154.22,154.22,0,0,1,154.22,0" calcMode="spline" keyPoints="0;1;0" keyTimes="0;0.5;1" keySplines=".56 .37 .43 .58;.56 .37 .43 .58"/>
</path>
<path id="element_2" d="M1339.22,238.7a20.62,20.62,0,1,1-20.62-20.63A20.62,20.62,0,0,1,1339.22,238.7Z" fill="#7C6576" transform="translate(-57 -111)">
<animateMotion dur="5s" repeatCount="indefinite" path="M54.72,109.45a54.73,54.73,0,1,1,54.73-54.73" calcMode="spline" keyPoints="0;1;0" keyTimes="0;0.5;1" keySplines=".56 .37 .43 .58;.56 .37 .43 .58"/>
</path>
<path id="element_3" d="M1088.81,456.19a20.63,20.63,0,1,1,20.62-20.63A20.63,20.63,0,0,1,1088.81,456.19Z" fill="#383E45" transform="translate(-134)">
<animateMotion dur="7s" repeatCount="indefinite" path="M134.27,0A134.26,134.26,0,0,1,0,134.27" calcMode="spline" keyPoints="0;1;0" keyTimes="0;0.5;1" keySplines=".56 .37 .43 .58;.56 .37 .43 .58"/>
</path>
<path id="element_4" d="M1395.79,502.16a20.63,20.63,0,1,1,20.62-20.63A20.63,20.63,0,0,1,1395.79,502.16Z" fill="#7C6576">
<animateMotion dur="9s" repeatCount="indefinite" path="M0,0A115.1,115.1,0,0,0,115.1,115.1" calcMode="spline" keyPoints="0;1;0" keyTimes="0;0.5;1" keySplines=".56 .37 .43 .58;.56 .37 .43 .58"/>
</path>
<path id="element_5" d="M1370.31,675.88a20.63,20.63,0,1,1,0-29.17A20.62,20.62,0,0,1,1370.31,675.88Z" fill="#383E45" transform="translate(-156 -2)">
<animateMotion dur="12s" repeatCount="indefinite" path="M155.57,0A155.57,155.57,0,0,1,0,155.57" calcMode="spline" keyPoints="0;1;0" keyTimes="0;0.5;1" keySplines=".56 .37 .43 .58;.56 .37 .43 .58"/>
</path>
<path id="element_6" d="M1587.29,732.61A20.63,20.63,0,1,1,1566.66,712,20.63,20.63,0,0,1,1587.29,732.61Z" fill="#7C6576" transform="translate(-200)">
<animateMotion dur="4s" repeatCount="indefinite" path="M0,200.86C0,89.93,89.93,0,200.86,0" calcMode="spline" keyPoints="0;1;0" keyTimes="0;0.5;1" keySplines=".56 .37 .43 .58;.56 .37 .43 .58"/>
</path>
<path id="element_7" d="M1492.42,930.06a20.62,20.62,0,1,0-20.62,20.63A20.63,20.63,0,0,0,1492.42,930.06Z" fill="#7C6576" transform="translate(0 -96)">
<animateMotion dur="6s" repeatCount="indefinite" path="M0,96.37A96.37,96.37,0,0,1,96.37,0" calcMode="spline" keyPoints="0;1;0" keyTimes="0;0.5;1" keySplines=".56 .37 .43 .58;.56 .37 .43 .58"/>
</path>
<path id="element_8" d="M725.85,763.26a20.63,20.63,0,1,1-20.63-20.63A20.63,20.63,0,0,1,725.85,763.26Z" fill="#7C6576" transform="translate(2 -178)">
<animateMotion dur="8s" repeatCount="indefinite" path="M178.06,0A178.06,178.06,0,0,1,0,178.06" calcMode="spline" keyPoints="0;1;0" keyTimes="0;0.5;1" keySplines=".56 .37 .43 .58;.56 .37 .43 .58"/>
</path>
<path id="element_9" d="M1088.81,780.94a20.63,20.63,0,1,1-20.63-20.63A20.63,20.63,0,0,1,1088.81,780.94Z" fill="#7C6576" transform="translate(-68 -142)
">
<animateMotion dur="15s" repeatCount="indefinite" path="M70.14,140.28A70.14,70.14,0,0,1,70.14,0" calcMode="spline" keyPoints="0;1;0" keyTimes="0;0.5;1" keySplines=".56 .37 .43 .58;.56 .37 .43 .58"/>
</path>
<path id="element_10" d="M1142.43,1009a20.63,20.63,0,1,1-20.63-20.63A20.63,20.63,0,0,1,1142.43,1009Z" fill="#7C6576" transform="translate(0 -56)">
<animateMotion dur="13s" repeatCount="indefinite" path="M56.31,0A56.31,56.31,0,1,1,0,56.31" calcMode="spline" keyPoints="0;1;0" keyTimes="0;0.5;1" keySplines=".56 .37 .43 .58;.56 .37 .43 .58"/>
</path>
<path id="element_11" d="M1046.38,1009.63A20.62,20.62,0,1,1,1025.76,989,20.63,20.63,0,0,1,1046.38,1009.63Z" fill="#7C6576" transform="translate(-53)">
<animateMotion dur="8s" repeatCount="indefinite" path="M55.7,111.39A55.7,55.7,0,1,1,55.7,0" calcMode="spline" keyPoints="0;1;0" keyTimes="0;0.5;1" keySplines=".56 .37 .43 .58;.56 .37 .43 .58"/>
</path>
<path id="element_12" d="M403.54,1056.19a20.63,20.63,0,1,1,20.63-20.63A20.63,20.63,0,0,1,403.54,1056.19Z" fill="#7C6576" transform="translate(0 -54)">
<animateMotion dur="6s" repeatCount="indefinite" path="M0,55.09a55.09,55.09,0,1,1,110.17,0" calcMode="spline" keyPoints="0;1;0" keyTimes="0;0.5;1" keySplines=".56 .37 .43 .58;.56 .37 .43 .58"/>
</path>
<path id="element_13" d="M303.38,911.79A20.63,20.63,0,1,1,324,891.16,20.63,20.63,0,0,1,303.38,911.79Z" fill="#7C6576" transform="translate(0 -58)">
<animateMotion dur="3s" repeatCount="indefinite" path="M0,56.35A56.35,56.35,0,1,1,56.35,112.7" calcMode="spline" keyPoints="0;1;0" keyTimes="0;0.5;1" keySplines=".56 .37 .43 .58;.56 .37 .43 .58"/>
</path>
<path id="element_14" d="M292.18,1178.78a20.62,20.62,0,1,0-20.62,20.63A20.63,20.63,0,0,0,292.18,1178.78Z" fill="#7C6576" transform="translate(0 -1)">
<animateMotion dur="5s" repeatCount="indefinite" path="M1,1H126.17" calcMode="spline" keyPoints="0;1;0" keyTimes="0;0.5;1" keySplines=".56 .37 .43 .58;.56 .37 .43 .58"/>
</path>
<path id="element_15" d="M952.7,1199.41a20.63,20.63,0,1,1,20.62-20.63A20.63,20.63,0,0,1,952.7,1199.41Z" fill="#7C6576" transform="translate(-170 -5)">
<animateMotion dur="11s" repeatCount="indefinite" path="M0,5.3H167.14" calcMode="spline" keyPoints="0;1;0" keyTimes="0;0.5;1" keySplines=".56 .37 .43 .58;.56 .37 .43 .58"/>
</path>
</g>
</svg>
<svg viewBox="0 0 1 1" id="preview" preserveAspectRatio="none">
<use xlink:href="#filterPath" fill="darkgrey"/>
</svg>
<image xlink:href="" clip-path="url(#clip-path)"/>
</svg>

After

Width:  |  Height:  |  Size: 16 KiB

@@ -0,0 +1,35 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
<defs>
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
<use xlink:href="#filterPath" fill="none"/>
</clipPath>
<path id="filterPath" d="M0.8364,0.2594c0.1094,0.1379,0.1905,0.3011,0.1553,0.4281c-0.0353,0.127-0.1905,0.2141-0.3352,0.2649c-0.1447,0.0508-0.2823,0.0689-0.3846,0.0145c-0.0988-0.0544-0.1588-0.1778-0.2082-0.3302C0.0107,0.4916-0.0316,0.3138,0.0319,0.1904C0.0989,0.0634,0.2754-0.0128,0.4341,0.0018C0.5894,0.0163,0.727,0.1251,0.8364,0.2594z">
<animate dur="12s" repeatCount="indefinite" attributeName="d" attributeType="XML"
values="
M0.8364,0.2594c0.1094,0.1379,0.1905,0.3011,0.1553,0.4281c-0.0353,0.127-0.1905,0.2141-0.3352,0.2649c-0.1447,0.0508-0.2823,0.0689-0.3846,0.0145c-0.0988-0.0544-0.1588-0.1778-0.2082-0.3302C0.0107,0.4916-0.0316,0.3138,0.0319,0.1904C0.0989,0.0634,0.2754-0.0128,0.4341,0.0018C0.5894,0.0163,0.727,0.1251,0.8364,0.2594z;
M.9238.2221c.0756.1126.0876.2393.0677.3731c-.0199.1337-.0756.2745-.199.3484C.6691 1.0175.4819 1.0176.3227.9507c-.1553-.0634-.2826-.1936-.3145-.3344c-.0318-.1408.0318-.2956.1433-.4153C.263.0778.4222-.0066.5655.0004C.7128.0074.8482.1095.9238.2221z;
M.9182.1241c.088.1102.1021.3071.0563.4764c-.0458.1693-.1408.311-.264.3701c-.1232.0551-.2745.0276-.4153-.0394c-.1408-.0709-.271-.1772-.2921-.3071c-.0211-.1299.0704-.2756.1689-.3937c.1021-.1142.2112-.1969.3484-.2205C.6612-.0177.8302.0099.9182.1241z;
M0.8968,0.2273c0.0951,0.1495,0.1303,0.3459,0.081,0.4869c-0.0493,0.1409-0.1831,0.2221-0.3028,0.2605c-0.1197,0.0384-0.2253,0.0299-0.3556-0.0043c-0.1338-0.0384-0.2958-0.1068-0.3169-0.2178c-0.0211-0.1068,0.0986-0.2563,0.2042-0.41c0.1056-0.1538,0.2007-0.3118,0.3204-0.3374C0.6538-0.0247,0.8017,0.0778,0.8968,0.2273z;
M0.8364,0.2594c0.1094,0.1379,0.1905,0.3011,0.1553,0.4281c-0.0353,0.127-0.1905,0.2141-0.3352,0.2649c-0.1447,0.0508-0.2823,0.0689-0.3846,0.0145c-0.0988-0.0544-0.1588-0.1778-0.2082-0.3302C0.0107,0.4916-0.0316,0.3138,0.0319,0.1904C0.0989,0.0634,0.2754-0.0128,0.4341,0.0018C0.5894,0.0163,0.727,0.1251,0.8364,0.2594z"
calcMode="spline"
keySplines=".45 .05 .55 .95;.45 .05 .55 .95;.45 .05 .55 .95;.45 .05 .55 .95"/>
</path>
</defs>
<svg viewBox="0 0 1 1" id="preview" preserveAspectRatio="none">
<use xlink:href="#filterPath" fill="darkgrey"/>
</svg>
<image xlink:href="" clip-path="url(#clip-path)"/>
<svg class="background" viewBox="0 0 28.3 28.3" preserveAspectRatio="none">
<path id="background" d="M26.2 6.3c1.9 3.1 1.6 7.3.6 11.1c-1 3.8-2.7 7.3-5.8 9.2c-3.1 1.9-7.4 2.3-10.6.6c-3.2-1.7-5.2-5.4-7-10.2C1.6 12.2-.4 6.5 1.8 3.3c2.1-3.2 8.2-3.8 13.3-3C20.1 1.1 24.2 3.2 26.2 6.3z" fill="#7C6576" opacity=".3">
<animate dur="18s" repeatCount="indefinite" attributeName="d" attributeType="XML"
values="
M26.2 6.3c1.9 3.1 1.6 7.3.6 11.1c-1 3.8-2.7 7.3-5.8 9.2c-3.1 1.9-7.4 2.3-10.6.6c-3.2-1.7-5.2-5.4-7-10.2C1.6 12.2-.4 6.5 1.8 3.3c2.1-3.2 8.2-3.8 13.3-3C20.1 1.1 24.2 3.2 26.2 6.3z;
M23.2 7c2.1 3.4 3 7 2.4 10.4c-.6 3.5-2.7 6.8-6 8.9c-3.3 2.1-7.8 2.8-11 1.1c-3.1-1.7-4.9-5.8-5.7-9.9C2.1 13.4 2.5 9.4 4.6 5.9c2.1-3.4 6.1-6.2 9.6-5.9C17.8.3 21.1 3.6 23.2 7z;
M26.9 4.9c1.8 2.9 1.1 7-.1 10.5c-1.2 3.5-2.9 6.5-6.1 9C17.5 26.9 12.8 29.2 9 28c-3.9-1.2-7-5.8-8.1-10.7c-1.1-5-.2-10.4 2.8-13.5c3-3.2 8-4 12.7-3.7C20.9.4 25.1 2 26.9 4.9z;
M23.5 8.9c2.5 3.7 4.8 6.9 4.7 10.6c-.1 3.7-2.5 7.8-5.7 8.7c-3.2 1-7.2-1.2-11.3-3.1C7.1 23.2 2.8 21.3 1 17.8c-1.7-3.5-.9-8.7 2-12.5c2.9-3.8 7.8-6 11.6-5.1C18.4 1.1 21 5.2 23.5 8.9z;
M26.2 6.3c1.9 3.1 1.6 7.3.6 11.1c-1 3.8-2.7 7.3-5.8 9.2c-3.1 1.9-7.4 2.3-10.6.6c-3.2-1.7-5.2-5.4-7-10.2C1.6 12.2-.4 6.5 1.8 3.3c2.1-3.2 8.2-3.8 13.3-3C20.1 1.1 24.2 3.2 26.2 6.3z"
calcMode="spline"
keySplines=".45 .05 .55 .95; .45 .05 .55 .95; .45 .05 .55 .95; .45 .05 .55 .95"/>
</path>
</svg>
</svg>

After

Width:  |  Height:  |  Size: 4.0 KiB

@@ -0,0 +1,21 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
<defs>
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
<use xlink:href="#filterPath" fill="none"/>
</clipPath>
<path id="filterPath" d="M0.1131,0.9315c-0.0212,0.0037-0.0389,0.0073-0.0601,0.011c-0.0707-0.2813-0.0707-0.5991,0-0.9242c0.0212-0.0037,0.0389-0.011,0.0601-0.011C0.0495,0.3215,0.0495,0.6393,0.1131,0.9315zM0.2297,0.9242c-0.0424-0.3032-0.0424-0.621,0-0.9242c-0.0212,0-0.0459,0-0.0671,0C0.1131,0.3105,0.1131,0.6283,0.1661,0.9279C0.1873,0.9242,0.2085,0.9242,0.2297,0.9242zM0.3498,0.9352C0.3286,0.6283,0.3286,0.3105,0.3498,0.011C0.3251,0.0073,0.3004,0.0037,0.2756,0c-0.0353,0.3032-0.0353,0.621,0,0.9242C0.3004,0.9279,0.3251,0.9315,0.3498,0.9352zM0.47,0.9571c-0.0035-0.3068-0.0035-0.621,0-0.9242c-0.0283-0.0037-0.053-0.011-0.0813-0.0146c-0.0177,0.3032-0.0177,0.6174,0,0.9242C0.417,0.9461,0.4417,0.9498,0.47,0.9571zM0.5901,0.979c0.0141-0.3032,0.0141-0.6174,0-0.9242c-0.0283-0.0037-0.0601-0.011-0.0883-0.0183c0,0.3032,0,0.621,0,0.9242C0.53,0.968,0.5583,0.9753,0.5901,0.979zM0.7102,0.9973c0.0318-0.3032,0.0318-0.6174,0-0.9242c-0.0318-0.0037-0.0636-0.0073-0.0989-0.0146c0.0177,0.3068,0.0177,0.6247,0,0.9242C0.6431,0.99,0.6784,0.9936,0.7102,0.9973zM0.8304,0.9973c0.053-0.3068,0.053-0.6247,0-0.9242c-0.0353,0.0037-0.0707,0-0.106,0c0.0353,0.3068,0.0353,0.6247,0,0.9242C0.7597,1.0009,0.7951,1.0009,0.8304,0.9973zM0.8339,0.9973c0.0389-0.0037,0.0742-0.0073,0.1131-0.0183c0.0707-0.3288,0.0707-0.6429,0-0.9242c-0.0389,0.011-0.0742,0.0146-0.1131,0.0183C0.8869,0.3726,0.8869,0.6904,0.8339,0.9973z"/>
<g id="animation">
<animate xlink:href="#filterPath" dur="12s" repeatCount="indefinite" attributeName="d" attributeType="XML"
values="
M0.1131,0.9315c-0.0212,0.0037-0.0389,0.0073-0.0601,0.011c-0.0707-0.2813-0.0707-0.5991,0-0.9242c0.0212-0.0037,0.0389-0.011,0.0601-0.011C0.0495,0.3215,0.0495,0.6393,0.1131,0.9315zM0.2297,0.9242c-0.0424-0.3032-0.0424-0.621,0-0.9242c-0.0212,0-0.0459,0-0.0671,0C0.1131,0.3105,0.1131,0.6283,0.1661,0.9279C0.1873,0.9242,0.2085,0.9242,0.2297,0.9242zM0.3498,0.9352C0.3286,0.6283,0.3286,0.3105,0.3498,0.011C0.3251,0.0073,0.3004,0.0037,0.2756,0c-0.0353,0.3032-0.0353,0.621,0,0.9242C0.3004,0.9279,0.3251,0.9315,0.3498,0.9352zM0.47,0.9571c-0.0035-0.3068-0.0035-0.621,0-0.9242c-0.0283-0.0037-0.053-0.011-0.0813-0.0146c-0.0177,0.3032-0.0177,0.6174,0,0.9242C0.417,0.9461,0.4417,0.9498,0.47,0.9571zM0.5901,0.979c0.0141-0.3032,0.0141-0.6174,0-0.9242c-0.0283-0.0037-0.0601-0.011-0.0883-0.0183c0,0.3032,0,0.621,0,0.9242C0.53,0.968,0.5583,0.9753,0.5901,0.979zM0.7102,0.9973c0.0318-0.3032,0.0318-0.6174,0-0.9242c-0.0318-0.0037-0.0636-0.0073-0.0989-0.0146c0.0177,0.3068,0.0177,0.6247,0,0.9242C0.6431,0.99,0.6784,0.9936,0.7102,0.9973zM0.8304,0.9973c0.053-0.3068,0.053-0.6247,0-0.9242c-0.0353,0.0037-0.0707,0-0.106,0c0.0353,0.3068,0.0353,0.6247,0,0.9242C0.7597,1.0009,0.7951,1.0009,0.8304,0.9973zM0.8339,0.9973c0.0389-0.0037,0.0742-0.0073,0.1131-0.0183c0.0707-0.3288,0.0707-0.6429,0-0.9242c-0.0389,0.011-0.0742,0.0146-0.1131,0.0183C0.8869,0.3726,0.8869,0.6904,0.8339,0.9973z;
M0.1131,0.9927c-0.0212-0.0037-0.0389-0.0073-0.0601-0.011c-0.0707-0.3291-0.0707-0.6436,0-0.9252c0.0212,0.0037,0.0389,0.011,0.0601,0.011C0.0495,0.3564,0.0495,0.6745,0.1131,0.9927zM0.2297,1c-0.0424-0.3035-0.0424-0.6217,0-0.9252c-0.0212,0-0.0459,0-0.0671,0c-0.053,0.2999-0.053,0.618,0,0.9252C0.1873,1,0.2085,1,0.2297,1zM0.3498,0.989c-0.0247-0.2999-0.0247-0.618,0-0.9252C0.3251,0.0638,0.3004,0.0675,0.2756,0.0711c-0.0353,0.3072-0.0353,0.6254,0,0.9252C0.3004,0.9927,0.3251,0.9927,0.3498,0.989zM0.47,0.9671c-0.0035-0.3035-0.0035-0.6217,0-0.9252c-0.0283,0.0037-0.053,0.011-0.0813,0.0146c-0.0177,0.3072-0.0177,0.6254,0,0.9252C0.417,0.9781,0.4417,0.9744,0.47,0.9671zM0.5901,0.9451c0.0141-0.3072,0.0141-0.6254,0-0.9252c-0.0283,0.0037-0.0601,0.011-0.0883,0.0183c0,0.3035,0,0.6217,0,0.9252C0.53,0.9561,0.5583,0.9488,0.5901,0.9451zM0.7102,0.9269c0.0318-0.3072,0.0318-0.6254,0-0.9252c-0.0318,0.0037-0.0636,0.0073-0.0989,0.0146c0.0177,0.3035,0.0177,0.618,0,0.9252C0.6431,0.9342,0.6784,0.9305,0.7102,0.9269zM0.8304,0.9269c0.053-0.2999,0.053-0.618,0-0.9252c-0.0353-0.0037-0.0707,0-0.106,0c0.0353,0.3035,0.0353,0.6217,0,0.9252C0.7597,0.9232,0.7951,0.9232,0.8304,0.9269zM0.8339,0.9269c0.0389,0.0037,0.0742,0.0073,0.1131,0.0183c0.0707-0.2816,0.0707-0.5998,0-0.9252c-0.0389-0.011-0.0742-0.0146-0.1131-0.0183C0.8869,0.3088,0.8869,0.627,0.8339,0.9269z;
M0.1131,0.9315c-0.0212,0.0037-0.0389,0.0073-0.0601,0.011c-0.0707-0.2813-0.0707-0.5991,0-0.9242c0.0212-0.0037,0.0389-0.011,0.0601-0.011C0.0495,0.3215,0.0495,0.6393,0.1131,0.9315zM0.2297,0.9242c-0.0424-0.3032-0.0424-0.621,0-0.9242c-0.0212,0-0.0459,0-0.0671,0C0.1131,0.3105,0.1131,0.6283,0.1661,0.9279C0.1873,0.9242,0.2085,0.9242,0.2297,0.9242zM0.3498,0.9352C0.3286,0.6283,0.3286,0.3105,0.3498,0.011C0.3251,0.0073,0.3004,0.0037,0.2756,0c-0.0353,0.3032-0.0353,0.621,0,0.9242C0.3004,0.9279,0.3251,0.9315,0.3498,0.9352zM0.47,0.9571c-0.0035-0.3068-0.0035-0.621,0-0.9242c-0.0283-0.0037-0.053-0.011-0.0813-0.0146c-0.0177,0.3032-0.0177,0.6174,0,0.9242C0.417,0.9461,0.4417,0.9498,0.47,0.9571zM0.5901,0.979c0.0141-0.3032,0.0141-0.6174,0-0.9242c-0.0283-0.0037-0.0601-0.011-0.0883-0.0183c0,0.3032,0,0.621,0,0.9242C0.53,0.968,0.5583,0.9753,0.5901,0.979zM0.7102,0.9973c0.0318-0.3032,0.0318-0.6174,0-0.9242c-0.0318-0.0037-0.0636-0.0073-0.0989-0.0146c0.0177,0.3068,0.0177,0.6247,0,0.9242C0.6431,0.99,0.6784,0.9936,0.7102,0.9973zM0.8304,0.9973c0.053-0.3068,0.053-0.6247,0-0.9242c-0.0353,0.0037-0.0707,0-0.106,0c0.0353,0.3068,0.0353,0.6247,0,0.9242C0.7597,1.0009,0.7951,1.0009,0.8304,0.9973zM0.8339,0.9973c0.0389-0.0037,0.0742-0.0073,0.1131-0.0183c0.0707-0.3288,0.0707-0.6429,0-0.9242c-0.0389,0.011-0.0742,0.0146-0.1131,0.0183C0.8869,0.3726,0.8869,0.6904,0.8339,0.9973z"
calcMode="spline"
keySplines=".45 .05 .55 .95;.45 .05 .55 .95"/>
</g>
</defs>
<svg viewBox="0 0 1 1" id="preview" preserveAspectRatio="none">
<use xlink:href="#filterPath" fill="darkgrey"/>
</svg>
<image xlink:href="" clip-path="url(#clip-path)"/>
</svg>

After

Width:  |  Height:  |  Size: 6.0 KiB

@@ -0,0 +1,20 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
<defs>
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
<use xlink:href="#filterPath" fill="none"/>
</clipPath>
<path id="filterPath" d="M.9948.294c.0211.099-.0282.1627-.0317.2617c-.0035.0955.0388.2264-.0388.3219c-.0775.0955-.2749.1521-.4371.1061c-.1657-.046-.2996-.1945-.2432-.2936c.0564-.0991.2996-.1486.4265-.2688c.1269-.1202.1269-.3113.1727-.3396C.889.0606.9771.195.9948.294zM.0748.2303c.0529-.0955.1057-.1662.2044-.2051c.0987-.0354.2432-.0389.3243.0248c.0811.0637.0952.1875.0493.2794c-.0458.0955-.1516.1592-.2855.1945c-.1339.0354-.2926.0389-.3454-.0177C-.0309.4496.0219.3258.0748.2303z">
<animate class="animation" dur="45s" repeatCount="indefinite" attributeName="d" attributeType="XML"
values="
M.9948.294c.0211.099-.0282.1627-.0317.2617c-.0035.0955.0388.2264-.0388.3219c-.0775.0955-.2749.1521-.4371.1061c-.1657-.046-.2996-.1945-.2432-.2936c.0564-.0991.2996-.1486.4265-.2688c.1269-.1202.1269-.3113.1727-.3396C.889.0606.9771.195.9948.294zM.0748.2303c.0529-.0955.1057-.1662.2044-.2051c.0987-.0354.2432-.0389.3243.0248c.0811.0637.0952.1875.0493.2794c-.0458.0955-.1516.1592-.2855.1945c-.1339.0354-.2926.0389-.3454-.0177C-.0309.4496.0219.3258.0748.2303z;
M.9984.445c-.0109.1058-.0764.1532-.1092.248c-.0328.0948-.1055.2298-.222.2772c-.1165.0474-.4367.0438-.5823-.0511c-.1638-.1058-.0328-.2261.0509-.31c.0837-.0839.3421-.0584.4986-.1386c.1565-.0802.2184-.2699.2729-.2808C.962.1787 1.0093.3392.9984.445zM.1687.1459c.0728-.0875.1092-.1204.2184-.1386c.1055-.0182.1674 0 .2693.0292c.1165.0328.1638.1204.0983.2079c-.0655.0875-.2402.1787-.3785.1897c-.1419.0109-.3239.0802-.3676.0109C-.0351.3757.0995.2334.1687.1459z;
M.9684.8411c-.0651.0849-.1591.144-.2603.1144c-.094-.0258-.2711.0406-.3941.0443c-.1229.0037-.1988-.0664-.2748-.2289c-.0832-.1772-.0253-.3396.0904-.3617c.1157-.0221.2784.2252.4555.2399c.1771.0147.2964-.1181.3471-.0997C.9864.568 1.0334.7562.9684.8411zM.408.0291c.1085-.0369.2567-.0406.3543 0c.1012.0443.1699.0738.1952.1698c.0325.1181.0687.2879-.2133.3765c-.1012.0406-.2639-.0554-.3181-.1476C.3502.2912.0465.3724.0465.2875C.0465.1398.3032.0623.408.0291z;
M.9984.445c-.0109.1058-.0764.1532-.1092.248c-.0328.0948-.1055.2298-.222.2772c-.1165.0474-.4367.0438-.5823-.0511c-.1638-.1058-.0328-.2261.0509-.31c.0837-.0839.3421-.0584.4986-.1386c.1565-.0802.2184-.2699.2729-.2808C.962.1787 1.0093.3392.9984.445zM.1687.1459c.0728-.0875.1092-.1204.2184-.1386c.1055-.0182.1674 0 .2693.0292c.1165.0328.1638.1204.0983.2079c-.0655.0875-.2402.1787-.3785.1897c-.1419.0109-.3239.0802-.3676.0109C-.0351.3757.0995.2334.1687.1459z;
M.9948.294c.0211.099-.0282.1627-.0317.2617c-.0035.0955.0388.2264-.0388.3219c-.0775.0955-.2749.1521-.4371.1061c-.1657-.046-.2996-.1945-.2432-.2936c.0564-.0991.2996-.1486.4265-.2688c.1269-.1202.1269-.3113.1727-.3396C.889.0606.9771.195.9948.294zM.0748.2303c.0529-.0955.1057-.1662.2044-.2051c.0987-.0354.2432-.0389.3243.0248c.0811.0637.0952.1875.0493.2794c-.0458.0955-.1516.1592-.2855.1945c-.1339.0354-.2926.0389-.3454-.0177C-.0309.4496.0219.3258.0748.2303z"/>
</path>
</defs>
<svg viewBox="0 0 1 1" id="preview" preserveAspectRatio="none">
<use xlink:href="#filterPath" fill="darkgrey"/>
</svg>
<image xlink:href="" clip-path="url(#clip-path)"/>
</svg>

After

Width:  |  Height:  |  Size: 3.4 KiB

@@ -0,0 +1,100 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
<defs>
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
<use xlink:href="#filterPath" fill="none"/>
</clipPath>
<path id="filterPath" d="M0 0 1 0 1 1 0 1Z"/>
</defs>
<svg viewBox="0 0 1 1" id="preview" preserveAspectRatio="none">
<use xlink:href="#filterPath" fill="darkgrey"/>
</svg>
<image xlink:href="" clip-path="url(#clip-path)"/>
<svg preserveAspectRatio="xMidYMid" viewBox="0 0 1048 998">
<style type="text/css">
@keyframes ld-speed-dash {
0% { transform: translate(0,-1535.2044154363916px); }
100% { transform: translate(0,1535.2044154363916px); }
}
.ld.ld-speed-dash { animation: ld-speed-dash 30s linear infinite; }
</style>
<g transform="translate(524,499)">
<g style="transform:rotate(317deg)">
<line x1="139.100879730443" x2="139.100879730443" y1="0" y2="-71.04786877195058" stroke="#FFFFFF" stroke-width="0.7130947004639525" stroke-linecap="round" class="ld ld-speed-dash" style="animation-delay: -16.703482167176887s;animation-duration:55s"/>
<line x1="-63.51861727952404" x2="-63.51861727952404" y1="0" y2="-68.39111041164568" stroke="#FFFFFF" stroke-width="3.3214265507816907" stroke-linecap="round" class="ld ld-speed-dash" style="animation-delay: -4.374240038464121s;animation-duration:15s"/>
<line x1="-117.49024395060964" x2="-117.49024395060964" y1="0" y2="-58.78211742934825" stroke="#FFFFFF" stroke-width="6.173126328985981" stroke-linecap="round" class="ld ld-speed-dash" style="animation-delay: -5.776258306947928s;animation-duration:30s"/>
<line x1="-114.06891986032277" x2="-114.06891986032277" y1="0" y2="-87.13160412483236" stroke="#FFFFFF" stroke-width="7.201752963720091" stroke-linecap="round" class="ld ld-speed-dash" style="animation-delay: -11.531954312553463s;animation-duration:55s"/>
<line x1="207.9741440374656" x2="207.9741440374656" y1="0" y2="-41.511786344890226" stroke="#FFFFFF" stroke-width="9.145795097464573" stroke-linecap="round" class="ld ld-speed-dash" style="animation-delay: -9.128739134637772s;animation-duration:15s"/>
<line x1="-254.50083191979107" x2="-254.50083191979107" y1="0" y2="-71.89367792709987" stroke="#FFFFFF" stroke-width="5.367733709347666" stroke-linecap="round" class="ld ld-speed-dash" style="animation-delay: -2.7849402787702315s;animation-duration:30s"/>
<line x1="231.6361646857463" x2="231.6361646857463" y1="0" y2="-64.5929400012937" stroke="#FFFFFF" stroke-width="0.2981416926990728" stroke-linecap="round" class="ld ld-speed-dash" style="animation-delay: -9.30518152134181s;animation-duration:55s"/>
<line x1="-161.2513495410185" x2="-161.2513495410185" y1="0" y2="-30.230744542410037" stroke="#FFFFFF" stroke-width="4.800203605695815" stroke-linecap="round" class="ld ld-speed-dash" style="animation-delay: -19.238479879923347s;animation-duration:15s"/>
<line x1="-344.43724073643705" x2="-344.43724073643705" y1="0" y2="-72.62320854950363" stroke="#FFFFFF" stroke-width="3.0452074326826537" stroke-linecap="round" class="ld ld-speed-dash" style="animation-delay: -15.2845616094445s;animation-duration:30s"/>
<line x1="-315.0768149645206" x2="-315.0768149645206" y1="0" y2="-57.558847961213495" stroke="#FFFFFF" stroke-width="4.431587553727089" stroke-linecap="round" class="ld ld-speed-dash" style="animation-delay: -18.590861797636933s;animation-duration:55s"/>
<line x1="498.17176842138616" x2="498.17176842138616" y1="0" y2="-82.48271376058466" stroke="#FFFFFF" stroke-width="7.42049387863906" stroke-linecap="round" class="ld ld-speed-dash" style="animation-delay: -14.152060815025628s;animation-duration:15s"/>
<line x1="324.91234501120925" x2="324.91234501120925" y1="0" y2="-39.084540730153655" stroke="#FFFFFF" stroke-width="4.79847375296929" stroke-linecap="round" class="ld ld-speed-dash" style="animation-delay: -3.6845912875746123s;animation-duration:30s"/>
<line x1="147.52142536275292" x2="147.52142536275292" y1="0" y2="-65.94570030949353" stroke="#FFFFFF" stroke-width="3.6455912012668366" stroke-linecap="round" class="ld ld-speed-dash" style="animation-delay: -9.78489176604132s;animation-duration:55s"/>
<line x1="-327.67000573591764" x2="-327.67000573591764" y1="0" y2="-72.47968583034498" stroke="#FFFFFF" stroke-width="6.732430759136288" stroke-linecap="round" class="ld ld-speed-dash" style="animation-delay: -11.656245748581844s;animation-duration:15s"/>
<line x1="-439.54875964304546" x2="-439.54875964304546" y1="0" y2="-70.7000091504135" stroke="#FFFFFF" stroke-width="2.9870126722842323" stroke-linecap="round" class="ld ld-speed-dash" style="animation-delay: -1.4236693153234592s;animation-duration:30s"/>
<line x1="-298.0663521387467" x2="-298.0663521387467" y1="0" y2="-33.506471261847956" stroke="#FFFFFF" stroke-width="7.99502207118555" stroke-linecap="round" class="ld ld-speed-dash" style="animation-delay: -12.910345026680442s;animation-duration:55s"/>
<line x1="411.9653874440297" x2="411.9653874440297" y1="0" y2="-48.44491706270871" stroke="#FFFFFF" stroke-width="0.9009543909407098" stroke-linecap="round" class="ld ld-speed-dash" style="animation-delay: -3.9043515156720066s;animation-duration:15s"/>
<line x1="-354.9524838211148" x2="-354.9524838211148" y1="0" y2="-31.014688677364823" stroke="#FFFFFF" stroke-width="4.908401887449246" stroke-linecap="round" class="ld ld-speed-dash" style="animation-delay: -3.8558556021818324s;animation-duration:30s"/>
<line x1="348.9217881974914" x2="348.9217881974914" y1="0" y2="-37.15527730858323" stroke="#FFFFFF" stroke-width="0.08011844414302499" stroke-linecap="round" class="ld ld-speed-dash" style="animation-delay: -6.390293383769228s;animation-duration:55s"/>
<line x1="-253.65575812674703" x2="-253.65575812674703" y1="0" y2="-59.99226275618864" stroke="#FFFFFF" stroke-width="2.05240820597933" stroke-linecap="round" class="ld ld-speed-dash" style="animation-delay: -9.479737767154166s;animation-duration:15s"/>
<line x1="-159.53131280701962" x2="-159.53131280701962" y1="0" y2="-50.00878205544575" stroke="#FFFFFF" stroke-width="6.821418695266572" stroke-linecap="round" class="ld ld-speed-dash" style="animation-delay: -14.952389091754057s;animation-duration:30s"/>
<line x1="-85.58732142310727" x2="-85.58732142310727" y1="0" y2="-38.158182639854274" stroke="#FFFFFF" stroke-width="6.0338667249992834" stroke-linecap="round" class="ld ld-speed-dash" style="animation-delay: -17.432153054992877s;animation-duration:55s"/>
<line x1="238.5803924391303" x2="238.5803924391303" y1="0" y2="-78.87191687263861" stroke="#FFFFFF" stroke-width="6.567421485086895" stroke-linecap="round" class="ld ld-speed-dash" style="animation-delay: -13.110675756090764s;animation-duration:15s"/>
<line x1="332.56595215916263" x2="332.56595215916263" y1="0" y2="-43.92624562859615" stroke="#FFFFFF" stroke-width="8.148950641334766" stroke-linecap="round" class="ld ld-speed-dash" style="animation-delay: -8.40127391377941s;animation-duration:30s"/>
<line x1="354.08166077331003" x2="354.08166077331003" y1="0" y2="-53.990491786774186" stroke="#FFFFFF" stroke-width="0.08723232325953881" stroke-linecap="round" class="ld ld-speed-dash" style="animation-delay: -14.683037939672747s;animation-duration:55s"/>
<line x1="246.5926558179895" x2="246.5926558179895" y1="0" y2="-53.184781642796295" stroke="#FFFFFF" stroke-width="1.817349691207886" stroke-linecap="round" class="ld ld-speed-dash" style="animation-delay: -18.812996292032366s;animation-duration:15s"/>
<line x1="192.2322075552097" x2="192.2322075552097" y1="0" y2="-25.609081760055016" stroke="#FFFFFF" stroke-width="5.4961007847383065" stroke-linecap="round" class="ld ld-speed-dash" style="animation-delay: -17.931250060946038s;animation-duration:30s"/>
<line x1="-391.93548573454336" x2="-391.93548573454336" y1="0" y2="-71.36506838177266" stroke="#FFFFFF" stroke-width="5.1852102142784116" stroke-linecap="round" class="ld ld-speed-dash" style="animation-delay: -7.676703438612842s;animation-duration:55s"/>
<line x1="284.4720652626202" x2="284.4720652626202" y1="0" y2="-57.39180255114305" stroke="#FFFFFF" stroke-width="9.099336926875209" stroke-linecap="round" class="ld ld-speed-dash" style="animation-delay: -11.100468502738194s;animation-duration:15s"/>
<line x1="28.333272921747565" x2="28.333272921747565" y1="0" y2="-71.53678203874225" stroke="#FFFFFF" stroke-width="7.369747895309885" stroke-linecap="round" class="ld ld-speed-dash" style="animation-delay: -10.648450374739804s;animation-duration:30s"/>
<line x1="192.21591076251792" x2="192.21591076251792" y1="0" y2="-35.069269256143144" stroke="#FFFFFF" stroke-width="6.343891019895506" stroke-linecap="round" class="ld ld-speed-dash" style="animation-delay: -13.552975337712798s;animation-duration:55s"/>
<line x1="-386.3976411463455" x2="-386.3976411463455" y1="0" y2="-76.21323392471032" stroke="#FFFFFF" stroke-width="3.485753542197133" stroke-linecap="round" class="ld ld-speed-dash" style="animation-delay: -1.6717306089600692s;animation-duration:15s"/>
<line x1="55.199288315206225" x2="55.199288315206225" y1="0" y2="-31.3289246141787" stroke="#FFFFFF" stroke-width="4.769166283508337" stroke-linecap="round" class="ld ld-speed-dash" style="animation-delay: -2.156725283391281s;animation-duration:30s"/>
<line x1="278.16052889945706" x2="278.16052889945706" y1="0" y2="-74.94251848701617" stroke="#FFFFFF" stroke-width="6.456259610724869" stroke-linecap="round" class="ld ld-speed-dash" style="animation-delay: -13.617785000560868s;animation-duration:55s"/>
<line x1="342.4393542659095" x2="342.4393542659095" y1="0" y2="-63.13056606145892" stroke="#FFFFFF" stroke-width="1.3363805763840186" stroke-linecap="round" class="ld ld-speed-dash" style="animation-delay: -3.9277071934640517s;animation-duration:15s"/>
<line x1="485.37108467158083" x2="485.37108467158083" y1="0" y2="-36.72165178582405" stroke="#FFFFFF" stroke-width="7.563967329697359" stroke-linecap="round" class="ld ld-speed-dash" style="animation-delay: -15.688507080894318s;animation-duration:30s"/>
<line x1="112.42767145146924" x2="112.42767145146924" y1="0" y2="-56.7378990606034" stroke="#FFFFFF" stroke-width="3.616378447219563" stroke-linecap="round" class="ld ld-speed-dash" style="animation-delay: -5.4482302832414s;animation-duration:55s"/>
<line x1="-36.82785784507289" x2="-36.82785784507289" y1="0" y2="-75.22274643581328" stroke="#FFFFFF" stroke-width="3.652698118563137" stroke-linecap="round" class="ld ld-speed-dash" style="animation-delay: -6.112450485841272s;animation-duration:15s"/>
<line x1="432.2146387231786" x2="432.2146387231786" y1="0" y2="-76.31519116387139" stroke="#FFFFFF" stroke-width="4.291181397225535" stroke-linecap="round" class="ld ld-speed-dash" style="animation-delay: -15.031644988705395s;animation-duration:30s"/>
<line x1="-80.45676501647533" x2="-80.45676501647533" y1="0" y2="-85.95677078741566" stroke="#FFFFFF" stroke-width="7.2791807812302185" stroke-linecap="round" class="ld ld-speed-dash" style="animation-delay: -11.736485043082125s;animation-duration:55s"/>
<line x1="-13.312227591811265" x2="-13.312227591811265" y1="0" y2="-56.14448330374391" stroke="#FFFFFF" stroke-width="4.228278079231071" stroke-linecap="round" class="ld ld-speed-dash" style="animation-delay: -13.266776462541587s;animation-duration:15s"/>
<line x1="-218.2715040420858" x2="-218.2715040420858" y1="0" y2="-65.17812491778103" stroke="#FFFFFF" stroke-width="1.0120832379789995" stroke-linecap="round" class="ld ld-speed-dash" style="animation-delay: -16.600682267823856s;animation-duration:30s"/>
<line x1="-121.69728026806908" x2="-121.69728026806908" y1="0" y2="-53.73266746191761" stroke="#FFFFFF" stroke-width="8.853638892543511" stroke-linecap="round" class="ld ld-speed-dash" style="animation-delay: -8.357309726685255s;animation-duration:55s"/>
<line x1="242.07607809092502" x2="242.07607809092502" y1="0" y2="-25.563754929635905" stroke="#FFFFFF" stroke-width="5.929789356472446" stroke-linecap="round" class="ld ld-speed-dash" style="animation-delay: -6.597792103784408s;animation-duration:15s"/>
<line x1="-39.30346478835616" x2="-39.30346478835616" y1="0" y2="-63.42233842531628" stroke="#FFFFFF" stroke-width="8.98117669406177" stroke-linecap="round" class="ld ld-speed-dash" style="animation-delay: -14.53519580592972s;animation-duration:30s"/>
<line x1="503.06205737791566" x2="503.06205737791566" y1="0" y2="-67.7235704852171" stroke="#FFFFFF" stroke-width="8.59550591697016" stroke-linecap="round" class="ld ld-speed-dash" style="animation-delay: -0.2719460652253014s;animation-duration:55s"/>
<line x1="201.1212811544643" x2="201.1212811544643" y1="0" y2="-65.70666146264549" stroke="#FFFFFF" stroke-width="6.734844660447944" stroke-linecap="round" class="ld ld-speed-dash" style="animation-delay: -3.5587609617142713s;animation-duration:15s"/>
<line x1="-514.3785024555569" x2="-514.3785024555569" y1="0" y2="-79.59542740675269" stroke="#FFFFFF" stroke-width="0.5226434248653391" stroke-linecap="round" class="ld ld-speed-dash" style="animation-delay: -15.585620753390014s;animation-duration:30s"/>
<line x1="-200.6121354177445" x2="-200.6121354177445" y1="0" y2="-69.40773894414676" stroke="#FFFFFF" stroke-width="2.8909082275057894" stroke-linecap="round" class="ld ld-speed-dash" style="animation-delay: -12.630573793889157s;animation-duration:55s"/>
<line x1="-397.34406699452944" x2="-397.34406699452944" y1="0" y2="-27.934199982563676" stroke="#FFFFFF" stroke-width="1.1793627447657988" stroke-linecap="round" class="ld ld-speed-dash" style="animation-delay: -7.949594462595346s;animation-duration:15s"/>
<line x1="42.362409922808766" x2="42.362409922808766" y1="0" y2="-69.58695069480532" stroke="#FFFFFF" stroke-width="7.578334158823694" stroke-linecap="round" class="ld ld-speed-dash" style="animation-delay: -2.364071172520328s;animation-duration:30s"/>
<line x1="-5.4753117712315245" x2="-5.4753117712315245" y1="0" y2="-55.82221101615197" stroke="#FFFFFF" stroke-width="2.7025598189827433" stroke-linecap="round" class="ld ld-speed-dash" style="animation-delay: -8.120620178473734s;animation-duration:55s"/>
<line x1="-313.23505818504486" x2="-313.23505818504486" y1="0" y2="-60.82709793449657" stroke="#FFFFFF" stroke-width="0.5325867153953314" stroke-linecap="round" class="ld ld-speed-dash" style="animation-delay: -18.04609478242723s;animation-duration:15s"/>
<line x1="-384.7885064566058" x2="-384.7885064566058" y1="0" y2="-56.17654673539688" stroke="#FFFFFF" stroke-width="6.416520405694656" stroke-linecap="round" class="ld ld-speed-dash" style="animation-delay: -11.19758339305346s;animation-duration:30s"/>
<line x1="-146.76875242863778" x2="-146.76875242863778" y1="0" y2="-64.45310535273768" stroke="#FFFFFF" stroke-width="2.3881703839076724" stroke-linecap="round" class="ld ld-speed-dash" style="animation-delay: -3.822171986336933s;animation-duration:55s"/>
<line x1="217.29139913621276" x2="217.29139913621276" y1="0" y2="-53.120921012488694" stroke="#FFFFFF" stroke-width="1.926193223541401" stroke-linecap="round" class="ld ld-speed-dash" style="animation-delay: -12.261732444414681s;animation-duration:15s"/>
<line x1="320.46142352549515" x2="320.46142352549515" y1="0" y2="-27.82628366325887" stroke="#FFFFFF" stroke-width="0.17679999974107138" stroke-linecap="round" class="ld ld-speed-dash" style="animation-delay: -5.778316380547146s;animation-duration:30s"/>
<line x1="278.29934105809053" x2="278.29934105809053" y1="0" y2="-75.89823845053398" stroke="#FFFFFF" stroke-width="1.1530078513241997" stroke-linecap="round" class="ld ld-speed-dash" style="animation-delay: -2.8163391150023642s;animation-duration:55s"/>
<line x1="40.37748375173017" x2="40.37748375173017" y1="0" y2="-62.19611316421922" stroke="#FFFFFF" stroke-width="3.7932408294699678" stroke-linecap="round" class="ld ld-speed-dash" style="animation-delay: -5.484795896222212s;animation-duration:15s"/>
<line x1="143.3802854436688" x2="143.3802854436688" y1="0" y2="-82.88948414946906" stroke="#FFFFFF" stroke-width="2.7221781263266673" stroke-linecap="round" class="ld ld-speed-dash" style="animation-delay: -12.797911730771657s;animation-duration:30s"/>
<line x1="-391.0227051116983" x2="-391.0227051116983" y1="0" y2="-42.423913706321244" stroke="#FFFFFF" stroke-width="0.9232402471531866" stroke-linecap="round" class="ld ld-speed-dash" style="animation-delay: -1.0603754423199963s;animation-duration:55s"/>
<line x1="-412.4970430026221" x2="-412.4970430026221" y1="0" y2="-49.54225952346891" stroke="#FFFFFF" stroke-width="7.007150436055624" stroke-linecap="round" class="ld ld-speed-dash" style="animation-delay: -10.550926421679314s;animation-duration:15s"/>
<line x1="86.39419079283995" x2="86.39419079283995" y1="0" y2="-41.1863582302351" stroke="#FFFFFF" stroke-width="1.8916111407730565" stroke-linecap="round" class="ld ld-speed-dash" style="animation-delay: -1.7002214218710066s;animation-duration:30s"/>
<line x1="-375.41219875778046" x2="-375.41219875778046" y1="0" y2="-45.55263414375017" stroke="#FFFFFF" stroke-width="3.929547369071244" stroke-linecap="round" class="ld ld-speed-dash" style="animation-delay: -11.8161534118211s;animation-duration:55s"/>
<line x1="330.4253919092346" x2="330.4253919092346" y1="0" y2="-68.4609969734615" stroke="#FFFFFF" stroke-width="0.2291365897207186" stroke-linecap="round" class="ld ld-speed-dash" style="animation-delay: -14.808609516303667s;animation-duration:15s"/>
<line x1="-150.2787076381307" x2="-150.2787076381307" y1="0" y2="-43.6856644729947" stroke="#FFFFFF" stroke-width="8.853290768409236" stroke-linecap="round" class="ld ld-speed-dash" style="animation-delay: -4.6397838944192715s;animation-duration:30s"/>
<line x1="127.24194395601141" x2="127.24194395601141" y1="0" y2="-61.83529047818619" stroke="#FFFFFF" stroke-width="0.8766954743243146" stroke-linecap="round" class="ld ld-speed-dash" style="animation-delay: -9.645853964116945s;animation-duration:55s"/>
<line x1="-479.32805869124036" x2="-479.32805869124036" y1="0" y2="-49.61967344955898" stroke="#FFFFFF" stroke-width="8.992273709112911" stroke-linecap="round" class="ld ld-speed-dash" style="animation-delay: -14.992490287727213s;animation-duration:15s"/>
<line x1="-235.92659336958332" x2="-235.92659336958332" y1="0" y2="-46.193813376477635" stroke="#FFFFFF" stroke-width="8.19409190520511" stroke-linecap="round" class="ld ld-speed-dash" style="animation-delay: -2.6136304791754483s;animation-duration:30s"/>
<line x1="-443.0760616451817" x2="-443.0760616451817" y1="0" y2="-50.37151653587158" stroke="#FFFFFF" stroke-width="2.152055936537093" stroke-linecap="round" class="ld ld-speed-dash" style="animation-delay: -15.252427300623479s;animation-duration:55s"/>
<line x1="65.7493777276102" x2="65.7493777276102" y1="0" y2="-75.57004159103506" stroke="#FFFFFF" stroke-width="4.600454748316518" stroke-linecap="round" class="ld ld-speed-dash" style="animation-delay: -10.124281037889764s;animation-duration:15s"/>
<line x1="-443.8394454594296" x2="-443.8394454594296" y1="0" y2="-28.39690255418258" stroke="#FFFFFF" stroke-width="3.204753346962342" stroke-linecap="round" class="ld ld-speed-dash" style="animation-delay: -6.7759220001484355s;animation-duration:30s"/>
<line x1="364.44761145888646" x2="364.44761145888646" y1="0" y2="-60.45517301538762" stroke="#FFFFFF" stroke-width="7.12366235593035" stroke-linecap="round" class="ld ld-speed-dash" style="animation-delay: -4.115347432993746s;animation-duration:55s"/>
<line x1="-342.1949749880765" x2="-342.1949749880765" y1="0" y2="-39.900530613861186" stroke="#FFFFFF" stroke-width="8.56648183379656" stroke-linecap="round" class="ld ld-speed-dash" style="animation-delay: -8.843402563150299s;animation-duration:15s"/>
<line x1="276.8962093415599" x2="276.8962093415599" y1="0" y2="-83.74657999585139" stroke="#FFFFFF" stroke-width="8.766009224205" stroke-linecap="round" class="ld ld-speed-dash" style="animation-delay: -18.002832523285868s;animation-duration:30s"/>
</g>
</g>
</svg>
</svg>

After

Width:  |  Height:  |  Size: 21 KiB

@@ -0,0 +1,316 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
<defs>
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
<use xlink:href="#filterPath" fill="none"/>
</clipPath>
<path id="filterPath" d="M0 0 1 0 1 1 0 1Z"/>
</defs>
<svg viewBox="0 0 1 1" id="preview" preserveAspectRatio="none">
<use xlink:href="#filterPath" fill="darkgrey"/>
</svg>
<image xlink:href="" clip-path="url(#clip-path)"/>
<svg preserveAspectRatio="xMidYMid" viewBox="0 0 1792 998">
<g transform="translate(896,499) scale(1,1) translate(-896,-499)">
<path id="path0" d="M 1527.6226653456367 88.4398901953608 c 0 19.1468828489678 -4.684875590704887 5.499636563001389 -10.184512153706276 5.499636563001389 S 1507.2536410382243 107.5867730443286 1507.2536410382243 88.4398901953608 s 4.684875590704887 -5.499636563001389 10.184512153706276 -5.499636563001389 S 1527.6226653456367 69.29300734639301 1527.6226653456367 88.4398901953608z" fill="none" stroke="none"/>
<circle id="circle_0" cx="0" cy="0" r="6.005063664367906" fill="#FFFFFF">
<animateMotion xlink:href="#circle_0" begin="-6.224872262032182s" dur="10s" repeatCount="indefinite"><mpath xlink:href="#path0"/></animateMotion>
</circle>
<path id="path1" d="M 573.0770058526846 897.8696071165839 c 0 20.482251302790807 -5.011614680470091 5.883199842290977 -10.894814522761067 5.883199842290977 S 551.2873768071624 918.3518584193747 551.2873768071624 897.8696071165839 s 5.011614680470091 -5.883199842290977 10.894814522761067 -5.883199842290977 S 573.0770058526846 877.3873558137931 573.0770058526846 897.8696071165839z" fill="none" stroke="none"/>
<circle id="circle_1" cx="0" cy="0" r="5.53372001316273" fill="#FFFFFF">
<animateMotion xlink:href="#circle_1" begin="-1.4620811589727634s" dur="10s" repeatCount="indefinite"><mpath xlink:href="#path1"/></animateMotion>
</circle>
<path id="path2" d="M 507.7974939001856 380.0584322654407 c 0 23.72558196236055 -5.805195586535027 6.814794818975903 -12.61999040551093 6.814794818975903 S 482.55751308916376 403.7840142278012 482.55751308916376 380.0584322654407 s 5.805195586535027 -6.814794818975903 12.61999040551093 -6.814794818975903 S 507.7974939001856 356.33285030308014 507.7974939001856 380.0584322654407z" fill="none" stroke="none"/>
<circle id="circle_2" cx="0" cy="0" r="7.620496924861558" fill="#FFFFFF">
<animateMotion xlink:href="#circle_2" begin="-3.428603936889767s" dur="10s" repeatCount="indefinite"><mpath xlink:href="#path2"/></animateMotion>
</circle>
<path id="path3" d="M 146.3666965404899 6.7659242444326395 c 0 22.4179203451986 -5.485235829144337 6.439189886386831 -11.924425715531168 6.439189886386831 S 122.51784510942757 29.18384458963124 122.51784510942757 6.7659242444326395 s 5.485235829144337 -6.439189886386831 11.924425715531168 -6.439189886386831 S 146.3666965404899 -15.65199610076596 146.3666965404899 6.7659242444326395z" fill="none" stroke="none"/>
<circle id="circle_3" cx="0" cy="0" r="4.357515570272738" fill="#FFFFFF">
<animateMotion xlink:href="#circle_3" begin="-6.11504263580489s" dur="10s" repeatCount="indefinite"><mpath xlink:href="#path3"/></animateMotion>
</circle>
<path id="path4" d="M 163.31910835917245 503.1989502752524 c 0 26.039299317584256 -6.371317918132317 7.479373208242286 -13.850691126374603 7.479373208242286 S 135.61772610642322 529.2382495928366 135.61772610642322 503.1989502752524 s 6.371317918132317 -7.479373208242286 13.850691126374603 -7.479373208242286 S 163.31910835917245 477.15965095766813 163.31910835917245 503.1989502752524z" fill="none" stroke="none"/>
<circle id="circle_4" cx="0" cy="0" r="5.257747425492679" fill="#FFFFFF">
<animateMotion xlink:href="#circle_4" begin="-9.87848092475156s" dur="10s" repeatCount="indefinite"><mpath xlink:href="#path4"/></animateMotion>
</circle>
<path id="path5" d="M 55.8366070844082 714.910111018393 c 0 22.456024418683196 -5.494559166273548 6.450134673451557 -11.944693839725105 6.450134673451557 S 31.94721940495799 737.3661354370762 31.94721940495799 714.910111018393 s 5.494559166273548 -6.450134673451557 11.944693839725105 -6.450134673451557 S 55.8366070844082 692.4540865997097 55.8366070844082 714.910111018393z" fill="none" stroke="none"/>
<circle id="circle_5" cx="0" cy="0" r="4.017752728397131" fill="#FFFFFF">
<animateMotion xlink:href="#circle_5" begin="-2.5755106821274376s" dur="10s" repeatCount="indefinite"><mpath xlink:href="#path5"/></animateMotion>
</circle>
<path id="path6" d="M 480.1593814711465 302.29103251264297 c 0 30.82137230783754 -7.541399607236844 8.852947365017165 -16.39434697225401 8.852947365017165 S 447.37068752663845 333.1124048204805 447.37068752663845 302.29103251264297 s 7.541399607236844 -8.852947365017165 16.39434697225401 -8.852947365017165 S 480.1593814711465 271.46966020480545 480.1593814711465 302.29103251264297z" fill="none" stroke="none"/>
<circle id="circle_6" cx="0" cy="0" r="4.3293262624888635" fill="#FFFFFF">
<animateMotion xlink:href="#circle_6" begin="-2.8991845567777874s" dur="10s" repeatCount="indefinite"><mpath xlink:href="#path6"/></animateMotion>
</circle>
<path id="path7" d="M 1795.021582383942 847.2005912554148 c 0 31.004292384702573 -7.586156647320842 8.90548823815925 -16.491644885480092 8.90548823815925 S 1762.0382926129816 878.2048836401174 1762.0382926129816 847.2005912554148 s 7.586156647320842 -8.90548823815925 16.491644885480092 -8.90548823815925 S 1795.021582383942 816.1962988707122 1795.021582383942 847.2005912554148z" fill="none" stroke="none"/>
<circle id="circle_7" cx="0" cy="0" r="7.252149400026495" fill="#FFFFFF">
<animateMotion xlink:href="#circle_7" begin="-2.319474363918639s" dur="10s" repeatCount="indefinite"><mpath xlink:href="#path7"/></animateMotion>
</circle>
<path id="path8" d="M 1387.2570111270738 268.11257611419717 c 0 21.332004919121903 -5.219533118508551 6.127278008683952 -11.346811127192503 6.127278008683952 S 1364.5633888726888 289.4445810333191 1364.5633888726888 268.11257611419717 s 5.219533118508551 -6.127278008683952 11.346811127192503 -6.127278008683952 S 1387.2570111270738 246.78057119507525 1387.2570111270738 268.11257611419717z" fill="none" stroke="none"/>
<circle id="circle_8" cx="0" cy="0" r="6.1127480572540875" fill="#FFFFFF">
<animateMotion xlink:href="#circle_8" begin="-7.143979333035533s" dur="10s" repeatCount="indefinite"><mpath xlink:href="#path8"/></animateMotion>
</circle>
<path id="path9" d="M 1416.120197605089 655.5367769327356 c 0 29.62387169074381 -7.24839413709689 8.508984421809393 -15.757378558906282 8.508984421809393 S 1384.6054404872764 685.1606486234795 1384.6054404872764 655.5367769327356 s 7.24839413709689 -8.508984421809393 15.757378558906282 -8.508984421809393 S 1416.120197605089 625.9129052419918 1416.120197605089 655.5367769327356z" fill="none" stroke="none"/>
<circle id="circle_9" cx="0" cy="0" r="6.629742655767762" fill="#FFFFFF">
<animateMotion xlink:href="#circle_9" begin="-2.3127393195309476s" dur="10s" repeatCount="indefinite"><mpath xlink:href="#path9"/></animateMotion>
</circle>
<path id="path10" d="M 1386.0744684177123 468.0139396799513 c 0 33.71096462566701 -8.248427514790864 9.682936647797971 -17.931364162588835 9.682936647797971 S 1350.2117400925347 501.72490430561834 1350.2117400925347 468.0139396799513 s 8.248427514790864 -9.682936647797971 17.931364162588835 -9.682936647797971 S 1386.0744684177123 434.3029750542843 1386.0744684177123 468.0139396799513z" fill="none" stroke="none"/>
<circle id="circle_10" cx="0" cy="0" r="4.220115710382529" fill="#FFFFFF">
<animateMotion xlink:href="#circle_10" begin="-4.085329606508625s" dur="10s" repeatCount="indefinite"><mpath xlink:href="#path10"/></animateMotion>
</circle>
<path id="path11" d="M 1723.1617384109247 773.4264753693743 c 0 33.71665141300214 -8.249818962755842 9.684570086713382 -17.934389049469225 9.684570086713382 S 1687.2929603119862 807.1431267823765 1687.2929603119862 773.4264753693743 s 8.249818962755842 -9.684570086713382 17.934389049469225 -9.684570086713382 S 1723.1617384109247 739.7098239563721 1723.1617384109247 773.4264753693743z" fill="none" stroke="none"/>
<circle id="circle_11" cx="0" cy="0" r="5.547662956798196" fill="#FFFFFF">
<animateMotion xlink:href="#circle_11" begin="-7.016760710914451s" dur="10s" repeatCount="indefinite"><mpath xlink:href="#path11"/></animateMotion>
</circle>
<path id="path12" d="M 650.5016086279388 403.99610416241006 c 0 23.873407077663593 -5.8413655615559845 6.857255224435288 -12.698620785991272 6.857255224435288 S 625.1043670559563 427.8695112400737 625.1043670559563 403.99610416241006 s 5.8413655615559845 -6.857255224435288 12.698620785991272 -6.857255224435288 S 650.5016086279388 380.12269708474645 650.5016086279388 403.99610416241006z" fill="none" stroke="none"/>
<circle id="circle_12" cx="0" cy="0" r="6.805676434643689" fill="#FFFFFF">
<animateMotion xlink:href="#circle_12" begin="-1.0168845116271252s" dur="10s" repeatCount="indefinite"><mpath xlink:href="#path12"/></animateMotion>
</circle>
<path id="path13" d="M 1168.8004982163163 522.7121940796384 c 0 19.699854613412654 -4.820177192643521 5.658468878320656 -10.478646070964178 5.658468878320656 S 1147.8432060743878 542.412048693051 1147.8432060743878 522.7121940796384 s 4.820177192643521 -5.658468878320656 10.478646070964178 -5.658468878320656 S 1168.8004982163163 503.01233946622574 1168.8004982163163 522.7121940796384z" fill="none" stroke="none"/>
<circle id="circle_13" cx="0" cy="0" r="6.702672257912094" fill="#FFFFFF">
<animateMotion xlink:href="#circle_13" begin="-8.406541295672818s" dur="10s" repeatCount="indefinite"><mpath xlink:href="#path13"/></animateMotion>
</circle>
<path id="path14" d="M 1415.8095369340817 118.92317039756246 c 0 33.67218502569636 -8.238938889266128 9.671797826529804 -17.910736715795935 9.671797826529804 S 1379.9880635024897 152.5953554232588 1379.9880635024897 118.92317039756246 s 8.238938889266128 -9.671797826529804 17.910736715795935 -9.671797826529804 S 1415.8095369340817 85.25098537186611 1415.8095369340817 118.92317039756246z" fill="none" stroke="none"/>
<circle id="circle_14" cx="0" cy="0" r="6.699082416526213" fill="#FFFFFF">
<animateMotion xlink:href="#circle_14" begin="-9.453679505151689s" dur="10s" repeatCount="indefinite"><mpath xlink:href="#path14"/></animateMotion>
</circle>
<path id="path15" d="M 1513.389757382891 679.5594756050059 c 0 32.612823568537586 -7.979733426344302 9.367513152665051 -17.34724657900935 9.367513152665051 S 1478.6952642248723 712.1722991735435 1478.6952642248723 679.5594756050059 s 7.979733426344302 -9.367513152665051 17.34724657900935 -9.367513152665051 S 1513.389757382891 646.9466520364683 1513.389757382891 679.5594756050059z" fill="none" stroke="none"/>
<circle id="circle_15" cx="0" cy="0" r="6.910411190845731" fill="#FFFFFF">
<animateMotion xlink:href="#circle_15" begin="-8.676037371894827s" dur="10s" repeatCount="indefinite"><mpath xlink:href="#path15"/></animateMotion>
</circle>
<path id="path16" d="M 358.3938279534296 618.9958667753644 c 0 29.283355034023614 -7.165076231729182 8.411176445942953 -15.576252677672136 8.411176445942953 S 327.24132259808533 648.2792218093881 327.24132259808533 618.9958667753644 s 7.165076231729182 -8.411176445942953 15.576252677672136 -8.411176445942953 S 358.3938279534296 589.7125117413408 358.3938279534296 618.9958667753644z" fill="none" stroke="none"/>
<circle id="circle_16" cx="0" cy="0" r="4.11667346572394" fill="#FFFFFF">
<animateMotion xlink:href="#circle_16" begin="-4.6609936317092675s" dur="10s" repeatCount="indefinite"><mpath xlink:href="#path16"/></animateMotion>
</circle>
<path id="path17" d="M 1559.5271259673139 964.2283001047646 c 0 20.259726199245744 -4.957167048751618 5.819283057230161 -10.776450105981779 5.819283057230161 S 1537.9742257553505 984.4880263040103 1537.9742257553505 964.2283001047646 s 4.957167048751618 -5.819283057230161 10.776450105981779 -5.819283057230161 S 1559.5271259673139 943.9685739055188 1559.5271259673139 964.2283001047646z" fill="none" stroke="none"/>
<circle id="circle_17" cx="0" cy="0" r="4.581429292171109" fill="#FFFFFF">
<animateMotion xlink:href="#circle_17" begin="-6.414591679302588s" dur="10s" repeatCount="indefinite"><mpath xlink:href="#path17"/></animateMotion>
</circle>
<path id="path18" d="M 1217.023072172435 549.9676775794858 c 0 33.275018097676664 -8.141759747303864 9.557717964226276 -17.69947771153014 9.557717964226276 S 1181.6241167493747 583.2426956771625 1181.6241167493747 549.9676775794858 s 8.141759747303864 -9.557717964226276 17.69947771153014 -9.557717964226276 S 1217.023072172435 516.6926594818091 1217.023072172435 549.9676775794858z" fill="none" stroke="none"/>
<circle id="circle_18" cx="0" cy="0" r="6.573467519359826" fill="#FFFFFF">
<animateMotion xlink:href="#circle_18" begin="-1.647045671477818s" dur="10s" repeatCount="indefinite"><mpath xlink:href="#path18"/></animateMotion>
</circle>
<path id="path19" d="M 887.6377379909399 282.7808650886725 c 0 20.693675828995893 -5.063346213477718 5.943928163647757 -11.007274377125476 5.943928163647757 S 865.623189236689 303.4745409176684 865.623189236689 282.7808650886725 s 5.063346213477718 -5.943928163647757 11.007274377125476 -5.943928163647757 S 887.6377379909399 262.0871892596766 887.6377379909399 282.7808650886725z" fill="none" stroke="none"/>
<circle id="circle_19" cx="0" cy="0" r="5.896726777928994" fill="#FFFFFF">
<animateMotion xlink:href="#circle_19" begin="-5.972604314143917s" dur="10s" repeatCount="indefinite"><mpath xlink:href="#path19"/></animateMotion>
</circle>
<path id="path20" d="M 1100.119807078773 842.2572809734706 c 0 20.39235909811092 -4.989619779325012 5.857379740946754 -10.846999520271766 5.857379740946754 S 1078.4258080382294 862.6496400715815 1078.4258080382294 842.2572809734706 s 4.989619779325012 -5.857379740946754 10.846999520271766 -5.857379740946754 S 1100.119807078773 821.8649218753598 1100.119807078773 842.2572809734706z" fill="none" stroke="none"/>
<circle id="circle_20" cx="0" cy="0" r="4.6246982858993695" fill="#FFFFFF">
<animateMotion xlink:href="#circle_20" begin="-2.9687023576269778s" dur="10s" repeatCount="indefinite"><mpath xlink:href="#path20"/></animateMotion>
</circle>
<path id="path21" d="M 1610.519969406717 947.9882820401934 c 0 25.049083656780116 -6.129031107510028 7.194949560990033 -13.323980668500061 7.194949560990033 S 1583.872008069717 973.0373656969736 1583.872008069717 947.9882820401934 s 6.129031107510028 -7.194949560990033 13.323980668500061 -7.194949560990033 S 1610.519969406717 922.9391983834133 1610.519969406717 947.9882820401934z" fill="none" stroke="none"/>
<circle id="circle_21" cx="0" cy="0" r="6.397156900510775" fill="#FFFFFF">
<animateMotion xlink:href="#circle_21" begin="-5.0805849692360265s" dur="10s" repeatCount="indefinite"><mpath xlink:href="#path21"/></animateMotion>
</circle>
<path id="path22" d="M 1578.6579357730711 325.64784194279275 c 0 26.568445517006896 -6.50078986054424 7.631362010204109 -14.132151870748348 7.631362010204109 S 1550.3936320315743 352.2162874597997 1550.3936320315743 325.64784194279275 s 6.50078986054424 -7.631362010204109 14.132151870748348 -7.631362010204109 S 1578.6579357730711 299.07939642578583 1578.6579357730711 325.64784194279275z" fill="none" stroke="none"/>
<circle id="circle_22" cx="0" cy="0" r="5.435149097632442" fill="#FFFFFF">
<animateMotion xlink:href="#circle_22" begin="-0.24695004014624322s" dur="10s" repeatCount="indefinite"><mpath xlink:href="#path22"/></animateMotion>
</circle>
<path id="path23" d="M 603.7065440496756 122.67473183721123 c 0 29.77331483243631 -7.2849600121918625 8.551909579529578 -15.836869591721442 8.551909579529578 S 572.0328048662327 152.44804666964754 572.0328048662327 122.67473183721123 s 7.2849600121918625 -8.551909579529578 15.836869591721442 -8.551909579529578 S 603.7065440496756 92.90141700477491 603.7065440496756 122.67473183721123z" fill="none" stroke="none"/>
<circle id="circle_23" cx="0" cy="0" r="5.06145512402902" fill="#FFFFFF">
<animateMotion xlink:href="#circle_23" begin="-7.0385956482150025s" dur="10s" repeatCount="indefinite"><mpath xlink:href="#path23"/></animateMotion>
</circle>
<path id="path24" d="M 315.4884264496855 155.08688244490247 c 0 21.282676386499354 -5.207463371164735 6.11310917484556 -11.320572546010295 6.11310917484556 S 292.84728135766494 176.36955883140183 292.84728135766494 155.08688244490247 s 5.207463371164735 -6.11310917484556 11.320572546010295 -6.11310917484556 S 315.4884264496855 133.8042060584031 315.4884264496855 155.08688244490247z" fill="none" stroke="none"/>
<circle id="circle_24" cx="0" cy="0" r="5.22904676717004" fill="#FFFFFF">
<animateMotion xlink:href="#circle_24" begin="-6.911936685758491s" dur="10s" repeatCount="indefinite"><mpath xlink:href="#path24"/></animateMotion>
</circle>
<path id="path25" d="M 531.0410293334029 755.1948879184143 c 0 23.65868287560242 -5.7888266610516546 6.795579123843249 -12.584405784894903 6.795579123843249 S 505.8722177636131 778.8535707940167 505.8722177636131 755.1948879184143 s 5.7888266610516546 -6.795579123843249 12.584405784894903 -6.795579123843249 S 531.0410293334029 731.536205042812 531.0410293334029 755.1948879184143z" fill="none" stroke="none"/>
<circle id="circle_25" cx="0" cy="0" r="5.726740041134284" fill="#FFFFFF">
<animateMotion xlink:href="#circle_25" begin="-8.8052420814231s" dur="10s" repeatCount="indefinite"><mpath xlink:href="#path25"/></animateMotion>
</circle>
<path id="path26" d="M 1578.075104855395 363.03663708525204 c 0 21.129159072031058 -5.169900624007599 6.069013776008921 -11.238914400016519 6.069013776008921 S 1555.597276055362 384.1657961572831 1555.597276055362 363.03663708525204 s 5.169900624007599 -6.069013776008921 11.238914400016519 -6.069013776008921 S 1578.075104855395 341.90747801322095 1578.075104855395 363.03663708525204z" fill="none" stroke="none"/>
<circle id="circle_26" cx="0" cy="0" r="4.537948830625891" fill="#FFFFFF">
<animateMotion xlink:href="#circle_26" begin="-8.32952190954321s" dur="10s" repeatCount="indefinite"><mpath xlink:href="#path26"/></animateMotion>
</circle>
<path id="path27" d="M 1012.6415169922468 463.7018610494744 c 0 27.362094796125128 -6.694980641605084 7.859325101014665 -14.554305742619748 7.859325101014665 S 983.5329055070074 491.06395584559954 983.5329055070074 463.7018610494744 s 6.694980641605084 -7.859325101014665 14.554305742619748 -7.859325101014665 S 1012.6415169922468 436.3397662533493 1012.6415169922468 463.7018610494744z" fill="none" stroke="none"/>
<circle id="circle_27" cx="0" cy="0" r="7.174683883014255" fill="#FFFFFF">
<animateMotion xlink:href="#circle_27" begin="-5.912479680257983s" dur="10s" repeatCount="indefinite"><mpath xlink:href="#path27"/></animateMotion>
</circle>
<path id="path28" d="M 531.1238887559579 426.0308100769474 c 0 22.148397754680914 -5.419288812315542 6.361773823153029 -11.78106263546857 6.361773823153029 S 507.5617634850208 448.1792078316283 507.5617634850208 426.0308100769474 s 5.419288812315542 -6.361773823153029 11.78106263546857 -6.361773823153029 S 531.1238887559579 403.8824123222665 531.1238887559579 426.0308100769474z" fill="none" stroke="none"/>
<circle id="circle_28" cx="0" cy="0" r="4.631733507303418" fill="#FFFFFF">
<animateMotion xlink:href="#circle_28" begin="-3.486044992693327s" dur="10s" repeatCount="indefinite"><mpath xlink:href="#path28"/></animateMotion>
</circle>
<path id="path29" d="M 1333.383227494829 789.7329924411949 c 0 29.841313733196994 -7.301598041101391 8.571441178684243 -15.873039219785634 8.571441178684243 S 1301.6371490552579 819.574306174392 1301.6371490552579 789.7329924411949 s 7.301598041101391 -8.571441178684243 15.873039219785634 -8.571441178684243 S 1333.383227494829 759.8916787079979 1333.383227494829 789.7329924411949z" fill="none" stroke="none"/>
<circle id="circle_29" cx="0" cy="0" r="5.314081992409825" fill="#FFFFFF">
<animateMotion xlink:href="#circle_29" begin="-7.942769213834245s" dur="10s" repeatCount="indefinite"><mpath xlink:href="#path29"/></animateMotion>
</circle>
<path id="path30" d="M 322.7376739288655 862.3766097340795 c 0 29.30041382954823 -7.169250192336268 8.416076312742577 -15.585326505078845 8.416076312742577 S 291.5670209187078 891.6770235636277 291.5670209187078 862.3766097340795 s 7.169250192336268 -8.416076312742577 15.585326505078845 -8.416076312742577 S 322.7376739288655 833.0761959045312 322.7376739288655 862.3766097340795z" fill="none" stroke="none"/>
<circle id="circle_30" cx="0" cy="0" r="4.766258050725651" fill="#FFFFFF">
<animateMotion xlink:href="#circle_30" begin="-5.738978868380458s" dur="10s" repeatCount="indefinite"><mpath xlink:href="#path30"/></animateMotion>
</circle>
<path id="path31" d="M 1572.9472870484176 402.3814033737251 c 0 22.652497466205208 -5.542632358752337 6.50656842114405 -12.049200779896388 6.50656842114405 S 1548.8488854886248 425.0339008399303 1548.8488854886248 402.3814033737251 s 5.542632358752337 -6.50656842114405 12.049200779896388 -6.50656842114405 S 1572.9472870484176 379.7289059075199 1572.9472870484176 402.3814033737251z" fill="none" stroke="none"/>
<circle id="circle_31" cx="0" cy="0" r="5.271730285778473" fill="#FFFFFF">
<animateMotion xlink:href="#circle_31" begin="-0.19139616564018747s" dur="10s" repeatCount="indefinite"><mpath xlink:href="#path31"/></animateMotion>
</circle>
<path id="path32" d="M 135.76587564776366 893.8712103622679 c 0 26.4217935644048 -6.4649069359713875 7.5892385770098905 -14.054145512981277 7.5892385770098905 S 107.6575846218011 920.2930039266727 107.6575846218011 893.8712103622679 s 6.4649069359713875 -7.5892385770098905 14.054145512981277 -7.5892385770098905 S 135.76587564776366 867.4494167978631 135.76587564776366 893.8712103622679z" fill="none" stroke="none"/>
<circle id="circle_32" cx="0" cy="0" r="4.687023214525275" fill="#FFFFFF">
<animateMotion xlink:href="#circle_32" begin="-1.118125813400257s" dur="10s" repeatCount="indefinite"><mpath xlink:href="#path32"/></animateMotion>
</circle>
<path id="path33" d="M 303.7378138296696 324.36660021102875 c 0 29.67322258998406 -7.260469357123759 8.523159680101806 -15.783629037225564 8.523159680101806 S 272.17055575521846 354.0398228010128 272.17055575521846 324.36660021102875 s 7.260469357123759 -8.523159680101806 15.783629037225564 -8.523159680101806 S 303.7378138296696 294.6933776210447 303.7378138296696 324.36660021102875z" fill="none" stroke="none"/>
<circle id="circle_33" cx="0" cy="0" r="5.1418833324710045" fill="#FFFFFF">
<animateMotion xlink:href="#circle_33" begin="-9.503923101924299s" dur="10s" repeatCount="indefinite"><mpath xlink:href="#path33"/></animateMotion>
</circle>
<path id="path34" d="M 1235.810862800787 564.3681072701031 c 0 36.01111893339133 -8.811231228382985 10.343619268101765 -19.154850496484748 10.343619268101765 S 1197.5011618078177 600.3792262034945 1197.5011618078177 564.3681072701031 s 8.811231228382985 -10.343619268101765 19.154850496484748 -10.343619268101765 S 1235.810862800787 528.3569883367118 1235.810862800787 564.3681072701031z" fill="none" stroke="none"/>
<circle id="circle_34" cx="0" cy="0" r="6.978686287139333" fill="#FFFFFF">
<animateMotion xlink:href="#circle_34" begin="-7.676039913970262s" dur="10s" repeatCount="indefinite"><mpath xlink:href="#path34"/></animateMotion>
</circle>
<path id="path35" d="M 1570.1900122858206 837.0123650426317 c 0 34.50735369076843 -8.443288669017807 9.91168669841221 -18.354975367430015 9.91168669841221 S 1533.4800615509607 871.5197187334002 1533.4800615509607 837.0123650426317 s 8.443288669017807 -9.91168669841221 18.354975367430015 -9.91168669841221 S 1570.1900122858206 802.5050113518632 1570.1900122858206 837.0123650426317z" fill="none" stroke="none"/>
<circle id="circle_35" cx="0" cy="0" r="5.663786696045198" fill="#FFFFFF">
<animateMotion xlink:href="#circle_35" begin="-3.4810308409049684s" dur="10s" repeatCount="indefinite"><mpath xlink:href="#path35"/></animateMotion>
</circle>
<path id="path36" d="M 431.3317544645913 382.02852315130195 c 0 28.056540514201096 -6.864898210921544 8.058793551951378 -14.923691762872924 8.058793551951378 S 401.4843709388455 410.08506366550307 401.4843709388455 382.02852315130195 s 6.864898210921544 -8.058793551951378 14.923691762872924 -8.058793551951378 S 431.3317544645913 353.97198263710084 431.3317544645913 382.02852315130195z" fill="none" stroke="none"/>
<circle id="circle_36" cx="0" cy="0" r="5.971636513567016" fill="#FFFFFF">
<animateMotion xlink:href="#circle_36" begin="-7.6884777771953665s" dur="10s" repeatCount="indefinite"><mpath xlink:href="#path36"/></animateMotion>
</circle>
<path id="path37" d="M 28.318033811453358 466.2011054019648 c 0 29.15513453320383 -7.133703130464767 8.374347153154293 -15.50805028361906 8.374347153154293 S -2.6980667557847617 495.3562399351686 -2.6980667557847617 466.2011054019648 s 7.133703130464767 -8.374347153154293 15.50805028361906 -8.374347153154293 S 28.318033811453358 437.045970868761 28.318033811453358 466.2011054019648z" fill="none" stroke="none"/>
<circle id="circle_37" cx="0" cy="0" r="4.183881189302688" fill="#FFFFFF">
<animateMotion xlink:href="#circle_37" begin="-8.108476070565596s" dur="10s" repeatCount="indefinite"><mpath xlink:href="#path37"/></animateMotion>
</circle>
<path id="path38" d="M 964.3365062174715 131.72645288703035 c 0 25.969742131394394 -6.3542986066177765 7.459394016464347 -13.813692623082122 7.459394016464347 S 936.7091209713072 157.69619501842473 936.7091209713072 131.72645288703035 s 6.3542986066177765 -7.459394016464347 13.813692623082122 -7.459394016464347 S 964.3365062174715 105.75671075563595 964.3365062174715 131.72645288703035z" fill="none" stroke="none"/>
<circle id="circle_38" cx="0" cy="0" r="6.782101173381927" fill="#FFFFFF">
<animateMotion xlink:href="#circle_38" begin="-1.3243371539921278s" dur="10s" repeatCount="indefinite"><mpath xlink:href="#path38"/></animateMotion>
</circle>
<path id="path39" d="M 848.7707459581809 978.4870373959569 c 0 28.780001747704766 -7.04191532124691 8.266596246681157 -15.308511567928067 8.266596246681157 S 818.1537228223247 1007.2670391436617 818.1537228223247 978.4870373959569 s 7.04191532124691 -8.266596246681157 15.308511567928067 -8.266596246681157 S 848.7707459581809 949.7070356482521 848.7707459581809 978.4870373959569z" fill="none" stroke="none"/>
<circle id="circle_39" cx="0" cy="0" r="4.6509944031056225" fill="#FFFFFF">
<animateMotion xlink:href="#circle_39" begin="-6.778699339674919s" dur="10s" repeatCount="indefinite"><mpath xlink:href="#path39"/></animateMotion>
</circle>
<path id="path40" d="M 79.90287676509202 635.0989007821069 c 0 32.92000738366643 -8.054895423663062 9.45574680169142 -17.51064222535448 9.45574680169142 S 44.881592314383056 668.0189081657733 44.881592314383056 635.0989007821069 s 8.054895423663062 -9.45574680169142 17.51064222535448 -9.45574680169142 S 79.90287676509202 602.1788933984404 79.90287676509202 635.0989007821069z" fill="none" stroke="none"/>
<circle id="circle_40" cx="0" cy="0" r="7.0746808870708575" fill="#FFFFFF">
<animateMotion xlink:href="#circle_40" begin="-8.215308742681398s" dur="10s" repeatCount="indefinite"><mpath xlink:href="#path40"/></animateMotion>
</circle>
<path id="path41" d="M 1274.9617045317264 527.2381704350912 c 0 27.262459990304965 -6.670601912521426 7.830706592959936 -14.501308505481363 7.830706592959936 S 1245.9590875207637 554.5006304253961 1245.9590875207637 527.2381704350912 s 6.670601912521426 -7.830706592959936 14.501308505481363 -7.830706592959936 S 1274.9617045317264 499.9757104447862 1274.9617045317264 527.2381704350912z" fill="none" stroke="none"/>
<circle id="circle_41" cx="0" cy="0" r="4.690963100709684" fill="#FFFFFF">
<animateMotion xlink:href="#circle_41" begin="-3.502133389676909s" dur="10s" repeatCount="indefinite"><mpath xlink:href="#path41"/></animateMotion>
</circle>
<path id="path42" d="M 807.2318565612995 608.6831524068533 c 0 27.696404768356064 -6.776779890129675 7.9553503058044015 -14.732130195934076 7.9553503058044015 S 777.7675961694313 636.3795571752094 777.7675961694313 608.6831524068533 s 6.776779890129675 -7.9553503058044015 14.732130195934076 -7.9553503058044015 S 807.2318565612995 580.9867476384973 807.2318565612995 608.6831524068533z" fill="none" stroke="none"/>
<circle id="circle_42" cx="0" cy="0" r="4.0032644729493985" fill="#FFFFFF">
<animateMotion xlink:href="#circle_42" begin="-3.5788198881951527s" dur="10s" repeatCount="indefinite"><mpath xlink:href="#path42"/></animateMotion>
</circle>
<path id="path43" d="M 1264.4523761201217 134.73042901947048 c 0 29.752503772588298 -7.2798679443567105 8.545931934679619 -15.825799879036328 8.545931934679619 S 1232.800776362049 164.48293279205876 1232.800776362049 134.73042901947048 s 7.2798679443567105 -8.545931934679619 15.825799879036328 -8.545931934679619 S 1264.4523761201217 104.97792524688218 1264.4523761201217 134.73042901947048z" fill="none" stroke="none"/>
<circle id="circle_43" cx="0" cy="0" r="4.851535276460794" fill="#FFFFFF">
<animateMotion xlink:href="#circle_43" begin="-3.061874943683627s" dur="10s" repeatCount="indefinite"><mpath xlink:href="#path43"/></animateMotion>
</circle>
<path id="path44" d="M 956.0514737150163 66.47697091767228 c 0 31.8581092394291 -7.7950692819879706 9.150733504942401 -16.945802786930372 9.150733504942401 S 922.1598681411556 98.33508015710137 922.1598681411556 66.47697091767228 s 7.7950692819879706 -9.150733504942401 16.945802786930372 -9.150733504942401 S 956.0514737150163 34.61886167824318 956.0514737150163 66.47697091767228z" fill="none" stroke="none"/>
<circle id="circle_44" cx="0" cy="0" r="5.900418792724069" fill="#FFFFFF">
<animateMotion xlink:href="#circle_44" begin="-4.864616991719714s" dur="10s" repeatCount="indefinite"><mpath xlink:href="#path44"/></animateMotion>
</circle>
<path id="path45" d="M 1303.8004245956279 112.98784938898203 c 0 28.98929694991984 -7.093125849448471 8.32671295370038 -15.419838803148851 8.32671295370038 S 1272.9607469893301 141.97714633890186 1272.9607469893301 112.98784938898203 s 7.093125849448471 -8.32671295370038 15.419838803148851 -8.32671295370038 S 1303.8004245956279 83.9985524390622 1303.8004245956279 112.98784938898203z" fill="none" stroke="none"/>
<circle id="circle_45" cx="0" cy="0" r="6.363323341119404" fill="#FFFFFF">
<animateMotion xlink:href="#circle_45" begin="-2.5313495241719464s" dur="10s" repeatCount="indefinite"><mpath xlink:href="#path45"/></animateMotion>
</circle>
<path id="path46" d="M 239.51599092560753 589.2040353288797 c 0 25.550051472621668 -6.251608339045726 7.338844571923245 -13.59045291096897 7.338844571923245 S 212.3350851036696 614.7540868015014 212.3350851036696 589.2040353288797 s 6.251608339045726 -7.338844571923245 13.59045291096897 -7.338844571923245 S 239.51599092560753 563.653983856258 239.51599092560753 589.2040353288797z" fill="none" stroke="none"/>
<circle id="circle_46" cx="0" cy="0" r="5.674454919208007" fill="#FFFFFF">
<animateMotion xlink:href="#circle_46" begin="-1.3739283936187374s" dur="10s" repeatCount="indefinite"><mpath xlink:href="#path46"/></animateMotion>
</circle>
<path id="path47" d="M 1597.2736627727536 444.9980199427908 c 0 29.61598007877572 -7.246463210764271 8.506717682201536 -15.753180892965808 8.506717682201536 S 1565.7673009868222 474.61400002156654 1565.7673009868222 444.9980199427908 s 7.246463210764271 -8.506717682201536 15.753180892965808 -8.506717682201536 S 1597.2736627727536 415.38203986401504 1597.2736627727536 444.9980199427908z" fill="none" stroke="none"/>
<circle id="circle_47" cx="0" cy="0" r="4.125661419030846" fill="#FFFFFF">
<animateMotion xlink:href="#circle_47" begin="-3.9102994857406914s" dur="10s" repeatCount="indefinite"><mpath xlink:href="#path47"/></animateMotion>
</circle>
<path id="path48" d="M 968.0640411314117 733.427370375976 c 0 24.785442765166223 -6.064523229774713 7.119222921909448 -13.183746151684161 7.119222921909448 S 941.6965488280433 758.2128131411422 941.6965488280433 733.427370375976 s 6.064523229774713 -7.119222921909448 13.183746151684161 -7.119222921909448 S 968.0640411314117 708.6419276108098 968.0640411314117 733.427370375976z" fill="none" stroke="none"/>
<circle id="circle_48" cx="0" cy="0" r="4.31229715573057" fill="#FFFFFF">
<animateMotion xlink:href="#circle_48" begin="-1.8531931734951113s" dur="10s" repeatCount="indefinite"><mpath xlink:href="#path48"/></animateMotion>
</circle>
<path id="path49" d="M 677.2549053143902 143.74831460975898 c 0 35.54385914562747 -8.696901705845018 10.209406350339806 -18.906308056184823 10.209406350339806 S 639.4422892020206 179.29217375538644 639.4422892020206 143.74831460975898 s 8.696901705845018 -10.209406350339806 18.906308056184823 -10.209406350339806 S 677.2549053143902 108.20445546413151 677.2549053143902 143.74831460975898z" fill="none" stroke="none"/>
<circle id="circle_49" cx="0" cy="0" r="6.638703047433261" fill="#FFFFFF">
<animateMotion xlink:href="#circle_49" begin="-6.942796482811264s" dur="10s" repeatCount="indefinite"><mpath xlink:href="#path49"/></animateMotion>
</circle>
<path id="path50" d="M 377.14005136376215 331.5477074947498 c 0 26.031835614245487 -6.3694916928472995 7.477229378559874 -13.846721071407174 7.477229378559874 S 349.44660922094783 357.57954310899527 349.44660922094783 331.5477074947498 s 6.3694916928472995 -7.477229378559874 13.846721071407174 -7.477229378559874 S 377.14005136376215 305.5158718805043 377.14005136376215 331.5477074947498z" fill="none" stroke="none"/>
<circle id="circle_50" cx="0" cy="0" r="7.233969115170091" fill="#FFFFFF">
<animateMotion xlink:href="#circle_50" begin="-2.088864233012959s" dur="10s" repeatCount="indefinite"><mpath xlink:href="#path50"/></animateMotion>
</circle>
<path id="path51" d="M 1211.7129265881088 465.0431420078129 c 0 26.691217761240278 -6.53082987775028 7.666626378228591 -14.19745625597887 7.666626378228591 S 1183.3180140761508 491.7343597690532 1183.3180140761508 465.0431420078129 s 6.53082987775028 -7.666626378228591 14.19745625597887 -7.666626378228591 S 1211.7129265881088 438.3519242465726 1211.7129265881088 465.0431420078129z" fill="none" stroke="none"/>
<circle id="circle_51" cx="0" cy="0" r="4.251305890283744" fill="#FFFFFF">
<animateMotion xlink:href="#circle_51" begin="-5.038396550996587s" dur="10s" repeatCount="indefinite"><mpath xlink:href="#path51"/></animateMotion>
</circle>
<path id="path52" d="M 1286.3948877062444 648.0895786449763 c 0 22.99212756703462 -5.6257333408701715 6.604121747978029 -12.2298550888482 6.604121747978029 S 1261.9351775285481 671.0817062120109 1261.9351775285481 648.0895786449763 s 5.6257333408701715 -6.604121747978029 12.2298550888482 -6.604121747978029 S 1286.3948877062444 625.0974510779417 1286.3948877062444 648.0895786449763z" fill="none" stroke="none"/>
<circle id="circle_52" cx="0" cy="0" r="4.779395674007662" fill="#FFFFFF">
<animateMotion xlink:href="#circle_52" begin="-4.061859209160248s" dur="10s" repeatCount="indefinite"><mpath xlink:href="#path52"/></animateMotion>
</circle>
<path id="path53" d="M 1009.920089482022 676.3362504180883 c 0 27.35397709771138 -6.692994396248529 7.856993421683056 -14.549987817931584 7.856993421683056 S 980.820113846159 703.6902275157997 980.820113846159 676.3362504180883 s 6.692994396248529 -7.856993421683056 14.549987817931584 -7.856993421683056 S 1009.920089482022 648.9822733203769 1009.920089482022 676.3362504180883z" fill="none" stroke="none"/>
<circle id="circle_53" cx="0" cy="0" r="7.1954959284837114" fill="#FFFFFF">
<animateMotion xlink:href="#circle_53" begin="-5.499405472671867s" dur="10s" repeatCount="indefinite"><mpath xlink:href="#path53"/></animateMotion>
</circle>
<path id="path54" d="M 1253.5965317275613 249.58576782677974 c 0 36.97168371450165 -9.046263036526998 10.619526173314304 -19.665789209841304 10.619526173314304 S 1214.2649533078788 286.5574515412814 1214.2649533078788 249.58576782677974 s 9.046263036526998 -10.619526173314304 19.665789209841304 -10.619526173314304 S 1253.5965317275613 212.61408411227808 1253.5965317275613 249.58576782677974z" fill="none" stroke="none"/>
<circle id="circle_54" cx="0" cy="0" r="5.936933333029261" fill="#FFFFFF">
<animateMotion xlink:href="#circle_54" begin="-5.758544340243736s" dur="10s" repeatCount="indefinite"><mpath xlink:href="#path54"/></animateMotion>
</circle>
<path id="path55" d="M 643.5265148513123 845.2369873633078 c 0 18.926542559013175 -4.630962541035138 5.43634733078038 -10.067309871815517 5.43634733078038 S 623.3918951076813 864.163529922321 623.3918951076813 845.2369873633078 s 4.630962541035138 -5.43634733078038 10.067309871815517 -5.43634733078038 S 643.5265148513123 826.3104448042945 643.5265148513123 845.2369873633078z" fill="none" stroke="none"/>
<circle id="circle_55" cx="0" cy="0" r="5.854684527726226" fill="#FFFFFF">
<animateMotion xlink:href="#circle_55" begin="-7.706609101359303s" dur="10s" repeatCount="indefinite"><mpath xlink:href="#path55"/></animateMotion>
</circle>
<path id="path56" d="M 236.0045911233557 876.6265888264655 c 0 20.498591863025098 -5.015612902655077 5.887893407464656 -10.903506310119733 5.887893407464656 S 214.19757850311626 897.1251806894907 214.19757850311626 876.6265888264655 s 5.015612902655077 -5.887893407464656 10.903506310119733 -5.887893407464656 S 236.0045911233557 856.1279969634404 236.0045911233557 876.6265888264655z" fill="none" stroke="none"/>
<circle id="circle_56" cx="0" cy="0" r="4.6119801970819365" fill="#FFFFFF">
<animateMotion xlink:href="#circle_56" begin="-4.673757002634449s" dur="10s" repeatCount="indefinite"><mpath xlink:href="#path56"/></animateMotion>
</circle>
<path id="path57" d="M 935.1377008162426 694.685153103967 c 0 33.2412606486292 -8.133499945941185 9.548021675670089 -17.681521621611274 9.548021675670089 S 899.77465757302 727.9264137525962 899.77465757302 694.685153103967 s 8.133499945941185 -9.548021675670089 17.681521621611274 -9.548021675670089 S 935.1377008162426 661.4438924553377 935.1377008162426 694.685153103967z" fill="none" stroke="none"/>
<circle id="circle_57" cx="0" cy="0" r="7.132224905281194" fill="#FFFFFF">
<animateMotion xlink:href="#circle_57" begin="-4.586215338543487s" dur="10s" repeatCount="indefinite"><mpath xlink:href="#path57"/></animateMotion>
</circle>
<path id="path58" d="M 1056.2317304219623 806.3180582111834 c 0 37.21007453035781 -9.104592704236484 10.688000131060223 -19.79259283529671 10.688000131060223 S 1016.6465447513689 843.5281327415412 1016.6465447513689 806.3180582111834 s 9.104592704236484 -10.688000131060223 19.79259283529671 -10.688000131060223 S 1056.2317304219623 769.1079836808256 1056.2317304219623 806.3180582111834z" fill="none" stroke="none"/>
<circle id="circle_58" cx="0" cy="0" r="4.296451674743584" fill="#FFFFFF">
<animateMotion xlink:href="#circle_58" begin="-5.811487210063177s" dur="10s" repeatCount="indefinite"><mpath xlink:href="#path58"/></animateMotion>
</circle>
<path id="path59" d="M 311.6912596785021 255.32815377342806 c 0 28.96694709767519 -7.0876572685801 8.320293315289684 -15.407950583869782 8.320293315289684 S 280.87535851076257 284.2951008711033 280.87535851076257 255.32815377342806 s 7.0876572685801 -8.320293315289684 15.407950583869782 -8.320293315289684 S 311.6912596785021 226.36120667575287 311.6912596785021 255.32815377342806z" fill="none" stroke="none"/>
<circle id="circle_59" cx="0" cy="0" r="4.491174118835286" fill="#FFFFFF">
<animateMotion xlink:href="#circle_59" begin="-1.4799443488781683s" dur="10s" repeatCount="indefinite"><mpath xlink:href="#path59"/></animateMotion>
</circle>
<path id="path60" d="M 608.3973119207124 704.5158493141612 c 0 35.72115639086325 -8.740282946700582 10.260332154822423 -19.000615101523003 10.260332154822423 S 570.3960817176664 740.2370057050244 570.3960817176664 704.5158493141612 s 8.740282946700582 -10.260332154822423 19.000615101523003 -10.260332154822423 S 608.3973119207124 668.7946929232979 608.3973119207124 704.5158493141612z" fill="none" stroke="none"/>
<circle id="circle_60" cx="0" cy="0" r="6.544648304516206" fill="#FFFFFF">
<animateMotion xlink:href="#circle_60" begin="-7.845860935363708s" dur="10s" repeatCount="indefinite"><mpath xlink:href="#path60"/></animateMotion>
</circle>
<path id="path61" d="M 1385.3678907711455 664.2651710351967 c 0 36.40507023899452 -8.90762356911568 10.456775494179277 -19.364399063294957 10.456775494179277 S 1346.6390926445556 700.6702412741912 1346.6390926445556 664.2651710351967 s 8.90762356911568 -10.456775494179277 19.364399063294957 -10.456775494179277 S 1385.3678907711455 627.8601007962021 1385.3678907711455 664.2651710351967z" fill="none" stroke="none"/>
<circle id="circle_61" cx="0" cy="0" r="5.362462373153279" fill="#FFFFFF">
<animateMotion xlink:href="#circle_61" begin="-6.426117186572178s" dur="10s" repeatCount="indefinite"><mpath xlink:href="#path61"/></animateMotion>
</circle>
<path id="path62" d="M 1576.2155836920467 620.47159978351 c 0 32.29325507626088 -7.901541135680852 9.275722202755784 -17.17726333843664 9.275722202755784 S 1541.8610570151734 652.7648548597708 1541.8610570151734 620.47159978351 s 7.901541135680852 -9.275722202755784 17.17726333843664 -9.275722202755784 S 1576.2155836920467 588.1783447072492 1576.2155836920467 620.47159978351z" fill="none" stroke="none"/>
<circle id="circle_62" cx="0" cy="0" r="4.856542990534317" fill="#FFFFFF">
<animateMotion xlink:href="#circle_62" begin="-5.109833192629578s" dur="10s" repeatCount="indefinite"><mpath xlink:href="#path62"/></animateMotion>
</circle>
<path id="path63" d="M 106.29550567294228 534.7015412614745 c 0 19.36112366152311 -4.737296215053526 5.5611738176715315 -10.298470032725058 5.5611738176715315 S 85.69856560749216 554.0626649229977 85.69856560749216 534.7015412614745 s 4.737296215053526 -5.5611738176715315 10.298470032725058 -5.5611738176715315 S 106.29550567294228 515.3404175999514 106.29550567294228 534.7015412614745z" fill="none" stroke="none"/>
<circle id="circle_63" cx="0" cy="0" r="6.705987427922996" fill="#FFFFFF">
<animateMotion xlink:href="#circle_63" begin="-9.054294090456544s" dur="10s" repeatCount="indefinite"><mpath xlink:href="#path63"/></animateMotion>
</circle>
<path id="path64" d="M 1288.6182389935318 862.0050841112678 c 0 27.23946638969793 -6.664975818755876 7.8241020481047245 -14.489077866860601 7.8241020481047245 S 1259.6400832598108 889.2445505009657 1259.6400832598108 862.0050841112678 s 6.664975818755876 -7.8241020481047245 14.489077866860601 -7.8241020481047245 S 1288.6182389935318 834.7656177215699 1288.6182389935318 862.0050841112678z" fill="none" stroke="none"/>
<circle id="circle_64" cx="0" cy="0" r="6.424540377409873" fill="#FFFFFF">
<animateMotion xlink:href="#circle_64" begin="-0.7209497423906019s" dur="10s" repeatCount="indefinite"><mpath xlink:href="#path64"/></animateMotion>
</circle>
<path id="path65" d="M 1018.264804410086 970.779488033273 c 0 28.989490116904726 -7.09317311371073 8.326768437834337 -15.419941551545067 8.326768437834337 S 987.4249213069958 999.7689781501776 987.4249213069958 970.779488033273 s 7.09317311371073 -8.326768437834337 15.419941551545067 -8.326768437834337 S 1018.264804410086 941.7899979163683 1018.264804410086 970.779488033273z" fill="none" stroke="none"/>
<circle id="circle_65" cx="0" cy="0" r="6.258904907352308" fill="#FFFFFF">
<animateMotion xlink:href="#circle_65" begin="-9.508151443302834s" dur="10s" repeatCount="indefinite"><mpath xlink:href="#path65"/></animateMotion>
</circle>
<path id="path66" d="M 1606.786047827675 710.832648598188 c 0 30.07579487273762 -7.358971085882608 8.638792144296977 -15.997763230179585 8.638792144296977 S 1574.790521367316 740.9084434709257 1574.790521367316 710.832648598188 s 7.358971085882608 -8.638792144296977 15.997763230179585 -8.638792144296977 S 1606.786047827675 680.7568537254504 1606.786047827675 710.832648598188z" fill="none" stroke="none"/>
<circle id="circle_66" cx="0" cy="0" r="7.147770528711191" fill="#FFFFFF">
<animateMotion xlink:href="#circle_66" begin="-2.4620633393772873s" dur="10s" repeatCount="indefinite"><mpath xlink:href="#path66"/></animateMotion>
</circle>
<path id="path67" d="M 1400.6271434974371 285.7980493788177 c 0 37.491341938962904 -9.173413453150497 10.768789705872324 -19.94220315902282 10.768789705872324 S 1360.7427371793917 323.28939131778066 1360.7427371793917 285.7980493788177 s 9.173413453150497 -10.768789705872324 19.94220315902282 -10.768789705872324 S 1400.6271434974371 248.30670743985482 1400.6271434974371 285.7980493788177z" fill="none" stroke="none"/>
<circle id="circle_67" cx="0" cy="0" r="4.0511042072977395" fill="#FFFFFF">
<animateMotion xlink:href="#circle_67" begin="-8.309611500785199s" dur="10s" repeatCount="indefinite"><mpath xlink:href="#path67"/></animateMotion>
</circle>
<path id="path68" d="M 1172.1328498040302 24.32898709214909 c 0 22.986844027091838 -5.624440559820343 6.602604135441273 -12.227044695261615 6.602604135441273 S 1147.678760413507 47.315831119240926 1147.678760413507 24.32898709214909 s 5.624440559820343 -6.602604135441273 12.227044695261615 -6.602604135441273 S 1172.1328498040302 1.342143065057254 1172.1328498040302 24.32898709214909z" fill="none" stroke="none"/>
<circle id="circle_68" cx="0" cy="0" r="6.141407555651717" fill="#FFFFFF">
<animateMotion xlink:href="#circle_68" begin="-7.429343608665803s" dur="10s" repeatCount="indefinite"><mpath xlink:href="#path68"/></animateMotion>
</circle>
<path id="path69" d="M 881.1379547778173 695.160569607147 c 0 29.27877371334521 -7.163955270286594 8.409860534684263 -15.573815804970856 8.409860534684263 S 849.9903231678755 724.4393433204922 849.9903231678755 695.160569607147 s 7.163955270286594 -8.409860534684263 15.573815804970856 -8.409860534684263 S 881.1379547778173 665.8817958938017 881.1379547778173 695.160569607147z" fill="none" stroke="none"/>
<circle id="circle_69" cx="0" cy="0" r="6.582741450284031" fill="#FFFFFF">
<animateMotion xlink:href="#circle_69" begin="-3.275768285371947s" dur="10s" repeatCount="indefinite"><mpath xlink:href="#path69"/></animateMotion>
</circle>
<path id="path70" d="M 1692.4768020847428 81.52555230410755 c 0 23.703515189234743 -5.799796269706373 6.808456490524874 -12.608252760231247 6.808456490524874 S 1667.2602965642805 105.22906749334228 1667.2602965642805 81.52555230410755 s 5.799796269706373 -6.808456490524874 12.608252760231247 -6.808456490524874 S 1692.4768020847428 57.822037114872806 1692.4768020847428 81.52555230410755z" fill="none" stroke="none"/>
<circle id="circle_70" cx="0" cy="0" r="5.317419324745017" fill="#FFFFFF">
<animateMotion xlink:href="#circle_70" begin="-0.15945303924263854s" dur="10s" repeatCount="indefinite"><mpath xlink:href="#path70"/></animateMotion>
</circle>
<path id="path71" d="M 1784.99822225385 831.3963324395111 c 0 27.541127317441376 -6.738786471288846 7.910749335860821 -14.649535807149668 7.910749335860821 S 1755.6991506395505 858.9374597569524 1755.6991506395505 831.3963324395111 s 6.738786471288846 -7.910749335860821 14.649535807149668 -7.910749335860821 S 1784.99822225385 803.8552051220697 1784.99822225385 831.3963324395111z" fill="none" stroke="none"/>
<circle id="circle_71" cx="0" cy="0" r="5.304806546624901" fill="#FFFFFF">
<animateMotion xlink:href="#circle_71" begin="-8.766489978379843s" dur="10s" repeatCount="indefinite"><mpath xlink:href="#path71"/></animateMotion>
</circle>
<path id="path72" d="M 137.22467637250952 897.3169682354272 c 0 35.69923378373892 -8.734918904531861 10.254035235754795 -18.98895414028666 10.254035235754795 S 99.24676809193622 933.0162020191661 99.24676809193622 897.3169682354272 s 8.734918904531861 -10.254035235754795 18.98895414028666 -10.254035235754795 S 137.22467637250952 861.6177344516883 137.22467637250952 897.3169682354272z" fill="none" stroke="none"/>
<circle id="circle_72" cx="0" cy="0" r="7.082545978120274" fill="#FFFFFF">
<animateMotion xlink:href="#circle_72" begin="-3.5293599124646535s" dur="10s" repeatCount="indefinite"><mpath xlink:href="#path72"/></animateMotion>
</circle>
<path id="path73" d="M 763.7643420939928 665.4100629788518 c 0 33.65195565862396 -8.233989150514374 9.66598726364731 -17.89997641416168 9.66598726364731 S 727.9643892656695 699.0620186374757 727.9643892656695 665.4100629788518 s 8.233989150514374 -9.66598726364731 17.89997641416168 -9.66598726364731 S 763.7643420939928 631.7581073202279 763.7643420939928 665.4100629788518z" fill="none" stroke="none"/>
<circle id="circle_73" cx="0" cy="0" r="7.569842809357101" fill="#FFFFFF">
<animateMotion xlink:href="#circle_73" begin="-3.716871282667926s" dur="10s" repeatCount="indefinite"><mpath xlink:href="#path73"/></animateMotion>
</circle>
<path id="path74" d="M 541.6613009522962 575.0220333007763 c 0 21.87383868368365 -5.352109465156637 6.282911111270836 -11.635020576427472 6.282911111270836 S 518.3912597994413 596.89587198446 518.3912597994413 575.0220333007763 s 5.352109465156637 -6.282911111270836 11.635020576427472 -6.282911111270836 S 541.6613009522962 553.1481946170927 541.6613009522962 575.0220333007763z" fill="none" stroke="none"/>
<circle id="circle_74" cx="0" cy="0" r="7.091584716199327" fill="#FFFFFF">
<animateMotion xlink:href="#circle_74" begin="-9.954928338372227s" dur="10s" repeatCount="indefinite"><mpath xlink:href="#path74"/></animateMotion>
</circle>
</g>
</svg>
</svg>

After

Width:  |  Height:  |  Size: 52 KiB

@@ -0,0 +1,263 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800" height="600">
<style type="text/css">
@keyframes ld-speed-dash {
0% { transform: translate(0,0); }
50% { transform: translate(420px,0); } 100% { transform: translate(0,0); }
}
.ld.ld-speed-dash { animation: ld-speed-dash 0.5s linear infinite; }
</style>
<defs>
<clipPath id="clip-path" clipPathUnits="objectBoundingBox">
<use xlink:href="#filterPath" fill="none"/>
</clipPath>
<path id="filterPath" d="M0 0 1 0 1 1 0 1Z"/>
</defs>
<svg viewBox="0 0 1 1" id="preview" preserveAspectRatio="none">
<use xlink:href="#filterPath" fill="darkgrey"/>
</svg>
<image xlink:href="" clip-path="url(#clip-path)"/>
<svg preserveAspectRatio="none" viewBox="0 0 1680 916">
<g transform="translate(840,458)">
<g style="transform:rotate(55.24338047767972deg)">
<path class="ld ld-speed-dash" d="M313.2445224481763 0 L3016.3446181725676 22.970719727734053L3016.3446181725676 -22.970719727734053z" fill="#FFFFFF" style="animation-delay:-0.6489830890161201s"/>
</g>
<g style="transform:rotate(210.4868856357207deg)">
<path class="ld ld-speed-dash" d="M246.44683979796605 0 L3395.193670017361 28.314006846451704L3395.193670017361 -28.314006846451704z" fill="#FFFFFF" style="animation-delay:-1.6578847076863537s"/>
</g>
<g style="transform:rotate(11.804271323202018deg)">
<path class="ld ld-speed-dash" d="M432.4046927974893 0 L3760.0907644539116 18.55222383241528L3760.0907644539116 -18.55222383241528z" fill="#FFFFFF" style="animation-delay:-1.850133252333448s"/>
</g>
<g style="transform:rotate(290.7161730335263deg)">
<path class="ld ld-speed-dash" d="M174.15158313264382 0 L2546.6645917604255 24.539259218471095L2546.6645917604255 -24.539259218471095z" fill="#FFFFFF" style="animation-delay:-1.9766260357049634s"/>
</g>
<g style="transform:rotate(81.41376440297725deg)">
<path class="ld ld-speed-dash" d="M247.25038624683202 0 L2307.3774339381475 29.28173657581924L2307.3774339381475 -29.28173657581924z" fill="#FFFFFF" style="animation-delay:-0.9699037613678558s"/>
</g>
<g style="transform:rotate(30.284589478401685deg)">
<path class="ld ld-speed-dash" d="M414.280660250802 0 L3565.7563633646746 18.23666494702347L3565.7563633646746 -18.23666494702347z" fill="#FFFFFF" style="animation-delay:-0.923679783771481s"/>
</g>
<g style="transform:rotate(217.14660851410417deg)">
<path class="ld ld-speed-dash" d="M173.7941720547917 0 L3223.7522335113167 17.332620232541363L3223.7522335113167 -17.332620232541363z" fill="#FFFFFF" style="animation-delay:-1.8492032592515848s"/>
</g>
<g style="transform:rotate(48.29907110760935deg)">
<path class="ld ld-speed-dash" d="M201.2735832417632 0 L3049.7640609564082 15.943761716463927L3049.7640609564082 -15.943761716463927z" fill="#FFFFFF" style="animation-delay:-1.0990466564806636s"/>
</g>
<g style="transform:rotate(146.1549253656204deg)">
<path class="ld ld-speed-dash" d="M437.39387601152345 0 L3538.469041049942 17.81595925765719L3538.469041049942 -17.81595925765719z" fill="#FFFFFF" style="animation-delay:-1.125377682112692s"/>
</g>
<g style="transform:rotate(73.04298076974551deg)">
<path class="ld ld-speed-dash" d="M298.5348949064443 0 L2576.1825810011146 25.847492726877142L2576.1825810011146 -25.847492726877142z" fill="#FFFFFF" style="animation-delay:-0.9685658204106042s"/>
</g>
<g style="transform:rotate(60.616709263655075deg)">
<path class="ld ld-speed-dash" d="M315.8408637199277 0 L2897.5535429894485 25.702663313553842L2897.5535429894485 -25.702663313553842z" fill="#FFFFFF" style="animation-delay:-1.542523075478611s"/>
</g>
<g style="transform:rotate(100.4615586871835deg)">
<path class="ld ld-speed-dash" d="M254.7515409111282 0 L2364.1993507673897 21.096698011404996L2364.1993507673897 -21.096698011404996z" fill="#FFFFFF" style="animation-delay:-0.39824796640343507s"/>
</g>
<g style="transform:rotate(65.37582262849955deg)">
<path class="ld ld-speed-dash" d="M188.3578726853288 0 L2657.0211215039385 13.060246203277037L2657.0211215039385 -13.060246203277037z" fill="#FFFFFF" style="animation-delay:-0.06598363448004374s"/>
</g>
<g style="transform:rotate(112.02688169934763deg)">
<path class="ld ld-speed-dash" d="M343.25986980556115 0 L2748.3233778832237 20.028083647301397L2748.3233778832237 -20.028083647301397z" fill="#FFFFFF" style="animation-delay:-1.4258544105147384s"/>
</g>
<g style="transform:rotate(113.13396331646763deg)">
<path class="ld ld-speed-dash" d="M284.78544752684365 0 L2717.109589385633 27.024689038603597L2717.109589385633 -27.024689038603597z" fill="#FFFFFF" style="animation-delay:-0.7873199196462166s"/>
</g>
<g style="transform:rotate(79.55398352468583deg)">
<path class="ld ld-speed-dash" d="M159.80425774135685 0 L2268.8444579606416 22.48999810501333L2268.8444579606416 -22.48999810501333z" fill="#FFFFFF" style="animation-delay:-0.035573447747699216s"/>
</g>
<g style="transform:rotate(99.83056335776561deg)">
<path class="ld ld-speed-dash" d="M211.87732702690317 0 L2304.7605938486695 23.15943581661871L2304.7605938486695 -23.15943581661871z" fill="#FFFFFF" style="animation-delay:-1.883254016123865s"/>
</g>
<g style="transform:rotate(57.65729453990513deg)">
<path class="ld ld-speed-dash" d="M250.34111696902914 0 L2899.7939454001926 20.19361222723075L2899.7939454001926 -20.19361222723075z" fill="#FFFFFF" style="animation-delay:-1.4411192647494797s"/>
</g>
<g style="transform:rotate(108.63546495122914deg)">
<path class="ld ld-speed-dash" d="M296.89071306462733 0 L2617.1568452205493 12.348376706939423L2617.1568452205493 -12.348376706939423z" fill="#FFFFFF" style="animation-delay:-1.7756863188336487s"/>
</g>
<g style="transform:rotate(55.114249387677305deg)">
<path class="ld ld-speed-dash" d="M198.0530895490627 0 L2903.980289863673 11.087315245696864L2903.980289863673 -11.087315245696864z" fill="#FFFFFF" style="animation-delay:-0.5215636384353961s"/>
</g>
<g style="transform:rotate(127.78117814251597deg)">
<path class="ld ld-speed-dash" d="M360.4110430863276 0 L3128.5363497286958 20.05221628604818L3128.5363497286958 -20.05221628604818z" fill="#FFFFFF" style="animation-delay:-1.8027494316948762s"/>
</g>
<g style="transform:rotate(213.9162179418826deg)">
<path class="ld ld-speed-dash" d="M254.79700423966216 0 L3354.8144945531362 27.667496579945244L3354.8144945531362 -27.667496579945244z" fill="#FFFFFF" style="animation-delay:-0.9030241406131401s"/>
</g>
<g style="transform:rotate(223.09230252203915deg)">
<path class="ld ld-speed-dash" d="M345.4171221030021 0 L3293.2453339702015 27.593464445601597L3293.2453339702015 -27.593464445601597z" fill="#FFFFFF" style="animation-delay:-0.860549961144355s"/>
</g>
<g style="transform:rotate(41.22844870034023deg)">
<path class="ld ld-speed-dash" d="M380.42487662742707 0 L3361.6149760035933 21.318882211266445L3361.6149760035933 -21.318882211266445z" fill="#FFFFFF" style="animation-delay:-0.3320571154332974s"/>
</g>
<g style="transform:rotate(74.73133572326748deg)">
<path class="ld ld-speed-dash" d="M315.06660598608784 0 L2549.458503918934 27.40176442431239L2549.458503918934 -27.40176442431239z" fill="#FFFFFF" style="animation-delay:-0.5746637580825329s"/>
</g>
<g style="transform:rotate(265.1179163644999deg)">
<path class="ld ld-speed-dash" d="M98.50424105560748 0 L2060.5452345584754 20.01812037292764L2060.5452345584754 -20.01812037292764z" fill="#FFFFFF" style="animation-delay:-0.9777874924087229s"/>
</g>
<g style="transform:rotate(90.83848848895639deg)">
<path class="ld ld-speed-dash" d="M259.84206537701056 0 L2114.202607300303 23.772976607270124L2114.202607300303 -23.772976607270124z" fill="#FFFFFF" style="animation-delay:-0.20663411589934366s"/>
</g>
<g style="transform:rotate(240.46264324666643deg)">
<path class="ld ld-speed-dash" d="M267.8816775896251 0 L2853.171812319316 21.566995901033252L2853.171812319316 -21.566995901033252z" fill="#FFFFFF" style="animation-delay:-0.6417651916024907s"/>
</g>
<g style="transform:rotate(262.8487057078134deg)">
<path class="ld ld-speed-dash" d="M197.36366451215005 0 L2219.5841041400668 16.470936703291976L2219.5841041400668 -16.470936703291976z" fill="#FFFFFF" style="animation-delay:-0.8857067472574132s"/>
</g>
<g style="transform:rotate(22.158703468812398deg)">
<path class="ld ld-speed-dash" d="M476.43043785988954 0 L3723.576448292826 24.25011230847808L3723.576448292826 -24.25011230847808z" fill="#FFFFFF" style="animation-delay:-1.5236462382470983s"/>
</g>
<g style="transform:rotate(96.35121086965866deg)">
<path class="ld ld-speed-dash" d="M133.94074075608765 0 L2134.9721770649735 29.250182152970723L2134.9721770649735 -29.250182152970723z" fill="#FFFFFF" style="animation-delay:-0.6012195514386818s"/>
</g>
<g style="transform:rotate(113.8704019517356deg)">
<path class="ld ld-speed-dash" d="M176.74423879055144 0 L2627.078844129286 27.41035869827181L2627.078844129286 -27.41035869827181z" fill="#FFFFFF" style="animation-delay:-0.4512486157444813s"/>
</g>
<g style="transform:rotate(318.6520639302219deg)">
<path class="ld ld-speed-dash" d="M248.77896379120511 0 L3227.866419017381 11.095039186354265L3227.866419017381 -11.095039186354265z" fill="#FFFFFF" style="animation-delay:-0.4639335579054209s"/>
</g>
<g style="transform:rotate(341.7454645247612deg)">
<path class="ld ld-speed-dash" d="M239.14874814015087 0 L3522.251129728406 13.52820950579158L3522.251129728406 -13.52820950579158z" fill="#FFFFFF" style="animation-delay:-0.6387003125281372s"/>
</g>
<g style="transform:rotate(86.98937850853238deg)">
<path class="ld ld-speed-dash" d="M165.62230687997337 0 L2077.874519080917 28.667649166329614L2077.874519080917 -28.667649166329614z" fill="#FFFFFF" style="animation-delay:-0.06846445382861344s"/>
</g>
<g style="transform:rotate(171.17815601058436deg)">
<path class="ld ld-speed-dash" d="M395.61814165990035 0 L3737.541876980575 16.065861238866862L3737.541876980575 -16.065861238866862z" fill="#FFFFFF" style="animation-delay:-1.8574488306542118s"/>
</g>
<g style="transform:rotate(300.143573836183deg)">
<path class="ld ld-speed-dash" d="M276.47134938315753 0 L2875.784887211603 21.515180675836785L2875.784887211603 -21.515180675836785z" fill="#FFFFFF" style="animation-delay:-1.1358579567642209s"/>
</g>
<g style="transform:rotate(79.23618930522349deg)">
<path class="ld ld-speed-dash" d="M315.7145627698534 0 L2433.0851300956774 19.29807352767049L2433.0851300956774 -19.29807352767049z" fill="#FFFFFF" style="animation-delay:-0.7889680697480399s"/>
</g>
<g style="transform:rotate(183.98546097847913deg)">
<path class="ld ld-speed-dash" d="M463.15940688966 0 L3819.4642736936275 29.829463048409046L3819.4642736936275 -29.829463048409046z" fill="#FFFFFF" style="animation-delay:-0.3274586698919939s"/>
</g>
<g style="transform:rotate(293.6806041786108deg)">
<path class="ld ld-speed-dash" d="M265.12872058026954 0 L2710.8312524926473 13.438406971430812L2710.8312524926473 -13.438406971430812z" fill="#FFFFFF" style="animation-delay:-1.3475237097514055s"/>
</g>
<g style="transform:rotate(136.8452855182489deg)">
<path class="ld ld-speed-dash" d="M425.64134986205437 0 L3372.331793998036 19.590918815404883L3372.331793998036 -19.590918815404883z" fill="#FFFFFF" style="animation-delay:-1.4902275108795786s"/>
</g>
<g style="transform:rotate(263.55944634321855deg)">
<path class="ld ld-speed-dash" d="M143.9672316106818 0 L2147.3664877144693 26.30065288602394L2147.3664877144693 -26.30065288602394z" fill="#FFFFFF" style="animation-delay:-1.2511347005766535s"/>
</g>
<g style="transform:rotate(113.8407201933296deg)">
<path class="ld ld-speed-dash" d="M167.76728985826 0 L2617.3779489818835 21.74535969216877L2617.3779489818835 -21.74535969216877z" fill="#FFFFFF" style="animation-delay:-0.6243469630651299s"/>
</g>
<g style="transform:rotate(27.52762985879408deg)">
<path class="ld ld-speed-dash" d="M467.04656209242165 0 L3654.0587179096633 23.95053466937522L3654.0587179096633 -23.95053466937522z" fill="#FFFFFF" style="animation-delay:-1.3839630974557946s"/>
</g>
<g style="transform:rotate(196.55175240064295deg)">
<path class="ld ld-speed-dash" d="M443.91177804318187 0 L3740.595747096498 16.84110169194345L3740.595747096498 -16.84110169194345z" fill="#FFFFFF" style="animation-delay:-1.5320881113766567s"/>
</g>
<g style="transform:rotate(251.7001603677825deg)">
<path class="ld ld-speed-dash" d="M262.47441366060997 0 L2574.2508258842868 13.750281635012488L2574.2508258842868 -13.750281635012488z" fill="#FFFFFF" style="animation-delay:-1.6935172774163747s"/>
</g>
<g style="transform:rotate(344.92538381917194deg)">
<path class="ld ld-speed-dash" d="M337.0866073970525 0 L3644.5049915685127 27.8852834296704L3644.5049915685127 -27.8852834296704z" fill="#FFFFFF" style="animation-delay:-1.7988559066127827s"/>
</g>
<g style="transform:rotate(270.0462656082373deg)">
<path class="ld ld-speed-dash" d="M136.5262872710875 0 L1969.7601275697086 16.62796179269232L1969.7601275697086 -16.62796179269232z" fill="#FFFFFF" style="animation-delay:-0.3962343565941828s"/>
</g>
<g style="transform:rotate(357.52629316704554deg)">
<path class="ld ld-speed-dash" d="M203.0081020277444 0 L3561.5842099002934 21.80803645068479L3561.5842099002934 -21.80803645068479z" fill="#FFFFFF" style="animation-delay:-0.09004915330808227s"/>
</g>
<g style="transform:rotate(297.6700380951448deg)">
<path class="ld ld-speed-dash" d="M230.77743933987702 0 L2772.3485205584725 17.634362824258076L2772.3485205584725 -17.634362824258076z" fill="#FFFFFF" style="animation-delay:-1.8847482138818528s"/>
</g>
<g style="transform:rotate(334.67458104556795deg)">
<path class="ld ld-speed-dash" d="M335.2092546395992 0 L3548.357553510144 11.752587412578528L3548.357553510144 -11.752587412578528z" fill="#FFFFFF" style="animation-delay:-0.3468252877774507s"/>
</g>
<g style="transform:rotate(200.03509804173376deg)">
<path class="ld ld-speed-dash" d="M410.12367162993473 0 L3677.6535902358546 20.851990632140456L3677.6535902358546 -20.851990632140456z" fill="#FFFFFF" style="animation-delay:-1.5033160558457652s"/>
</g>
<g style="transform:rotate(208.50821043740768deg)">
<path class="ld ld-speed-dash" d="M353.3195477450612 0 L3528.047602886495 21.779724642613296L3528.047602886495 -21.779724642613296z" fill="#FFFFFF" style="animation-delay:-0.49278025813507353s"/>
</g>
<g style="transform:rotate(203.37137940920567deg)">
<path class="ld ld-speed-dash" d="M249.47643114325987 0 L3484.1084560730374 17.543644210107555L3484.1084560730374 -17.543644210107555z" fill="#FFFFFF" style="animation-delay:-1.183525013282905s"/>
</g>
<g style="transform:rotate(94.75392540557597deg)">
<path class="ld ld-speed-dash" d="M163.22182557297185 0 L2121.8570920062657 12.884390827854148L2121.8570920062657 -12.884390827854148z" fill="#FFFFFF" style="animation-delay:-0.5993106933731225s"/>
</g>
<g style="transform:rotate(91.09764440491854deg)">
<path class="ld ld-speed-dash" d="M241.27121697017162 0 L2102.5421000132364 27.60948995568958L2102.5421000132364 -27.60948995568958z" fill="#FFFFFF" style="animation-delay:-0.5701454600935785s"/>
</g>
<g style="transform:rotate(195.49626166701324deg)">
<path class="ld ld-speed-dash" d="M280.26762318326337 0 L3584.721595208608 26.901254751248473L3584.721595208608 -26.901254751248473z" fill="#FFFFFF" style="animation-delay:-1.7033306019751842s"/>
</g>
<g style="transform:rotate(99.6468381262713deg)">
<path class="ld ld-speed-dash" d="M262.5474471366609 0 L2350.6016230690575 16.48956496439186L2350.6016230690575 -16.48956496439186z" fill="#FFFFFF" style="animation-delay:-1.2772043212668458s"/>
</g>
<g style="transform:rotate(353.51642356333923deg)">
<path class="ld ld-speed-dash" d="M302.4122813656499 0 L3652.6395967906174 29.940813512408994L3652.6395967906174 -29.940813512408994z" fill="#FFFFFF" style="animation-delay:-0.5338704255383058s"/>
</g>
<g style="transform:rotate(296.1023443106776deg)">
<path class="ld ld-speed-dash" d="M240.0422142252214 0 L2744.32540948797 25.12222385489084L2744.32540948797 -25.12222385489084z" fill="#FFFFFF" style="animation-delay:-0.5725340822030076s"/>
</g>
<g style="transform:rotate(123.81424989866738deg)">
<path class="ld ld-speed-dash" d="M379.73551970888406 0 L3062.0709890139296 15.766582448800893L3062.0709890139296 -15.766582448800893z" fill="#FFFFFF" style="animation-delay:-0.8038374830548025s"/>
</g>
<g style="transform:rotate(307.5133115199984deg)">
<path class="ld ld-speed-dash" d="M335.2219844735896 0 L3097.6910633392436 12.256501772505061L3097.6910633392436 -12.256501772505061z" fill="#FFFFFF" style="animation-delay:-1.9665339756256763s"/>
</g>
<g style="transform:rotate(197.96980504029375deg)">
<path class="ld ld-speed-dash" d="M483.1566190043299 0 L3768.6196125710753 24.37077465750347L3768.6196125710753 -24.37077465750347z" fill="#FFFFFF" style="animation-delay:-1.3400876261784194s"/>
</g>
<g style="transform:rotate(189.1671462122452deg)">
<path class="ld ld-speed-dash" d="M223.1400076281049 0 L3563.6240550711086 21.863396711280206L3563.6240550711086 -21.863396711280206z" fill="#FFFFFF" style="animation-delay:-1.2079027055446052s"/>
</g>
<g style="transform:rotate(10.29853264676965deg)">
<path class="ld ld-speed-dash" d="M472.37526258757174 0 L3807.758596999251 24.595418787187754L3807.758596999251 -24.595418787187754z" fill="#FFFFFF" style="animation-delay:-1.9560543689958285s"/>
</g>
<g style="transform:rotate(353.285676068699deg)">
<path class="ld ld-speed-dash" d="M481.49698916619434 0 L3831.0171260583297 21.955548694783225L3831.0171260583297 -21.955548694783225z" fill="#FFFFFF" style="animation-delay:-1.2189052002595084s"/>
</g>
<g style="transform:rotate(42.4184896598519deg)">
<path class="ld ld-speed-dash" d="M165.7637255254543 0 L3125.790932850129 25.504192924218245L3125.790932850129 -25.504192924218245z" fill="#FFFFFF" style="animation-delay:-0.5061115118465103s"/>
</g>
<g style="transform:rotate(272.26577032833677deg)">
<path class="ld ld-speed-dash" d="M103.651415171839 0 L1996.06066019413 29.55673031483032L1996.06066019413 -29.55673031483032z" fill="#FFFFFF" style="animation-delay:-1.5586274134897886s"/>
</g>
<g style="transform:rotate(221.51826436955614deg)">
<path class="ld ld-speed-dash" d="M338.6495499451276 0 L3314.7310804000663 27.581281361701176L3314.7310804000663 -27.581281361701176z" fill="#FFFFFF" style="animation-delay:-0.6608791563791256s"/>
</g>
<g style="transform:rotate(43.226821627165634deg)">
<path class="ld ld-speed-dash" d="M185.0229697206139 0 L3130.397256532069 10.477557707979717L3130.397256532069 -10.477557707979717z" fill="#FFFFFF" style="animation-delay:-1.1972579359569604s"/>
</g>
<g style="transform:rotate(225.99295227079088deg)">
<path class="ld ld-speed-dash" d="M414.091155497906 0 L3307.6643398105834 26.355277595234924L3307.6643398105834 -26.355277595234924z" fill="#FFFFFF" style="animation-delay:-1.5129389750277573s"/>
</g>
<g style="transform:rotate(120.42097927370318deg)">
<path class="ld ld-speed-dash" d="M149.1625236217494 0 L2754.864629841125 12.188449754943989L2754.864629841125 -12.188449754943989z" fill="#FFFFFF" style="animation-delay:-1.947609317586565s"/>
</g>
<g style="transform:rotate(3.5388204044753913deg)">
<path class="ld ld-speed-dash" d="M392.51149313030595 0 L3749.597912289889 15.888700212403197L3749.597912289889 -15.888700212403197z" fill="#FFFFFF" style="animation-delay:-1.3332837322725055s"/>
</g>
<g style="transform:rotate(281.72140359288227deg)">
<path class="ld ld-speed-dash" d="M205.78786359399032 0 L2348.2057740718265 15.034358480513177L2348.2057740718265 -15.034358480513177z" fill="#FFFFFF" style="animation-delay:-0.9836557586571493s"/>
</g>
<g style="transform:rotate(1.6261164472698475deg)">
<path class="ld ld-speed-dash" d="M234.09021214417234 0 L3593.474862112877 24.534341183066903L3593.474862112877 -24.534341183066903z" fill="#FFFFFF" style="animation-delay:-1.5081678120290505s"/>
</g>
<g style="transform:rotate(47.59642177815526deg)">
<path class="ld ld-speed-dash" d="M413.7388134402528 0 L3276.143327703428 11.363853837051208L3276.143327703428 -11.363853837051208z" fill="#FFFFFF" style="animation-delay:-1.5223841980889588s"/>
</g>
<g style="transform:rotate(230.50681744242306deg)">
<path class="ld ld-speed-dash" d="M402.6724750243132 0 L3206.459698231108 10.125852356402284L3206.459698231108 -10.125852356402284z" fill="#FFFFFF" style="animation-delay:-0.8523546486866076s"/>
</g>
<g style="transform:rotate(235.73899572949838deg)">
<path class="ld ld-speed-dash" d="M145.04977014661085 0 L2837.258262128088 20.589335353751L2837.258262128088 -20.589335353751z" fill="#FFFFFF" style="animation-delay:-0.41441863349594854s"/>
</g>
<g style="transform:rotate(66.58548349719469deg)">
<path class="ld ld-speed-dash" d="M153.5556796581544 0 L2592.752932239427 18.521882029167195L2592.752932239427 -18.521882029167195z" fill="#FFFFFF" style="animation-delay:-0.5305769590933451s"/>
</g>
<g style="transform:rotate(33.133383029425175deg)">
<path class="ld ld-speed-dash" d="M286.5877552678988 0 L3398.1355535365446 25.618123371944407L3398.1355535365446 -25.618123371944407z" fill="#FFFFFF" style="animation-delay:-1.3246119075207416s"/>
</g>
</g>
</svg>
</svg>

After

Width:  |  Height:  |  Size: 24 KiB

@@ -197,12 +197,12 @@ const glFilters = {
* @param {HTMLImageElement} img the image to which modifications are applied
* @returns {string} dataURL of the image with the applied modifications
*/
async function applyModifications(img) {
async function applyModifications(img, dataOptions = {}) {
const data = Object.assign({
glFilter: '',
filter: '#0000',
quality: '75',
}, img.dataset);
}, img.dataset, dataOptions);
let {
width,
height,
@@ -12,6 +12,7 @@ const weUtils = require('web_editor.utils');
const {
normalizeColor,
getBgImageURL,
DEFAULT_PALETTE,
} = weUtils;
var weWidgets = require('wysiwyg.widgets');
const {
@@ -4453,7 +4454,7 @@ const ImageHandlerOption = SnippetOptionWidget.extend({
*/
async _renderCustomXML(uiFragment) {
const img = this._getImg();
if (!this.originalSrc || !['image/png', 'image/jpeg'].includes(img.dataset.mimetype)) {
if (!this.originalSrc || !['image/png', 'image/jpeg'].includes(this._getImageMimetype(img))) {
[...uiFragment.childNodes].forEach(node => node.remove());
return;
}
@@ -4462,7 +4463,7 @@ const ImageHandlerOption = SnippetOptionWidget.extend({
$select.append(`<we-button data-select-width="${value}">${label}</we-button>`);
});
if (img.dataset.mimetype !== 'image/jpeg') {
if (this._getImageMimetype(img) !== 'image/jpeg') {
uiFragment.querySelector('we-range[data-set-quality]').remove();
}
},
@@ -4504,11 +4505,11 @@ const ImageHandlerOption = SnippetOptionWidget.extend({
if (!update && !(img && img.complete)) {
return;
}
if (!['image/jpeg', 'image/png'].includes(img.dataset.mimetype)) {
if (!['image/jpeg', 'image/png'].includes(this._getImageMimetype(img))) {
this.originalId = null;
return;
}
const dataURL = await applyModifications(img);
const dataURL = await applyModifications(img, {mimetype: this._getImageMimetype(img)});
this._filesize = dataURL.split(',')[1].length / 4 * 3 / 1024;
if (update) {
@@ -4571,12 +4572,44 @@ const ImageHandlerOption = SnippetOptionWidget.extend({
* @param {HTMLImageElement} img
*/
_applyImage(img) {},
/**
* @private
* @param {HTMLImageElement} img
* @returns {String} The right mimetype used to apply options on image.
*/
_getImageMimetype(img) {
return img.dataset.mimetype;
},
});
/**
* @param {Element} containerEl
* @returns {Element}
*/
const _addAnimatedShapeLabel = function addAnimatedShapeLabel(containerEl) {
const labelEl = document.createElement('span');
labelEl.classList.add('o_we_shape_animated_label');
const labelStr = _t("Animated");
labelEl.textContent = labelStr[0];
const spanEl = document.createElement('span');
spanEl.textContent = labelStr.substr(1);
labelEl.appendChild(spanEl);
containerEl.classList.add('position-relative');
containerEl.appendChild(labelEl);
return labelEl;
};
/**
* Controls image width and quality.
*/
registry.ImageOptimize = ImageHandlerOption.extend({
/**
* @constructor
*/
init() {
this.shapeCache = {};
return this._super(...arguments);
},
/**
* @override
*/
@@ -4593,10 +4626,160 @@ registry.ImageOptimize = ImageHandlerOption.extend({
return this._super(...arguments);
},
//--------------------------------------------------------------------------
// Options
//--------------------------------------------------------------------------
/**
* @see this.selectClass for parameters
*/
async setImgShape(previewMode, widgetValue, params) {
const img = this._getImg();
const saveData = previewMode === false;
if (widgetValue) {
await this._loadShape(widgetValue);
if (previewMode === 'reset' && img.dataset.shapeColors) {
// When we reset the shape we need to reapply the colors the
// user had selected.
await this._applyShapeAndColors(false, img.dataset.shapeColors.split(';'));
} else {
// If the preview mode === false we want to save the colors
// as the user chose their shape
await this._applyShapeAndColors(saveData);
if (saveData && img.dataset.mimetype !== 'image/svg+xml') {
img.dataset.originalMimetype = img.dataset.mimetype;
img.dataset.mimetype = 'image/svg+xml';
}
}
} else {
// Re-applying the modifications and deleting the shapes
img.src = await applyModifications(img, {mimetype: this._getImageMimetype(img)});
delete img.dataset.shape;
delete img.dataset.shapeColors;
delete img.dataset.fileName;
if (saveData) {
img.dataset.mimetype = img.dataset.originalMimetype;
delete img.dataset.originalMimetype;
}
}
img.classList.add('o_modified_image_to_save');
},
/**
* Handles color assignment on the shape. Widget is a color picker.
* If no value, we reset to the current color palette.
*
* @see this.selectClass for parameters
*/
async setImgShapeColor(previewMode, widgetValue, params) {
const img = this._getImg();
const newColorId = parseInt(params.colorId);
const oldColors = img.dataset.shapeColors.split(';');
const newColors = oldColors.slice(0);
newColors[newColorId] = this._getCSSColorValue(widgetValue === '' ? `o-color-${(newColorId + 1)}` : widgetValue);
await this._applyShapeAndColors(true, newColors);
img.classList.add('o_modified_image_to_save');
},
//--------------------------------------------------------------------------
// Private
//--------------------------------------------------------------------------
/**
* @override
*/
async _applyOptions() {
const img = await this._super(...arguments);
if (img && img.dataset.shape) {
// Reapplying the shape
await this._loadShape(img.dataset.shape);
await this._applyShapeAndColors(true, (img.dataset.shapeColors && img.dataset.shapeColors.split(';')));
}
return img;
},
/**
* Loads the shape into cache if not already and sets it in the dataset of
* the img
*
* @param {string} shapeName identifier of the shape
*/
async _loadShape(shapeName) {
const [module, directory, fileName] = shapeName.split('/');
let shape = this.shapeCache[fileName];
if (!shape) {
const shapeURL = `/${module}/static/image_shapes/${directory}/${fileName}.svg`;
shape = await (await fetch(shapeURL)).text();
this.shapeCache[fileName] = shape;
}
this._getImg().dataset.shape = shapeName;
},
/**
* Applies the shape in img.dataset.shape and replaces the previous hex
* color values with new ones or current theme
* ones then calls _writeShape()
*
* @param {boolean} save true if the colors need to be saved in the
* data-attribute
* @param {string[]} [newColors] Array of HEX color code, default
* theme colors are applied if not supplied
*/
async _applyShapeAndColors(save, newColors) {
const img = this._getImg();
let shape = this.shapeCache[img.dataset.shape.split('/')[2]];
// Map the default palette colors to an array if the shape includes them
// If they do not map a NULL, this way we know if a default color is in
// the shape
const oldColors = Object.values(DEFAULT_PALETTE).map(color => shape.includes(color) ? color : null);
if (!newColors) {
// If we do not have newColors, we still replace the default
// shape's colors by the current palette's
newColors = oldColors.map((color, i) => color !== null ? this._getCSSColorValue(`o-color-${(i + 1)}`) : null);
}
newColors.forEach((color, i) => shape = shape.replace(new RegExp(oldColors[i], 'g'), color));
await this._writeShape(shape);
if (save) {
img.dataset.shapeColors = newColors.join(';');
}
},
/**
* Sets the image in the supplied SVG and replace the src with a dataURL
*
* @param {string} svgText svg file as text
* @returns {Promise} resolved once the svg is properly loaded
* in the document
*/
async _writeShape(svgText) {
const img = this._getImg();
const svg = new DOMParser().parseFromString(svgText, 'image/svg+xml').documentElement;
// We will store the image in base64 inside the SVG.
// applyModifications will return a dataURL with the current filters
// and size options.
const imgDataURL = await applyModifications(img, {mimetype: this._getImageMimetype(img)});
svg.removeChild(svg.querySelector('#preview'));
svg.querySelector('image').setAttribute('xlink:href', imgDataURL);
// Force natural width & height (note: loading the original image is
// needed for Safari where natural width & height of SVG does not return
// the correct values).
const originalImage = await loadImage(img.src);
svg.setAttribute('width', originalImage.naturalWidth);
svg.setAttribute('height', originalImage.naturalHeight);
// Transform the current SVG in a base64 file to be saved by the server
const blob = new Blob([svg.outerHTML], {
type: 'image/svg+xml',
});
const reader = new FileReader();
const readPromise = new Promise(resolve => {
reader.addEventListener('load', () => resolve(reader.result));
});
reader.readAsDataURL(blob);
const dataURL = await readPromise;
const imgFilename = (img.dataset.originalSrc.split('/').pop()).split('.')[0];
img.dataset.fileName = `${imgFilename}.svg`;
return loadImage(dataURL, img);
},
/**
* @override
*/
@@ -4630,6 +4813,77 @@ registry.ImageOptimize = ImageHandlerOption.extend({
const titleTextEl = leftPanelEl.querySelector('we-title > span');
this.$weight.appendTo(titleTextEl);
},
/**
* @override
*/
async _computeWidgetVisibility(widgetName, params) {
if (widgetName.startsWith('img-shape-color')) {
const img = this._getImg();
const shapeName = img.dataset.shape;
if (!shapeName) {
return false;
}
const colors = img.dataset.shapeColors.split(';');
return colors[parseInt(params.colorId)];
}
return this._super();
},
/**
* @override
*/
_computeWidgetState(methodName, params) {
switch (methodName) {
case 'setImgShape':
return this._getImg().dataset.shape || '';
case 'setImgShapeColor': {
const img = this._getImg();
return (img.dataset.shapeColors && img.dataset.shapeColors.split(';')[parseInt(params.colorId)]) || '';
}
}
return this._super(...arguments);
},
/**
* Appends the SVG as an image.
* Due to the nature of image_shapes' SVGs, it is easier to render them as
* img compared to appending their content to the DOM
* (which is what the current data-img does)
*
* @override
*/
async _renderCustomXML(uiFragment) {
await this._super(...arguments);
uiFragment.querySelectorAll('we-select-page we-button[data-set-img-shape]').forEach(btn => {
const image = document.createElement('img');
const [moduleName, directory, shapeName] = btn.dataset.setImgShape.split('/');
image.src = `/${moduleName}/static/image_shapes/${directory}/${shapeName}.svg`;
$(btn).prepend(image);
if (btn.dataset.animated) {
_addAnimatedShapeLabel(btn);
}
});
},
/**
* @override
*/
_getImageMimetype(img) {
if (img.dataset.shape) {
return img.dataset.originalMimetype;
}
return this._super(...arguments);
},
/**
* Gets the CSS value of a color variable name so it can be used on shapes.
*
* @param {string} color
* @returns {string}
*/
_getCSSColorValue(color) {
if (ColorpickerWidget.isCSSColor(color)) {
return color;
}
return weUtils.getCSSVariableValue(color);
},
//--------------------------------------------------------------------------
// Handlers
@@ -4643,7 +4897,12 @@ registry.ImageOptimize = ImageHandlerOption.extend({
*/
async _onImageChanged(ev) {
this.trigger_up('snippet_edition_request', {exec: async () => {
const img = this._getImg();
await this._autoOptimizeImage();
if (img.dataset.shape) {
img.dataset.originalMimetype = img.dataset.mimetype;
img.dataset.mimetype = 'image/svg+xml';
}
this.trigger_up('cover_update');
}});
},
@@ -4654,6 +4913,11 @@ registry.ImageOptimize = ImageHandlerOption.extend({
* @param {Event} ev
*/
async _onImageCropped(ev) {
const img = this._getImg();
if (img.dataset.shape) {
await this._loadShape(img.dataset.shape);
await this._applyShapeAndColors(true, (img.dataset.shapeColors && img.dataset.shapeColors.split(';')));
}
await this._rerenderXML();
},
});
@@ -5140,14 +5404,7 @@ registry.BackgroundShape = SnippetOptionWidget.extend({
btnContent.appendChild(btnContentInnerDiv);
if (btn.dataset.animated) {
const animatedLabelEl = document.createElement('span');
animatedLabelEl.classList.add('o_we_shape_animated_label');
const labelStr = _t("Animated");
animatedLabelEl.textContent = labelStr[0];
const spanEl = document.createElement('span');
spanEl.textContent = labelStr.substr(1);
animatedLabelEl.appendChild(spanEl);
btnContent.appendChild(animatedLabelEl);
_addAnimatedShapeLabel(btnContent);
}
const {shape} = btn.dataset;
@@ -6120,6 +6377,8 @@ return {
buildRowElement: _buildRowElement,
buildCollapseElement: _buildCollapseElement,
addAnimatedShapeLabel: _addAnimatedShapeLabel,
// Other names for convenience
Class: SnippetOptionWidget,
registry: registry,
@@ -377,6 +377,8 @@ const Wysiwyg = Widget.extend({
res_model: resModel,
res_id: parseInt(resId),
data: (isBackground ? el.dataset.bgSrc : el.getAttribute('src')).split(',')[1],
mimetype: el.dataset.mimetype,
name: (el.dataset.fileName ? el.dataset.fileName : null),
},
});
if (isBackground) {
@@ -153,6 +153,8 @@ $o-we-sidebar-content-field-dropdown-item-color: $o-we-dropdown-item-color !defa
$o-we-sidebar-content-field-dropdown-item-hover-color: $o-we-dropdown-item-hover-color !default;
$o-we-sidebar-content-field-dropdown-item-active-bg: $o-we-dropdown-item-active-bg !default;
$o-we-sidebar-content-field-dropdown-item-active-color: $o-we-dropdown-item-active-color !default;
$o-we-sidebar-content-field-dropdown-grid-item-height: 60px !default;
$o-we-sidebar-content-field-dropdown-grid-item-width: 80px !default;
$o-we-sidebar-content-field-colorpicker-size: 20px !default;
$o-we-sidebar-content-field-colorpicker-size-large: 26px !default;
@@ -1016,6 +1016,41 @@ body.editor_enable.editor_has_snippets {
}
}
}
we-select.o_we_user_value_widget.o_we_select_grid {
we-select-page {
we-button img {
height: $o-we-sidebar-content-field-dropdown-grid-item-height;
width: $o-we-sidebar-content-field-dropdown-grid-item-width;
}
&.active {
display: flex;
flex-wrap: wrap;
we-button {
width: percentage(1 / 3);
padding: 0;
justify-content: center;
img {
padding: $o-we-sidebar-content-field-spacing;
}
}
we-button.active {
border: 2px solid $o-we-color-success !important;
}
}
}
&.o_we_fake_transparent_background {
we-button {
background-image: url(/web/static/img/transparent.png);
background-size: 10px auto;
}
}
}
we-button.o_we_image_shape_remove {
div {
display: flex;
}
}
// Button groups
we-button-group.o_we_user_value_widget {
+92 -7
View File
@@ -256,7 +256,7 @@
<we-button data-shape="web_editor/Rainy/05_001" data-select-label="Rainy 07"/>
<we-button data-shape="web_editor/Rainy/03_001" data-select-label="Rainy 08" data-animated="true"/>
<we-button data-shape="web_editor/Rainy/08_001" data-select-label="Rainy 09" data-animated="true"/>
<we-button data-shape="web_editor/Rainy/09_001" data-select-label="Rainy 10"/>
<we-button data-shape="web_editor/Rainy/09_001" data-select-label="Rainy 10"/>
</we-select-page>
<we-select-page string="Wavy">
<we-button data-shape="web_editor/Wavy/01_001" data-select-label="Wavy 01"/>
@@ -411,7 +411,97 @@
title="'Alt tag' specifies an alternate text for an image, if the image cannot be displayed (slow connection, missing image, screen reader ...)."/>
<we-input class="o_we_large_input" string="Tooltip" data-set-title="" placeholder="Title tag"
title="'Title tag' is shown as a tooltip when you hover the picture."/>
</div>
<div data-js="ImageOptimize"
data-selector="img">
<div class="o_we_image_shape">
<we-row string="Shape" class="o_we_full_row">
<we-select-pager data-name="shape_img_opt" class="o_we_select_grid o_we_fake_transparent_background">
<we-select-page string="Basics">
<we-button data-set-img-shape="web_editor/basic/bsc_square_1" data-select-label="Square 1" data-animated="true"/>
<we-button data-set-img-shape="web_editor/basic/bsc_square_2" data-select-label="Square 2" data-animated="true"/>
<we-button data-set-img-shape="web_editor/basic/bsc_square_3" data-select-label="Square 3" data-animated="true"/>
<we-button data-set-img-shape="web_editor/basic/bsc_square_4" data-select-label="Square 4" data-animated="true"/>
<we-button data-set-img-shape="web_editor/basic/bsc_square_5" data-select-label="Square 5" data-animated="true"/>
<we-button data-set-img-shape="web_editor/basic/bsc_square_6" data-select-label="Square 6" data-animated="true"/>
<we-button data-set-img-shape="web_editor/basic/bsc_square_rounded_1" data-select-label="Square Rounded 1" data-animated="true"/>
<we-button data-set-img-shape="web_editor/basic/bsc_square_rounded_2" data-select-label="Square Rounded 2" data-animated="true"/>
<we-button data-set-img-shape="web_editor/basic/bsc_organic_1" data-select-label="Organic Soft" data-animated="true"/>
<we-button data-set-img-shape="web_editor/basic/bsc_organic_2" data-select-label="Organic Medium" data-animated="true"/>
<we-button data-set-img-shape="web_editor/basic/bsc_organic_3" data-select-label="Organic Hard" data-animated="true"/>
</we-select-page>
<we-select-page string="Solids">
<we-button data-set-img-shape="web_editor/solid/blob_1_solid_rd" data-select-label="Blob Solid 1" />
<we-button data-set-img-shape="web_editor/solid/blob_2_solid_str" data-select-label="Blob Solid 2" />
<we-button data-set-img-shape="web_editor/solid/blob_3_solid_rd" data-select-label="Blob Solid 3" />
<we-button data-set-img-shape="web_editor/solid/oval_1_solid_rd" data-select-label="Oval Solid"/>
<we-button data-set-img-shape="web_editor/solid/sld_blob_4" data-select-label="Blob Solid 4" data-animated="true"/>
<we-button data-set-img-shape="web_editor/solid/sld_blob_shadow_1" data-select-label="Blob Shadow 1" data-animated="true"/>
<we-button data-set-img-shape="web_editor/solid/sld_blob_shadow_2" data-select-label="Blob Shadow 2" data-animated="true"/>
<we-button data-set-img-shape="web_editor/solid/sld_square_1" data-select-label="Square 1" data-animated="true"/>
<we-button data-set-img-shape="web_editor/solid/sld_square_2" data-select-label="Square 2" data-animated="true"/>
<we-button data-set-img-shape="web_editor/solid/sld_square_organic_1" data-select-label="Square - Organic" data-animated="true"/>
</we-select-page>
<we-select-page string="Patterns">
<we-button data-set-img-shape="web_editor/pattern/organic_2_pattern_dot" data-select-label="Organic Dot" data-animated="true"/>
<we-button data-set-img-shape="web_editor/pattern/organic_3_pattern_cross" data-select-label="Organic Cross" />
<we-button data-set-img-shape="web_editor/pattern/organic_4_pattern_caps" data-select-label="Organic Caps" />
<we-button data-set-img-shape="web_editor/pattern/pattern_labyrinth" data-select-label="Labyrinth" data-animated="true"/>
<we-button data-set-img-shape="web_editor/pattern/pattern_points_1" data-select-label="Points" data-animated="true"/>
<we-button data-set-img-shape="web_editor/pattern/pattern_waves_1" data-select-label="Waves 1" data-animated="true"/>
<we-button data-set-img-shape="web_editor/pattern/pattern_waves_2" data-select-label="Waves 2" data-animated="true"/>
<we-button data-set-img-shape="web_editor/pattern/pattern_waves_3" data-select-label="Waves 3" data-animated="true"/>
<we-button data-set-img-shape="web_editor/pattern/pattern_waves_4" data-select-label="Waves 4" data-animated="true"/>
</we-select-page>
<we-select-page string="Lines">
<we-button data-set-img-shape="web_editor/line/oval_3_pattern_line" data-select-label="Oval Line" />
<we-button data-set-img-shape="web_editor/line/organic_1_line" data-select-label="Organic Line" />
<we-button data-set-img-shape="web_editor/line/oval_2_line" data-select-label="Oval Line 2" />
<we-button data-set-img-shape="web_editor/line/little_lines_1" data-select-label="Little lines 1" data-animated="true"/>
<we-button data-set-img-shape="web_editor/line/little_lines_2" data-select-label="Little lines 2" data-animated="true"/>
<we-button data-set-img-shape="web_editor/line/little_lines_3" data-select-label="Little lines 2" data-animated="true"/>
<we-button data-set-img-shape="web_editor/line/line_square_1" data-select-label="Square" data-animated="true"/>
<we-button data-set-img-shape="web_editor/line/line_triangle" data-select-label="Triangles" data-animated="true"/>
<we-button data-set-img-shape="web_editor/line/line_star" data-select-label="Star" data-animated="true"/>
<we-button data-set-img-shape="web_editor/line/line_sun" data-select-label="Sun" data-animated="true"/>
</we-select-page>
<we-select-page string="Floats">
<we-button data-set-img-shape="web_editor/float/flt_primary_1" data-select-label="Primary shapes 1" data-animated="true"/>
<we-button data-set-img-shape="web_editor/float/flt_primary_2" data-select-label="Primary shapes 2" data-animated="true"/>
<we-button data-set-img-shape="web_editor/float/flt_primary_3" data-select-label="Primary shapes 3" data-animated="true"/>
<we-button data-set-img-shape="web_editor/float/flt_planets_1" data-select-label="Planets 1" data-animated="true"/>
<we-button data-set-img-shape="web_editor/float/flt_planets_2" data-select-label="Planets 2" data-animated="true"/>
<we-button data-set-img-shape="web_editor/float/flt_square_1" data-select-label="Square 1" data-animated="true"/>
<we-button data-set-img-shape="web_editor/float/flt_square_2" data-select-label="Square 2" data-animated="true"/>
<we-button data-set-img-shape="web_editor/float/flt_square_3" data-select-label="Square 3" data-animated="true"/>
<we-button data-set-img-shape="web_editor/float/flt_square_4" data-select-label="Square 4" data-animated="true"/>
</we-select-page>
<we-select-page string="Specials">
<we-button data-set-img-shape="web_editor/special/spl_speed_1" data-select-label="Speed" data-animated="true"/>
<we-button data-set-img-shape="web_editor/special/spl_rain_1" data-select-label="Rain" data-animated="true"/>
<we-button data-set-img-shape="web_editor/special/spl_snow_1" data-select-label="Snow" data-animated="true"/>
<we-button data-set-img-shape="web_editor/special/spl_flag_1" data-select-label="Flag" data-animated="true"/>
<we-button data-set-img-shape="web_editor/special/spl_filter_1" data-select-label="Filter" data-animated="true"/>
<we-button data-set-img-shape="web_editor/special/spl_organics_1" data-select-label="Organics" data-animated="true"/>
<we-button data-set-img-shape="web_editor/special/spl_circuit_1" data-select-label="Circuit" data-animated="true"/>
</we-select-page>
</we-select-pager>
<we-button data-set-img-shape="" data-no-preview="true" data-label="None" data-dependencies="shape_img_opt" class="o_we_image_shape_remove"><i class="fa fa-fw fa-times"/></we-button>
</we-row>
<we-row string=" ⌙ Colors">
<we-colorpicker data-set-img-shape-color="true" data-dependencies="shape_img_opt" data-name="img-shape-color-0" data-color-id="0" />
<we-colorpicker data-set-img-shape-color="true" data-dependencies="shape_img_opt" data-name="img-shape-color-1" data-color-id="1" />
<we-colorpicker data-set-img-shape-color="true" data-dependencies="shape_img_opt" data-name="img-shape-color-2" data-color-id="2" />
<we-colorpicker data-set-img-shape-color="true" data-dependencies="shape_img_opt" data-name="img-shape-color-3" data-color-id="3" />
<we-colorpicker data-set-img-shape-color="true" data-dependencies="shape_img_opt" data-name="img-shape-color-4" data-color-id="4" />
</we-row>
</div>
<t t-call="web_editor.snippet_options_image_optimization_widgets"/>
</div>
<div data-js="ImageTools" data-selector="img">
<we-row string="Transform">
<we-button data-crop="" data-no-preview="true" title="Crop Image"><i class="fa fa-crop"></i></we-button>
<we-button data-transform="" data-no-preview="true" title="Transform the picture (click twice to reset transformation)">
@@ -435,7 +525,7 @@
<we-button data-align="right" title="Align Right">Right</we-button>
</we-select>
<we-row string="Shape">
<we-row string="Style">
<we-button data-toggle-shape-rounded="rounded" title="Shape: Rounded"><i class="fa fa-square fa-fw"></i></we-button>
<we-button data-toggle-shape-circle="rounded-circle" title="Shape: Circle"><i class="fa fa-circle-o fa-fw"></i></we-button>
<we-button data-toggle-shape-shadow="shadow" title="Shadow"><i class="fa fa-sun-o fa-fw"></i></we-button>
@@ -445,11 +535,6 @@
<we-input string="Padding" data-set-padding="" data-unit="px"/>
</div>
<div data-js="ImageOptimize"
data-selector="img">
<t t-call="web_editor.snippet_options_image_optimization_widgets"/>
</div>
<div data-js="DynamicSvg" data-selector="img">
<we-row string="Dynamic Colors" data-name="colors">
<we-colorpicker data-color="true" data-color-name="c1"/>
+1
View File
@@ -41,6 +41,7 @@ safe_attrs = clean.defs.safe_attrs | frozenset(
'data-oe-model', 'data-oe-id', 'data-oe-field', 'data-oe-type', 'data-oe-expression', 'data-oe-translation-id', 'data-oe-nodeid',
'data-publish', 'data-id', 'data-res_id', 'data-interval', 'data-member_id', 'data-scroll-background-ratio', 'data-view-id',
'data-class', 'data-mimetype', 'data-original-src', 'data-original-id', 'data-gl-filter', 'data-quality', 'data-resize-width',
'data-shape', 'data-shape-colors', 'data-file-name', 'data-original-mimetype',
])