The Freya logo (https://freyaui.dev/logo.svg):
is a good test case real-world test case.
It is made up of a bunch of fills and linear gradients combined together with:
- The following filters: feFlood, feBlend, feGaussianBlur
- A (linear) graph of filter effects
- A vector mask
It currently renders like below in Blitz / anyrender_svg:
Source code is:
<svg width="385" height="385" viewBox="0 0 385 385" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="mask0_10_2" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="385" height="385">
<circle cx="192.5" cy="192.5" r="192.5" fill="black" />
</mask>
<g mask="url(#mask0_10_2)">
<circle cx="192.5" cy="192.5" r="192.5" fill="#6D4EE9" />
<path d="M192.5 244C130.9 119.2 10.5 139 -42 164.5L-51.5 232L27.5 364L222.5 451L340.5 444.5C368 461 418.7 447.9 401.5 263.5C384.3 79.1 353.667 117 340.5 159C316.833 239.333 254.1 368.8 192.5 244Z" fill="url(#paint0_linear_10_2)" />
<path d="M187 221.584C125.4 96.7843 5 116.584 -47.5 142.084L-57 209.584L22 341.584L217 428.584L335 422.084C362.5 438.584 413.2 425.484 396 241.084C378.8 56.6843 348.167 94.5843 335 136.584C311.333 216.918 248.6 346.384 187 221.584Z" fill="url(#paint1_linear_10_2)" />
<path d="M201 277.584C139.4 152.784 19 172.584 -33.5 198.084L-43 265.584L36 397.584L231 484.584L349 478.084C376.5 494.584 427.2 481.484 410 297.084C392.8 112.684 362.167 150.584 349 192.584C325.333 272.918 262.6 402.384 201 277.584Z" fill="url(#paint2_linear_10_2)" />
<g filter="url(#filter0_f_10_2)">
<path d="M355.512 87.611C310.337 16.3964 223.373 7.55771 185.537 12.0402C177.74 16.2172 180.694 30.7227 254.894 55.3293C329.093 79.9359 343.858 205.629 341.965 265.4C365.304 235.81 400.687 158.826 355.512 87.611Z" fill="url(#paint3_linear_10_2)" fill-opacity="0.08" />
</g>
<g filter="url(#filter1_f_10_2)">
<path d="M101.031 290.479C168.015 315.921 260.013 331.619 295.706 217.628C333.226 97.8008 163.52 25.4599 146.437 46.7123C34.2257 84.3008 112.59 108.384 162.005 172.528C84.5588 194.519 121.493 264.105 101.031 290.479Z" fill="url(#paint4_linear_10_2)" fill-opacity="0.08" />
</g>
</g>
<defs>
<filter id="filter0_f_10_2" x="161.595" y="-9.92618" width="236.716" height="296.326" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feGaussianBlur stdDeviation="10.5" result="effect1_foregroundBlur_10_2" />
</filter>
<filter id="filter1_f_10_2" x="53.0219" y="7.0224" width="284.083" height="337.665" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feGaussianBlur stdDeviation="18" result="effect1_foregroundBlur_10_2" />
</filter>
<linearGradient id="paint0_linear_10_2" x1="176.741" y1="124.416" x2="176.741" y2="451" gradientUnits="userSpaceOnUse">
<stop stop-color="#D9D9D9" />
<stop offset="1" stop-color="#D9D9D9" stop-opacity="0" />
</linearGradient>
<linearGradient id="paint1_linear_10_2" x1="171.241" y1="102" x2="171.241" y2="428.584" gradientUnits="userSpaceOnUse">
<stop stop-color="#D9D9D9" />
<stop offset="1" stop-color="#D9D9D9" stop-opacity="0" />
</linearGradient>
<linearGradient id="paint2_linear_10_2" x1="185.241" y1="158" x2="185.241" y2="484.584" gradientUnits="userSpaceOnUse">
<stop stop-color="#D9D9D9" />
<stop offset="1" stop-color="#D9D9D9" stop-opacity="0" />
</linearGradient>
<linearGradient id="paint3_linear_10_2" x1="298.151" y1="28.8941" x2="243.461" y2="239.865" gradientUnits="userSpaceOnUse">
<stop stop-color="white" />
<stop offset="1" stop-color="white" stop-opacity="0" />
</linearGradient>
<linearGradient id="paint4_linear_10_2" x1="240.855" y1="73.0625" x2="174.119" y2="312.187" gradientUnits="userSpaceOnUse">
<stop stop-color="white" />
<stop offset="1" stop-color="white" stop-opacity="0" />
</linearGradient>
</defs>
</svg>
The Freya logo (https://freyaui.dev/logo.svg):
is a good test case real-world test case.
It is made up of a bunch of fills and linear gradients combined together with:
It currently renders like below in Blitz / anyrender_svg:
Source code is: