<html>
<head>
<title>Color Changing Triangle</title>
<style>
body {
max-width: 500px;
margin: 0 auto;
background-color: #000;
}
svg {
width: 100%;
height: 100%;
overflow: hidden;
}
polygon {
fill: url(#color-changing-gradient);
animation: color-change 3s ease infinite;
}
#color-changing-gradient stop:nth-child(1) {
animation: color-change-stop 3s ease .5s infinite;
}
#color-changing-gradient stop:nth-child(2) {
animation: color-change-stop 3s ease 1s infinite;
}
#color-changing-gradient stop:nth-child(3) {
animation: color-change-stop 3s ease 1.5s infinite;
}
#color-changing-gradient stop:nth-child(4) {
animation: color-change-stop 3s ease 2s infinite;
}
#color-changing-gradient stop:nth-child(5) {
animation: color-change-stop 3s ease 2.5s infinite;
}
@keyframes color-change-stop {
0% {
stop-color: #FF00FF;
}
20% {
stop-color: #7c47b9;
}
40% {
stop-color: #00FFFF;
}
60% {
stop-color: #00FF7F;
}
80% {
stop-color: #fff12d;
}
100% {
stop-color: #ff8800;
}
}
</style>
</head>
<body>
<svg viewBox="0 0 200 200">
<defs>
<linearGradient id="color-changing-gradient" gradientTransform="rotate(90)">
<stop offset="0%" stop-color="#FF00FF" />
<stop offset="20%" stop-color="#7c47b9" />
<stop offset="40%" stop-color="#00FFFF" />
<stop offset="60%" stop-color="#00FF7F" />
<stop offset="80%" stop-color="#fff12d" />
<stop offset="100%" stop-color="#ff8800" />
</linearGradient>
</defs>
<polygon points="100,50 50,150 150,150" />
</svg>
</body>
</html>