Geanimeerde lijn-iconen · 8 stuks New

<!-- Geanimeerde lijn-iconen · 8 stuks · NedDev · eigen werk. -->
<div class="jouw-container">
<ul class="ica">
<li><a class="ica__a ica--flame" href="#"><svg viewBox="0 0 24 24" aria-hidden="true"><path class="ica__fl" d="M12 3c.6 3 4.8 4.8 4.8 9.3A4.8 4.8 0 0 1 12 17.1a4.8 4.8 0 0 1-4.8-4.8c0-2 1-3.4 2.2-4.2.2 1.6 1 2.6 2.1 2.9C11 8.9 10.9 5.6 12 3z"/><path d="M6 20.5h12"/></svg><span>Verwarming</span></a></li>
<li><a class="ica__a ica--bolt" href="#"><svg viewBox="0 0 24 24" aria-hidden="true"><path class="ica__dr" pathLength="1" d="M13.5 2.5 5.5 13.5h6l-1 8 8-11h-6z"/></svg><span>Elektra</span></a></li>
<li><a class="ica__a ica--drop" href="#"><svg viewBox="0 0 24 24" aria-hidden="true"><g class="ica__dp"><path d="M12 3.5c3 3.8 5.5 6.8 5.5 10a5.5 5.5 0 0 1-11 0c0-3.2 2.5-6.2 5.5-10z"/><path d="M9.4 14.2a2.6 2.6 0 0 0 2.6 2.6"/></g></svg><span>Sanitair</span></a></li>
<li><a class="ica__a ica--sun" href="#"><svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path class="ica__rays" d="M12 2.5V5M12 19v2.5M2.5 12H5M19 12h2.5M5.3 5.3l1.8 1.8M16.9 16.9l1.8 1.8M5.3 18.7l1.8-1.8M16.9 7.1l1.8-1.8"/></svg><span>Zonne-energie</span></a></li>
<li><a class="ica__a ica--wrench" href="#"><svg viewBox="0 0 24 24" aria-hidden="true"><path class="ica__wr" d="M15.2 3.4a4.6 4.6 0 0 0-4.5 6L3.9 16.2a2 2 0 0 0 2.9 2.9l6.8-6.8a4.6 4.6 0 0 0 6-4.5l-2.7 2.7-2.8-.6-.6-2.8z"/></svg><span>Onderhoud</span></a></li>
<li><a class="ica__a ica--doc" href="#"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6.5 2.8h7.2l4 4v14.4H6.5z"/><path d="M13.5 2.8v4.2h4.2"/><path class="ica__dr" pathLength="1" d="M9 14.2l2.1 2.1 4-4.5"/></svg><span>Offerte</span></a></li>
<li><a class="ica__a ica--cal" href="#"><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3.5" y="5" width="17" height="15.5" rx="2"/><path d="M3.5 10h17M8 3v4M16 3v4"/><rect class="ica__day" x="13.5" y="13.5" width="3.5" height="3.5" rx=".6"/></svg><span>Planning</span></a></li>
<li><a class="ica__a ica--phone" href="#"><svg viewBox="0 0 24 24" aria-hidden="true"><path class="ica__ph" d="M5.2 4h3.4l1.5 4-2 1.4a10.5 10.5 0 0 0 6.5 6.5l1.4-2 4 1.5v3.4a1.5 1.5 0 0 1-1.5 1.5A15.6 15.6 0 0 1 3.7 5.5 1.5 1.5 0 0 1 5.2 4z"/><path class="ica__wv" d="M14.6 3.6a6 6 0 0 1 5.8 5.8M14.6 7.1a2.6 2.6 0 0 1 2.3 2.3"/></svg><span>Contact</span></a></li></ul>
</div>

/* Geanimeerde lijn-iconen · 8 stuks · NedDev · eigen werk. */
.ica{position:absolute;inset:0;margin:0;box-sizing:border-box;list-style:none;padding:16px;background:#fff;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:1fr 1fr;gap:8px;font-family:'Switzer',system-ui,sans-serif}
.ica li{display:flex}
.ica__a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;border-radius:6px;background:#f4f3f1;color:#0a0a0a;text-decoration:none;font-size:11.5px;font-weight:600;border:1px solid transparent;transition:color .18s,background .18s,border-color .18s}
.ica__a svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.ica__a:hover,.ica__a:focus-visible{background:#fff;border-color:rgba(10,10,10,.16)}
.ica__a:hover svg,.ica__a:focus-visible svg{color:#F5480F}
.ica__a:focus-visible{outline:2px solid #0a0a0a;outline-offset:2px}
.ica__a span{transition:color .18s}
.ica__fl,.ica__dp,.ica__rays,.ica__wr,.ica__ph,.ica__day{transform-box:fill-box;transform-origin:center}
.ica__fl{transform-origin:50% 100%}
.ica__dp{transform-origin:50% 100%}
.ica__wr{transform-origin:20% 80%}
.ica__wv{opacity:1}
@media(prefers-reduced-motion:no-preference){
.ica--flame:is(:hover,:focus-visible) .ica__fl{animation:ica-fl .7s ease-in-out}
.ica--bolt:is(:hover,:focus-visible) .ica__dr{stroke-dasharray:1;animation:ica-dr .55s ease-out}
.ica--drop:is(:hover,:focus-visible) .ica__dp{animation:ica-dp .6s cubic-bezier(.3,.7,.4,1)}
.ica--sun:is(:hover,:focus-visible) .ica__rays{animation:ica-rot .7s cubic-bezier(.4,0,.2,1)}
.ica--wrench:is(:hover,:focus-visible) .ica__wr{animation:ica-wr .6s ease-in-out}
.ica--doc:is(:hover,:focus-visible) .ica__dr{stroke-dasharray:1;animation:ica-dr .45s ease-out .1s backwards}
.ica--cal:is(:hover,:focus-visible) .ica__day{animation:ica-day .5s cubic-bezier(.3,.7,.4,1)}
.ica--phone:is(:hover,:focus-visible) .ica__ph{animation:ica-ph .5s ease-in-out}
.ica--phone:is(:hover,:focus-visible) .ica__wv{animation:ica-wv .6s ease-out}}
@keyframes ica-fl{0%,100%{transform:none}30%{transform:scale(.94,1.08)}60%{transform:scale(1.04,.95) skewX(-3deg)}}
@keyframes ica-dr{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes ica-dp{0%{transform:translateY(-4px)}45%{transform:translateY(0) scale(1.08,.9)}70%{transform:scale(.97,1.03)}100%{transform:none}}
@keyframes ica-rot{from{transform:rotate(-45deg)}to{transform:rotate(0)}}
@keyframes ica-wr{0%,100%{transform:none}35%{transform:rotate(-18deg)}70%{transform:rotate(8deg)}}
@keyframes ica-day{from{transform:translateX(-5.5px);opacity:.3}to{transform:none;opacity:1}}
@keyframes ica-ph{0%,100%{transform:none}20%,60%{transform:rotate(-9deg)}40%,80%{transform:rotate(9deg)}}
@keyframes ica-wv{from{opacity:0}to{opacity:1}}
@media(max-width:420px){.ica{padding:10px;gap:6px}.ica__a{font-size:10px;gap:6px}.ica__a svg{width:26px;height:26px}}

// Geanimeerde lijn-iconen · 8 stuks · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.ica');if(w)w.querySelectorAll('.ica__a').forEach(function(a){a.addEventListener('click',function(e){e.preventDefault();});});
}
init(document.querySelector('.jouw-container'));