Cool Symbol

cool-symbol.markdown

Cool Symbol

Tweaking clip-path to create a hollow triangle shape and adding to it a pseudo element with an animated conic-gradient to create a rotating "shine" effect.

A Pen by Paulo Nunes on CodePen.

License.

index.pug

.symbol-shadow
	.symbol

style.css

:root {
	
	--bg: #181818;
	--shadow: hsl(330 100% 70.6% / 40%);
	--gradient: conic-gradient(at 50% 50%, rebeccapurple, rebeccapurple, hotpink, rebeccapurple);

  --size: 8rem;

}

/* 
optional shadow effect
You can use just the .symbol element if you dont want a drop-shadow 
*/
.symbol-shadow {
	filter: drop-shadow(0 0 14px var(--shadow));
}

.symbol {
	position:relative;
	overflow: hidden;
	width: var(--size);
	height: calc(var(--size) - calc(var(--size) / 4));
	clip-path: polygon(
		50% 0%,
		50% 25%,
		19% 88%,
		81% 88%,
		50% 25%,
		50% 0,
		100% 100%,
		0% 100%
	);
}

.symbol::before {
	content: "";
	position: absolute;
	width: 200%;
	height: 200%;
	inset: -35% -50%;
	background-image: var(--gradient);
	will-change: transform;
	animation: rot 8s linear infinite;
	z-index: -1;
}

@keyframes rot {
	0% {
		transform: rotate(0)
	}
	100% {
		transform: rotate(360deg);
	}
}


/*------------
Global Setup 
------------*/

*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	height: 100%;
}
body {
	min-height: 100%;
	display: grid;
	place-content: center;
	padding-block: 5vmin;
	background: var(--bg);
}