File: D:/HostingSpaces/SBogers10/momsecurity.komma.nl/resources/views/components/clippedImage.blade.php
@php
$shape = isset($pathId) ? $pathId : 1;
if(isset($image)) {
$imageSize = isset($imageSize) ? $imageSize : 'medium';
$ratio = getimagesize(public_path($image->{$imageSize . '_image_url'}));
}
elseif(isset($imageUrl)) $ratio = getimagesize(public_path($imageUrl));
$pathId = uuid_create();
@endphp
<div class="c-clipped-image">
<svg class="c-clipped-image__svg" viewBox="0 0 {{$ratio[0]}} {{$ratio[1]}}" style="max-width: {{$ratio[0]}}px" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMin meet">
<defs>
@switch($shape)
@case(1)
@default
<clipPath id="{{ $pathId }}" clipPathUnits="objectBoundingBox" transform="scale(0.00138, 0.00146)">
<path
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>
@break
@case(2)
<clipPath id="{{ $pathId }}" clipPathUnits="objectBoundingBox" transform="scale(0.00138, 0.00184)">
<path
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>
@break
@case(3)
<clipPath id="{{ $pathId }}" clipPathUnits="objectBoundingBox" transform="scale(0.00138, 0.00204)">
<path
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>
@break
@case(4)
<clipPath id="{{ $pathId }}" clipPathUnits="objectBoundingBox" transform="scale(0.00132, 0.00190)">
<path
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>
@break
@case(5)
<clipPath id="{{ $pathId }}" clipPathUnits="objectBoundingBox" transform="scale(0.00125, 0.00174)">
<path
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>
@break
@case(6)
<clipPath id="{{ $pathId }}" clipPathUnits="objectBoundingBox" transform="scale(0.00128, 0.00162)">
<path
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>
@break
@case(7)
<clipPath id="{{ $pathId }}" clipPathUnits="objectBoundingBox" transform="scale(0.00128, 0.00169)">
<path
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>
@break
@case(8)
<clipPath id="{{ $pathId }}" clipPathUnits="objectBoundingBox" transform="scale(0.0027, 0.00255)">
<path
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>
@break
@case('full-image')
<clipPath id="{{ $pathId }}" clipPathUnits="objectBoundingBox" transform="scale(0.000521, 0.000988)">
<path d="M1920,1.607c-178.807-6.744-346.188,8.786-521.885,27.086-236.09,24.6-460.486,63.407-697.56,86.505-135.337,13.188-278.115,19-422.347,10.186C179.662,119.368,89.911,103.742,0,85.993V896.681c132.9-1.185,267.861-2.01,396.976-17.416,239.992-28.635,534.616-73.51,770.915-36.067,164.941,26.136,212.293,68.752,364.794,108.5,120.913,31.51,255.193,49.168,387.315,58.5Z" fill="none"/>
</clipPath>
@break
{{-- @case(2)--}}
{{-- <clipPath id="{{ $pathId }}" >--}}
{{-- <path--}}
{{-- 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>--}}
{{-- @break--}}
{{-- @case(3)--}}
{{-- <clipPath id="{{ $pathId }}">--}}
{{-- <path--}}
{{-- d="M0 184.695c245.928-92.817 566.095-107.804 960.5-44.96S1674.738 156.001 1920 0v-4L0-11v195.695z"/>--}}
{{-- </clipPath>--}}
{{-- @break--}}
{{-- @case(4)--}}
{{-- <clipPath id="{{ $pathId }}">--}}
{{-- <path--}}
{{-- 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>--}}
{{-- @break--}}
{{-- @case(5)--}}
{{-- <clipPath id="{{ $pathId }}">--}}
{{-- <path--}}
{{-- 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>--}}
{{-- @break--}}
{{-- @case(8)--}}
{{-- <clipPath id="{{ $pathId }}">--}}
{{-- <path--}}
{{-- 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>--}}
{{-- @break--}}
{{-- @case(9)--}}
{{-- <clipPath id="{{ $pathId }}">--}}
{{-- <path--}}
{{-- 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>--}}
{{-- @break--}}
{{-- @case(10)--}}
{{-- <clipPath id="{{ $pathId }}">--}}
{{-- <path--}}
{{-- 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>--}}
{{-- @break--}}
{{-- @case(11)--}}
{{-- <clipPath id="{{ $pathId }}">--}}
{{-- <path--}}
{{-- 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>--}}
{{-- @break--}}
{{-- @case(12)--}}
{{-- <clipPath id="{{ $pathId }}">--}}
{{-- <path--}}
{{-- 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>--}}
{{-- @break--}}
@endswitch
</defs>
<g clip-path="url('#{{ $pathId }}')">
<rect class="c-clipped-image__background" height="100%" width="100%" opacity="0" fill="currentColor"></rect>
@if(!empty($image))
<image x="0" y="0" width="{{ $ratio[0] }}" height="{{ $ratio[1] }}" xlink:href="{{ $image->{$imageSize . '_image_url'} }}"/>
@elseif(!empty($imageUrl))
<image x="0" y="0" width="{{ $ratio[0] }}" height="{{ $ratio[1] }}" xlink:href="{{$imageUrl}}"/>
@endif
</g>
</svg>
</div>