File: D:/HostingSpaces/Neopoints/momsecurity.be/resources/views/svg/mask.blade.php
<div class="svg-wrapper" style="position: relative; height: 0; width: 100%; padding-bottom: {{ (((int)$vb_h / (int)$vb_w) * 100) }}%">
<svg class="svg-mask" style="position: absolute; top: 0; left: 0; width: 100%;" viewBox="0 0 {{$vb_w}} {{$vb_h}}" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMin meet">
<defs>
<clipPath id="svg-clip-path-1">
<path id="svg-mask-path-1"
d="M275.662 30.592c-1.117.384-2.226.76-3.327 1.145C14.328 121.626-100.955 413.192 108.3 578.599c90.893 71.852 231.839 107.34 360.015 102.457 65.015-2.484 130.386-16.096 184.303-45.064 64.245-34.51 73.514-96.93 64.42-154.15-8.988-56.531-46.015-106.767-61.432-161.944-12.662-45.34-4.378-92.577 18.471-135.12 20.342-37.886 13.688-78.393-17.362-113.005C573.31-21.202 394.51-9.88 275.662 30.592"/>
</clipPath>
<clipPath id="svg-clip-path-2">
<path id="svg-mask-path-2"
d="M0 2850.936c183.619-114.312 503.619-171.468 960-171.468 456.38 0 776.38-57.156 960-171.468v344.936H2l-2-2z"
transform="rotate(-180 960 1426.468)"/>
</clipPath>
<clipPath id="svg-clip-path-3">
<path id="svg-mask-path-3"
d="M0 184.695c245.928-92.817 566.095-107.804 960.5-44.96S1674.738 156.001 1920 0v-4L0-11v195.695z"/>
</clipPath>
<clipPath id="svg-clip-path-4">
<path id="svg-mask-path-4"
d="M39.044 78.872c31.09 6.941 37.783-19.498 41.515-42.334C84.29 13.702 63.247-4.632 33.769 1.04 4.292 6.713-2.786 25.182.892 44.048c3.678 18.865 9.152 30.67 38.152 34.824z"/>
</clipPath>
<clipPath id="svg-clip-path-5">
<path id="svg-mask-path-5"
d="M133.538 0C32.338 0 0 126.177 0 187.616 0 258.242 47.558 373 163.99 373 259.418 373 360 310.57 360 240.1 360 110.182 226.618 0 133.538 0"/>
</clipPath>
<clipPath id="svg-clip-path-6">
<path id="svg-mask-path-6"
d="M719.22 265.887c5.87-106.983-53.825-191.353-125.27-230.542C520.85-6.461 435.998-3.09 353.213 5.095c-82.848 12.15-166.16 24.817-235.75 66.27C49.216 111.24-5.304 179.896.411 267.603c2.558 87.631 63.664 157.51 131.697 199.246 69.8 43.171 146.53 58.21 221.104 69.254 74.51 7.27 152.774 6.957 226.088-36.856 71.232-41.43 137.519-126.352 139.918-233.359"/>
</clipPath>
<clipPath id="svg-clip-path-7">
<path id="svg-mask-path-7"
d="M409.562 489.5c-8.733 0-394.877-4.429-408.992-206.365C-10.994 117.706 154.642.5 385.02.5 560.797.5 720 91.03 720 284.688c0 52.788-59.703 204.812-310.438 204.812z"/>
</clipPath>
<clipPath id="svg-clip-path-8">
<path id="svg-mask-path-8"
d="M0 1579c375.402 47.333 705.617 69.333 990.644 66 427.542-5 701.356-92 929.356-96H0v30z"
transform="translate(0 -1549)"/>
</clipPath>
{{-- methodsRow --}}
<clipPath id="svg-clip-path-9">
<path id="svg-mask-path-9"
d="M17.065 128.587c.004 64.711 88.168 114.23 157.596 114.233 63.706.004 95.538-12.785 122.173-79.55 26.651-66.804 23.33-106.043-132.076-133.445C9.352 2.423 17.062 81.54 17.065 128.587z"
transform="rotate(-10 163.247 133.51) scale(2.3)"/>
</clipPath>
<clipPath id="svg-clip-path-10">
<path id="svg-mask-path-10"
d="M142.643 15.783c130.359 0 141.095 89.154 141.095 112.748 0 61.716-53.45 106.12-102.719 106.12-59.826 0-168.69-34.209-168.69-121.19 0-103.55 118.758-97.678 130.314-97.678z"
transform="rotate(-7 148.033 125.186) scale(2.3)"/>
</clipPath>
<clipPath id="svg-clip-path-11">
<path id="svg-mask-path-11"
d="M148.577 2.504C55.373 2.504 2.055 63.309 2.055 121.362c0 57.72 58.674 111.565 149.545 111.565 72.451 0 139.374-31.128 139.374-98.514 0-51.737-13.018-131.91-142.397-131.91"
transform="rotate(1 146.515 117.715) scale(2.3)"/>
</clipPath>
<clipPath id="svg-clip-path-12">
<path id="svg-mask-path-12"
d="M142.643 15.783c130.359 0 141.095 89.154 141.095 112.748 0 61.716-53.45 106.12-102.719 106.12-59.826 0-168.69-34.209-168.69-121.19 0-103.55 118.758-97.678 130.314-97.678z"
transform="rotate(-7 148.033 125.186) scale(2.3)"/>
</clipPath>
<clipPath id="svg-clip-path-13">
<path id="svg-mask-path-13"
d="M576.212 203.177c0 148.239-184.009 198.225-336.893 198.225C101.17 401.402 0 323.17 0 210.236 0 106.64 82.63 0 243.612 0c158.619 0 332.6 77.559 332.6 203.177"
transform="scale(1.3)"/>
</clipPath>
<clipPath id="svg-clip-path-14">
<path id="svg-mask-path-14"
d="M366.223 0c157.938 0 291.98 59.262 293.853 237.77 0 82.448-66.668 235.844-275.01 235.844C292.426 473.614 0 445.277 0 275.887 0 149.258 150.634 0 366.223 0"
transform="scale(1.2)"/>
</clipPath>
<clipPath id="svg-clip-path-15">
<path id="svg-mask-path-15"
d="M620 275.85c0 159.706-173.933 214.65-342.025 214.65C200.185 490.5 0 472.829 0 281.141c0-11.223.69-23.045 2.127-35.493C18.749 105.048 121.645.5 290.449.5 402.352.5 620 62.363 620 275.85"
transform="scale(1.25)"/>
</clipPath>
<clipPath id="svg-clip-path-16">
<path id="svg-mask-path-16"
d="M350.094.5C495.047.5 598 90.388 598 223.707 598 391.277 459.7 450.5 350.103 450.5 206.245 450.5 0 363.462 0 226.37c0-.292.002-.581.004-.872-.002-.291-.004-.585-.004-.876C0 87.182 206.637.5 350.094.5"
transform="scale(1.3)"/>
</clipPath>
</defs>
<mask id="svg-mask" fill="#fff">
<use xlink:href="#svg-mask-path-{{$pathId}}"/>
</mask>
<use fill="{{$color}}" @if($color == '#7AD3FF') opacity="0.2" @endif alignment-baseline="hanging"
xlink:href="#svg-mask-path-{{$pathId}}"/>
</svg>
</div>