<script>
import { inner } from './shape.js';
import { fade } from 'svelte/transition';
const innerArr = inner.split(',');
let scrollY;
let svgString = '';
$: {
svgString = '';
for (let i = 0; i < scrollY; i++) {
if(i < innerArr.length) svgString = svgString + innerArr[i] + ',';
}
}
</script>
<svelte:window bind:scrollY/>
<div class="container">
<svg width="300" height="300" viewbox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<path transition:fade
stroke="green" fill="black"
d={svgString}
/>
</svg>
</div>
<style>
:global(body){
height: calc(5*100vh);
overflow-x: hidden;
}
.container {
position: fixed;
top: 10%;
left: 50%;