<div class="giyu">
  <h1>冨岡義勇</h1>
</div>
body {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	height: 100vh;
	background: #600;
	margin: 0;
}
div {
	position: relative;
	width: 50%;
	height: 100%;
	z-index: -1;
}
.giyu {
	background:
	/* Yellow */
	linear-gradient(30deg, #ff0 6.2%, transparent 6.2%) 125px 132px / 100px 176px,
	linear-gradient(-30deg, #ff0 6.2%, transparent 6.2%) 125px 132px / 100px 176px,
	linear-gradient(150deg, #ff0 6.2%, transparent 6.2%) 125px 132px / 100px 176px,
	linear-gradient(-150deg, #ff0 6.2%, transparent 6.2%) 125px 132px / 100px 176px,
	linear-gradient(30deg, #ff0 6.2%, transparent 6.2%) 100px 88px / 100px 176px,
	linear-gradient(-30deg, #ff0 6.2%, transparent 6.2%) 100px 88px / 100px 176px,
	linear-gradient(150deg, #ff0 6.2%, transparent 6.2%) 100px 88px / 100px 176px,
	linear-gradient(-150deg, #ff0 6.2%, transparent 6.2%) 100px 88px / 100px 176px,
	linear-gradient(30deg, #ff0 6.2%, transparent 6.2%) 75px 44px / 100px 176px,
	linear-gradient(-30deg, #ff0 6.2%, transparent 6.2%) 75px 44px / 100px 176px,
	linear-gradient(150deg, #ff0 6.2%, transparent 6.2%) 75px 44px / 100px 176px,
	linear-gradient(-150deg, #ff0 6.2%, transparent 6.2%) 75px 44px / 100px 176px,
	linear-gradient(30deg, #ff0 6.2%, transparent 6.2%) 50px 0 / 100px 176px,
	linear-gradient(-30deg, #ff0 6.2%, transparent 6.2%) 50px 0 / 100px 176px,
	linear-gradient(150deg, #ff0 6.2%, transparent 6.2%) 50px 0 / 100px 176px,
	linear-gradient(-150deg, #ff0 6.2%, transparent 6.2%) 50px 0 / 100px 176px,
	
	/* Dark Green */
	linear-gradient(150deg, #242 6.2%, transparent 6.2%) 75px 132px / 100px 176px,
	linear-gradient(-150deg, #242 6.2%, transparent 6.2%) 75px 132px / 100px 176px,
	linear-gradient(30deg, #242 6.2%, transparent 6.2%) 75px 132px / 100px 176px,
	linear-gradient(-30deg, #242 6.2%, transparent 6.2%) 75px 132px / 100px 176px,
	linear-gradient(30deg, #242 6.2%, transparent 6.2%) 50px 88px / 100px 176px,
	linear-gradient(-30deg, #242 6.2%, transparent 6.2%) 50px 88px / 100px 176px,
	linear-gradient(150deg, #242 6.2%, transparent 6.2%) 50px 88px / 100px 176px,
	linear-gradient(-150deg, #242 6.2%, transparent 6.2%) 50px 88px / 100px 176px,
	linear-gradient(30deg, #242 6.2%, transparent 6.2%) 25px 44px / 100px 176px,
	linear-gradient(-30deg, #242 6.2%, transparent 6.2%) 25px 44px / 100px 176px,
	linear-gradient(150deg, #242 6.2%, transparent 6.2%) 25px 44px / 100px 176px,
	linear-gradient(-150deg, #242 6.2%, transparent 6.2%) 25px 44px / 100px 176px,
	linear-gradient(150deg, #242 6.2%, transparent 6.2%) 0 0 / 100px 176px,
	linear-gradient(-150deg, #242 6.2%, transparent 6.2%) 0 0 / 100px 176px,
	linear-gradient(30deg, #242 6.2%, transparent 6.2%) 0 0 / 100px 176px,
	linear-gradient(-30deg, #242 6.2%, transparent 6.2%) 0 0 / 100px 176px,
	
	/* Orange */
	linear-gradient(-30deg, #f93 3.7%, transparent 3.7%) 100px 152px / 100px 176px,
	linear-gradient(150deg, #f93 3.7%, transparent 3.7%) 86px 152px / 100px 176px,
	linear-gradient(-30deg, #f93 3.7%, transparent 3.7%) 100px 161px / 100px 176px,
	linear-gradient(150deg, #f93 3.7%, transparent 3.7%) 86px 161px / 100px 176px,
	linear-gradient(30deg, #f93 3.7%, transparent 3.7%) 150px 152px / 100px 176px,
	linear-gradient(-150deg, #f93 3.7%, transparent 3.7%) 64px 152px / 100px 176px,
	linear-gradient(30deg, #f93 3.7%, transparent 3.7%) 150px 161px / 100px 176px,
	linear-gradient(-150deg, #f93 3.7%, transparent 3.7%) 64px 161px / 100px 176px,
	linear-gradient(-30deg, #f93 3.7%, transparent 3.7%) 75px 108px / 100px 176px,
	linear-gradient(150deg, #f93 3.7%, transparent 3.7%) 61px 108px / 100px 176px,
	linear-gradient(-30deg, #f93 3.7%, transparent 3.7%) 75px 117px / 100px 176px,
	linear-gradient(150deg, #f93 3.7%, transparent 3.7%) 61px 117px / 100px 176px,
	linear-gradient(30deg, #f93 3.7%, transparent 3.7%) 125px 108px / 100px 176px,
	linear-gradient(-150deg, #f93 3.7%, transparent 3.7%) 39px 108px / 100px 176px,
	linear-gradient(30deg, #f93 3.7%, transparent 3.7%) 125px 117px / 100px 176px,
	linear-gradient(-150deg, #f93 3.7%, transparent 3.7%) 39px 117px / 100px 176px,
	linear-gradient(-30deg, #f93 3.7%, transparent 3.7%) 50px 64px / 100px 176px,
	linear-gradient(150deg, #f93 3.7%, transparent 3.7%) 36px 64px / 100px 176px,
	linear-gradient(-30deg, #f93 3.7%, transparent 3.7%) 50px 73px / 100px 176px,
	linear-gradient(150deg, #f93 3.7%, transparent 3.7%) 36px 73px / 100px 176px,
	linear-gradient(30deg, #f93 3.7%, transparent 3.7%) 100px 64px / 100px 176px,
	linear-gradient(-150deg, #f93 3.7%, transparent 3.7%) 14px 64px / 100px 176px,
	linear-gradient(30deg, #f93 3.7%, transparent 3.7%) 100px 73px / 100px 176px,
	linear-gradient(-150deg, #f93 3.7%, transparent 3.7%) 14px 73px / 100px 176px,
	linear-gradient(-30deg, #f93 3.7%, transparent 3.7%) 25px 20px / 100px 176px,
	linear-gradient(150deg, #f93 3.7%, transparent 3.7%) 11px 20px / 100px 176px,
	linear-gradient(-30deg, #f93 3.7%, transparent 3.7%) 25px 29px / 100px 176px,
	linear-gradient(150deg, #f93 3.7%, transparent 3.7%) 11px 29px / 100px 176px,
	linear-gradient(30deg, #f93 3.7%, transparent 3.7%) 75px 20px / 100px 176px,
	linear-gradient(-150deg, #f93 3.7%, transparent 3.7%) -11px 20px / 100px 176px,
	linear-gradient(30deg, #f93 3.7%, transparent 3.7%) 75px 29px / 100px 176px,
	linear-gradient(-150deg, #f93 3.7%, transparent 3.7%) -11px 29px / 100px 176px,
	
	/* Orange line */
	linear-gradient(110deg, #222 4%, transparent 4%) 85px 152px / 100px 176px,
	linear-gradient(-110deg, #222 4%, transparent 4%) 65px 152px / 100px 176px,
	linear-gradient(110deg, #222 4%, transparent 4%) 60px 108px / 100px 176px,
	linear-gradient(-110deg, #222 4%, transparent 4%) 40px 108px / 100px 176px,
	linear-gradient(110deg, #222 4%, transparent 4%) 35px 64px / 100px 176px,
	linear-gradient(-110deg, #222 4%, transparent 4%) 15px 64px / 100px 176px,
	linear-gradient(110deg, #222 4%, transparent 4%) 10px 20px / 100px 176px,
	linear-gradient(-110deg, #222 4%, transparent 4%) -10px 20px / 100px 176px,
	
	/* Light Orange line */
	linear-gradient(110deg, #fc3 7%, transparent 7%) 81px 149px / 100px 176px,
	linear-gradient(110deg, #222 7%, transparent 7%) 80px 149px / 100px 176px,
	linear-gradient(110deg, #fc3 7%, transparent 7%) 56px 105px / 100px 176px,
	linear-gradient(110deg, #222 7%, transparent 7%) 55px 105px / 100px 176px,
	linear-gradient(110deg, #fc3 7%, transparent 7%) 31px 61px / 100px 176px,
	linear-gradient(110deg, #222 7%, transparent 7%) 30px 61px / 100px 176px,
	linear-gradient(110deg, #fc3 7%, transparent 7%) 6px 17px / 100px 176px,
	linear-gradient(110deg, #222 7%, transparent 7%) 5px 17px / 100px 176px,
	linear-gradient(-110deg, #fc3 7%, transparent 7%) 69px 149px / 100px 176px,
	linear-gradient(-110deg, #222 7%, transparent 7%) 70px 149px / 100px 176px,
	linear-gradient(-110deg, #fc3 7%, transparent 7%) 44px 105px / 100px 176px,
	linear-gradient(-110deg, #222 7%, transparent 7%) 45px 105px / 100px 176px,
	linear-gradient(-110deg, #fc3 7%, transparent 7%) 19px 61px / 100px 176px,
	linear-gradient(-110deg, #222 7%, transparent 7%) 20px 61px / 100px 176px,
	linear-gradient(-110deg, #fc3 7%, transparent 7%) -6px 17px / 100px 176px,
	linear-gradient(-110deg, #222 7%, transparent 7%) -5px 17px / 100px 176px,

	/* Light Orange */
	linear-gradient(41deg, #fc3 16.8%, transparent 16.8%) 150px 176px / 100px 176px,
	linear-gradient(-139deg, #fc3 16.8%, transparent 16.8%) 100px 132px / 100px 176px,
	linear-gradient(41deg, #fc3 16.8%, transparent 16.8%) 125px 132px / 100px 176px,
	linear-gradient(-139deg, #fc3 16.8%, transparent 16.8%) 75px 88px / 100px 176px,
	linear-gradient(41deg, #fc3 16.8%, transparent 16.8%) 100px 88px / 100px 176px,
	linear-gradient(-139deg, #fc3 16.8%, transparent 16.8%) 50px 44px / 100px 176px,
	linear-gradient(41deg, #fc3 16.8%, transparent 16.8%) 75px 44px / 100px 176px,
	linear-gradient(-139deg, #fc3 16.8%, transparent 16.8%) 25px 0 / 100px 176px,
	#393;
	
}
.giyu::before,
.giyu::after {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	content: "";
	mix-blend-mode: multiply;
	z-index: -1;
}
.giyu::before {
	background:
	linear-gradient(-135deg, #fff 21%, transparent 21%) 38px 29px / 50px 88px,
	linear-gradient(45deg, #fff 21%, transparent 21%) 60px 58px / 50px 88px,
	linear-gradient(-135deg, #fff 21%, transparent 21%) 14px -15px / 50px 88px,
	linear-gradient(45deg, #fff 21%, transparent 21%) 35px 13px / 50px 88px,
	linear-gradient(90deg, #222 1px, transparent 1px) 0 0 / 25px 88px,
	#fff;
}
.giyu::after {
	background:
	/* Black Line */
	linear-gradient(-30deg, transparent 4.5%, #222 4.5%, #222 5%, transparent 5%) 100px 149px / 100px 176px,
	linear-gradient(-30deg, transparent 4.5%, #222 4.5%, #222 5%, transparent 5%) 75px 105px / 100px 176px,
	linear-gradient(-30deg, transparent 4.5%, #222 4.5%, #222 5%, transparent 5%) 50px 61px / 100px 176px,
	linear-gradient(-30deg, transparent 4.5%, #222 4.5%, #222 5%, transparent 5%) 25px 17px / 100px 176px,
	linear-gradient(-30deg, transparent 3.2%, #222 3.2%, #222 3.7%, transparent 3.7%) 100px 152px / 100px 176px,
	linear-gradient(-30deg, transparent 3.2%, #222 3.2%, #222 3.7%, transparent 3.7%) 75px 108px / 100px 176px,
	linear-gradient(-30deg, transparent 3.2%, #222 3.2%, #222 3.7%, transparent 3.7%) 50px 64px / 100px 176px,
	linear-gradient(-30deg, transparent 3.2%, #222 3.2%, #222 3.7%, transparent 3.7%) 25px 20px / 100px 176px,
	linear-gradient(30deg, transparent 4.5%, #222 4.5%, #222 5%, transparent 5%) 150px 149px / 100px 176px,
	linear-gradient(30deg, transparent 4.5%, #222 4.5%, #222 5%, transparent 5%) 125px 105px / 100px 176px,
	linear-gradient(30deg, transparent 4.5%, #222 4.5%, #222 5%, transparent 5%) 100px 61px / 100px 176px,
	linear-gradient(30deg, transparent 4.5%, #222 4.5%, #222 5%, transparent 5%) 75px 17px / 100px 176px,
	linear-gradient(30deg, transparent 3.2%, #222 3.2%, #222 3.7%, transparent 3.7%) 150px 152px / 100px 176px,
	linear-gradient(30deg, transparent 3.2%, #222 3.2%, #222 3.7%, transparent 3.7%) 125px 108px / 100px 176px,
	linear-gradient(30deg, transparent 3.2%, #222 3.2%, #222 3.7%, transparent 3.7%) 100px 64px / 100px 176px,
	linear-gradient(30deg, transparent 3.2%, #222 3.2%, #222 3.7%, transparent 3.7%) 75px 20px / 100px 176px,
	linear-gradient(-30deg, transparent calc(50% - .5px), #222 calc(50% - .5px), #222 calc(50% + .5px), transparent calc(50% + .5px)) 25px 88px / 50px 88px,
	linear-gradient(30deg, transparent calc(50% - .5px), #222 calc(50% - .5px), #222 calc(50% + .5px), transparent calc(50% + .5px)) 25px 88px / 50px 88px,
	linear-gradient(-30deg, transparent calc(50% - .5px), #222 calc(50% - .5px), #222 calc(50% + .5px), transparent calc(50% + .5px)) 0 44px / 50px 88px,
	linear-gradient(30deg, transparent calc(50% - .5px), #222 calc(50% - .5px), #222 calc(50% + .5px), transparent calc(50% + .5px)) 0 44px / 50px 88px;
}
h1 {
	position: fixed;
	top: 50%;
	left: 50%;
	background: #fff;
	padding: .5em 1em;
	border-radius: .5em;
	transform: translate(-50%, -50%);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.