svg {
	width: 80%;
}

circle {
	fill: #fff;
}

/* circle, */

.banaan {
	fill: #fff;
	transition: all 2s ease;
	box-shadow: 0 0 0 0 rgba(232, 76, 61, 0.7);
	animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
}

@keyframes pulse {
	to {
		r: 5;
	}
}
svg {
	width: 100%;
	height: 100%;
	/* ensure the SVG fills its container */
	display: block;
}

/* Base style for all dots */
.st0,
.st1 {
	fill: #222; /* starting/dark state */
	transform-origin: center;
}

/* Animate most dots (st0) using one keyframe set */
.st0 {
	/* Adjust duration as desired – here using 4s */
	animation: dotPulse 4s linear infinite;
	/* Optionally add inline animation-delay on some elements for randomness */
}

/* Animate the alternate dots (st1) with a different duration and color */
.st1 {
	animation: dotPulseAlt 3s linear infinite;
}

/* Keyframe for st0: animate from a bright green to dark */
@keyframes dotPulse {
	0% {
		fill: #b4d1f9;
	}
	100% {
		fill: #5e92da;
	}
}

/* Keyframe for st1: animate from a bright cyan to dark */
@keyframes dotPulseAlt {
	0% {
		fill: #85aae0;
	}
	100% {
		fill: #5e92da;
	}
}