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