0

Tenho um projeto no qual gostaria de incluir uma galeria em forma de mosaico, esta seria responsiva e interativa.

De inicio, pensei em SVG pela forma livre e sem perca de qualidade/renderização. Mas quando botei em prática, não me funcionou tão bem.

Gostaria de uma ajuda sobre meu código ou talvez uma ideia de como fazer de outra maneira.

Segue o código

#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>

:

2
  • 1
    Não ficou claro, seu título parece não tem a ver com o texto da pergunta... Vc fala de cross-browser depois fala que "não me funcionou tão bem"... O que não fncionou tão bem? E o que tem a ver cross-browser na história?
    – hugocsl
    Commented 17/06/2019 às 14:43
  • Só funcionou no Chrome, em outros navegadores não apareceu o Mosaico, ficou vazio. Então, minha principal dúvida é se há algum erro no meu código que quebra nos navegadores. Commented 17/06/2019 às 14:47

1 Resposta 1

1

SVG é sim uma boa opção para esse tipo de coisa, e basicamente não funcionou no Edge e no FireFox pq vc não declarou o tamanho da imagem, não adiante declarar apenas o tamanho do pattern, vc tem que declarar o width e height da image que está dentro!

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

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

</pattern>

Como são muitas imagens eu não fiz para todas, só fiz da primeira linha para vc ver que agora renderiza corretamente!

No FireFox
inserir a descrição da imagem aqui

No Edge
inserir a descrição da imagem aqui

Código

#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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .