(landing) svg icons animations

This commit is contained in:
Dominique Deschatre
2026-04-17 19:37:30 -03:00
parent e5f5009f80
commit 9e8281aab5
3 changed files with 183 additions and 24 deletions
@@ -15,8 +15,12 @@
<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.3">
<rect x="8" y="10" width="32" height="22" rx="1"/>
<path d="M8 16h32"/>
<path d="M14 24h20M14 28h12"/>
<g class="mech-bars">
<path d="M14 24h20"/>
<path d="M14 28h12"/>
</g>
<path d="M16 38h16M20 32v6M28 32v6"/>
<circle class="mech-led" cx="36" cy="13.5" r="1.1" fill="currentColor"/>
</svg>
</div>
<span class="eyebrow no-rule"><span class="n"> 01</span></span>
@@ -28,9 +32,9 @@
<article class="mech">
<div class="icon" aria-hidden="true">
<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.3">
<circle cx="24" cy="24" r="14"/>
<path d="M16 24h16M24 16v16"/>
<path d="M10 10l28 28" stroke-width="1.5"/>
<circle class="mech-ring" cx="24" cy="24" r="14"/>
<path class="mech-plus" d="M16 24h16M24 16v16"/>
<path class="mech-slash" d="M10 10l28 28" stroke-width="1.5"/>
</svg>
</div>
<span class="eyebrow no-rule"><span class="n"> 02</span></span>
@@ -44,8 +48,10 @@
<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.3">
<path d="M8 36V18l8-8h16l8 8v18"/>
<path d="M8 36h32"/>
<circle cx="24" cy="26" r="4"/>
<path d="M24 22v-4M24 30v4M20 26h-4M28 26h4"/>
<g class="mech-gear">
<circle cx="24" cy="26" r="4"/>
<path d="M24 22v-4M24 30v4M20 26h-4M28 26h4"/>
</g>
</svg>
</div>
<span class="eyebrow no-rule"><span class="n"> 03</span></span>
@@ -57,12 +63,14 @@
<article class="mech">
<div class="icon" aria-hidden="true">
<svg viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.3">
<circle cx="10" cy="12" r="3"/>
<circle cx="38" cy="10" r="3"/>
<circle cx="24" cy="26" r="3"/>
<circle cx="12" cy="38" r="3"/>
<circle cx="38" cy="36" r="3"/>
<path d="M12 14l10 10M36 12L26 24M14 36l8-8M36 34l-10-6" opacity="0.6"/>
<path class="mech-edges" d="M12 14l10 10M36 12L26 24M14 36l8-8M36 34l-10-6" opacity="0.6"/>
<g class="mech-nodes">
<circle cx="10" cy="12" r="3"/>
<circle cx="38" cy="10" r="3"/>
<circle cx="24" cy="26" r="3"/>
<circle cx="12" cy="38" r="3"/>
<circle cx="38" cy="36" r="3"/>
</g>
</svg>
</div>
<span class="eyebrow no-rule"><span class="n"> 04</span></span>