SVG mosaic with cross-browser support, is it possible?

Question

SVG mosaic with cross-browser support, is it possible?

Asked 5 years, 5 months ago

Viewed 30 times

0

I have a project in which I would like to include a mosaic-shaped gallery, this would be responsive and interactive.

At first, I thought about SVG for the free form and without loss of quality/ rendering. But when I put into practice, it didn’t work so well.

I would like some help on my code or maybe an idea of how to do otherwise.

Follows the code

#mosaico {
  position: relative;
  background-color: #054168;
  z-index: 2;
}
#mosaico .glass {
  position: relative;
  stroke: #054168;
  stroke-dasharray: 0;
  stroke-width: 2px;
  opacity: .5;
  z-index: 1;
}
#mosaico .glass:hover {
  opacity: 1;
}

<div id="mosaico">
            <svg viewBox="0 0 1472 1105">
                <defs>
                    <pattern id="img01" patternUnits="userSpaceOnUse" width="100%" height="100%" x="0" y="0" preserveAspectRatio="xMidYMid slice">
                        <image href="https://images.pexels.com/photos/1226302/pexels-photo-1226302.jpeg"></image>
                    </pattern>
                    <pattern id="img02" patternUnits="userSpaceOnUse" width="100%" height="100%" x="1104" y="0" preserveAspectRatio="xMidYMid slice">
                        <image href="https://xubuntu.org/wp-content/uploads/2018/04/8fbb/40103442821_db033c72a4_o-web.jpg"></image>
                    </pattern>
                    <pattern id="img03" patternUnits="userSpaceOnUse" width="100%" height="100%" x="1104" y="736" preserveAspectRatio="xMidYMid slice">
                        <image href="https://images.pexels.com/photos/257360/pexels-photo-257360.jpeg"></image>
                    </pattern>
                    <pattern id="img04" patternUnits="userSpaceOnUse" width="100%" height="100%" x="0" y="736" preserveAspectRatio="xMidYMid slice">
                        <image href="https://images.pexels.com/photos/443446/pexels-photo-443446.jpeg"></image>
                    </pattern>
                    <pattern id="img05" patternUnits="userSpaceOnUse" width="100%" height="100%" x="736" y="736" preserveAspectRatio="xMidYMid slice">
                        <image href="https://img.freepik.com/free-photo/abstract-polygonal-space-low-poly-dark-background-3d-rendering_7247-223.jpg"></image>
                    </pattern>
                    <pattern id="img06" patternUnits="userSpaceOnUse" width="100%" height="100%" x="736" y="368" preserveAspectRatio="xMidYMid slice">
                        <image href="https://image.freepik.com/free-vector/abstract-dynamic-pattern-wallpaper-vector_53876-59131.jpg"></image>
                    </pattern>
                    <pattern id="img07" patternUnits="userSpaceOnUse" width="100%" height="100%" x="368" y="368" preserveAspectRatio="xMidYMid slice">
                        <image href="https://images.pexels.com/photos/1212487/pexels-photo-1212487.jpeg"></image>
                    </pattern>
                    <pattern id="img08" patternUnits="userSpaceOnUse" width="100%" height="100%" x="368" y="0" preserveAspectRatio="xMidYMid slice">
                        <image href="https://cdn.dribbble.com/users/2438573/screenshots/5710529/shot_2x.jpg"></image>
                    </pattern>
                    <pattern id="img09" patternUnits="userSpaceOnUse" width="100%" height="100%" x="0" y="736" preserveAspectRatio="xMidYMid slice">
                        <image href="https://images.unsplash.com/photo-1495701173156-41868ee24569"></image>
                    </pattern>
                    <pattern id="img10" patternUnits="userSpaceOnUse" width="100%" height="100%" x="368" y="736" preserveAspectRatio="xMidYMid slice">
                        <image href="https://www.barraques.cat/pngfile/big/7-75338_abstract-minimalist-minimalist-wallpaper-red.png"></image>
                    </pattern>
                    <pattern id="img11" patternUnits="userSpaceOnUse" width="100%" height="100%" x="736" y="0" preserveAspectRatio="xMidYMid slice">
                        <image href="https://i.pinimg.com/originals/49/40/49/49404941ed61bcd12887545849aae7c9.jpg"></image>
                    </pattern>
                    <pattern id="img12" patternUnits="userSpaceOnUse" width="100%" height="100%" x="0" y="368" preserveAspectRatio="xMidYMid slice">
                        <image href="https://images3.alphacoders.com/621/621682.jpg"></image>
                    </pattern>
                    <pattern id="img13" patternUnits="userSpaceOnUse" width="100%" height="100%" x="736" y="368" preserveAspectRatio="xMidYMid slice">
                        <image href="https://wallpaper-gallery.net/images/butterfly/butterfly-15.jpg"></image>
                    </pattern>
                    <pattern id="img14" patternUnits="userSpaceOnUse" width="100%" height="100%" x="1288" y="736" preserveAspectRatio="xMidYMid slice">
                        <image href="https://wallpaper-gallery.net/images/dota-2-wallpapers/dota-2-wallpapers-2.jpg"></image>
                    </pattern>
                    <pattern id="img15" patternUnits="userSpaceOnUse" width="100%" height="100%" x="0" y="368" preserveAspectRatio="xMidYMid slice">
                        <image href="https://wallpaper-gallery.net/images/windows-8-wallpaper/windows-8-wallpaper-5.jpg"></image>
                    </pattern>
                    <pattern id="img16" patternUnits="userSpaceOnUse" width="100%" height="100%" x="368" y="0" preserveAspectRatio="xMidYMid slice">
                        <image href="https://wallpaper-gallery.net/images/beach/beach-6.jpg"></image>
                    </pattern>
                    <pattern id="img17" patternUnits="userSpaceOnUse" width="100%" height="100%" x="552" y="184" preserveAspectRatio="xMidYMid slice">
                        <image href="https://wallpaper-gallery.net/images/1920x1080-minimalist-wallpaper/1920x1080-minimalist-wallpaper-5.png"></image>
                    </pattern>
                    <pattern id="img18" patternUnits="userSpaceOnUse" width="100%" height="100%" x="552" y="368" preserveAspectRatio="xMidYMid slice">
                        <image href="https://wallpaper-gallery.net/images/wallpaper-wide/wallpaper-wide-8.jpg"></image>
                    </pattern>
                    <pattern id="img19" patternUnits="userSpaceOnUse" width="100%" height="100%" x="1104" y="552" preserveAspectRatio="xMidYMid slice">
                        <image href="https://wallpaper-gallery.net/images/wallpaper-wide/wallpaper-wide-4.jpg"></image>
                    </pattern>
                    <pattern id="img20" patternUnits="userSpaceOnUse" width="100%" height="100%" x="1104" y="920" preserveAspectRatio="xMidYMid slice">
                        <image href="https://wallpaper-gallery.net/images/wallpaper-wide/wallpaper-wide-1.jpg"></image>
                    </pattern>
                    <pattern id="img21" patternUnits="userSpaceOnUse" width="100%" height="100%" x="1288" y="0" preserveAspectRatio="xMidYMid slice">
                        <image href="https://wallpaper-gallery.net/images/wallpaper-wide/wallpaper-wide-9.jpg"></image>
                    </pattern>
                    <pattern id="img22" patternUnits="userSpaceOnUse" width="100%" height="100%" x="552" y="0" preserveAspectRatio="xMidYMid slice">
                        <image href="https://wallpaper-gallery.net/images/wallpaper-wide/wallpaper-wide-13.jpg"></image>
                    </pattern>
                    <pattern id="img23" patternUnits="userSpaceOnUse" width="100%" height="100%" x="184" y="368" preserveAspectRatio="xMidYMid slice">
                        <image href="https://wallpaper-gallery.net/images/wallpaper-wide/wallpaper-wide-24.jpg"></image>
                    </pattern>
                    <pattern id="img24" patternUnits="userSpaceOnUse" width="100%" height="100%" x="0" y="552" preserveAspectRatio="xMidYMid slice">
                        <image href="https://wallpaper-gallery.net/images/wallpaper-wide/wallpaper-wide-16.jpg"></image>
                    </pattern>
                    <pattern id="img25" patternUnits="userSpaceOnUse" width="100%" height="100%" x="368" y="736" preserveAspectRatio="xMidYMid slice">
                        <image href="https://wallpaper-gallery.net/images/wallpaper-wide/wallpaper-wide-2.jpg"></image>
                    </pattern>
                    <pattern id="img26" patternUnits="userSpaceOnUse" width="100%" height="100%" x="552" y="920" preserveAspectRatio="xMidYMid slice">
                        <image href="https://wallpaper-gallery.net/images/wallpaper-wide/wallpaper-wide-7.jpg"></image>
                    </pattern>
                    <pattern id="img27" patternUnits="userSpaceOnUse" width="100%" height="100%" x="1104" y="184" preserveAspectRatio="xMidYMid slice">
                        <image href="https://wallpaper-gallery.net/images/fire/fire-3.jpg"></image>
                    </pattern>
                    <pattern id="img28" patternUnits="userSpaceOnUse" width="100%" height="100%" x="1288" y="184" preserveAspectRatio="xMidYMid slice">
                        <image href="https://wallpaper-gallery.net/images/pooh-wallpaper/pooh-wallpaper-24.jpg"></image>
                    </pattern>
                    <pattern id="img29" patternUnits="userSpaceOnUse" width="100%" height="100%" x="0" y="0" preserveAspectRatio="xMidYMid slice">
                        <image href="https://wallpaper-gallery.net/images/wallpaper-wide/wallpaper-wide-13.jpg"></image>
                    </pattern>
                </defs>
                <polygon class="glass" points="0 0 368 0 0 368 0 0" fill="url(#img01)"></polygon>
                <polygon class="glass no_mobile" points="1104 0 1472 0 1104 368 1104 0" fill="url(#img02)"></polygon>
                <polygon class="glass no_mobile" points="1104 736 1472 736 1104 1104 1104 736" fill="url(#img03)"></polygon>
                <polygon class="glass" points="368 736 0 736 368 1104 368 736" fill="url(#img04)"></polygon>
                <polygon class="glass" points="1104 736 736 736 1104 1104 1104 736" fill="url(#img05)"></polygon>
                <polygon class="glass" points="1104 736 736 736 1104 368 1104 736" fill="url(#img06)"></polygon>
                <polygon class="glass" points="736 736 368 736 736 368 736 736" fill="url(#img07)"></polygon>
                <polygon class="glass" points="368 368 368 0 736 368 368 368" fill="url(#img08)"></polygon>
                <polygon class="glass" points="0 1104 0 736 368 1104 0 1104" fill="url(#img09)"></polygon>
                <polygon class="glass" points="368 1104 368 736 736 1104 368 1104" fill="url(#img10)"></polygon>
                <polygon class="glass" points="1104 368 1104 0 736 368 1104 368" fill="url(#img11)"></polygon>
                <polygon class="glass" points="184 552 0 736 0 368 184 552" fill="url(#img12)"></polygon>
                <polygon class="glass" points="920 552 736 736 736 368 920 552" fill="url(#img13)"></polygon>
                <polygon class="glass no_mobile" points="1288 920 1472 1104 1472 736 1288 920" fill="url(#img14)"></polygon>
                <polygon class="glass" points="184 552 0 368 368 368 184 552" fill="url(#img15)"></polygon>
                <polygon class="glass" points="552 184 368 0 736 0 552 184" fill="url(#img16)"></polygon>
                <polygon class="glass" points="736 368 552 184 920 184 736 368" fill="url(#img17)"></polygon>
                <polygon class="glass" points="920 552 736 368 1104 368 920 552" fill="url(#img18)"></polygon>
                <polygon class="glass no_mobile" points="1288 552 1104 736 1472 736 1288 552" fill="url(#img19)"></polygon>
                <polygon class="glass no_mobile" points="1288 920 1104 1104 1472 1104 1288 920" fill="url(#img20)"></polygon>
                <polygon class="glass no_mobile" points="1288 184 1472 368 1472 0 1288 184" fill="url(#img21)"></polygon>
                <path class="glass" d="M552,184,736,0h368L920,184Z" transform="translate(0 0)" fill="url(#img22)"></path>
                <path class="glass" d="M184,552,368,368H736L552,552Z" transform="translate(0 0)" fill="url(#img23)"></path>
                <path class="glass" d="M1,736,184,552H552L368,736Z" transform="translate(0 0)" fill="url(#img24)"></path>
                <path class="glass" d="M368,736,552,920H920L736,736Z" transform="translate(0 0)" fill="url(#img25)"></path>
                <path class="glass" d="M552,920l184,184h368L920,920Z" transform="translate(0 0)" fill="url(#img26)"></path>
                <path class="glass no_mobile" d="M1288,184,1104,368V736l184-184Z" transform="translate(0 0)" fill="url(#img27)"></path>
                <path class="glass no_mobile" d="M1288,184l184,184V736L1288,552Z" transform="translate(0 0)" fill="url(#img28)"></path>
                <polygon class="glass" points="368 368 0 368 368 0 368 368" fill="url(#img29)"></polygon>
            </svg>
        </div>

:

1

It was not clear, its title seems not to have to do with the text of the question... You speak of cross-browser later says that "didn’t work so well for me"... What didn’t make it so good? And what does cross-browser have to do with history?

– hugocsl

2019/06/17 at 14:43
Only worked in Chrome, in other browsers did not appear Mosaic, was empty. So my main question is if there is an error in my code breaking in the browsers.

– Kamile Pimenta

2019/06/17 at 14:47

1 answer

Browser other questions tagged javascript html css svg

You are not signed in. Login or sign up in order to post.

by hugocsl • **65,517** points · Answer 1 · 2019-06-17T16:22:13+00:00

SVG is a good option for this kind of thing, and it basically didn’t work on Edge and in the Firefox pq vc did not declare the size of the image, not further declare only the size of the pattern, you have to declare the width and height of the image inside!

<pattern width="100%" height="100%" id="" x="0" y="0">

    <image width="2560" height="1440" x="0" y="0" href="#"></image>

</pattern>

As there are many images I didn’t make for all, I just made the first line for you to see that now renders correctly!

In Firefox

In the Edge

Code

#mosaico {
    position: relative;
    background-color: #054168;
    z-index: 2;
}

#mosaico .glass {
    position: relative;
    stroke: #054168;
    stroke-dasharray: 0;
    stroke-width: 2px;
    opacity: .5;
    z-index: 1;
}

#mosaico .glass:hover {
    opacity: 1;
}

<div id="mosaico">
    <svg viewBox="0 0 1472 1105">
        <defs>
            <pattern id="img01" patternUnits="userSpaceOnUse" width="100%" height="100%" x="0" y="0"
                preserveAspectRatio="xMidYMid slice">
                <image width="3120" height="4160" x="0" y="0"
                    href="https://images.pexels.com/photos/1226302/pexels-photo-1226302.jpeg"></image>
            </pattern>
            <pattern id="img02" patternUnits="userSpaceOnUse" width="100%" height="100%" x="1104" y="0"
                preserveAspectRatio="xMidYMid slice">
                <image width="1024" height="640" x="0" y="0"
                    href="https://xubuntu.org/wp-content/uploads/2018/04/8fbb/40103442821_db033c72a4_o-web.jpg">
                </image>
            </pattern>
            <pattern id="img03" patternUnits="userSpaceOnUse" width="100%" height="100%" x="1104" y="736"
                preserveAspectRatio="xMidYMid slice">
                <image width="1200" height="1200" x="0" y="0"
                    href="https://images.pexels.com/photos/257360/pexels-photo-257360.jpeg"></image>
            </pattern>
            <pattern id="img04" patternUnits="userSpaceOnUse" width="100%" height="100%" x="0" y="736"
                preserveAspectRatio="xMidYMid slice">
                <image width="1200" height="1200" x="0" y="0"
                    href="https://images.pexels.com/photos/443446/pexels-photo-443446.jpeg"></image>
            </pattern>
            <pattern id="img05" patternUnits="userSpaceOnUse" width="100%" height="100%" x="736" y="736"
                preserveAspectRatio="xMidYMid slice">
                <image width="1200" height="1200" x="0" y="0"
                    href="https://img.freepik.com/free-photo/abstract-polygonal-space-low-poly-dark-background-3d-rendering_7247-223.jpg">
                </image>
            </pattern>
            <pattern id="img06" patternUnits="userSpaceOnUse" width="100%" height="100%" x="736" y="368"
                preserveAspectRatio="xMidYMid slice">
                <image width="1200" height="1200" x="0" y="0"
                    href="https://image.freepik.com/free-vector/abstract-dynamic-pattern-wallpaper-vector_53876-59131.jpg">
                </image>
            </pattern>
            <pattern id="img07" patternUnits="userSpaceOnUse" width="100%" height="100%" x="368" y="368"
                preserveAspectRatio="xMidYMid slice">
                <image width="1200" height="1200" x="0" y="0"
                    href="https://images.pexels.com/photos/1212487/pexels-photo-1212487.jpeg"></image>
            </pattern>
            <pattern id="img08" patternUnits="userSpaceOnUse" width="100%" height="100%" x="368" y="0"
                preserveAspectRatio="xMidYMid slice">
                <image width="800" height="600" x="0" y="0"
                    href="https://cdn.dribbble.com/users/2438573/screenshots/5710529/shot_2x.jpg"></image>
            </pattern>
            <pattern id="img09" patternUnits="userSpaceOnUse" width="100%" height="100%" x="0" y="736"
                preserveAspectRatio="xMidYMid slice">
                <image width="1200" height="1200" x="0" y="0"
                    href="https://images.unsplash.com/photo-1495701173156-41868ee24569"></image>
            </pattern>
            <pattern id="img10" patternUnits="userSpaceOnUse" width="100%" height="100%" x="368" y="736"
                preserveAspectRatio="xMidYMid slice">
                <image width="1200" height="1200" x="0" y="0"
                    href="https://www.barraques.cat/pngfile/big/7-75338_abstract-minimalist-minimalist-wallpaper-red.png">
                </image>
            </pattern>
            <pattern id="img11" patternUnits="userSpaceOnUse" width="100%" height="100%" x="736" y="0"
                preserveAspectRatio="xMidYMid slice">
                <image width="1080" height="1920" x="0" y="0"
                    href="https://i.pinimg.com/originals/49/40/49/49404941ed61bcd12887545849aae7c9.jpg"></image>
            </pattern>
            <pattern id="img12" patternUnits="userSpaceOnUse" width="100%" height="100%" x="0" y="368"
                preserveAspectRatio="xMidYMid slice">
                <image width="1200" height="1200" x="0" y="0" href="https://images3.alphacoders.com/621/621682.jpg">
                </image>
            </pattern>
            <pattern id="img13" patternUnits="userSpaceOnUse" width="100%" height="100%" x="736" y="368"
                preserveAspectRatio="xMidYMid slice">
                <image width="1200" height="1200" x="0" y="0"
                    href="https://wallpaper-gallery.net/images/butterfly/butterfly-15.jpg"></image>
            </pattern>
            <pattern id="img14" patternUnits="userSpaceOnUse" width="100%" height="100%" x="1288" y="736"
                preserveAspectRatio="xMidYMid slice">
                <image width="1200" height="1200" x="0" y="0"
                    href="https://wallpaper-gallery.net/images/dota-2-wallpapers/dota-2-wallpapers-2.jpg"></image>
            </pattern>
            <pattern id="img15" patternUnits="userSpaceOnUse" width="100%" height="100%" x="0" y="368"
                preserveAspectRatio="xMidYMid slice">
                <image width="1200" height="1200" x="0" y="0"
                    href="https://wallpaper-gallery.net/images/windows-8-wallpaper/windows-8-wallpaper-5.jpg">
                </image>
            </pattern>
            <pattern id="img16" patternUnits="userSpaceOnUse" width="100%" height="100%" x="368" y="0"
                preserveAspectRatio="xMidYMid slice">
                <image width="1230" height="819" x="0" y="0"
                    href="https://wallpaper-gallery.net/images/beach/beach-6.jpg"></image>
            </pattern>
            <pattern id="img17" patternUnits="userSpaceOnUse" width="100%" height="100%" x="552" y="184"
                preserveAspectRatio="xMidYMid slice">
                <image width="1920" height="1080" x="0" y="0"
                    href="https://wallpaper-gallery.net/images/1920x1080-minimalist-wallpaper/1920x1080-minimalist-wallpaper-5.png">
                </image>
            </pattern>
            <pattern id="img18" patternUnits="userSpaceOnUse" width="100%" height="100%" x="552" y="368"
                preserveAspectRatio="xMidYMid slice">
                <image width="1200" height="1200" x="0" y="0"
                    href="https://wallpaper-gallery.net/images/wallpaper-wide/wallpaper-wide-8.jpg"></image>
            </pattern>
            <pattern id="img19" patternUnits="userSpaceOnUse" width="100%" height="100%" x="1104" y="552"
                preserveAspectRatio="xMidYMid slice">
                <image width="1200" height="1200" x="0" y="0"
                    href="https://wallpaper-gallery.net/images/wallpaper-wide/wallpaper-wide-4.jpg"></image>
            </pattern>
            <pattern id="img20" patternUnits="userSpaceOnUse" width="100%" height="100%" x="1104" y="920"
                preserveAspectRatio="xMidYMid slice">
                <image width="1200" height="1200" x="0" y="0"
                    href="https://wallpaper-gallery.net/images/wallpaper-wide/wallpaper-wide-1.jpg"></image>
            </pattern>
            <pattern id="img21" patternUnits="userSpaceOnUse" width="100%" height="100%" x="1288" y="0"
                preserveAspectRatio="xMidYMid slice">
                <image width="1920" height="1080" x="0" y="0"
                    href="https://wallpaper-gallery.net/images/wallpaper-wide/wallpaper-wide-9.jpg"></image>
            </pattern>
            <pattern id="img22" patternUnits="userSpaceOnUse" width="100%" height="100%" x="552" y="0"
                preserveAspectRatio="xMidYMid slice">
                <image width="2560" height="1440" x="0" y="0"
                    href="https://wallpaper-gallery.net/images/wallpaper-wide/wallpaper-wide-13.jpg"></image>
            </pattern>
            <pattern id="img23" patternUnits="userSpaceOnUse" width="100%" height="100%" x="184" y="368"
                preserveAspectRatio="xMidYMid slice">
                <image width="1200" height="1200" x="0" y="0"
                    href="https://wallpaper-gallery.net/images/wallpaper-wide/wallpaper-wide-24.jpg"></image>
            </pattern>
            <pattern id="img24" patternUnits="userSpaceOnUse" width="100%" height="100%" x="0" y="552"
                preserveAspectRatio="xMidYMid slice">
                <image width="1200" height="1200" x="0" y="0"
                    href="https://wallpaper-gallery.net/images/wallpaper-wide/wallpaper-wide-16.jpg"></image>
            </pattern>
            <pattern id="img25" patternUnits="userSpaceOnUse" width="100%" height="100%" x="368" y="736"
                preserveAspectRatio="xMidYMid slice">
                <image width="1200" height="1200" x="0" y="0"
                    href="https://wallpaper-gallery.net/images/wallpaper-wide/wallpaper-wide-2.jpg"></image>
            </pattern>
            <pattern id="img26" patternUnits="userSpaceOnUse" width="100%" height="100%" x="552" y="920"
                preserveAspectRatio="xMidYMid slice">
                <image width="1200" height="1200" x="0" y="0"
                    href="https://wallpaper-gallery.net/images/wallpaper-wide/wallpaper-wide-7.jpg"></image>
            </pattern>
            <pattern id="img27" patternUnits="userSpaceOnUse" width="100%" height="100%" x="1104" y="184"
                preserveAspectRatio="xMidYMid slice">
                <image width="5456" height="3632" x="0" y="0"
                    href="https://wallpaper-gallery.net/images/fire/fire-3.jpg"></image>
            </pattern>
            <pattern id="img28" patternUnits="userSpaceOnUse" width="100%" height="100%" x="1288" y="184"
                preserveAspectRatio="xMidYMid slice">
                <image width="640" height="1136" x="0" y="0"
                    href="https://wallpaper-gallery.net/images/pooh-wallpaper/pooh-wallpaper-24.jpg"></image>
            </pattern>
            <pattern id="img29" patternUnits="userSpaceOnUse" width="100%" height="100%" x="0" y="0"
                preserveAspectRatio="xMidYMid slice">
                <image width="2560" height="1440" x="0" y="0"
                    href="https://wallpaper-gallery.net/images/wallpaper-wide/wallpaper-wide-13.jpg"></image>
            </pattern>
        </defs>
        <polygon class="glass" points="0 0 368 0 0 368 0 0" fill="url(#img01)"></polygon>
        <polygon class="glass no_mobile" points="1104 0 1472 0 1104 368 1104 0" fill="url(#img02)"></polygon>
        <polygon class="glass no_mobile" points="1104 736 1472 736 1104 1104 1104 736" fill="url(#img03)"></polygon>
        <polygon class="glass" points="368 736 0 736 368 1104 368 736" fill="url(#img04)"></polygon>
        <polygon class="glass" points="1104 736 736 736 1104 1104 1104 736" fill="url(#img05)"></polygon>
        <polygon class="glass" points="1104 736 736 736 1104 368 1104 736" fill="url(#img06)"></polygon>
        <polygon class="glass" points="736 736 368 736 736 368 736 736" fill="url(#img07)"></polygon>
        <polygon class="glass" points="368 368 368 0 736 368 368 368" fill="url(#img08)"></polygon>
        <polygon class="glass" points="0 1104 0 736 368 1104 0 1104" fill="url(#img09)"></polygon>
        <polygon class="glass" points="368 1104 368 736 736 1104 368 1104" fill="url(#img10)"></polygon>
        <polygon class="glass" points="1104 368 1104 0 736 368 1104 368" fill="url(#img11)"></polygon>
        <polygon class="glass" points="184 552 0 736 0 368 184 552" fill="url(#img12)"></polygon>
        <polygon class="glass" points="920 552 736 736 736 368 920 552" fill="url(#img13)"></polygon>
        <polygon class="glass no_mobile" points="1288 920 1472 1104 1472 736 1288 920" fill="url(#img14)"></polygon>
        <polygon class="glass" points="184 552 0 368 368 368 184 552" fill="url(#img15)"></polygon>
        <polygon class="glass" points="552 184 368 0 736 0 552 184" fill="url(#img16)"></polygon>
        <polygon class="glass" points="736 368 552 184 920 184 736 368" fill="url(#img17)"></polygon>
        <polygon class="glass" points="920 552 736 368 1104 368 920 552" fill="url(#img18)"></polygon>
        <polygon class="glass no_mobile" points="1288 552 1104 736 1472 736 1288 552" fill="url(#img19)"></polygon>
        <polygon class="glass no_mobile" points="1288 920 1104 1104 1472 1104 1288 920" fill="url(#img20)">
        </polygon>
        <polygon class="glass no_mobile" points="1288 184 1472 368 1472 0 1288 184" fill="url(#img21)"></polygon>
        <path class="glass" d="M552,184,736,0h368L920,184Z" transform="translate(0 0)" fill="url(#img22)"></path>
        <path class="glass" d="M184,552,368,368H736L552,552Z" transform="translate(0 0)" fill="url(#img23)"></path>
        <path class="glass" d="M1,736,184,552H552L368,736Z" transform="translate(0 0)" fill="url(#img24)"></path>
        <path class="glass" d="M368,736,552,920H920L736,736Z" transform="translate(0 0)" fill="url(#img25)"></path>
        <path class="glass" d="M552,920l184,184h368L920,920Z" transform="translate(0 0)" fill="url(#img26)"></path>
        <path class="glass no_mobile" d="M1288,184,1104,368V736l184-184Z" transform="translate(0 0)"
            fill="url(#img27)"></path>
        <path class="glass no_mobile" d="M1288,184l184,184V736L1288,552Z" transform="translate(0 0)"
            fill="url(#img28)"></path>
        <polygon class="glass" points="368 368 0 368 368 0 368 368" fill="url(#img29)"></polygon>
    </svg>
</div>