暇だったんで作りました。

PureCSS デーモンコア

See the Pen PureCSS デーモンコア by Leo_8192 (@Leo_8192) on CodePen.

元ネタはこちら。

デーモンコアの作り方

これいる？

HTML・CSS

<div class="dc_container">
	<div class="dc_top">
	</div>
	<div class="dc_base">
		<div class="dc_core"></div>
		<div class="dc_bottom_1"></div>
		<div class="dc_bottom_2_1"></div>
		<div class="dc_bottom_2_2"></div>
		<div class="dc_bottom_3"></div>
	</div>
	<div class="tool">
		<div class="tool_t"></div>
		<div class="tool_m"></div>
		<div class="tool_b"></div>
	</div>
</div>

.container{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
}
.dc_container{
	position: relative;
}
.dc_top{
	position: relative;
	top: 0;
	left: 50%;
	z-index: 3;
	transform-origin: right bottom;
	background: radial-gradient(circle at 20%,#eee,#333);
	border-radius: 50% 50% 0 0 / 100% 100% 0 0;
	width: 120px;
	height: 60px;
	animation: top_anm 1s ease-in-out infinite alternate;
}
@keyframes top_anm{
	0%  {transform: translatex(-50%) rotate(9.7deg);}
	100%{transform: translatex(-50%) rotate(15.6deg);}
}
.dc_core{
	position: absolute;
	top: 30px;
	left: 50%;
	transform: translatex(-50%);
	background: radial-gradient(circle at 20%,#888,#333);
	border-radius: 50% 50% 0 0 / 100% 100% 0 0;
	width: 60px;
	height: 30px;
}
.dc_bottom_1{
	position: relative;
	z-index: 2;
	background: radial-gradient(circle at 10% top,#ddd,#111);
	border-radius: 0 0 50% 50% / 0 0 100% 100%;
	width: 200px;
	height: 100px;
}
.dc_bottom_2_1{
	position: absolute;
	z-index: 1;
	top: 140px;
	left: 30%;
	transform: translatex(-50%);
	background: linear-gradient(90deg,#888,#333);
	width: 10px;
	height: 40px;
}
.dc_bottom_2_2{
	position: absolute;
	z-index: 1;
	top: 140px;
	left: 70%;
	transform: translatex(-50%);
	background: linear-gradient(90deg,#888,#333);
	width: 10px;
	height: 40px;
}
.dc_bottom_3{
	position: absolute;
	z-index: 1;
	top: 180px;
	left: 50%;
	transform: translatex(-50%);
	background: linear-gradient(90deg,#999,#333);
	width: 150px;
	height: 20px;
}
.tool{
	position: relative;
	z-index: 9999;
	top: -101px;
	left: -112px;
	transform-origin: right bottom;
	animation: t_anm 1s ease-in-out infinite alternate;
}
@keyframes t_anm{
	0%  {transform: translatey(0) rotate(30deg);}
	100%{transform: translatey(10px) rotate(50deg);}
}
.tool_t{
	position: absolute;
	top: 5px;
	left: 160px;
	width: 16px;
	height: 10px;
	background: linear-gradient(90deg,#aaa,#aaa 12px,#999 12px);
}
.tool_m{
	position: absolute;
	top: 7px;
	left: 60px;
	width: 100px;
	height: 6px;
	background: #aaa;
}
.tool_b{
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 10% 40% 40% 10%;
	width: 100px;
	height: 20px;
	background: repeating-linear-gradient(#f00,#f00 2px,#d00 2px,#d00 4px);
}

デーモンコアで遊ぼう

～Fin～