<h1 id="hokuto"></h1>

body {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	background: linear-gradient(#003,#039);
}
#hokuto {
	position: relative;
	width: 290px;
	height: 108px;
	background:
	/*北*/
	linear-gradient(-20deg, transparent 50%, #fc0 50%) 75px 88px / 13px 6px no-repeat,
	linear-gradient(-20deg, transparent 50%, #fc0 50%) 66px 0 / 18px 8px no-repeat,
	linear-gradient(#fc0, #fc0) 65px 88px / 11px 20px no-repeat,
	linear-gradient(#fc0, #fc0) 65px 17px / 11px 22px no-repeat,
	linear-gradient(#fc0, #fc0) 42px 0 / 24px 100% no-repeat,
	linear-gradient(-20deg, #fc0 50%, transparent 50%) left bottom / 18px 6px no-repeat,
	linear-gradient(-20deg, transparent 15%, #fc0 15%, #fc0 85%, transparent 85%) 3px 72px / 15px 30px no-repeat,
	linear-gradient(#fc0, #fc0) 3px 17px / 15px 22px no-repeat,
	linear-gradient(#fc0, #fc0) 17px 0 / 22px 100% no-repeat,
	/*斗*/
	linear-gradient(-20deg, transparent 50%, #fc0 50%) 139px 0 / 21px 8px no-repeat,
	linear-gradient(-20deg, #fc0 50%, transparent 50%) 92px bottom / 27px 10px no-repeat,
	linear-gradient(-13deg, transparent 58%, #fc0 58%, #fc0 78%, transparent 78%) 80px 38px / 73px 100% no-repeat,
	linear-gradient(#fc0, #fc0) 118px 0 / 22px 100% no-repeat,
	/*の*/
	linear-gradient(-25deg, transparent 50%, #fc0 50%) 181px 45px / 7px 4px no-repeat,
	linear-gradient(#fc0, #fc0) 184px bottom / 5px 20px no-repeat,
	linear-gradient(#fc0, #fc0) 167px bottom / 4px 20px no-repeat,
	linear-gradient(#fc0, #fc0) 188px bottom / 13px 66px no-repeat,
	linear-gradient(#fc0, #fc0) 170px bottom / 12px 63px no-repeat,
	linear-gradient(#fc0, #fc0) 155px bottom / 13px 66px no-repeat,
	linear-gradient(#fc0, #fc0) 155px 25px / 46px 18px no-repeat,
	/*拳*/
	linear-gradient(-15deg, #fc0 50%, transparent 50%) 210px bottom / 24px 6px no-repeat,
	linear-gradient(50deg, transparent 35%, #fc0 35%, #fc0 80%, transparent 80%) 245px 43px / 45px 12px no-repeat,
	linear-gradient(-50deg, transparent 30%, #fc0 30%, #fc0 80%, transparent 80%) 200px 43px / 45px 12px no-repeat,
	linear-gradient(-50deg, transparent 25%, #fc0 25%, #fc0 80%, transparent 80%) right 0 / 34px 13px no-repeat,
	linear-gradient(-25deg, transparent 50%, #fc0 50%) 256px 0 / 7px 4px no-repeat,
	linear-gradient(50deg, transparent 25%, #fc0 25%, #fc0 80%, transparent 80%) 200px 0 / 34px 13px no-repeat,
	linear-gradient(#fc0, #fc0) 232px bottom / 24px 47px no-repeat,
	linear-gradient(#fc0, #fc0) 232px top / 24px 30px no-repeat,
	linear-gradient(#fc0, #fc0) 204px 80px / 80px 14px no-repeat,
	linear-gradient(#fc0, #fc0) 204px 64px / 80px 14px no-repeat,
	linear-gradient(-70deg, transparent 15%, #fc0 15%, #fc0 85%, transparent 85%) 204px 49px / 80px 13px no-repeat,
	linear-gradient(-70deg, transparent 20%, #fc0 20%, #fc0 80%, transparent 80%) 245px 47px / 40px 2px no-repeat,
	linear-gradient(#fc0, #fc0) 204px 29px / 80px 15px no-repeat,
	linear-gradient(#fc0, #fc0) 204px 12px / 80px 15px no-repeat;
	transform: skewX(-26deg);
	filter: drop-shadow(5px 5px 0 rgba(0,0,0,0.6));
}
#hokuto::before {
	position: absolute;
	content: "";
	top: -10px;
	left: 74px;
	width: 50px;
	height: 81px;
	background:
	linear-gradient(-63deg, transparent 50%, #fc0 50%) 29px 45px / 20px 36px no-repeat,
	linear-gradient(-63deg, #fc0 50%, transparent 50%) 17px 14px / 20px 36px no-repeat,
	linear-gradient(-63deg, transparent 50%, #fc0 50%) 14px 20px / 16px 30px no-repeat,
	linear-gradient(-63deg, #fc0 50%, transparent 50%) 0 0 / 16px 30px no-repeat;
	transform: skew(-20deg);
}