79 lines
2.9 KiB
XML
79 lines
2.9 KiB
XML
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
|
||
|
|
<!-- SYNTAXIS Icon - Hover Effects -->
|
||
|
|
<style>
|
||
|
|
.hoverable {
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.diamond {
|
||
|
|
transition: transform 0.3s ease, fill 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.square {
|
||
|
|
transition: transform 0.3s ease, fill 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.triangle {
|
||
|
|
transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55), filter 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Hover effects */
|
||
|
|
svg:hover .diamond {
|
||
|
|
transform: scale(1.1);
|
||
|
|
fill: #3B7CB8;
|
||
|
|
}
|
||
|
|
|
||
|
|
svg:hover .square {
|
||
|
|
transform: scale(1.05);
|
||
|
|
fill: #7C8591;
|
||
|
|
}
|
||
|
|
|
||
|
|
svg:hover .triangle {
|
||
|
|
transform: scale(1.2) translateY(-2px);
|
||
|
|
filter: drop-shadow(0 4px 12px rgba(217, 119, 6, 0.5));
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Individual hover for interactive version */
|
||
|
|
.diamond:hover {
|
||
|
|
fill: #3B7CB8 !important;
|
||
|
|
transform: scale(1.3) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.square:hover {
|
||
|
|
fill: #7C8591 !important;
|
||
|
|
transform: scale(1.2) rotate(5deg) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.triangle:hover {
|
||
|
|
fill: #F59E0B !important;
|
||
|
|
transform: scale(1.4) translateY(-4px) !important;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<!-- Top diamond -->
|
||
|
|
<path class="diamond hoverable" d="M 100 20 L 110 30 L 100 40 L 90 30 Z" fill="#2C5F8E" transform-origin="100 30"/>
|
||
|
|
|
||
|
|
<!-- Second row -->
|
||
|
|
<path class="diamond hoverable" d="M 70 50 L 80 60 L 70 70 L 60 60 Z" fill="#2C5F8E" transform-origin="70 60"/>
|
||
|
|
<rect class="square hoverable" x="90" y="50" width="20" height="20" fill="#6B7280" transform-origin="100 60"/>
|
||
|
|
<path class="diamond hoverable" d="M 130 50 L 140 60 L 130 70 L 120 60 Z" fill="#2C5F8E" transform-origin="130 60"/>
|
||
|
|
|
||
|
|
<!-- Third row (center) -->
|
||
|
|
<path class="diamond hoverable" d="M 40 80 L 50 90 L 40 100 L 30 90 Z" fill="#2C5F8E" transform-origin="40 90"/>
|
||
|
|
<rect class="square hoverable" x="60" y="80" width="20" height="20" fill="#6B7280" transform-origin="70 90"/>
|
||
|
|
|
||
|
|
<!-- Center triangle with special hover -->
|
||
|
|
<path class="triangle hoverable" d="M 100 80 L 115 105 L 85 105 Z" fill="#D97706" transform-origin="100 92"/>
|
||
|
|
|
||
|
|
<rect class="square hoverable" x="120" y="80" width="20" height="20" fill="#6B7280" transform-origin="130 90"/>
|
||
|
|
<path class="diamond hoverable" d="M 160 80 L 170 90 L 160 100 L 150 90 Z" fill="#2C5F8E" transform-origin="160 90"/>
|
||
|
|
|
||
|
|
<!-- Fourth row -->
|
||
|
|
<path class="diamond hoverable" d="M 70 110 L 80 120 L 70 130 L 60 120 Z" fill="#2C5F8E" transform-origin="70 120"/>
|
||
|
|
<rect class="square hoverable" x="90" y="110" width="20" height="20" fill="#6B7280" transform-origin="100 120"/>
|
||
|
|
<path class="diamond hoverable" d="M 130 110 L 140 120 L 130 130 L 120 120 Z" fill="#2C5F8E" transform-origin="130 120"/>
|
||
|
|
|
||
|
|
<!-- Bottom diamond -->
|
||
|
|
<path class="diamond hoverable" d="M 100 140 L 110 150 L 100 160 L 90 150 Z" fill="#2C5F8E" transform-origin="100 150"/>
|
||
|
|
</svg>
|