.test div {
	--thickness: 10%;
	padding: 40vmin;
	box-sizing: content-box;
	-webkit-clip-path: polygon(
		93.3012701892% 25%,
		93.3012701892% 75%,
		50% 100%,
		6.6987298108% 75%,
		6.6987298108% 25%,
		50% 0%,
		calc(50% + ((50% - var(--thickness)) * 0)) calc(50% + ((50% - var(--thickness)) * -1)),
		calc(50% + ((50% - var(--thickness)) * -0.8660254038)) calc(50% + ((50% - var(--thickness)) * -0.5)),
		calc(50% + ((50% - var(--thickness)) * -0.8660254038)) calc(50% + ((50% - var(--thickness)) * 0.5)),
		calc(50% + ((50% - var(--thickness)) * 0)) calc(50% + ((50% - var(--thickness)) * 1)),
		calc(50% + ((50% - var(--thickness)) * 0.8660254038)) calc(50% + ((50% - var(--thickness)) * 0.5)),
		calc(50% + ((50% - var(--thickness)) * 0.8660254038)) calc(50% + ((50% - var(--thickness)) * -0.5)),
		calc(50% + ((50% - var(--thickness)) * 0)) calc(50% + ((50% - var(--thickness)) * -1)),
		50% 0%
	);
	clip-path: polygon(
		93.3012701892% 25%,
		93.3012701892% 75%,
		50% 100%,
		6.6987298108% 75%,
		6.6987298108% 25%,
		50% 0%,
		calc(50% + ((50% - var(--thickness)) * 0)) calc(50% + ((50% - var(--thickness)) * -1)),
		calc(50% + ((50% - var(--thickness)) * -0.8660254038)) calc(50% + ((50% - var(--thickness)) * -0.5)),
		calc(50% + ((50% - var(--thickness)) * -0.8660254038)) calc(50% + ((50% - var(--thickness)) * 0.5)),
		calc(50% + ((50% - var(--thickness)) * 0)) calc(50% + ((50% - var(--thickness)) * 1)),
		calc(50% + ((50% - var(--thickness)) * 0.8660254038)) calc(50% + ((50% - var(--thickness)) * 0.5)),
		calc(50% + ((50% - var(--thickness)) * 0.8660254038)) calc(50% + ((50% - var(--thickness)) * -0.5)),
		calc(50% + ((50% - var(--thickness)) * 0)) calc(50% + ((50% - var(--thickness)) * -1)),
		50% 0%
	);
	background-color: #0e87b9;
	background-image: conic-gradient(#488cfb, #29dbbc, #ddf505, #ff9f0e, #e440bb, #655adc, #488cfb);
	transition: -webkit-clip-path ease-out 100ms;
	transition: clip-path ease-out 100ms;
	transition:
		clip-path ease-out 100ms,
		-webkit-clip-path ease-out 100ms;
	filter: hue-rotate(0);
	-webkit-animation: hue linear 300ms infinite;
	animation: hue linear 300ms infinite;
}

.test,
.test body {
	padding: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	display: block;
}

.test body {
	display: grid;
	place-items: center;
	background-color: #121214;
}

@-webkit-keyframes hue {
	to {
		filter: hue-rotate(1turn);
	}
}

@keyframes hue {
	to {
		filter: hue-rotate(1turn);
	}
}