.squiggle {
	stroke-dasharray: 450;
	stroke-dashoffset: 450;
	/* animation: draw 1s linear infinite alternate; */
	animation: draw linear forwards;
}

@keyframes draw {
	to {
		stroke-dashoffset: 0;
	}
}

svg.colors-svg {
	transform-origin: top right;
	transform: translateX(0.2em) scaleY(1.61) scaleX(1.1);
}

svg.colors-svg > path {
	--initial-delay: 2.25s;
	--length: 1.5s;
	--time-gap: calc(0.5s + var(--length));

	fill: none;
	stroke: black;
	stroke-linecap: round;
	stroke-width: 5pt;
	animation-duration: var(--length);
}

#color1 {
	stroke: #ecea65;
	animation-delay: var(--initial-delay);
}

#color2 {
	stroke: #00ff62;
	animation-delay: calc(var(--initial-delay) + (var(--time-gap) * 1));
}

#color3 {
	stroke: #0062ff;
	animation-delay: calc(var(--initial-delay) + (var(--time-gap) * 2));
}

#color4 {
	stroke: #000000;
	animation-delay: calc(var(--initial-delay) + (var(--time-gap) * 3));
}