Boom door de seizoenen New

A drawn tree that changes with the seasons: blossom in spring, a full crown with sun in summer, falling leaves in autumn and snow on bare branches in winter, with the gardener's work for each season. Opens on today's season. Tabs with arrow keys; with reduced motion everything stays still. For the services or maintenance page of a gardener, nursery or garden centre.

Wat we in uw tuin doen, per seizoen

September tot november: blad ruimen, bollen planten voor het voorjaar en de vijver afdekken.

How to use it

Paste the HTML where the components should appear.
Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
Add the JavaScript and call init() with the element that contains the HTML.

<!-- Boom door de seizoenen · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie -->
<div class="jouw-container">
<div class="r7sb" data-s="herfst">
<div class="r7sb__beeld">
<svg class="r7sb__svg" viewBox="0 0 160 150" aria-hidden="true" focusable="false">
<rect class="r7sb__lucht" x="0" y="0" width="160" height="150" rx="6"/>
<g class="r7sb__zon"><circle cx="128" cy="30" r="11"/><path d="M128 10v-5M128 55v-5M108 30h-5M153 30h-5M114 16l-3-3M145 47l-3-3M142 16l3-3M111 47l3-3"/></g>
<g class="r7sb__kruin"><circle cx="80" cy="62" r="34"/><circle cx="56" cy="74" r="22"/><circle cx="104" cy="74" r="22"/><circle cx="80" cy="44" r="22"/></g>
<path class="r7sb__stam" d="M80 134V92M80 104L60 80M80 98L101 76M80 92V60M66 88L52 76M94 84L108 68M80 72L70 56M80 70L92 54"/>
<g class="r7sb__bloesem"><circle cx="62" cy="58" r="3.2"/><circle cx="92" cy="48" r="3.2"/><circle cx="104" cy="70" r="3.2"/><circle cx="72" cy="80" r="3.2"/><circle cx="50" cy="78" r="3.2"/><circle cx="84" cy="34" r="3.2"/><circle cx="96" cy="86" r="3.2"/></g>
<g class="r7sb__blad"><path style="--x:-8px;--d:0s" d="M60 70c3-3 7-1 6 3c-3 2-6 1-6-3z"/><path style="--x:10px;--d:1.1s" d="M96 64c3-3 7-1 6 3c-3 2-6 1-6-3z"/><path style="--x:-14px;--d:2.2s" d="M80 50c3-3 7-1 6 3c-3 2-6 1-6-3z"/><path style="--x:6px;--d:.6s" d="M106 80c3-3 7-1 6 3c-3 2-6 1-6-3z"/></g>
<g class="r7sb__sneeuw"><circle style="--d:0s" cx="22" cy="0" r="1.8"/><circle style="--d:.9s" cx="44" cy="0" r="1.5"/><circle style="--d:1.7s" cx="66" cy="0" r="1.8"/><circle style="--d:.4s" cx="98" cy="0" r="1.5"/><circle style="--d:1.3s" cx="120" cy="0" r="1.8"/><circle style="--d:2.1s" cx="142" cy="0" r="1.5"/></g>
<path class="r7sb__grond" d="M0 134H160"/>
<path class="r7sb__dek" d="M8 134C30 128 50 131 80 129C110 127 132 131 152 134Z"/>
</svg>
</div>
<div class="r7sb__info">
<p class="r7sb__h">Wat we in uw tuin doen, per seizoen</p>
<div class="r7sb__tabs" role="tablist" aria-label="Seizoen">
<button class="r7sb__tab" role="tab" type="button" id="r7sb-t-lente" aria-controls="r7sb-p" aria-selected="false" tabindex="-1" data-s="lente">Lente</button>
<button class="r7sb__tab" role="tab" type="button" id="r7sb-t-zomer" aria-controls="r7sb-p" aria-selected="false" tabindex="-1" data-s="zomer">Zomer</button>
<button class="r7sb__tab" role="tab" type="button" id="r7sb-t-herfst" aria-controls="r7sb-p" aria-selected="true" tabindex="0" data-s="herfst">Herfst</button>
<button class="r7sb__tab" role="tab" type="button" id="r7sb-t-winter" aria-controls="r7sb-p" aria-selected="false" tabindex="-1" data-s="winter">Winter</button>
</div>
<p class="r7sb__p" id="r7sb-p" role="tabpanel" aria-labelledby="r7sb-t-herfst">September tot november: blad ruimen, bollen planten voor het voorjaar en de vijver afdekken.</p>
</div>
</div>
</div>

/* Boom door de seizoenen · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie */
.r7sb{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:16px;padding:14px 18px;background:#fff;color:#0a0a0a;font-family:'Switzer',sans-serif;container-type:size;text-align:left}
.r7sb *,.r7sb *::before,.r7sb *::after{box-sizing:border-box}
.r7sb__beeld{min-width:0}
.r7sb__svg{display:block;width:100%;height:auto;max-height:86cqh}
.r7sb__lucht{fill:#f4f3f1;transition:fill .6s}
.r7sb__stam{fill:none;stroke:#0a0a0a;stroke-width:3;stroke-linecap:round;transition:stroke .6s}
.r7sb__grond{fill:none;stroke:#0a0a0a;stroke-width:1.5;transition:stroke .6s}
.r7sb__kruin{transform-origin:80px 90px;transition:transform .6s cubic-bezier(.3,1.3,.5,1),fill .6s,opacity .4s}
.r7sb__kruin circle{fill:inherit}
.r7sb__zon{fill:#F5480F;stroke:#F5480F;stroke-width:2;stroke-linecap:round;transform-origin:128px 30px;transform:scale(0);transition:transform .5s}
.r7sb__bloesem circle{fill:#fff;stroke:#F5480F;stroke-width:1.6;transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform .35s}
.r7sb__blad path{fill:#F5480F;opacity:0}
.r7sb__sneeuw circle{fill:#fff;opacity:0}
.r7sb__dek{fill:#fff;opacity:0;transition:opacity .6s}
.r7sb[data-s="lente"] .r7sb__kruin{fill:#7f9f6a;transform:scale(.8)}
.r7sb[data-s="lente"] .r7sb__bloesem circle{transform:scale(1)}
.r7sb[data-s="lente"] .r7sb__bloesem circle:nth-child(2n){transition-delay:.1s}
.r7sb[data-s="lente"] .r7sb__bloesem circle:nth-child(3n){transition-delay:.2s}
.r7sb[data-s="zomer"] .r7sb__kruin{fill:#3f6b45;transform:scale(1)}
.r7sb[data-s="zomer"] .r7sb__zon{transform:scale(1)}
.r7sb[data-s="zomer"] .r7sb__lucht{fill:#fbe7dc}
.r7sb[data-s="herfst"] .r7sb__kruin{fill:#e0743f;transform:scale(.88)}
.r7sb[data-s="herfst"] .r7sb__blad path{animation:r7sb-val 3.3s ease-in var(--d) infinite}
.r7sb[data-s="winter"] .r7sb__kruin{transform:scale(0);opacity:0}
.r7sb[data-s="winter"] .r7sb__lucht{fill:#0a0a0a}
.r7sb[data-s="winter"] .r7sb__stam,.r7sb[data-s="winter"] .r7sb__grond{stroke:#f4f3f1}
.r7sb[data-s="winter"] .r7sb__dek{opacity:1}
.r7sb[data-s="winter"] .r7sb__sneeuw circle{animation:r7sb-sneeuw 4s linear var(--d) infinite}
@keyframes r7sb-val{0%{opacity:0;transform:translate(0,0) rotate(0)}10%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translate(var(--x),62px) rotate(200deg)}}
@keyframes r7sb-sneeuw{0%{opacity:0;transform:translate(0,0)}10%{opacity:1}90%{opacity:1}100%{opacity:0;transform:translate(6px,132px)}}
.r7sb__info{display:flex;flex-direction:column;gap:10px;min-width:0}
.r7sb__h{margin:0;font:600 clamp(15px,4.6cqi,19px)/1.2 'Switzer',sans-serif;letter-spacing:-.01em;text-wrap:balance}
.r7sb__tabs{display:flex;flex-wrap:wrap;gap:4px}
.r7sb__tab{min-height:30px;padding:5px 9px;border:1px solid rgba(10,10,10,.2);border-radius:4px;background:#fff;color:#0a0a0a;font:500 13px/1 'Switzer',sans-serif;cursor:pointer;transition:background-color .16s,border-color .16s}
.r7sb__tab:hover{border-color:#0a0a0a}
.r7sb__tab[aria-selected="true"]{background:#0a0a0a;color:#fff;border-color:#0a0a0a}
.r7sb__tab:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
.r7sb__p{margin:0;font:400 13px/1.45 'Switzer',sans-serif;color:#3a3835;min-height:5.8em}
@container (max-width:360px){.r7sb__tab{padding:5px 7px}.r7sb__p{font-size:12px}}
@media (prefers-reduced-motion:reduce){.r7sb *{transition:none!important}.r7sb[data-s="herfst"] .r7sb__blad path{animation:none;opacity:1;transform:translate(var(--x),60px)}.r7sb[data-s="winter"] .r7sb__sneeuw circle{animation:none;opacity:1;transform:translateY(40px)}}

// Boom door de seizoenen · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.r7sb');if(!w)return;
var tabs=[].slice.call(w.querySelectorAll('.r7sb__tab')),p=w.querySelector('.r7sb__p');
var tekst={lente:'Maart tot mei: hagen snoeien, het gazon verticuteren en nieuwe borders planten.',zomer:'Juni tot augustus: maaien, water geven bij droogte en de buxus in vorm knippen.',herfst:'September tot november: blad ruimen, bollen planten voor het voorjaar en de vijver afdekken.',winter:'December tot februari: bomen snoeien in hun rust en de tuin winterklaar maken.'};
function kies(s,focus){
  w.setAttribute('data-s',s);
  tabs.forEach(function(t){var on=t.getAttribute('data-s')===s;t.setAttribute('aria-selected',on?'true':'false');t.tabIndex=on?0:-1;if(on){p.setAttribute('aria-labelledby',t.id);if(focus)t.focus();}});
  p.textContent=tekst[s];
}
tabs.forEach(function(t,i){
  t.addEventListener('click',function(){kies(t.getAttribute('data-s'));});
  t.addEventListener('keydown',function(e){var n=null;if(e.key==='ArrowRight')n=(i+1)%4;else if(e.key==='ArrowLeft')n=(i+3)%4;else if(e.key==='Home')n=0;else if(e.key==='End')n=3;if(n!==null){e.preventDefault();kies(tabs[n].getAttribute('data-s'),true);}});
});
var m=new Date().getMonth();kies(m<2||m===11?'winter':m<5?'lente':m<8?'zomer':'herfst');
}
init(document.querySelector('.jouw-container'));

More components

Seen something you like?

Add it to your selection and send it over. We build your site around it, in your brand.

Get in touch →