Why there is a box on blurred SVG?

:root {
    --color1: #ff9d9d;
    --color2: #f876ed;
}
.blob {
    filter: blur(100px);
    -webkit-filter: blur(100px);
}

.blob-path {
    animation: animation 3s linear infinite;
}

@keyframes animation {
    0%,
    100% {
        fill: var(--color1);
    }
    50% {
        fill: var(--color2);
    }
}

@-webkit-keyframes animation {
    0%,
    100% {
        fill: var(--color1);
    }
    50% {
        fill: var(--color2);
    }
}

:root {
    --color1: #ff9d9d;
    --color2: #f876ed;
}
.blob {
    filter: blur(100px);
    -webkit-filter: blur(100px);
}

.blob-path {
    animation: animation 3s linear infinite;
}

@keyframes animation {
    0%,
    100% {
        fill: var(--color1);
    }
    50% {
        fill: var(--color2);
    }
}

@-webkit-keyframes animation {
    0%,
    100% {
        fill: var(--color1);
    }
    50% {
        fill: var(--color2);
    }
}