Iris Door (hexagonal) - Pure CSS

index.html

<div class="content">

	<div class="door">
		
		<div class="panel"></div>
		<div class="panel"></div>
		<div class="panel"></div>
		<div class="panel"></div>
		<div class="panel"></div>
		<div class="panel"></div>
		
	</div>

</div>

iris-door-hexagonal-pure-css.markdown

Iris Door (hexagonal) - Pure CSS

A first approximation of an iris door created with six triangular panels that slide to open and close the door.

A Pen by substance on CodePen.

License.

style.css

body {
	margin: 0;
	padding: 0;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	--spd: 2s; /* change speed */
	--u: 0.55vmin; /* change bg size */
	--c1: #484848;
	--c2: #444444;
	--s1: #0002;
	--gp: 50%/calc(var(--u) * 10) calc(var(--u) * 10);
	background: 
		repeating-conic-gradient(from 0deg at 50% 13.75%, var(--s1) 0 20.55%, #fff0 21.05% 79.13%, var(--s1) 79.63% 100% ) var(--gp),
		repeating-conic-gradient(from 0deg at 50% 50%, #fff0 0 25%, var(--s1) 25% 29%, #fff0 30% 70%, var(--s1) 71% 75%, #fff0 75% 100%) var(--gp), 
		repeating-conic-gradient(from 0deg at 50% 50%, var(--c1) 0 25%, var(--c2) 0% 50%, var(--c1) 0 75%, var(--c2) 0% 100% ) var(--gp);

}

.content {
	width: 100vmin;
	height: 100vmin;
}

.content:before {
	content: "";
	width: 70vmin;
	height: 70vmin;
	position: absolute;
	left: calc(50% - 35vmin);
	border-radius: 100%;
	top: calc(50% - 35vmin);
	box-shadow: 0.5vmin 0.5vmin 1vmin #0a0a0a, -0.5vmin -0.5vmin 1vmin #222;
}

.door {
	width: 100%;
	height: 100%;
	background: linear-gradient(0deg, #000, #0b102e);
	border-radius: 100%;
	position: relative;
	overflow: hidden;
	clip-path: circle(35.4% at 50% 50%);
}

.door:before {
	content: "";
	width: 200%;
	height: 200%;
	position: absolute;
	left: -50%;
	background-image: 
		repeating-conic-gradient(#FFF9 0%, transparent .0004%, transparent .001%, transparent .09%), 
		radial-gradient(ellipse at 20% 30%, #80008030, #80008030, #ffa50030, #fff0, #fff0);
	animation: spin 500s linear 0s infinite;
	border-radius: 100%;
}

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

.door:after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 222;
	box-sizing: border-box;
	border-radius: 100%;
	background: radial-gradient(#fff0 0 40%, #858585 calc(40% + 1px), #686868 43% 46% , #484848 50%, #3330 calc(50% + 1px) 100%);
	filter: drop-shadow(-2px -2px 5px #0009);
	box-shadow: -5vmin -5vmin 5vmin 10vmin #222 inset, 5vmin 5vmin 5vmin 10vmin #cdcdcd inset;
}

body:hover .panel {
	animation-duration: 1s;
}

.panel {
	--p1: #787878;
	--p2: #323232;
	--tri: var(--p2) 0deg, var(--p1) 1deg 10deg, var(--p2) 11deg 49deg, var(--p1) 50deg 59deg, var(--p2) 60deg, #fff0 0 100%;
	--rad: var(--p2) 0.25vmin, var(--p1) calc(0.25vmin + 1px) 0.5vmin, #fff0 calc(0.5vmin + 1px) 100%;
	--rin: var(--p2) 0 0.5vmin, var(--p1) calc(0.5vmin + 1px) 0.75vmin, var(--p2) calc(0.75vmin + 1px) 1.25vmin, #f000 calc(1.25vmin + 1px) 100%;
	--con: var(--p2) 0 60deg, #fff0 0 100%; 
	--lin: #fff0 33%, var(--p1) calc(33% + 1px), #fff0 calc(33% + 2px);
	width: 57.5%;
	height: 50%;
	position: absolute;
	transition: all var(--spd) ease-in-out 0s;
	filter: drop-shadow(0px 0px 2px #222);
	background: 
		linear-gradient(120deg, var(--lin)),
		radial-gradient(circle at 50% 4.75vmin, var(--rin)), 
		radial-gradient(circle at 50% 5%, var(--rad)), 
		conic-gradient(from 150deg at 50% 7%, var(--tri)), 
		conic-gradient(from 150deg at 50% 0%, var(--con));
	top: 50%;
	left: 50%;
	animation: start1 var(--spd) ease-in-out 0s 1;
}

.panel:nth-child(2) {
	background: 
		linear-gradient(60deg, var(--lin)),
		radial-gradient(circle at 3.55vmin 2.35vmin, var(--rin)),  
		radial-gradient(circle at 3% 2.5%, var(--rad)),
		conic-gradient(from 90deg at 5% 4%, var(--tri)), 
		conic-gradient(from -30deg at 50% 100%, var(--con));
	top: 25%;
	left: 64.5%;
	animation-name: start2;
}

.panel:nth-child(3) {
	background: 
		linear-gradient(0deg,  var(--p1) calc(0% + 1px), #fff0 calc(0% + 2px)),
		radial-gradient(circle at 3.55vmin 95.5%, var(--rin)), 
		radial-gradient(circle at 3% 98%, var(--rad)),
		conic-gradient(from 30deg at 5% 96%, var(--tri)), 
		conic-gradient(from 150deg at 50% 0%, var(--con));
	top: -25%;
	left: 35.5%;
	animation-name: start3;
}

.panel:nth-child(4) {
	background: 
		linear-gradient(-60deg, var(--lin)),
		radial-gradient(circle at 50% 91%, var(--rin)), 	
		radial-gradient(circle at 50% 96%, var(--rad)),
		conic-gradient(from -30deg at 50% 93%, var(--tri)), 
		conic-gradient(from -30deg at 50% 100%, var(--con));
	top: 0;
	left: -7.75%;
	animation-name: start4;
}
.panel:nth-child(5) {  
	background: 
		linear-gradient(-120deg, var(--lin)),
		radial-gradient(circle at 93.5% 95%, var(--rin)), 		
		radial-gradient(circle at 97% 98%, var(--rad)),
		conic-gradient(from 270deg at 95% 96%, var(--tri)), 
		conic-gradient(from 150deg at 50% 0%, var(--con));
	top: 25%;
	left: -22.25%;
	animation-name: start5;
}

.panel:nth-child(6) {
	background: 
		linear-gradient(-60deg, var(--lin)),
		linear-gradient(180deg,  var(--p1) calc(0% + 1px), #fff0 calc(0% + 2px)),
		radial-gradient(circle at 93.5% 5%, var(--rin)), 	
		radial-gradient(circle at 97% 2.5%, var(--rad)),
		conic-gradient(from 210deg at 95% 4%, var(--tri)), 
		conic-gradient(from -30deg at 50% 100%, var(--p2) 60deg, #fff0 0 100%);
	top: 75%;
	left: 7%;
	animation-name: start6;
}



.door:hover .panel:nth-child(1) {
	left: calc(50% - 28.75% );
}

.door:hover .panel:nth-child(2) {
	top: 50%;
	left: 50%;
}

.door:hover .panel:nth-child(3) {
	top: 0;
	left: 50%;
}

.door:hover .panel:nth-child(4) {
	top: 0;
	left: calc(50% - 28.75%);
}

.door:hover .panel:nth-child(5) {
	top: 0;
	left: -7.65%;  
}

.door:hover .panel:nth-child(6) {	
	top: 50%;
	left: -7.5%;
}



@keyframes start1 {
	0% { left: calc(50% - 28.75% ); }
	100% { left: 50%; }
}

@keyframes start2 {
	0% { top: 50%; left: 50%; }
	100% { top: 25%; left: 64.5%; }
}

@keyframes start3 {
	0% { top: 0;    left: 50%; }
	100% { top: -25%; left: 35.5%; }
}

@keyframes start4 {
	0% { left: calc(50% - 28.75% ); }
	100% { left: -7.75%; }
}

@keyframes start5 {
	0% { top: 0;   left: -7.65%; }
	100% { top: 25%; left: -22.25%; }
}

@keyframes start6 {
	0% { top: 50%; left: -7.5%; }
	100% { top: 75%; left: 7%; }
}