<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%);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.