SVG beim Scrollen um 50 Pixel nach oben verschieben und dynamisch verkleinern.

Um ein SVG beim Scrollen um 50 Pixel nach oben zu verschieben und es dynamisch zu verkleinern, kannst du JavaScript in Kombination mit CSS verwenden. Hier ist ein einfaches Beispiel, wie du das umsetzen kannst:

1. **HTML**: Füge dein SVG in das HTML-Dokument ein.

```html
<svg id="mySVG" width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="40" fill="blue" />
</svg>
```

2. **CSS**: Setze grundlegende Stile für das SVG.

```css
#mySVG {
position: relative;
transition: transform 0.2s ease, width 0.2s ease, height 0.2s ease;
}
```

3. **JavaScript**: Füge einen Scroll-Event-Listener hinzu, um das SVG zu verschieben und zu verkleinern.

```javascript
window.addEventListener('scroll', function() {
const svg = document.getElementById('mySVG');
const scrollY = window.scrollY;

// Verschiebe das SVG um 50 Pixel nach oben
const translateY = Math.max(0, 50 - scrollY);

// Berechne die neue Größe (z.B. 100% - scrollY/10%)
const newSize = Math.max(10, 100 - scrollY / 10); // Mindestgröße von 10%

svg.style.transform = `translateY(${translateY}px)`;
svg.style.width = `${newSize}px`;
svg.style.height = `${newSize}px`;
});
```

In diesem Beispiel wird das SVG beim Scrollen um bis zu 50 Pixel nach oben verschoben und gleichzeitig verkleinert, je nachdem, wie weit nach unten gescrollt wird. Achte darauf, dass du die Werte nach deinen Bedürfnissen anpassen kannst.