/* San Goku HTML */ <div class="songoku"> <div class="b-neck"></div> <div class="neck-1"> <div class="n1"></div> </div> <div class="cl"></div> <div class="cr"></div> <div class="ear-r"></div> <div class="ear-l"></div> <div class="face"> <div class="mouth"></div> <div class="noose"></div> <div class="eye-r"></div> <div class="eye-l"></div> <div class="u-eyes"></div> <div class="t-eye-r"></div> <div class="t-eye-l"></div> <div class="f"></div> </div> <div class="hair"> <div class="e1"></div> <div class="e2"></div> <div class="e3"></div> <div class="e4"></div> <div class="e5"></div> <div class="e6"></div> <div class="e7"></div> <div class="e8"></div> </div> </div> /* San Goku CSS */ .songoku { --m: #f9ddcc; --t: #120e0d; width: min(100vmin, 500px); aspect-ratio: 1.1; margin: auto auto 0; position: relative; overflow: hidden; box-sizing:content-box; } .songoku *, .songoku *:before, .songoku *:after { box-sizing:content-box; } .songoku .face { position: absolute; inset: 50% 29% 7% 33%; background: radial-gradient(85% 50% at right, var(--m) 94%, #0000) 49% 95%/13% 9%, radial-gradient(79% 100% at top, #0000 75%, var(--t) 81% 98%, #0000) 49% 53%/4% 3%, radial-gradient(39% 84% at top, #000 85%, #0000) 56% 53%/7% 2%, radial-gradient(50% 50%, #000 94%, #0000) 43.5% 52%/5% 3%, linear-gradient(to bottom right, #0000 44%, #000 56%) 44% 49%/4% 7%, linear-gradient(to bottom left, #0000 44%, #000 56%) 54% 49.5%/3% 6%, linear-gradient(-16deg, #0000 27%, #000 31% 71%, #0000 77%) 56.5% 51%/6% 5%, radial-gradient(farthest-side at 50% 81%, var(--t) 31%, #0000) 51% 84%/12% 2%, radial-gradient(farthest-side, #e8a690 98%, #0000) 48% 87%/18% 5%, conic-gradient(from -131deg at 100% 0, #e8a690 26deg, #0000 0) 53% 57%/14% 13%, linear-gradient(-106deg, #0000 25%, #ba6d64 0 78%, #0000 0) 4% 27%/17% 46%, conic-gradient(from 30deg, #0000 125deg, #e8a690 0) 19% 19%/40% 50%, linear-gradient(#e8a690 0 0) 43% 86%/11% 40%, conic-gradient(from -38deg at 50% 100%, var(--m) 74deg, #0000 0); background-repeat: no-repeat; } .songoku .face:before { content: ""; position: absolute; right: 49%; bottom: -2%; width: 38%; height: 27%; background: linear-gradient(-45deg, #0000 20%, #ba6d64 0) 4% 12%/39% 17%, radial-gradient(107% 80% at 0 100%, #0000 96%, var(--m)) 79% 0%/26% 34%, radial-gradient(85% 55% at right, var(--m) 97%, #0000) 104% 83%/17% 26%, conic-gradient(from -14deg at 40% 89%, #ba6d64, #e8a690 1deg 112deg, #ba6d64 117deg); background-repeat: no-repeat; border-left: 2px solid var(--t); border-bottom: 2px solid var(--t); border-radius: 0 0 34% 30%/0 0 13% 60%; transform-origin: bottom right; transform: skewY(36deg) skewX(14deg); } .songoku .face:after { content: ""; position: absolute; left: 49%; bottom: -2%; width: 38%; height: 31%; background: linear-gradient(to bottom right, #0000 50%, var(--m) 0); border-right: 2px solid var(--t); border-bottom: 2px solid var(--t); border-radius: 0 0 30% 34%/0 0 82% 13%; transform-origin: bottom left; transform: skewY(-36deg) skewX(-15deg); } .songoku .mouth:before { content: ""; position: absolute; right: 41%; bottom: 19%; width: 7%; height: 2%; border-right: 2px solid var(--t); border-top: 2px solid var(--t); border-radius: 0 47% 0 0; transform: skewX(16deg); z-index: 1; } .songoku .mouth:after { content: ""; position: absolute; left: 43%; bottom: 19%; width: 7%; height: 2%; border-left: 2px solid var(--t); border-top: 2px solid var(--t); border-radius: 47% 0 0 0; transform: skewX(-16deg); z-index: 1; } .songoku .noose { position: absolute; width: 10%; height: 10%; bottom: 23%; left: 44%; transform: rotate(45deg) skewX(18deg); border: 2px solid var(--t); border-right: 1px solid var(--t); border-top: 0; border-radius: 0 0 85% 0; clip-path: polygon(0 0, 100% 37%, 100% 100%, 0 100%); overflow: hidden; } .songoku .noose:before { content: ""; position: absolute; width: 109%; height: 60%; background: #ba6d64; border-top: 2px solid var(--t); border-right: 2px solid var(--t); top: 0; left: 0; transform-origin: top left; transform: rotate(56deg); border-radius: 0 75% 0 0; } .songoku .eye-r, .songoku .eye-l { position: absolute; width: 28%; height: 20%; right: 13%; bottom: 43%; background: radial-gradient(farthest-side, #000 90%, #0000) 9% 55%/36% 41% no-repeat, linear-gradient(#ffffff 0 0) left/74% 100% no-repeat; z-index: 1; clip-path: polygon(-16% 84%, 100% 6%, 100% 100%, 0 100%); border-radius: 0 0 0 10%; } .songoku .eye-l { left: 13%; right: auto; transform: scaleX(-1); } .songoku .eye-r:before, .songoku .eye-l:before { content: ""; position: absolute; left: 0; bottom: 0; height: 50%; width: 60%; border-left: 2px solid var(--t); border-bottom: 2px solid var(--t); border-radius: 0 0 0 25%; transform-origin: bottom; transform: skewX(12deg); } .songoku .eye-l::before { height: 51%; } .songoku .eye-r:after, .songoku .eye-l:after { content: ""; position: absolute; right: 0; bottom: 0; width: 20%; height: 81%; border-right: 2px solid var(--t); border-bottom: 2px solid var(--t); border-radius: 0 0 59% 0/0 0 30% 0; transform-origin: top; transform: skewX(-17deg); background: #fff; } .songoku .t-eye-r { position: absolute; right: 11%; top: 30%; width: 36%; height: 10%; background: #000; transform-origin: right; transform: rotate(-30deg); z-index: 2; clip-path: polygon(0 26%, 100% 0, 92% 100%, 77% 71%, 0% 56%); } .songoku .t-eye-l { position: absolute; left: 12%; top: 29%; width: 37%; height: 10%; background: #000; transform-origin: left; transform: rotate(30deg); z-index: 2; clip-path: polygon(0 0, 32% 0, 100% 43%, 100% 63%, 17% 84%, 5% 100%); } .songoku .u-eyes:before { content: ""; position: absolute; right: 21%; bottom: 35%; width: 19%; height: 4%; border-top: 2px solid var(--t); border-radius: 50% 50% 0 0; } .songoku .u-eyes:after { content: ""; position: absolute; left: 18%; bottom: 36%; width: 22%; height: 4%; border-top: 2px solid var(--t); border-radius: 50% 50% 0 0; transform-origin: right; transform: rotate(3deg); } .songoku .hair:after { content: ""; position: absolute; z-index: 3; background: linear-gradient(#000 0 0) 35% 61%/9% 10%, radial-gradient(44% 100% at 52% 109%, #000 98%, #0000) 0% 62%/28% 7%, linear-gradient(to top left, #000 51%, #0000 53%) 27% 62%/5% 16%, linear-gradient(to bottom left, #000 51%, #0000 53%) 27% 62%/7% 33%, radial-gradient(50% 100% at 50% 115%, #252525 98%, #0000) 5% 60%/28% 11%, radial-gradient(50% 100% at 50% 114%, #595959 98%, #0000) 6% 58%/33% 13%, radial-gradient(50% 100% at 50% 118%, #252525 98%, #0000) 5% 57%/35% 15%, radial-gradient(82% 51% at 102% 64%, #0000 93%, #000) 35% 93.5%/4% 13%, conic-gradient(from -48deg at 100% 100%, #0000, #000 1deg 23deg, #0000 28deg) 33% 92%/10% 10%, radial-gradient(82% 114% at 100% 98%, #0000 98%, #000) 40% 85%/10% 11%, radial-gradient(88% 91% at 100% 0, #000 98%, #0000) 31% 95%/5% 14%, linear-gradient(#000 0 0) 28.5% 82%/12% 6%, linear-gradient(to bottom right, #000 48%, #0000 50%) 54.5% 96%/4% 10%, radial-gradient(62% 56% at -11% 72%, #0000 91%, #000) 55% 72%/3% 4%, radial-gradient(100% 119% at 109% 118%,#000 96%,#0000) 54% 84%/4% 18%, conic-gradient(from 25deg at 0 100%, #0000, #000 2deg 28deg, #0000 30deg) 70% 90%/10% 11%, radial-gradient(85% 52% at 0 100%, #0000 92%, #000) 65.5% 80%/4% 7%, radial-gradient(111% 128% at -3% 0%, #0000 96%, #000) 68% 89%/5% 14%, radial-gradient(100% 100% at 0% 0%, #000 98%, #0000) 73% 90%/5% 9%, linear-gradient(#000 0 0) 76% 81%/12% 10%, linear-gradient(to bottom right, #000 50%, #0000 51%) 98.5% 83%/21% 16%, radial-gradient(50% 100% at 50% 148%, #000 98%, #0000) 102% 67%/34% 10%, linear-gradient(#000 0 0) 88% 73%/37% 5%, linear-gradient(to bottom right, #000 49%, #0000 50%) 63% 86%/12% 14%, linear-gradient(#000 0 0) 65% 67%/28% 11%, radial-gradient(100% 50% at 129% 52%, #000 95%, #0000) 40% 93%/4% 36%, radial-gradient(156% 166% at 150% 150%, #0000 98%, #000) 49% 93%/14% 25%, radial-gradient(119% 96% at 115% 100%, #000 92%, #0000) 13% 21%/9% 5%, radial-gradient(148% 151% at -40% 140%, #0000 98%, #000) 12% 35%/17% 31%, radial-gradient(83% 100% at 17% 100%, #000 98%, #0000) 26% 23%/21% 14%, linear-gradient(#000 0 0) 55% 61%/3% 14%, linear-gradient(#000 0 0) 25% 74%/3% 23%, radial-gradient(120% 128% at 0 100%, #0000 87%, #000 88%) -27% 88%/41% 27%, radial-gradient(79% 101% at 0 100%, #0000 69%, #000 0 98%, #0000) 46% 5%/20% 10%, radial-gradient(100% 112% at 0 100%, #0000 98%, #000) 35% 7.5%/9% 37%, radial-gradient(100% 100% at 0 100%, #000 98%, #0000) 48.5% 8%/16% 16%, radial-gradient(50% 100% at 50% 139%, #000 98%, #0000) 1% 54%/40% 22%, linear-gradient(#000 0 0) 34% 59%/22% 44%, linear-gradient(#000 0 0) 47% 32%/13% 50%, linear-gradient(to top right, #000 65%, #0000 67%) 58% 27%/9% 37%, radial-gradient(97% 97% at 0% 92%, #000 98%, #0000) 70% 54%/21% 29%; background-repeat: no-repeat; inset: 0% 0% 27% 0%; } .songoku .hair:before { content: ""; position: absolute; z-index: -1; inset: 58% 2% 18% 9%; background: radial-gradient(100% 93% at 0 100%, #0000 96%, #000) 23% 100%/15% 16%, linear-gradient(#000 0 0) 28% 82%/10% 18%, radial-gradient(50% 95% at 50% 113%, #000 95%, #0000) 21% 82%/10% 16%, radial-gradient(77% 111% at 0 100%, #0000 98%, #000) 18% 74%/10% 33%, linear-gradient(to bottom left, #000 49%, #0000 50%) 4% 47%/30% 42%, radial-gradient(50% 105% at 50% 129%, #000 96%, #0000) 3% 5%/35% 24%, radial-gradient(100% 102% at 94% 97%, #0000 96%, #000) 84% 108%/26% 26%, linear-gradient(#000 0 0) 75% 62%/8% 13%, conic-gradient(from -96deg at right, #0000, #000 1deg 30deg, #0000 32deg) 79% 95%/30% 38%, radial-gradient(103% 117% at 86% 111%, #0000 96%, #000) 88% 75%/13% 44%, conic-gradient(from -111deg at 94% 23%, #0000, #000 1deg 32deg, #0000 34deg) 100% 0%/29% 93%; background-repeat: no-repeat; } .songoku .ear-r { position: absolute; width: 9%; height: 16%; background: radial-gradient(50% 100% at bottom, #0000 84%, var(--t) 90% 96%, #0000) 74% 8%/63% 34% no-repeat, var(--m); right: 24%; bottom: 23%; border-radius: 0 43% 59% 0/0 23% 55% 0; transform-origin: top; transform: skewX(-18deg); border: 1px solid var(--t); overflow: hidden; } .songoku .ear-r::before { content: ""; position: absolute; inset: 35% 24% 19% 46%; background: linear-gradient(var(--t) 0 0) 0 23%/100% 5% no-repeat, radial-gradient(86% 47% at 100% 100%, #f9ddcc 89%, var(--t) 91% 98%, #0000), #e8a690; box-shadow: -2px 2px 0 0 inset var(--t); border-radius: 0 32% 0 0; transform-origin: left; transform: skewY(40deg); clip-path: polygon(0 0, 100% 0, 100% 53%, 0 100%); } .songoku .ear-l { position: absolute; width: 10%; height: 16%; background: radial-gradient(50% 102% at 54% 100%, #0000 82%, var(--t) 94% 96%, var(--m)) 13% 21%/43% 33% no-repeat, radial-gradient(50% 50%, #e8a690 82%, #0000) 20% 22%/24% 21% no-repeat, var(--m); left: 26.5%; bottom: 23%; box-shadow: 1px -4px 3px inset #e8a690; border-radius: 31% 0 0 79%/51% 0 0 62%; transform-origin: top; transform: skewX(16deg); border: 1px solid var(--t); } .songoku .ear-l:before { content: ""; position: absolute; inset: 46% 0% 13% 30%; background: radial-gradient(34% 24% at 10% 2%, #cc8275 85%, var(--t) 88% 98%, #0000), radial-gradient(27% 47% at 31% 110%, #f9ddcc 87%, var(--t) 91% 98%, #0000), #e8a690; box-shadow: 2px 0px 0 inset var(--t); border-radius: 34% 0 0 66%/51% 0 0 71%; clip-path: polygon(0 0, 100% 0, 100% 59%, 0% 80%); } .songoku .e1 { position: absolute; width: 33%; height: 20%; left: 10%; top: 15%; background: radial-gradient(81% 103% at 6% 115%, #000 98%, #0000), radial-gradient(97% 83% at 1% 90%, #252525 98%, #0000) #595959; -webkit-mask: radial-gradient(81% 103% at 6% 115%, #0000 98%, #000 0); z-index: 8; border-radius: 48% 68% 0 0/24% 85% 0 0; clip-path: polygon(-9% 0%, 100% 0, 100% 75%, 86% 100%); border: 2px solid #252525; } .songoku .e2 { position: absolute; top: 4%; left: 39%; width: 23%; height: 30%; background: radial-gradient(65% 110% at -5% 111%, #000 99%, #0000), linear-gradient(#252525 0 0) 0 100%/100% 18% no-repeat, radial-gradient(85% 100% at 0 100%, #252525 99%, #0000) 0 0/100% 191%, #595959; z-index: 4; border-radius: 0 95% 0 0/0 100% 0 0; clip-path: polygon(0 0, 61% 7%, 96% 88%, 60% 93%); } .songoku .e3 { position: absolute; left: 12%; top: 61%; width: 13%; height: 6%; background: radial-gradient(66% 54% at 33% 100%, #000 98%, #0000), radial-gradient(114% 111% at 62% 132%, #0000 98%, #595959), #252525; border-radius: 100% 0 0 0/84% 0 0 0; clip-path: polygon(0 0, 100% 0, 97% 90%, 0% 52%); } .songoku .e4 { position: absolute; right: 6%; top: 48%; width: 19%; height: 8%; background: radial-gradient(89% 77% at 96% 100%, #000 98%, #0000), radial-gradient(100% 92% at 64% 100%, #0000 98%, #585858), #252525; z-index: 4; border-radius: 47% 50% 0 50%/27% 24% 0 63%; clip-path: polygon(0 0, 100% 0, 100% 18%, 0 86%); } .songoku .e5 { position: absolute; right: 4%; top: 60%; width: 21%; height: 7%; background: linear-gradient(-20deg, #0000 68%, #595959 70%), linear-gradient(6deg, #0000 65%, #595959 67%), #252525; z-index: 4; clip-path: polygon(34% 3%, 100% 45%, 67% 49%, 0 100%, 11% 50%); } .songoku .e6 { position: absolute; right: 16%; top: 73%; height: 4%; width: 10%; background: linear-gradient(13deg, #0000 53%, #595959 56%) #252525; clip-path: polygon(31% 8%, 88% 77%, 54% 63%, 0 90%); } .songoku .e7 { position: absolute; top: 50%; right: 34%; width: 14%; height: 20%; background: linear-gradient(-61deg, #0000 57%, #252525 58%), linear-gradient(-52deg, #595959 53%, #252525 55%); z-index: 4; clip-path: polygon(67% 5%, 88% 30%, 29% 67%, 3% 98%, 13% 65%); border-radius: 0 79% 0 0/0 62% 0 0; } .songoku .e8 { position: absolute; right: 46%; top: 45%; width: 12%; height: 24%; background: radial-gradient(128% 159% at 82% 100%, #595959 62%, #252525 63%) 0 0/228%; -webkit-mask: radial-gradient(128% 159% at 85% 96%, #0000 63%, #000 64%) 0 0/375%; z-index: 4; border-radius: 100% 0 0 0/76% 0 0 0; clip-path: polygon(0 0, 42% 0%, 84% 16%, 91% 27%, 22% 71%, 0 100%); } .songoku .neck-1 { position: absolute; inset: 78% 33.5% 0 36.5%; background: linear-gradient(to bottom left, #0000 47%, var(--t), #0000 52%) 34% 51%/25% 56%, linear-gradient(var(--t) 0 0) 50% 89%/2px 14%, linear-gradient(to bottom left, #0000 48%, var(--t), #0000 51%) 4% 50%/36% 100%, linear-gradient(to bottom right, #0000 48%, var(--t), #0000 51%) 107% 50%/45% 100%, conic-gradient(from -27deg at bottom, #ba6d64 29deg, #0000 31deg) 50% 89%/20% 25%, conic-gradient(from -146deg at 100% 0, var(--m) 23deg, #0000 0) 61% 108%/17% 40%, conic-gradient(from 126deg at 0 0, #e8a690 28deg, #0000 0) 37% 100%/24% 44%, conic-gradient(from 123deg at 0 0, #ba6d64 31deg, #0000 0) 25% 100%/32% 64%, conic-gradient(from -153deg at 100% 0, #e8a690 66deg, #0000 0) 100% 50%/50% 100%, linear-gradient(90deg, #e8a690 50%, var(--m) 0); background-repeat: no-repeat; border-right: 2px solid; border-left: 2px solid; border-image: linear-gradient(var(--t) 64%, #0000 0) 2; transform: perspective(100px) rotateX(9deg); } .songoku .neck-1:before { content: ""; position: absolute; right: 12%; bottom: 5%; width: 16%; height: 45%; background: radial-gradient(123% 71% at 114% -9%, #0000 98%, #e8a690); border-radius: 0 0 0 51%; border-left: 2px solid var(--t); border-top: 2px solid var(--t); clip-path: polygon(0 15%, 100% 10%, 100% 100%, 0 100%); transform: rotate(30deg); transform-origin: bottom left; } .songoku .neck-1:after { content: ""; position: absolute; left: 8%; bottom: 0; height: 52%; width: 14%; background: radial-gradient(98% 70% at 0% 0%, #0000 98%, #ba6d64); border-right: 2px solid var(--t); transform-origin: bottom right; transform: rotate(-19deg); border-radius: 0 0 36% 0; } .songoku .b-neck { position: absolute; inset: 83% 15% -12% 17%; background: linear-gradient(to bottom right, #0000 48%, var(--t), #0000 51%) -2% 59%/30% 50%, linear-gradient(to bottom left, #0000 48%, var(--t), #0000 51%) 93% 57%/19% 48%, linear-gradient(to bottom left, #0000 48%, var(--t), #0000 51%) 96% 57%/24% 48%, conic-gradient(from 47deg at 23% 47%, #e8a690 58deg, #0000 69deg) 21% 0%/28% 100%, conic-gradient(from 63deg at 0 66%, #ba6d64 20deg, #0000 0) 0 0/28% 100%, conic-gradient(from 139deg at 3% 0%, #e8a690 30deg, #0000 36deg) 95% 49%/21% 39%, linear-gradient(90deg, #e8a690 50%, var(--m) 0); background-repeat: no-repeat; border-radius: 50% 50% 0 0/100% 101% 0 0; border: 2px solid var(--t); border-bottom: 0; overflow: hidden; } .songoku .b-neck:before { content: ""; position: absolute; right: 4%; top: 47%; width: 21%; height: 17%; background: #e8a690; border: 1px solid var(--t); border-radius: 50% 50% 0 0; } .songoku .b-neck:after { content: ""; position: absolute; left: 4%; top: 48%; width: 19%; height: 17%; background: #ba6d64; border: 1px solid var(--t); border-radius: 50% 50% 0 0; } .songoku .n1:before { content: ""; position: absolute; left: -18%; height: 14%; bottom: -5%; width: 54%; background: #e8a690; z-index: 3; border-radius: 100% 100% 0 0; border: 1px solid var(--t); border-bottom: 0; } .songoku .n1:after { content: ""; position: absolute; right: -16%; height: 14%; bottom: -6%; width: 52%; background: var(--m); z-index: 3; border-radius: 100% 100% 0 0; border: 1px solid var(--t); border-bottom: 0; } .songoku .cr:before { content: ""; position: absolute; bottom: 0; right: 19%; width: 7%; height: 9.5%; background: radial-gradient(44% 52% at 0 53%, var(--t) 97%, #193768); -webkit-mask: radial-gradient(40% 48% at 0 53%, #0000 96%, #000); border: 2px solid var(--t); border-bottom: 0; border-radius: 37% 52% 0 0; } .songoku .cr:after { content: ""; position: absolute; bottom: -7%; right: 10%; width: 14.5%; height: 15%; background: radial-gradient(37% 53% at 0 18%, var(--t) 96%, #fe6505); -webkit-mask: radial-gradient(35% 52% at 0 18%, #0000 96%, #000); border: 2px solid var(--t); border-bottom: 0; border-radius: 29% 100% 0 0; } .songoku .cl:before { content: ""; position: absolute; bottom: 0; left: 21%; width: 7%; height: 9.5%; background: radial-gradient(44% 52% at 100% 53%, var(--t) 97%, #061b39); -webkit-mask: radial-gradient(40% 48% at 100% 53%, #0000 96%, #000); border: 2px solid var(--t); border-bottom: 0; border-radius: 37% 52% 0 0; } .songoku .cl:after { content: ""; position: absolute; bottom: -7%; left: 11.5%; width: 14.5%; height: 15%; background: radial-gradient(37% 53% at 100% 18%, var(--t) 96%, #c04d00); -webkit-mask: radial-gradient(35% 52% at 100% 18%, #0000 96%, #000); border: 2px solid var(--t); border-bottom: 0; border-radius: 100% 29% 0 0; } .songoku .f { position: absolute; width: 8%; height: 4%; bottom: 1%; left: 46%; z-index: 2; border-radius: 0 0 100% 100%; border-bottom: 2px solid var(--t); box-shadow: 0px 4px 0 #ba6d64; } .songoku .f:before { content: ""; position: absolute; width: 100%; height: 150%; background: var(--m); border-radius: 20% 20% 50% 50%; bottom: 0; transform: translateY(-75%); }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter