Skip to content

Render the Freya logo #1704

Description

@nicoburns

The Freya logo (https://freyaui.dev/logo.svg):

Image

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:

Image

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>

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions