Go To #1<div></div> <style> div { width: 200px; height: 200px; background: #b5e0ba; } body { margin: 0; background: #5d3a3a; } </style>

Go To #2<div></div> <div class="r"></div> <div class="r2"></div> <div class="r3"></div> <style> .r { right: 50px; } .r2 { right: 50px; bottom: 50px; } .r3 { bottom: 50px; } div { position: absolute; width: 50px; height: 50px; background: #fdc57b; } body { margin: 50px; background: #62374e; } </style>

Go To #3<div class="c"></div> <div class="b"></div> <div class="a"></div> <style> div.a { z-index: 10; position: absolute; transform: translateX(-50%) translateY(-50%); top: 50%; left: 50%; width: 250px; height: 250px; border-radius: 100%; background: #6592cf; } div.b { z-index: 0; position: absolute; transform: translateX(-50%) translateY(-50%); top: 50%; left: 50%; width: 300px; height: 150px; background: #243d83; } div.c { z-index: 100; border: 50px solid #243d83; position: absolute; transform: translateX(-50%) translateY(-50%); top: 50%; left: 50%; width: 50px; height: 50px; background: #eeb850; border-radius: 100%; } body { margin: 0; background: #6592cf; } </style>

Go To #4<div class="a"></div> <div class="b"></div> <div class="c"></div> <style> .c { position: absolute; top: 150px; left: 50px; width: 100px; height: 100px; background: #f7ec7d; border-radius: 0 0 50% 50%; } .b { position: absolute; top: 150px; left: 250px; width: 100px; height: 100px; background: #f7ec7d; border-radius: 0 0 50% 50%; } .a { position: absolute; top: 50px; left: 150px; width: 100px; height: 100px; background: #f7ec7d; border-radius: 50% 50% 0 0; } body { margin: 0; background: #62306d; } </style>

Go To #5<div class="a"></div> <div class="b"></div> <div class="c"></div> <style> .c { top: 10%; left: 50%; background: #f3ac3c; border-radius: 50%; } .b { z-index: 50; top: 30%; left: 35%; background: #998235; } .a { z-index: 100; top: 50%; left: 20%; background: #f3ac3c; } div { position: absolute; width: 120px; height: 120px; border-radius: 50% 0 50% 50%; } body { margin: 0; background: #0b2429; } </style>

Go To #6<div class="a"></div> <div class="b"></div> <div class="c"></div> <style> .a { top: 50px; left: 100px; background: #51b5a9; border-radius: 100% 0 0 0; } .b { top: 50px; left: 200px; background: #fade8b; border-radius: 0 100% 0 0; } .c { top: 150px; left: 100px; background: #f7f3d7; border-radius: 0 0 0 100%; } div { position: absolute; width: 100px; height: 100px; } body { margin: 0; background: #e3516e; } </style>

Go To #7<div class="a"></div> <div class="b"></div> <div class="c"></div> <style> .c { top: 75px; width: 150px; left: 175px; background: #f3ac3c; } .b { top: 75px; left: 125px; background: #998235; width: 150px; } .a { top: 75px; left: 75px; background: #1a4341; } div { position: absolute; width: 200px; height: 150px; border-radius: 100px 0 100px 0; } body { margin: 0; background: #0b2429; } </style>

Go To #8<div class="f a"></div> <div class="f b"></div> <div class="f c"></div> <div class="f d"></div> <div class="e"></div> <div class="f g"></div> <div class="h a1"></div> <div class="h a2"></div> <div class="h a3"></div> <style> .a1 { left: 150px; } .a2 { left: 190px; } .a3 { left: 230px; } .h { background: #6592cf; position: absolute; width: 20px; height: 160px; border-radius: 0 0 10px 10px; } .e { position: absolute; left: 130px; top: 150px; width: 140px; height: 100px; border-radius: 0 0 75px 75px; } .a { left: 130px; top: 50px; } .b { left: 170px; top: 50px; } .c { left: 210px; top: 50px; } .d { left: 250px; top: 50px; } .g { top: 200px; left: 190px; } .f { position: absolute; width: 20px; height: 110px; border-radius: 10px 10px 0 0; } div { background: #060f55; } body { margin: 0; background: #6592cf; } </style>

Go To #9<div class="center"></div> <div class="diamond"></div> <div class="diamond2"></div> <div class="rect"></div> <style> .rect { z-index: 80; position: absolute; width: 400px; height: 150px; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); background: #4caab3; } .diamond2 { z-index: 85; position: absolute; width: 250px; height: 250px; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%) rotate(45deg); background: #222730; } .diamond { z-index: 90; position: absolute; width: 150px; height: 150px; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%) rotate(45deg); background: #4caab3; } .center { z-index: 100; position: absolute; transform: translateX(-50%) translateY(-50%); top: 50%; left: 50%; width: 50px; height: 50px; border-radius: 100%; background: #393e46; } body { background: #222730; } </style>

Go To #10<div class="circle cm"></div> <div class="circle cr"></div> <div class="circle cl"></div> <div class="bottom"></div> <div class="middle"></div> <style> .bottom { z-index: -1; position: absolute; width: 300px; height: 200px; left: 50px; top: 200px; background: #f7ec7d; } .middle { background: #f7ec7d; z-index: -1; position: absolute; width: 100px; height: 200px; left: 150px; top: 100px; background: #f7ec7d; } .cl { top: 200px; left: 100px; border: 20px solid #aa445f; background: #e38f66; } .cr { top: 200px; left: 300px; border: 20px solid #aa445f; background: #e38f66; } .cm { border: 20px solid #e38f66; background: #aa445f; left: 50%; top: 100px; } .circle { position: absolute; width: 60px; height: 60px; border-radius: 100%; transform: translateX(-50%) translateY(-50%); } body { margin: 0; background: #62306d; } </style>

Go To #11<div class="r center"></div> <div class="y center"></div> <div class="side left"></div> <div class="side right"></div> <style> .left { left: 50px; top: 150px; border-bottom: 20px solid #eca03d; border-top: transparent; border-radius: 0 0 50px 50px; } .right { left: 250px; top: 100px; border-top: 20px solid #eca03d; border-bottom: transparent; border-radius: 50px 50px 0 0; } .side { position: absolute; background: #191210; width: 60px; height: 30px; border-left: 20px solid #eca03d; border-right: 20px solid #eca03d; } .y { z-index: -20; width: 140px; height: 140px; border-radius: 100%; background: #eca03d; } .center { position: absolute; transform: translateX(-50%) translateY(-50%); top: 50%; left: 50%; } .r { width: 50px; height: 50px; border-radius: 100%; background: #84271c; border: 25px solid #191210; } body { background: #191210; margin: 0; } </style>

Go To #12<div class="middle"></div> <div class="right"></div> <div class="left"></div> <div class="r"></div> <div class="l"></div> <style> .r { top: 140px; left: 310px; width: 20px; height: 10px; border-radius: 20px 20px 0 0; background: #d86f45; } .l { top: 140px; left: 70px; width: 20px; height: 10px; border-radius: 20px 20px 0 0; background: #d86f45; } .left { left: 70px; top: 50%; width: 60px; height: 30px; border-bottom: 20px solid #d86f45; border-left: 20px solid #d86f45; border-right: 20px solid #d86f45; border-radius: 0 0 50px 50px; } .right { left: 230px; top: 50%; width: 60px; height: 30px; border-bottom: 20px solid #d86f45; border-left: 20px solid #d86f45; border-right: 20px solid #d86f45; border-radius: 0 0 50px 50px; } .middle { position: absolute; transform: translateX(-50%) translateY(-50%); top: 125px; left: 50%; width: 60px; height: 30px; border-top: 20px solid #d86f45; border-left: 20px solid #d86f45; border-right: 20px solid #d86f45; border-radius: 50px 50px 0 0; } div { position: absolute; } body { margin: 0; background: #f5d6b4; } </style>

Go To #13<div></div> <style> div { position: absolute; width: 100%; height: 100%; clip-path: polygon(141px 0, 0 141px, 0 0); background: #f3ac3c; } body { margin: 0px; background: #0b2429; } </style>

Go To #14<div class="up1"></div> <div class="up2"></div> <div class="down1"></div> <div class="down2"></div> <style> .down1 { z-index: -10; top: 85px; left: 190px; width: 0; height: 0; border-left: 75px solid transparent; border-right: 75px solid transparent; border-bottom: 130px solid #ff6d00; } .down2 { z-index: -9; top: 85px; left: 170px; width: 0; height: 0; border-left: 75px solid transparent; border-right: 75px solid transparent; border-bottom: 130px solid #fd4602; } .up1 { z-index: -9; top: 85px; left: 80px; width: 0; height: 0; border-left: 75px solid transparent; border-right: 75px solid transparent; border-top: 130px solid #fd4602; } .up2 { z-index: -9; top: 85px; left: 60px; width: 0; height: 0; border-left: 75px solid transparent; border-right: 75px solid transparent; border-top: 130px solid #ff6d00; } div { position: absolute; } body { margin: 0; background: #f2f2b6; } </style>

Go To #15<div class="right"></div> <div class="left"> <div class="under"></div> </div> <style> .under { position: absolute; width: 150px; height: 150px; left: 100px; background: #09042a; border-radius: 100%; overflow: hidden; } .left { z-index: 10; transform: translateY(-50%); position: absolute; top: 50%; left: 75px; width: 150px; height: 150px; background: #7b3f61; border-radius: 100%; overflow: hidden; } .right { z-index: -1; transform: translateY(-50%); position: absolute; top: 50%; right: 75px; width: 150px; height: 150px; background: #e78481; border-radius: 100%; } body { margin: 0; background: #09042a; } </style>

Go To #16<div class="eye"></div> <div class="donut"></div> <div class="lid"></div> <style> .donut { z-index: -5; position: absolute; background: #0b2429; transform: translateY(-50%) translateX(-50%); width: 180px; height: 180px; border-radius: 100%; top: 50%; left: 50%; } .lid { z-index: -10; position: absolute; background: #998235; transform: translateY(-50%) translateX(-50%) rotate(45deg); top: 50%; left: 50%; width: 200px; height: 200px; border-radius: 50% 0 50% 0; } .eye { position: absolute; width: 50px; height: 50px; border-radius: 100%; border: 45px solid #f3ac3c; transform: translateY(-50%) translateX(-50%); top: 50%; left: 50%; } body { margin: 0; background: #0b2429; } </style>

Go To #17<div class="dot d1"></div> <div class="dot d2"></div> <div class="pink p1"></div> <div class="pink p2"></div> <div class="connector"></div> <style> .connector { position: absolute; width: 60px; height: 50px; transform: translateX(-50%) translateY(-50%); top: 50%; left: 50%; background: #e78481; } .p2 { left: 220px; } .p1 { left: 100px; } .pink { position: absolute; transform: translateY(-50%); width: 60px; height: 60px; border-radius: 100%; border: 10px solid #e78481; top: 50%; } .d2 { top: 203px; } .d1 { top: 97px; } .dot { z-index: 10; border-radius: 100%; transform: translateX(-50%) translateY(-50%); position: absolute; left: 50%; height: 60px; width: 60px; background: #f5bb9c; border: 10px solid #09042a; } body { background: #09042a; } </style>

Go To #18<div class="shape dark"></div> <div class="shape"></div> <div class="shape dark"></div> <div class="shape"></div> <div class="shape"></div> <div class="shape dark"></div> <div class="shape"></div> <div class="shape dark"></div> <div class="shape dark"></div> <div class="shape"></div> <div class="shape dark"></div> <div class="shape"></div> <style> .shape { margin: 10px; width: 80px; height: 80px; background: #f5d6b4; border-radius: 100% 0 0 0; } .dark { background: #f09462; } body { display: flex; flex-wrap: wrap; margin: 0; background: #5c434c; } </style>

Go To #19<div class="bottom"></div> <div class="left"></div> <div class="right"></div> <style> .left { position: absolute; width: 71px; height: 71px; transform: skew(0, -45deg); background: #998235; top: 80px; left: 129px; } .right { position: absolute; width: 71px; height: 71px; transform: skew(0, 45deg); background: #1a4341; left: 50%; top: 80px; } .bottom { position: absolute; width: 100px; height: 100px; background: #f3ac3c; transform: translateX(-50%) rotate(45deg); top: 135px; left: 50%; } body { margin: 0; background: #0b2429; } </style>

Go To #20<div class="yellow"></div> <div class="orange"></div> <div class="t1"></div> <div class="t2"></div> <div class="t3"></div> <div class="b1"></div> <div class="b2"></div> <div class="b3"></div> <style> div { position: absolute; } .t2 { width: 20px; height: 20px; border-radius: 100%; background: #62306d; top: 90px; left: 230px; } .b2 { width: 20px; height: 20px; border-radius: 100%; background: #62306d; top: 190px; left: 230px; } .t3 { width: 40px; height: 40px; background: #62306d; border-radius: 100%; left: 280px; top: 80px; } .b3 { width: 40px; height: 40px; background: #62306d; border-radius: 100%; left: 280px; top: 180px; } .t1 { width: 40px; height: 40px; background: #62306d; border-radius: 100%; left: 80px; top: 80px; } .b1 { width: 40px; height: 40px; background: #62306d; border-radius: 100%; left: 80px; top: 180px; } .yellow { top: 100px; left: 100px; width: 140px; height: 100px; background: #f7ec7d; } .orange { top: 100px; left: 240px; width: 60px; height: 100px; background: #e38f66; } body { margin: 0; background: #62306d; } </style> <!-- OBJECTIVE --> <!-- Write HTML/CSS in this editor and replicate the given target image in the least code possible. What you write here, renders as it is --> <!-- SCORING --> <!-- The score is calculated based on the number of characters you use (this comment included :P) and how close you replicate the image. Read the FAQS (https://cssbattle.dev/faqs) for more info. --> <!-- IMPORTANT: remove the comments before submitting -->

Go To #21<div> <span></span> <span></span> <span></span> <span></span> </div> <style> span { position: absolute; } span:nth-of-type(1) { background: #f2994a; width: 100px; height: 30px; border-radius: 10px 0 0; } span:nth-of-type(2) { width: 30px; height: 80px; background: #f2994a; border-radius: 10px 0 5px; } span:nth-of-type(3) { width: 100px; height: 30px; bottom: 0; right: 0; border-radius: 0 0 10px; background: #2d9cdb; } span:nth-of-type(4) { width: 30px; height: 80px; bottom: 0; right: 0; border-radius: 5px 0 10px; background: #2d9cdb; } div { position: absolute; transform: translateX(-50%) translateY(-50%) rotate(-45deg); top: 50%; left: 50%; width: 82px; height: 130px; } body { margin: 0; background: #222; } </style>

Go To #22<div class="circle1"></div> <div class="circle2"></div> <div class="circle3"></div> <div class="color"></div> <style> .color { width: 120px; height: 50px; background: #d86f45; top: 165px; left: 157px; } .circle1 { width: 50px; height: 50px; background: #d86f45; border-radius: 100%; top: 165px; left: 250px; } .circle2 { width: 100px; height: 100px; background: #d86f45; border-radius: 100%; top: 85px; left: 180px; } .circle3 { width: 100px; height: 100px; background: #d86f45; border-radius: 100%; top: 115px; left: 100px; } div { position: absolute; } body { background: #f5d6b4; margin: 0; } </style>

Go To #23<div class="top"></div> <div class="right"></div> <div class="l1"></div> <div class="l2"></div> <style> div { position: absolute; } .top { top: 50px; left: 100px; width: 200px; height: 100px; background: #1a4341; } .right { width: 100px; height: 100px; background: #1a4341; top: 50%; left: 50%; } .l1 { left: 100px; top: 50%; height: 50px; width: 100px; background: #998235; } .l2 { left: 100px; top: 50%; height: 100px; width: 50px; background: #998235; } body { background: #f3ac3c; margin: 0; } </style>

Go To #24<div class="yellow"></div> <div class="yellow y2"></div> <div class="left"></div> <div class="right"></div> <style> .left { background: #aa445f; bottom: 50%; width: 100px; height: 100px; left: 80px; border-radius: 50% 50% 0 0; } .right { background: #e38f66; top: 50%; background: #e38f66; width: 100px; height: 100px; right: 80px; border-radius: 0 0 50% 50%; } .yellow { z-index: 10; width: 100px; height: 100px; border-radius: 100%; background: #f7ec7d; top: 100px; left: 80px; } .y2 { left: 220px; } div { position: absolute; } body { margin: 0; background: #62306d; } </style>

Go To #25<div class="tl"></div> <div class="bl"></div> <div class="t2"></div> <div class="b2"></div> <style> .t2 { height: 60px; width: 80px; border-radius: 50px 0 50px 0; background: #f3ac3c; top: 60px; right: 110px; } .b2 { height: 100px; width: 80px; border-radius: 50px 0 50px 0; background: #1a4341; bottom: 60px; right: 110px; } .bl { left: 110px; bottom: 60px; background: #f3ac3c; height: 60px; width: 80px; border-radius: 0 50px 0 50px; } .tl { width: 80px; height: 100px; background: #1a4341; border-radius: 0 50px 0 50px; top: 60px; left: 110px; } div { position: absolute; } body { background: #998235; margin: 0; } </style>

Go To #26<div class="top l"></div> <div class="top r"></div> <div class="bottom"></div> <style> div { position: absolute; } .l { top: 40px; left: 40px; } .r { top: 40px; right: 40px; } .top { width: 80px; height: 40px; border-radius: 80px 80px 0 0; border-top: 20px solid #060f55; border-left: 20px solid #060f55; border-right: 20px solid #060f55; } .bottom { width: 80px; height: 40px; border-radius: 0 0 80px 80px; border-bottom: 20px solid #060f55; border-left: 20px solid #060f55; border-right: 20px solid #060f55; bottom: 40px; left: 140px; } body { background: #6592cf; margin: 0; } </style>

Go To #27<div></div> <style> div { position: absolute; width: 80px; height: 80px; background: #aa445f; border-radius: 100%; border-top: 30px solid #f7ec7d; border-left: 30px solid transparent; border-right: 30px solid transparent; border-bottom: 30px solid #f7ec7d; transform: translateX(-50%) translateY(-50%) rotate(45deg); top: 50%; left: 50%; box-shadow: 0 0 0 30px #aa445f; } body { background: #e38f66; margin: 0; } </style>

Go To #28<div> <span class="c2"></span> <span class="c1"></span> <span class="c2"></span> <span class="c1"></span> <span class="c1"></span> <span class="c2"></span> <span class="c1"></span> <span class="c2"></span> </div> <style> span:nth-child(1) { border-radius: 100%; } span:nth-child(2) { border-radius: 100% 100% 0 0; left: 70px; } span:nth-child(3) { border-radius: 100% 100% 0 0; right: 70px; } span:nth-child(4) { border-radius: 100%; right: 0; } span:nth-child(5) { border-radius: 0 0 100% 100%; bottom: 0; } span:nth-child(6) { border-radius: 100%; bottom: 0; left: 70px; } span:nth-child(7) { border-radius: 100%; bottom: 0; right: 70px; } span:nth-child(8) { border-radius: 0 0 100% 100%; bottom: 0; right: 0; } div { z-index: -1; position: relative; left: 70px; top: 90px; width: 260px; height: 120px; } span { position: absolute; height: 50px; width: 50px; } .c1 { background: #f3ac3c; } .c2 { background: #998235; } body { background: #1a4341; margin: 0; } </style>

Go To #29<div class="a"></div> <div class="b"></div> <div class="c"></div> <div class="d"></div> <style> .a { border-radius: 0 0 100px; } .b { border-radius: 0 0 0 100px; right: 0; } .c { border-radius: 100px 0 0; right: 0; bottom: 0; } .d { bottom: 0; border-radius: 0 100px 0 0; } div { position: absolute; width: 200px; height: 150px; background: #f3ac3c; } body { margin: 0; background: #1a4341; } </style>

Go To #30<div class="a"></div> <div class="b"></div> <div class="c"></div> <style> .a { height: 50px; background: #f7ec7d; } .b { height: 50px; background: #e38f66; } .c { height: 100px; background: #aa445f; } body { margin: 0; background: #62306d; } </style>

Go To #31<div class="l"></div> <div class="r"></div> <style> .l { width: 100px; height: 200px; background: #f7ec7d; top: 50px; left: 75px; border-radius: 100px 0 0 100px; } .r { width: 100px; height: 200px; background: #e38f66; top: 50px; right: 75px; border-radius: 0 100px 100px 0; } div { position: absolute; } body { margin: 0; background: #aa445f; } </style>

Go To #32<div> <span class="mid"></span> <span class="orng"></span> <span class="grn"></span> </div> <style> .grn { background: #a3a368; height: 200px; width: 50px; } .orng { background: #f3ac3c; height: 50px; width: 200px; } .mid { z-index: 10; width: 50px; height: 50px; background: #fbe18c; } span { position: absolute; transform: translateX(-50%) translateY(-50%); top: 50%; left: 50%; } div { position: absolute; width: 200px; height: 200px; transform: translateX(-50%) translateY(-50%) rotate(45deg); top: 50%; left: 50%; } body { margin: 0; } </style>

Go To #33<div class="grn"></div> <div class="yellow"></div> <div class="dark"></div> <style> div { position: absolute; } .dark { background: #0b2429; width: 30px; height: 30px; border-radius: 100%; top: 105px; left: 155px; } .yellow { bottom: 50%; width: 100px; height: 100px; background: #f3ac3c; left: 50%; border-radius: 0 100px 0 0; } .grn { background: #998235; width: 75px; height: 150px; right: 50%; top: 75px; border-radius: 75px 0 0 75px; } body { margin: 0; background: #1a4341; } </style>

Go To #34<div class="b"></div> <div class="t"></div> <div class="m"></div> <style> .b { z-index: -1; bottom: 50px; border-bottom: 100px solid #00a79d; border-left: 125px solid transparent; border-right: 125px solid transparent; } .m { z-index: 0; bottom: 100px; border-bottom: 100px solid #f5c181; border-left: 125px solid transparent; border-right: 125px solid transparent; } .t { z-index: 1; bottom: 150px; border-bottom: 100px solid #ffeecf; border-left: 125px solid transparent; border-right: 125px solid transparent; } div { transform: translateX(-50%); left: 50%; position: absolute; width: 0; height: 0; } body { margin: 0; background: #007065; } </style>

Go To #35<div class="stick"></div> <div class="sugar"></div> <style> div { position: absolute; transform: translateX(-50%); left: 50%; } .sugar { bottom: 100px; background: #fff1c1; height: 150px; width: 100px; border-radius: 50px 50px 20px 20px; } .stick { background: #fe5f55; width: 30px; height: 40px; border-radius: 0 0 10px 10px; border-top: 10px solid #a64942; bottom: 50px; } body { margin: 0; background: #293462; } </style>

Go To #36<div class="up a"></div> <div class="up b"></div> <div class="up c"></div> <div class="down d"></div> <div class="down e"></div> <style> div { position: absolute; } .up { bottom: 0; width: 50px; height: 200px; border-radius: 50px 50px 0 0; background: #f3ac3c; } .down { top: 0; width: 50px; height: 200px; border-radius: 0 0 50px 50px; background: #998235; } .a { left: 25px; } .b { right: 25px; } .c { left: 175px; } .d { left: 100px; } .e { right: 100px; } body { margin: 0; background: #1a4341; } </style>

Go To #37<div class="a"></div> <div class="b"></div> <div class="c"></div> <style> div { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .a { background: #243d83; width: 250px; height: 250px; } .b { background: #6592cf; width: 150px; height: 150px; transform: translate(-50%, -50%) rotate(15deg); } .c { background: #243d83; width: 75px; height: 75px; transform: translate(-50%, -50%) rotate(30deg); } body { background: #6592cf; margin: 0; } </style>

Go To #38<div class="main"><div class="right"></div></div> <div class="bottom"></div> <style> .main { width: 200px; height: 200px; background: #fff1c1; } body { margin: 0; background: #293462; } .bottom { background: #fe5f55; width: 150px; height: 100px; border-right: 50px solid #a64942; } .right { position: absolute; left: 50%; background: #fe5f55; width: 100px; height: 150px; border-bottom: 50px solid #a64942; } </style>

Go To #39<div class="grn"></div> <div class="container outer"> <div class="yellow"></div> <div class="container"> <div class="yellow"></div> </div> </div> <style> body { margin: 0; background: #1a4341; } div { position: absolute; } .grn { width: 200px; height: 200px; background: #998235; transform: translate(-50%, -50%); top: 50%; left: 50%; border-radius: 100%; } .container { transform: translate(-50%, -50%); top: 50%; left: 50%; width: 300px; height: 20px; background: #1a4341; border: 20px solid #1a4341; overflow: hidden; } .outer { height: 100px; } .yellow { background: #f3ac3c; transform: translate(-50%, -50%); top: 50%; left: 50%; border-radius: 100%; width: 250px; height: 250px; } </style>

Go To #40<div class="center"></div> <div class="left"></div> <style> body { background: #6592cf; margin: 0; } div { position: absolute; } .center { width: 100px; height: 100px; border-radius: 100%; transform: translate(-50%, -50%) rotate(45deg); top: 50%; left: 50%; border: 50px solid #243d83; border-left: 50px solid transparent; } .left { top: 50px; left: 100px; width: 50px; height: 100px; background: #243d83; } </style>

Go To #41<div class="bl"></div> <div class="br"></div> <div class="ml"></div> <div class="mr"></div> <div class="dot a"></div> <div class="dot b"></div> <style> body { margin: 0; background: #293462; } div { position: absolute; } .dot { top: 140px; width: 30px; height: 30px; border-radius: 100%; background: #293462; } .a { right: 205px; } .b { left: 205px; } .mr { z-index: -1; background: #fe5f55; left: 50%; bottom: 0; width: 50px; height: 220px; border-radius: 40px 0 0 0; } .ml { z-index: -1; background: #fe5f55; right: 50%; bottom: 0; width: 50px; height: 220px; border-radius: 0 40px 0 0; } .bl { position: absolute; bottom: 0; width: 50%; height: 120px; background: #293462; border-radius: 0 40px 0 0; } .br { position: absolute; bottom: 0; right: 0; width: 50%; height: 120px; background: #293462; border-radius: 40px 0 0; } </style>

Go To #42<div class="main"> <div class="hair"></div> <div class="hair r"></div> <div class="eye"></div> <div class="eye r2"></div> <div class="mouth"></div> </div> <style> body { margin: 0; background: #293462; } div { position: absolute; background: #fff1c1; } .mouth { width: 40px; height: 10px; bottom: 20px; left: 80px; border-radius: 10px; } .eye { width: 60px; height: 60px; top: 90px; border-radius: 100%; left: 20px; } .hair { width: 100px; height: 100px; border-radius: 100%; top: -50px; } .r { right: 0; } .r2 { left: 120px; } .main { transform: translate(-50%, -50%); top: 50%; left: 50%; width: 200px; height: 200px; background: #fe5f55; border-radius: 100px 100px 50px 50px; overflow: hidden; } </style>

Go To #43<div class="l"></div> <div class="r"></div> <style> body { background: #6592cf; margin: 0; } div { position: absolute; top: 30px; width: 40px; height: 182px; border: 30px solid #243d83; } .l { left: 145px; border-radius: 0 70px 70px 0; border-left: transparent; } .r { right: 145px; border-radius: 70px 0 0 70px; border-right: transparent; } </style>

Go To #44<div class="container b"> <div class="yellow"></div> <div class="container m"> <div class="yellow"></div> <div class="container"> <div class="yellow"></div> </div> </div> </div> <div class="left"></div> <div class="right"></div> <style> body { background: #1a4341; margin: 0; } .container { overflow: hidden; border-top: 20px solid #1a4341; border-bottom: 20px solid #1a4341; height: 20px; width: 300px; } .b { height: 100%; } .m { height: 100px; } div { position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; } .yellow { width: 200px; height: 180px; background: #f3ac3c; } .left { width: 300px; height: 300px; border-radius: 100%; left: 0; background: #1a4341; } .right { width: 300px; height: 300px; border-radius: 100%; left: 400px; background: #1a4341; } </style>

Go To #45<div class="bgl"></div> <div class="bgr"></div> <div class="mid"></div> <div class="tbl"></div> <div class="tbr"></div> <div class="l"></div> <div class="r"></div> <style> body { background: #f3ac3c; margin: 0; } div { position: absolute; } .l { height: 300px; width: 65px; background: #1a4341; } .r { height: 300px; width: 65px; background: #1a4341; right: 0; } .tbl { background: #1a4341; width: 30px; height: 120px; right: 215px; border-left: 30px solid #998235; border-bottom: 30px solid #998235; } .tbl:before { background: none; z-index: -1; border: 30px solid #1a4341; content: ""; display: block; position: absolute; top: 0px; left: -60px; right: 0px; bottom: -60px; } .tbr { background: #1a4341; width: 30px; height: 120px; left: 215px; border-right: 30px solid #998235; border-bottom: 30px solid #998235; } .tbr:before { background: none; z-index: -1; border: 30px solid #1a4341; content: ""; display: block; position: absolute; top: 0px; left: 0px; right: -60px; bottom: -60px; } .bgl { left: 65px; bottom: 0; width: 120px; height: 30px; background: #998235; border-top: 30px solid #1a4341; border-bottom: 30px solid #1a4341; } .bgr { right: 65px; bottom: 0; width: 120px; height: 30px; background: #998235; border-top: 30px solid #1a4341; border-bottom: 30px solid #1a4341; } </style>

Go To #46<div class="circle"> <div class="mtn1"></div> <div class="mtn2"></div> </div> <style> body { background: #293462; margin: 0; } div { position: absolute; } .circle { transform: translate(-50%, -50%) rotate(45deg); top: 50%; left: 50%; width: 200px; height: 200px; border-radius: 100%; background: #fff1c1; overflow: hidden; } .mtn1 { width: 50%; height: 159px; bottom: 0; right: 0; background: #fe5f55; } .mtn2 { width: 60px; height: 30px; bottom: 0; left: 70px; background: #fe5f55; } </style>

Go To #47<div class="c cc"></div> <div class="r"></div> <div class="r2"></div> <div class="r3"></div> <div class="a1"></div> <div class="a2"></div> <div class="a3"></div> <style> body { background: #1a4341; margin: 0; } div { position: absolute; } .a1 { width: 30px; height: 30px; background: #998235; border-radius: 100%; top: 120px; left: 170px; } .a2 { width: 20px; height: 20px; background: #998235; border-radius: 100%; top: 165px; right: 190px; } .a3 { width: 10px; height: 10px; background: #998235; border-radius: 100%; top: 120px; right: 170px; } .c { transform: translate(-50%, -50%); background: #f3ac3c; width: 100px; height: 100px; border-radius: 100%; top: 50%; left: 50%; } .r { transform: translate(-50%, -100px); background: #f3ac3c; width: 10px; height: 180px; top: 50%; left: 50%; border-radius: 5px; } .r2 { background: #f3ac3c; height: 180px; width: 10px; border-radius: 5px; top: 55px; left: 204px; transform: rotate(60deg); } .r3 { background: #f3ac3c; height: 180px; width: 10px; border-radius: 5px; top: 65px; left: 204px; transform: rotate(120deg); } </style>

Go To #48<div class="container"> <div class="middle"></div> </div> <style> body { background: #293462; margin: 0; } .container { position: absolute; top: 90px; left: 100px; width: 200px; height: 100px; overflow: hidden; border-radius: 20px; box-shadow: 0 20px #a64942; } .middle { position: absolute; width: 140px; height: 40px; background: #a64942; border-radius: 100px; transform: translate(-50%, -50%); top: 50%; left: 50%; border: 50px solid #fe5f55; } </style>

Go To #49<div class="door"></div> <div class="window"></div> <div class="roof"></div> <div class="home"></div> <style> body { background: #6592cf; margin: 0; } div { position: absolute; } .door { z-index: 100; bottom: 50px; left: 175px; width: 50px; height: 50px; background: #eeb850; border-radius: 10px 10px 0 0; } .window { z-index: 100; height: 10px; width: 100px; top: 145px; left: 150px; background: #eeb850; border-radius: 5px; } .home { bottom: 50px; left: 125px; width: 150px; height: 100px; background: #243d83; border-radius: 0 0 10px 10px; } .roof { bottom: 150px; left: 100px; width: 0; height: 0; border-bottom: 100px solid #243d83; border-left: 100px solid transparent; border-right: 100px solid transparent; } </style>

Go To #50<div class="bottom"></div> <div class="swirl-1"></div> <div class="swirl-2"></div> <div class="top"></div> <div class="cap"></div> <div class="straw"></div> <div class="pump"></div> <div class="spout"></div> <div class="drop1"></div> <div class="drop2"></div> <style> body { background: #1a4341; margin: 0; } div { position: absolute; } .drop1 { left: 280px; top: 100px; width: 20px; height: 20px; border-radius: 100%; background: #998235; } .drop2 { left: 280px; top: 130px; width: 20px; height: 20px; border-radius: 100%; background: #998235; } .spout { top: 50px; left: 280px; width: 20px; height: 40px; background: #f3ac3c; border-radius: 20px; } .pump { top: 50px; left: 150px; width: 150px; height: 20px; background: #f3ac3c; border-radius: 20px; } .straw { top: 70px; left: 190px; width: 20px; height: 20px; background: #f3ac3c; } .cap { top: 90px; left: 175px; height: 20px; width: 50px; background: #f3ac3c; border-radius: 10px 10px 0 0; } .top { z-index: -10; top: 110px; left: 150px; width: 100px; height: 100px; background: #f3ac3c; border-radius: 20px 20px 0 0; } .swirl-2 { z-index: 1; top: 140px; left: 200px; height: 50px; width: 50px; background: #f3ac3c; border-radius: 0 0 50px 50px; } .swirl-1 { bottom: 110px; left: 150px; height: 50px; width: 50px; background: #998235; border-radius: 50px 50px 0 0; } .bottom { bottom: 50px; left: 150px; height: 90px; width: 100px; background: #998235; border-radius: 0 0 20px 20px; } </style>

Go To #51<div class="mask"></div> <div class="strapl"></div> <div class="strapr"></div> <div class="line1"></div> <div class="line2"></div> <div class="dot"></div> <style> body { background: #293462; margin: 0; } div { position: absolute; } .mask { background: #fff1c1; width: 150px; height: 100px; border-radius: 0 0 50px 50px; top: 100px; left: 125px; } .strapl { top: 100px; right: 265px; width: 60px; height: 40px; border-radius: 50px 0 0 50px; border: 10px solid #fff1c1; border-right: none; } .strapr { top: 100px; left: 265px; width: 60px; height: 40px; border: 10px solid #fff1c1; border-radius: 0 50px 50px 0; border-left: none; } .dot { background: #fe5f55; width: 40px; height: 40px; border-radius: 100%; top: 140px; left: 215px; } .line1 { background: #fe5f55; width: 40px; height: 10px; border-radius: 10px; top: 140px; left: 145px; } .line2 { background: #fe5f55; width: 40px; height: 10px; border-radius: 10px; top: 120px; left: 145px; } </style>

Go To #52<div class="person p1"></div> <div class="person p2"></div> <div class="person p3"></div> <div class="person p4"></div> <div class="person p5"></div> <div class="person p6"></div> <div class="person p7"></div> <div class="y1"></div> <div class="y2"></div> <div class="y3"></div> <style> body { background: #6592cf; margin: 0; } div { position: absolute; } .y1 { width: 40px; height: 40px; background: #eeb850; border-radius: 100%; bottom: 140px; left: 30px; } .y2 { width: 40px; height: 40px; background: #eeb850; border-radius: 100%; bottom: 140px; left: 120px; } .y3 { width: 60px; height: 60px; background: #eeb850; border-radius: 100%; bottom: 140px; left: 65px; } .person { z-index: 1; position: absolute; height: 50px; width: 10px; background: #243d83; bottom: 110px; } .person::before { z-index: 1; content: " "; transform: translate(-5px, -50%); display: inline-block; width: 20px; height: 20px; border-radius: 100%; background: #243d83; } .p1 { left: 45px; } .p2 { left: 90px; } .p3 { left: 135px; } .p4 { left: 210px; } .p5 { left: 255px; } .p6 { left: 300px; } .p7 { left: 345px; } </style>

Go To #53<div class="circle"> <div class="inner"></div> </div> <div class="line"></div> <style> body { background: #19191a; margin: 0; } div { position: absolute; } .circle { width: 150px; height: 150px; border-radius: 100%; overflow: hidden; background: #4f77ff; transform: translateX(-50%); top: 50px; left: 50%; } .inner { width: 75px; height: 75px; background: #9ad5ff; bottom: 0; left: 0; } .line { width: 75px; height: 120px; background: #f9e492; z-index: -1; bottom: 50px; right: 50%; } </style>

Go To #54<div class="f1"></div> <div class="f2"></div> <div class="f3"></div> <div class="f4"></div> <div class="thumb"></div> <div class="wrist"></div> <div class="palm"></div> <style> body { margin: 0; background: #f9e492; } div { background: #191919; position: absolute; } .thumb { z-index: 1; height: 65px; width: 20px; border-radius: 20px; transform: rotate(60deg); top: 104px; left: 152px; border: 5px solid #f9e492; } .f3 { height: 45px; width: 20px; border-radius: 10px; left: 205px; top: 88px; } .f1 { height: 45px; width: 20px; border-radius: 10px; left: 155px; top: 88px; } .f2 { height: 55px; width: 20px; border-radius: 10px; left: 180px; top: 78px; } .f4 { height: 35px; width: 20px; border-radius: 10px; left: 230px; top: 98px; } .wrist { width: 50px; height: 77px; bottom: 77px; left: 175px; border-radius: 0 0 10px 10px; } .palm { z-index: -1; width: 100px; height: 40px; bottom: 122px; left: 150px; border-radius: 0 0 10px 10px; } </style>

Go To #55<div class="bl"></div> <div class="br"></div> <div class="yl"></div> <div class="yr"></div> <style> body { margin: 0; background: #191919; } div { position: absolute; } .yl { bottom: 50%; right: 50%; width: 100px; height: 50px; background: #f9e492; border-radius: 100px 100px 0 0; } .yr { width: 100px; height: 50px; background: #f9e492; left: 50%; top: 50%; border-radius: 0 0 100px 100px; } .br { bottom: 50%; left: 50%; width: 50px; height: 100px; background: #4f77ff; border-radius: 0 100px 100px 0; } .bl { top: 50%; right: 50%; width: 50px; height: 100px; background: #4f77ff; border-radius: 100px 0 0 100px; } </style>

Go To #56<div class="nose"></div> <div class="eyer"></div> <div class="eyel"></div> <div class="head"></div> <div class="jaw"></div> <div class="t1"></div> <div class="t2"></div> <div class="t3"></div> <style> body { margin: 0; background: #191919; } div { position: absolute; } .t1 { width: 10px; height: 30px; background: #191919; border-radius: 10px; top: 205px; left: 180px; } .t2 { width: 10px; height: 30px; background: #191919; border-radius: 10px; top: 205px; left: 195px; } .t3 { width: 10px; height: 30px; background: #191919; border-radius: 10px; top: 205px; left: 210px; } .eyel { width: 40px; height: 40px; background: #191919; border-radius: 100%; top: 138px; left: 155px; } .eyer { width: 40px; height: 40px; background: #191919; border-radius: 100%; top: 138px; right: 155px; } .head { z-index: -1; transform: translateX(-50%); left: 50%; bottom: 115px; width: 120px; height: 100px; background: #4f77ff; border-radius: 110px 110px 20px 20px; } .jaw { z-index: -1; transform: translateX(-50%); left: 50%; background: #4f77ff; bottom: 85px; width: 80px; height: 40px; border-radius: 0 0 20px 20px; } .nose { background: #191919; width: 20px; height: 20px; border-radius: 100%; top: 176px; transform: translateX(-50%); left: 50%; } </style>

Go To #57<div class="corner"><div class="dot"></div></div> <div class="corner a"><div class="dot"></div></div> <div class="corner b"><div class="dot"></div></div> <div class="corner c"><div class="dot"></div></div> <div class="center"></div> <style> body { background: #191919; margin: 0; } div { position: absolute; } .center { transform: translate(-50%, -50%); top: 50%; left: 50%; width: 110px; height: 110px; z-index: -10; background: #4f77ff; } .dot { width: 30px; height: 30px; background: #4f77ff; border-radius: 100%; box-shadow: 0.5rem 0.5rem 0 7.5px #f9e492, 15px 15px 0 15px #191919; top: 75px; left: 125px; } .corner { width: 200px; height: 50%; } .a { transform: rotate(180deg); right: 0; bottom: 0; } .b { transform: rotateY(180deg); right: 0; } .c { transform: rotateX(180deg); bottom: 0; } </style>

Go To #58<div class="f1"></div> <div class="f2"></div> <div class="f3"></div> <div class="f4"></div> <div class="stem"></div> <div class="bump"></div> <style> body { margin: 0; background: #191919; } div { position: absolute; transform: translateX(-50%); left: 50%; } .f1 { z-index: 100; width: 30px; height: 30px; border-radius: 100%; background: #4f77ff; top: 35px; border: 10px solid #191919; } .f2 { z-index: 90; background: #4f77ff; width: 100px; height: 30px; top: 55px; border-radius: 15px 15px 35px 35px; border: 10px solid #191919; } .f3 { z-index: 80; background: #4f77ff; width: 140px; height: 30px; border: 10px solid #191919; top: 75px; border-radius: 15px 15px 35px 35px; } .f4 { background: #4f77ff; width: 100px; height: 50px; top: 115px; border-radius: 0 0 50px 50px; } .stem { width: 20px; height: 75px; background: #f9e492; border-radius: 0 0 20px 20px; bottom: 45px; } .bump { z-index: -10; background: #f9e492; width: 40px; height: 40px; border-radius: 100%; top: 145px; } </style>

Go To #59<div class="line1"></div> <div class="line2"></div> <div class="line3"></div> <div class="center"></div> <div class="r"></div> <div class="l"></div> <div class="m"></div> <style> body { margin: 0; background: #191919; } div { position: absolute; } .center { z-index: -100; background: #4f77ff; transform: translate(-50%, -50%); top: 50%; left: 50%; width: 150px; height: 150px; border-radius: 100%; } .m { transform: translatex(-50%); left: 50%; width: 10px; height: 300px; background: #191919; } .r { transform: translateY(-50%); top: 50%; left: 35px; height: 190px; width: 190px; border-radius: 100%; border: 10px solid #191919; } .l { transform: translateY(-50%); top: 50%; right: 35px; height: 190px; width: 190px; border-radius: 100%; border: 10px solid #191919; } .line1 { background: #191919; width: 300px; height: 10px; top: 145px; } .line2 { background: #191919; width: 300px; height: 10px; top: 105px; } .line3 { background: #191919; width: 300px; height: 10px; top: 185px; } </style>

Go To #60<div class="box"> <div class="t l"></div> <div class="t r"></div> <div class="t b l"></div> <div class="t b r"></div> <div class="t2"></div> <div class="t2 c"></div> <div class="t2 d"></div> </div> <style> body { margin: 0; background: #191919; } div { position: absolute; } .box { width: 200px; height: 150px; transform: translate(-50%, -50%); top: 50%; left: 50%; overflow: hidden; } .t { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 50px solid #4f77ff; } .t2 { width: 0; height: 0; bottom: 50px; left: 50px; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 50px solid #4f77ff; } .c { left: -50px; } .d { left: 150px; } .l { right: 50%; } .r { left: 50%; } .b { bottom: 0; } </style>

Go To #61<div class="box v"> <div class="l"></div> <div class="r"></div> <div class="c v"></div> <div class="top v"></div> <div class="mid v"></div> </div> <div class="lineb v"></div> <div class="linet v"></div> <style> body { margin: 0; background: #191919; } div { position: absolute; } .top { width: 30px; height: 20px; top: 66px; border: 10px solid #5dbcf9; } .mid { width: 80px; height: 50px; top: 96px; border: 10px solid #5dbcf9; border-bottom: none; } .l { width: 80px; height: 80px; border: 10px solid #5dbcf9; border-bottom: none; border-right: none; transform: rotate(-30deg); left: 139px; top: 142px; } .r { width: 80px; height: 80px; border: 10px solid #5dbcf9; border-bottom: none; border-left: none; transform: rotate(30deg); right: 139px; top: 142px; } .c { height: 60px; width: 10px; bottom: 0; background: #5dbcf9; } .box { width: 100%; height: 194px; overflow: hidden; } .lineb { background: #5dbcf9; width: 110px; height: 10px; bottom: 66px; } .linet { background: #5dbcf9; width: 200px; height: 10px; bottom: 86px; } .v { transform: translateX(-50%); left: 50%; } </style>

Go To #62<div class="window"> <div class="l"></div> <div class="r"></div> <div class="sun"></div> </div> <style> body { background: #191919; margin: 0; } div { position: absolute; } .window { width: 150px; height: 200px; background: #f2ad43; transform: translate(-50%, -50%); top: 50%; left: 50%; border-radius: 100px 100px 26px 26px; overflow: hidden; } .l { z-index: 2; background: #e08027; transform: translate(-50%, -50%); top: 100%; width: 200px; height: 200px; border-radius: 100%; } .r { z-index: 3; background: #824b20; transform: translate(-50%, -50%); top: 100%; left: 100%; width: 200px; height: 200px; border-radius: 100%; } .sun { z-index: 1; background: #fff58f; height: 60px; width: 60px; transform: translate(-50%); top: 90px; left: 50%; border-radius: 100%; } </style>

Go To #63<div class="box tl"> <div class="circle"></div> </div> <div class="box tr"> <div class="circle"></div> </div> <div class="box bl"> <div class="circle"></div> </div> <div class="box br"> <div class="circle"></div> </div> <div class="mid"></div> <style> body { margin: 0; background: #191919; } div { position: absolute; } .mid { transform: translate(-50%, -50%); top: 149px; left: 201px; border: 10px solid #5dbcf9; width: 50px; height: 50px; } .box { width: 50%; height: 50%; } .circle { width: 50px; height: 50px; border-radius: 50px 50px 0 50px; border: 10px solid #5dbcf9; bottom: 26px; right: 24px; } .tl { right: 50%; } .tr { left: 202px; transform: rotateY(180deg); } .br { left: 202px; transform: rotate(180deg); bottom: 2px; } .bl { transform: rotateX(180deg); bottom: 2px; } </style>

Go To #64<div class="back"></div> <div class="middle"></div> <div class="smile"></div> <div class="cheekl"></div> <div class="cheekr"></div> <style> body { margin: 0; background: #191919; } div { position: absolute; } .back { z-index: -2; transform: translate(-50%, -50%); width: 160px; height: 160px; background: #824b20; top: 50%; left: 50%; border-radius: 100%; } .middle { z-index: -1; transform: translate(-50%, -50%); width: 100px; height: 100px; background: #e08027; top: 50%; left: 50%; border-radius: 100%; } .smile { transform: translateX(-50%); left: 50%; width: 80px; height: 40px; top: 50%; border-radius: 0 0 60px 60px; border: 20px solid #fff58f; border-top: none; } .cheekl { width: 20px; height: 10px; background: #fff58f; border-radius: 10px 10px 0 0; bottom: 50%; left: 140px; } .cheekr { width: 20px; height: 10px; background: #fff58f; border-radius: 10px 10px 0 0; bottom: 50%; right: 140px; } </style>

Go To #65<div class="left"> <div class="triangle"></div> <div class="head"></div> </div> <div class="a xy"></div> <div class="b xy"></div> <div class="c xy"></div> <style> body { background: #191919; margin: 0; } div { position: absolute; } .xy { z-index: -100; transform: translate(-50%, -50%); left: 225px; top: 50%; border-radius: 100%; } .a { width: 80px; height: 80px; border: 10px solid #5dbcf9; } .b { width: 130px; height: 130px; border: 10px solid #5dbcf9; } .c { width: 180px; height: 180px; border: 10px solid #5dbcf9; } .triangle { width: 0px; height: 0px; right: 0px; border-top: 100px solid transparent; border-bottom: 100px solid transparent; border-right: 100px solid #5dbcf9; transform: translateY(-50%); top: 50%; } .head { transform: translate(-50%, -50%); width: 50px; height: 50px; top: 50%; left: 50%; background: #5dbcf9; border-radius: 10px 0 0 10px; } .left { width: 50%; height: 100%; background: #191919; overflow: hidden; border-right: 25px solid #191919; } </style>

Go To #66<div class="container"> <div class="tl"></div> <div class="tr"></div> <div class="bl"></div> <div class="br"></div> <div class="topbar"></div> <div class="ear1"></div> <div class="ear2"></div> <div class="head"></div> </div> <style> div { position: absolute; background: #191919; } body { background: #191919; margin: 0; } .topbar { transform: translateX(-50%); left: 50%; width: 80px; height: 30px; border-radius: 0 0 10px 10px; } .head { transform: translateX(-50%); left: 50%; width: 20px; height: 20px; background: #f2ad43; top: 10px; } .ear1 { width: 10px; height: 10px; background: #f2ad43; border-radius: 100%; left: 105px; top: 5px; } .ear2 { width: 10px; height: 10px; background: #f2ad43; border-radius: 100%; right: 105px; top: 5px; } .tl { width: 100px; height: 100px; border-radius: 100%; left: -55px; } .tr { width: 100px; height: 100px; border-radius: 100%; right: -55px; } .br { width: 200px; height: 200px; border-radius: 100%; bottom: -180px; left: -40px; } .bl { width: 200px; height: 200px; border-radius: 100%; bottom: -180px; right: -40px; } .container { transform: translateX(-50%); background: #f2ad43; width: 240px; height: 80px; top: 100px; left: 50%; } </style>

Go To #67<div class="reel"> <div class="frame"></div> <div class="frame"></div> <div class="frame"></div> </div> <div class="reel a"> <div class="frame"></div> <div class="frame"></div> <div class="frame"></div> </div> <div class="reel b"> <div class="frame"></div> <div class="frame"></div> <div class="frame"></div> </div> <div class="reel c"> <div class="frame"></div> <div class="frame"></div> <div class="frame"></div> </div> <style> body { margin: 0; background: #5dbcf9; } .reel { position: absolute; width: 160px; height: 100%; } .frame { position: relative; width: 140px; height: 110px; background: #191919; left: -95px; top: -30px; margin-bottom: 40px; } .a { left: 150px; top: -50px; } .b { left: 300px; } .c { left: 450px; top: -50px; } </style>

Go To #68<div class="bell"></div> <div class="clapper"></div> <div class="top"></div> <style> body { background: #191919; margin: 0; } div { position: absolute; transform: translate(-50%, -50%); } .bell { width: 120px; height: 120px; background: #e08027; top: 50%; left: 50%; border-radius: 60px 60px 10px 10px; } .top { z-index: -2; width: 50px; height: 50px; border-radius: 100%; background: #f2ad43; left: 50%; top: 91px; } .clapper { z-index: -1; left: 50%; top: 210px; width: 50px; height: 50px; border-radius: 100%; background: #824b20; } </style>

Go To #69<div class="l-eye"> <div class="pupil"></div> </div> <div class="r-eye"> <div class="pupil"></div> </div> <div class="nose"></div> <style> body { margin: 0; background: #191919; } div { position: absolute; } .l-eye { width: 90px; height: 90px; border-radius: 0 90px 90px 90px; border: 12px solid #e08027; left: 89px; top: 77px; background: #e08027; } .r-eye { width: 90px; height: 90px; border-radius: 90px 0 90px 90px; border: 12px solid #e08027; right: 89px; top: 77px; outline: 10px solid #191919; background: #e08027; } .r-eye::before, .l-eye::before { content: " "; display: block; position: absolute; width: 90px; height: 90px; background: #191919; border-radius: 100%; } .pupil { transform: translateX(-50%); bottom: 39px; left: 50%; width: 12px; height: 6px; border-radius: 100px 100px 0 0; border: 9px solid #e08027; border-bottom: none; z-index: 10; } .nose { z-index: -10; width: 52px; height: 40px; background: #e08027; transform: rotate(45deg); top: 170px; left: 170px; } </style>

Go To #70<div class="eye"></div> <div class="eye r-e"></div> <div class="n"></div> <div class="n r-n"></div> <div class="bottom"> <div class="top"></div> </div> <style> body { margin: 0; background: #293462; } div { position: absolute; } .eye { z-index: 100; background: #293462; border-radius: 100%; width: 10px; height: 10px; top: 95px; left: 150px; border: 10px solid #fff1c1; box-shadow: 0 0 0 10px #fe5f55; } .r-e { left: 220px; } .n { z-index: 10; width: 10px; height: 10px; background: #293462; border-radius: 100%; top: 160px; left: 185px; } .r-n { left: 205px; } .bottom { width: 150px; height: 100px; transform: translate(-50%, -50%); top: 160px; left: 50%; background: #a64942; border-radius: 50px; overflow: hidden; } .top { width: 400px; height: 400px; border-radius: 100%; background: #fe5f55; transform: translateX(-50%); left: 50%; top: -330px; } </style>

Go To #71<div class="head"> <div class="eye"></div> <div class="eye e-r"></div> </div> <div class="tusks"></div> <div class="trunk"></div> <div class="ear"> <div class="inner-l"></div> </div> <div class="ear right"> <div class="inner-r"></div> </div> <style> body { margin: 0; background: #998235; } div { position: absolute; } .ear { z-index: -10; background: #1a4341; top: 60px; height: 180px; width: 80px; border-radius: 100%; left: 50px; overflow: hidden; } .inner-l { height: 180px; width: 80px; border-radius: 100%; background: #0b2429; right: -16px; } .inner-r { height: 180px; width: 80px; border-radius: 100%; background: #0b2429; left: -16px; } .right { left: 270px; } .eye { width: 20px; height: 10px; background: #0b2429; border-radius: 0 0 20px 20px; top: 50%; left: 40px; border: 10px solid #998235; border-top: none; } .e-r { left: 100px; } .tusks { transform: translateX(-50%); left: 50%; width: 80px; height: 40px; border-radius: 60px 60px 0 0; border: 20px solid white; border-bottom: none; bottom: 50px; } .trunk { transform: translateX(-50%); left: 50%; bottom: 0; width: 40px; height: 120px; background: #0b2429; border-radius: 20px 20px 0 0; } .head { transform: translate(-50%, -50%); top: 50%; left: 50%; width: 180px; height: 180px; background: #1a4341; border-radius: 100%; } </style>

Go To #72<div class="head"> <div class="eye"></div> <div class="eye r"></div> </div> <div class="top"></div> <div class="background"></div> <div class="top-left"></div> <div class="top-right"></div> <div class="left"></div> <div class="right"></div> <div class="bottom-left"></div> <div class="bottom-right"></div> <div class="bottom"></div> <style> body { background: #243d83; margin: 0; } div { position: absolute; background: #6592cf; } .bottom-left { height: 50px; width: 60px; transform: rotate(45deg); border-radius: 100%; left: 130px; top: 165px; } .bottom-right { height: 50px; width: 60px; transform: rotate(-45deg); border-radius: 100%; right: 130px; top: 165px; } .bottom { height: 50px; width: 60px; border-radius: 100%; left: 170px; top: 185px; } .left { height: 60px; width: 50px; border-radius: 100%; left: 115px; top: 120px; } .right { height: 60px; width: 50px; border-radius: 100%; right: 115px; top: 120px; } .top-right { width: 60px; height: 50px; border-radius: 100%; transform: rotate(45deg); top: 85px; right: 130px; z-index: 1; } .top-left { width: 60px; height: 50px; border-radius: 100%; transform: rotate(-45deg); top: 85px; left: 130px; z-index: 1; } .background { z-index: -1; transform: translate(-50%, -50%); top: 50%; left: 50%; width: 140px; height: 140px; border-radius: 100%; } .top { z-index: 10; transform: translateX(-50%); width: 60px; height: 50px; border-radius: 100%; top: 65px; left: 50%; } .head { z-index: 1; width: 60px; height: 65px; top: 110px; left: 170px; border-radius: 0 0 30px 30px; background: #243d83; } .eye { width: 10px; height: 10px; border-radius: 100%; left: 15px; top: 20px; } .r { left: 35px; } </style>

Go To #73<div class="c"> <div class="hair"></div> <div class="eye"></div> <div class="eye r"></div> <div class="mouth"></div> <div class="smile-l"></div> <div class="smile-r"></div> <div class="smile-m"></div> </div> <div class="ear"></div> <div class="ear r-ear"></div> <style> body { margin: 0; background: #f3ac3c; } div { position: absolute; } .c { transform: translate(-50%, -50%); top: 50%; left: 50%; width: 150px; height: 150px; background: #998235; border-radius: 100px 100px 80px 80px; overflow: hidden; } .hair { left: 50px; width: 50px; height: 50px; background: #1a4341; top: -35px; transform: rotate(45deg); } .eye { width: 20px; height: 20px; left: 25px; top: 60px; border-radius: 100%; background: #1a4341; } .r { left: 105px; } .mouth { top: 95px; left: 25px; width: 100px; height: 40px; background: #ffffff; border-radius: 20px 20px 50px 50px; } .smile-l { top: 105px; width: 20px; height: 10px; right: 70px; border-radius: 0 0 40px 40px; border: 10px solid #1a4341; border-top: none; } .smile-r { top: 105px; width: 20px; height: 10px; left: 70px; border-radius: 0 0 40px 40px; border: 10px solid #1a4341; border-top: none; } .smile-m { left: 70px; top: 85px; width: 10px; height: 20px; background: #1a4341; } .ear { z-index: -1; background: #1a4341; border: 10px solid #998235; width: 40px; height: 40px; border-radius: 100%; top: 65px; left: 115px; } .r-ear { left: 225px; } </style>

Go To #74<div class="body"></div> <div class="body"></div> <div class="body"></div> <div class="body"></div> <div class="body"></div> <div class="body"></div> <div class="head"></div> <div class="eye"></div> <div class="eye eye-b"></div> <style> body { margin: 0; background: #191919; } div { position: absolute; } .body::after { content: ""; display: block; box-sizing: border-box; border: 5px solid #e08027; width: 100%; height: 100%; } .body:nth-child(odd)::after { border-top: none; border-radius: 0 0 50px 50px; } .body:nth-child(odd) { width: 40px; height: 70px; border: 5px solid #e08027; padding: 0 10px 10px; border-top: none; border-radius: 0 0 50px 50px; } .body:nth-child(even)::after { border-bottom: none; border-radius: 50px 50px 0 0; } .body:nth-child(even) { width: 40px; height: 170px; border: 5px solid #e08027; padding: 10px 10px 0; border-bottom: none; border-radius: 50px 50px 0 0; } .body:nth-child(1) { top: 75px; left: -35px; } .body:nth-child(2) { top: 40px; left: 15px; height: 50px; } .body:nth-child(3) { bottom: 40px; left: 65px; height: 140px; } .body:nth-child(4) { top: 40px; left: 115px; } .body:nth-child(5) { bottom: 40px; left: 165px; } .body:nth-child(6) { top: 140px; left: 215px; height: 50px; border-radius: 35px 0 0 0; border-right: none; } .body:nth-child(6)::after { border-radius: 20px 0 0 0; border-right: none; } .head { transform: translateY(-50%); background: #e08027; width: 50px; height: 30px; top: 50%; left: 265px; border-radius: 15px 20px 20px 15px; } .eye { width: 10px; height: 10px; border-radius: 100%; background: #191919; top: 137px; right: 95px; } .eye-b { top: 153px; } </style>

Go To #75<div class="ear"></div> <div class="ear ear-r"></div> <div class="head"></div> <div class="snout"></div> <div class="nose"></div> <div class="nose nose-r"></div> <div class="eye"></div> <div class="eye eye-r"></div> <style> body { background: #191919; margin: 0; } div { position: absolute; } .head { transform: translate(-50%, -50%); top: 50%; left: 50%; width: 130px; height: 150px; background: #fe5f55; border-radius: 60px 60px 0 0; } .snout { transform: translateX(-50%); left: 50%; top: 145px; width: 150px; height: 100px; border-radius: 60px 60px 50px 50px; background: #a64942; } .eye { background: #000000; left: 160px; width: 10px; height: 10px; border-radius: 100%; top: 125px; } .eye-r { left: 230px; } .nose { width: 30px; height: 20px; border-radius: 50%; background: #000000; top: 170px; left: 145px; transform: rotate(-45deg); } .nose-r { transform: rotate(45deg); left: 225px; } .ear { z-index: -1; background: #000000; border: 5px solid #fe5f55; width: 20px; height: 10px; border-radius: 50%; top: 75px; left: 145px; transform: rotate(45deg); } .ear-r { transform: rotate(-45deg); left: 225px; } </style>

Go To #76<div class="wing"></div> <div class="wing wing-r"></div> <div class="body"> <div class="stripe"></div> <div class="stripe s2"></div> <div class="stripe s3"></div> <div class="eye"></div> </div> <style> body { margin: 0; background: #998235; } div { position: absolute; } .wing { bottom: 50%; width: 75px; height: 75px; background: #fff; border-radius: 80px 80px 0 80px; right: 50%; } .wing-r { right: 125px; border-radius: 80px 80px 80px 0; } .body { top: 50%; width: 150px; height: 75px; border-radius: 75px; background: #eff33c; left: 125px; overflow: hidden; } .stripe { height: 100px; width: 25px; background: #191919; } .s2 { left: 35px; } .s3 { left: 70px; } .eye { width: 15px; height: 15px; border-radius: 100%; background: #191919; right: 20px; bottom: 40px; } </style>

Go To #77<div class="stem1"></div> <div class="stem2"></div> <div class="stem3"></div> <div class="stem3-5 light"></div> <div class="head1 light"></div> <div class="head2 light"></div> <div class="head3 dark"></div> <div class="head4 light"></div> <style> body { margin: 0; background: #191919; } .dark { background: #a64942; } .light { background: #fe5f55; } div { position: absolute; } .head1 { width: 50px; height: 40px; border-radius: 100%; top: 170px; left: 55px; } .head2 { width: 50px; height: 40px; border-radius: 100%; top: 170px; left: 125px; } .head3 { width: 50px; height: 40px; border-radius: 100%; top: 170px; left: 195px; } .head4 { width: 50px; height: 40px; border-radius: 100%; top: 170px; left: 265px; } .stem1 { width: 60px; height: 85px; top: 90px; border: 10px solid #fe5f55; border-bottom: none; left: 95px; } .stem2 { border: 10px solid #a64942; border-bottom: none; border-right: none; width: 30px; height: 85px; top: 90px; left: 235px; } .stem3 { left: 305px; top: 90px; width: 30px; height: 85px; border: 10px solid #fe5f55; border-bottom: none; border-right: none; } .stem3-5 { width: 40px; left: 305px; top: 110px; height: 10px; } </style>

Go To #78<div class="g1"></div> <div class="g2"></div> <div class="bridge"></div> <div class="neck"></div> <div class="head"> <div class="head2"></div> <div class="head3"></div> </div> <style> body { margin: 0; background: #f3ac3c; } div { position: absolute; } .head2 { width: 20px; height: 4px; background: #1a4341; border-radius: 5px; left: 10px; top: 8px; } .head3 { width: 20px; height: 4px; background: #1a4341; border-radius: 5px; left: 10px; bottom: 8px; } .head { transform: translateY(-50%); top: 50%; left: 315px; height: 30px; width: 40px; background: #998235; border-radius: 10px; } .neck { z-index: -1; transform: translateY(-50%); top: 50%; left: 50%; width: 150px; height: 20px; background: #1a4341; } .bridge { transform: translateY(-50%); top: 50%; left: 85px; width: 10px; height: 40px; background: #1a4341; border-radius: 10px; } .g1 { width: 120px; height: 120px; border-radius: 100%; background: #998235; top: 90px; left: 45px; } .g2 { transform: translateY(-50%); top: 50%; left: 140px; width: 40px; height: 40px; border-radius: 100%; border: 5px solid #f3ac3c; outline: 25px solid #998235; background: #1a4341; } </style>

Go To #79<div class="jingle j1"></div> <div class="jingle j2"></div> <div class="jingle j3"></div> <div class="jingle j4"></div> <div class="jingle j5"></div> <div class="center"> <div class="bottom"></div> </div> <div class="dumb-cover"></div> <style> body { margin: 0; background: #6592cf; } div { position: absolute; } .dumb-cover { background: #6592cf; width: 400px; height: 100px; top: 235px; } .bottom { z-index: 10; width: 100px; height: 100px; border-radius: 100%; border-bottom: none; transform: translateX(-50%); left: 50%; top: 125px; border: 10px solid #243d83; background: #6592cf; } .center { background: #6592cf; transform: translateX(-50%); top: 75px; left: 50%; width: 170px; height: 170px; border-radius: 100%; overflow: hidden; box-shadow: inset 0 0 0 10px #243d83; } .jingle { z-index: 1; background: #243d83; height: 10px; width: 10px; border: 10px solid #6592cf; outline: 10px solid #243d83; border-radius: 100%; } .j1 { left: 115px; top: 175px; } .j2 { left: 115px; top: 105px; } .j3 { left: 185px; top: 65px; } .j4 { left: 255px; top: 105px; } .j5 { left: 255px; top: 175px; } </style>

Go To #80<div class="outline"> <div class="key"></div> <div class="key"></div> <div class="key"></div> <div class="key"></div> <div class="key"></div> <div class="key"></div> <div class="key"></div> </div> <style> body { background: #998235; } .outline { border-radius: 10px; transform: translate(-50%, -50%); left: 50%; top: 50%; width: 180px; height: 100px; background: #191919; } div { position: absolute; } .key { width: 20px; height: 70px; background: #ffffff; border-radius: 5px; bottom: 5px; } .key:nth-child(1) { left: 5px; } .key:nth-child(2) { left: 30px; } .key:nth-child(3) { left: 55px; } .key:nth-child(4) { left: 80px; } .key:nth-child(5) { left: 105px; } .key:nth-child(6) { left: 130px; } .key:nth-child(7) { left: 155px; } .key:nth-child(1)::before, .key:nth-child(2)::before, .key:nth-child(4)::before, .key:nth-child(5)::before, .key:nth-child(6)::before { content: ""; display: block; position: absolute; box-sizing: border-box; background: #191919; width: 15px; height: 35px; left: 15px; } .key:nth-child(2)::after, .key:nth-child(3)::after, .key:nth-child(7)::after, .key:nth-child(6)::after, .key:nth-child(5)::after { content: ""; display: block; position: absolute; box-sizing: border-box; background: #191919; width: 15px; height: 35px; right: 15px; } </style>

Go To #81<div></div> <div></div> <div></div> <div></div> <style> body { background: #191919; } div { width: 40px; height: 40px; border-radius: 100%; top: 122px; position: absolute; border: 20px solid #8f8f8f; } div:nth-child(1) { left: 37px; border-color: #714b67; } div:nth-child(2) { left: 119px; } div:nth-child(2)::after { content: ""; position: absolute; display: block; width: 20px; height: 60px; background: #8f8f8f; left: 40px; bottom: 20px; border-radius: 10px 10px 0 0; } div:nth-child(3) { left: 201px; } div:nth-child(4) { left: 283px; } </style>

Go To #82<div class="center"> <div class="blue"></div> <div class="line1"></div> <div class="line2"></div> </div> <style> body { background: #f3ac3c; margin: 0; } div { position: absolute; } .center { background: #998235; width: 160px; height: 160px; transform-origin: 50% 50%; transform: translate(-50%, -50%) rotate(45deg); left: 198px; top: 150px; } .blue { transform: translate(-50%, -50%); top: 50%; left: 50%; width: 30px; height: 30px; background: #1a4341; border: 35px solid #f3ac3c; } .line1 { width: 30px; height: 40px; background: #f3ac3c; transform: translateX(-50%); left: 50%; top: -1px; } .line2 { width: 40px; height: 30px; background: #f3ac3c; transform: translateY(-50%); top: 50%; left: -1px; } </style>

Go To #83<div class="yellow"></div> <div class="diamond"></div> <div class="tube1"></div> <div class="tube2"></div> <style> body { margin: 0; background: #243d83; } div { position: absolute; } .tube1 { z-index: -2; width: 220px; height: 100px; background: #6592cf; border-radius: 50px; transform: translate(-50%, -50%) rotate(45deg); left: 50%; top: 50%; } .tube2 { z-index: -2; width: 220px; height: 100px; background: #6592cf; border-radius: 50px; transform: translate(-50%, -50%) rotate(-45deg); left: 50%; top: 50%; } .diamond { z-index: -1; background: #243d83; width: 120px; height: 120px; transform: translate(-50%, -50%) rotate(45deg); left: 50%; top: 50%; } .yellow { transform: translate(-50%, -50%); top: 50%; left: 50%; width: 60px; height: 60px; border-radius: 100%; background: #eeb850; } </style>

Go To #84<div class="v"></div> <div class="v b"></div> <div class="h"></div> <div class="h r"></div> <style> body { background: #191919; margin: 0; } div { position: absolute; transform: translate(-50%, -50%); } .v { left: 50%; width: 40px; height: 260px; background: #fe5f55; border-radius: 20px; } .b { top: 100%; } .h { top: 50%; width: 360px; height: 40px; background: #a64942; border-radius: 20px; } .r { left: 100%; } </style>

Go To #85<div class="l"></div> <div class="r"></div> <div class="b"></div> <style> body { background: #d25b70; } div { position: absolute; } .l { background: #6cb3a9; width: 60px; height: 60px; transform: rotate(37deg); top: 78px; left: 114px; } .r { width: 80px; height: 80px; background: #f6df96; transform: rotate(37deg); top: 54px; left: 202px; } .b { background: #f7f3da; width: 100px; height: 100px; top: 50%; left: 150px; } </style>

Go To #86<div class="frame"> <div class="step s1"></div> <div class="step s4"></div> <div class="step s3"></div> <div class="step s2"></div> </div> <style> body { margin: 0; background: #191919; } div { position: absolute; } .frame { transform: translate(-50%, -50%); width: 100px; height: 150px; background: #4f77ff; top: 50%; left: 50%; border-radius: 50px 50px 0 0; } .step { bottom: 0px; background: #191919; width: 100px; height: 20px; } .s1 { left: 20px; } .s2 { left: 40px; bottom: 24px; } .s3 { left: 60px; bottom: 48px; } .s4 { left: 80px; bottom: 72px; } </style>

Go To #87<div class="left1"></div> <div class="left2"></div> <div class="left3"></div> <div class="right1"></div> <div class="right2"></div> <div class="right3"></div> <div class="center"></div> <style> body { background: #f3ac3c; margin: 0; } div { position: absolute; background: #1a4341; } .left1 { width: 150px; height: 50px; border-radius: 10px; top: 65px; left: 65px; } .left2 { width: 100px; height: 60px; border-radius: 0 0 10px 10px; top: 105px; left: 65px; } .left3 { width: 50px; height: 50px; top: 80px; left: 140px; } .right1 { width: 150px; height: 50px; border-radius: 10px; bottom: 65px; right: 65px; } .right2 { width: 100px; height: 60px; border-radius: 10px 10px 0 0; bottom: 105px; right: 65px; } .right3 { width: 50px; height: 50px; bottom: 80px; right: 140px; } .center { transform: translate(-50%, -50%); left: 50%; top: 50%; background: #f3ac3c; width: 70px; height: 70px; border-radius: 10px; } </style>

Go To #88<div class="left-white"></div> <div class="left-pink"></div> <div class="right-white"></div> <div class="right-pink"></div> <style> body { margin: 0; background: #f7f3da; } div { position: absolute; } .left-white { background: #f7f3da; bottom: 0; width: 200px; height: 150px; border-radius: 0 20px 0 0; box-shadow: 0 -20px 0 0 #d25b70; } .left-pink { background: #d25b70; bottom: 50%; width: 50%; height: 40px; border-radius: 0 10px 0 0; } .right-white { background: #f7f3da; right: 0; width: 200px; height: 150px; border-radius: 0 0 0 20px; box-shadow: 0 20px 0 0 #d25b70; } .right-pink { background: #d25b70; right: 0; top: 50%; width: 50%; height: 40px; border-radius: 0 0 0 10px; } </style>

Go To #89<div class="middle"></div> <div class="blue"> <div class="corner"></div> </div> <style> body { margin: 0; background: #191919; } div { position: absolute; } .middle { overflow: hidden; transform: translate(-50%, -50%) rotate(-135deg); top: 50%; left: 50%; width: 200px; height: 200px; background: #f9e492; border-radius: 100%; } .blue { bottom: 0; transform: translate(-50%, 50%) rotate(45deg); left: 50%; width: 199px; height: 199px; background: #4f77ff; overflow: hidden; } .corner { width: 200px; height: 200px; background: #191919; border-radius: 100%; left: -106px; top: -106px; } </style>

Go To #90<div class="top"></div> <div class="middle"></div> <div class="bottom"></div> <style> div { position: absolute; transform: translate(-50%, -50%); left: 50%; } body { margin: 0; background: #f3ac3c; } .top { width: 400px; height: 400px; border-radius: 100%; background: #998235; top: -50px; } .middle { top: 50%; width: 200px; height: 200px; background: #1a4341; border-radius: 100%; border: 25px solid #f3ac3c; } .bottom { width: 400px; height: 400px; border-radius: 100%; background: #998235; top: 350px; } </style>

Go To #91<div class="bottom"></div> <div class="sun"> <div class="line1"></div> <div class="line2"></div> <div class="line3"></div> <div class="line4"></div> </div> <style> div { position: absolute; } body { margin: 0; background: #d25b70; } .bottom { background: #6cb3a9; width: 100%; height: 50%; bottom: 0; } .sun { transform: translate(-50%, -50%); top: 50%; left: 50%; width: 200px; height: 200px; background: #f6df96; border-radius: 100%; } .line1 { background: #6cb3a9; width: 100%; height: 15px; top: 100px; } .line2 { background: #6cb3a9; width: 100%; height: 15px; top: 125px; } .line3 { background: #6cb3a9; width: 100%; height: 15px; top: 150px; } .line4 { background: #6cb3a9; width: 100%; height: 15px; top: 175px; } </style>

Go To #92<div class="circle"></div> <div class="circle l"></div> <div class="circle r"></div> <div class="top t-l"></div> <div class="top t-r"></div> <div class="bottom t-l"></div> <div class="bottom t-r"></div> <div class="mid"></div> <style> body { background: #6592cf; margin: 0; } div { position: absolute; } .mid { z-index: -1; transform: translateY(-50%); width: 100%; height: 40px; background: #243d83; top: 50%; } .circle { z-index: 1; background: #243d83; width: 200px; height: 200px; border-radius: 100%; transform: translate(-50%, -50%); top: 50%; left: 50%; } .l { left: -26px; } .r { left: 426px; } .top { background: #6592cf; width: 32px; height: 140px; border-radius: 0 0 30px 30px; } .t-l { left: 71px; } .t-r { left: 297px; } .bottom { background: #6592cf; width: 32px; height: 140px; border-radius: 30px 30px 0 0; bottom: 0; } .t-l { left: 71px; } .t-r { left: 297px; } </style>

Go To #93<div class="center"> <div class="dot"></div> <div class="l-line"></div> <div class="l-line a"></div> <div class="l-line b"></div> <div class="mid"></div> <div class="mid a1"></div> <div class="mid b1"></div> <div class="r-line"></div> <div class="r-line a"></div> <div class="r-line b"></div> </div> <style> body { margin: 0; background: #4f77ff; } div { position: absolute; } .center { transform: translate(-50%, -50%); top: 50%; left: 50%; width: 200px; height: 200px; background: #191919; border-radius: 100%; overflow: hidden; } .dot { width: 40px; height: 40px; border-radius: 100%; background: #f9e492; top: 40px; left: 40px; } .l-line { width: 50%; height: 16px; background: #f9e492; top: 122px; } .mid { width: 20px; height: 16px; background: #d6b73f; left: 50%; top: 116px; transform: skew(0, -33deg); } .r-line { height: 16px; right: 0; width: 80px; background: #f9e492; top: 109px; } .a { transform: translateY(26px); } .b { transform: translateY(52px); } .a1 { transform: skew(0, -33deg) translateY(26px); } .b1 { transform: skew(0, -33deg) translateY(52px); } </style>

Go To #94<div class="mid"></div> <div class="grn"></div> <div class="back"></div> <style> body { background: #0e2e2c; margin: 0; } div { position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; } .mid { z-index: 9; width: 40px; height: 40px; background: #f3ac3c; border-radius: 100%; border: 8px solid #0e2e2c; outline: 12px solid #f3ac3c; box-shadow: 0 0 0 22px #0e2e2c; } .grn { z-index: 8; width: 120px; height: 120px; background: #998235; border-radius: 100%; border: 12px solid #0e2e2c; outline: 8px solid #f3ac3c; box-shadow: 0 0 0 22px #0e2e2c; } .back { background: #f3ac3c; width: 200px; height: 200px; border-radius: 100%; } </style>

Go To #95<div class="middle c"></div> <div class="dark-red c"></div> <div class="light-red"></div> <div class="white"></div> <style> body { margin: 0; background: #6cb3a9; } div { position: absolute; } .c { transform: translate(-50%, -50%); left: 50%; top: 50%; } .dark-red { z-index: 9; width: 180px; height: 20px; background: #781728; border-left: 50px solid #6cb3a9; border-right: 50px solid #6cb3a9; } .middle { z-index: 10; width: 50px; height: 50px; background: #f6df96; border-radius: 100%; border: 10px solid #781728; } .light-red { transform: translateX(-50%); left: 50%; background: #d25b70; width: 200px; height: 100px; border-radius: 99px 99px 0 0; bottom: 50%; } .white { transform: translateX(-50%); left: 50%; background: #ffffff; width: 200px; height: 100px; border-radius: 0 0 99px 99px; top: 50%; } </style>

Go To #96<div class="mid"></div> <div class="i l"></div> <div class="i r"></div> <div class="i t"></div> <div class="i b"></div> <style> body { background: #243d83; margin: 0; } div { position: absolute; } .mid { transform: translate(-50%, -50%); top: 50%; left: 50%; width: 200px; height: 200px; border-radius: 100%; background: #6592cf; } .i { width: 130px; height: 130px; border-radius: 100%; border: 20px solid #243d83; } .t { left: 115px; top: -10px; } .b { left: 115px; bottom: -10px; } .l { left: 40px; bottom: 65px; } .r { right: 40px; bottom: 65px; } </style>

Go To #97<div class="c bot"></div> <div class="c divider"> <div class="c scarf"></div> </div> <div class="c head"> <div class="eye"></div> <div class="eye r"></div> </div> <div class="c hat"> <div class="c top"></div> <div class="c stripe"></div> </div> <style> body { background: #ac474b; margin: 0; } div { position: absolute; } .stripe { width: 40px; height: 10px; bottom: 15px; background: #ffffff; } .top { width: 40px; height: 40px; background: #0e1f2b; bottom: 0; } .hat { border-bottom: 5px solid #0e1f2b; width: 60px; height: 95px; } .top { } .c { transform: translateX(-50%); left: 50%; } .eye { width: 10px; height: 10px; background: #0e1f2b; border-radius: 100%; bottom: 32px; left: 15px; } .r { left: 35px; } .head { width: 60px; height: 60px; background: #ffffff; border-radius: 100%; bottom: 145px; } .scarf { background: #ffa63f; width: 60px; height: 10px; bottom: 4px; border-radius: 10px; } .divider { z-index: 10; background: #ac474b; bottom: 143px; height: 18px; width: 200px; } .bot { width: 100px; height: 100px; background: #ffffff; border-radius: 100%; bottom: 55px; } </style>

Go To #98<div class="flame"></div> <div class="candle"></div> <div class="top-candle"></div> <div class="top-candle2"></div> <div class="bottom-candle"></div> <style> body { margin: 0; background: #14313e; } div { position: absolute; } .flame { z-index: 5; left: 50%; width: 30px; height: 50px; background: #f3ac3c; top: 60px; border-radius: 30px 0 30px 0; } .candle { transform: translateX(-50%); left: 50%; top: 125px; width: 80px; height: 100px; background: #ba3e46; } .top-candle { z-index: 4; transform: translatex(-50%); bottom: 170px; left: 50%; background: #14313e; width: 60px; height: 30px; border-radius: 100%; } .top-candle2 { transform: translatex(-50%); bottom: 160px; left: 50%; z-index: 3; width: 80px; height: 30px; background: #f3695a; border-radius: 100%; } .bottom-candle { transform: translatex(-50%); bottom: 60px; left: 50%; z-index: 3; width: 80px; height: 30px; background: #ba3e46; border-radius: 100%; } </style>

Go To #99<div class="container"> <div class="top"></div> <div class="mid"></div> <div class="bot"></div> </div> <div class="container flip"> <div class="top"></div> <div class="mid"></div> <div class="bot"></div> </div> <style> body { background: #ac474b; margin: 0; } div { position: absolute; } .container { right: 50%; width: 50%; height: 200px; bottom: 50px; } .top { right: -5px; width: 20px; height: 20px; border-radius: 30px 30px 0 30px; border: 10px solid #ffffff; } .mid { right: 10px; top: 60px; width: 60px; height: 60px; background: #ffffff; } .bot { right: 10px; bottom: 0; width: 60px; height: 60px; background: #ffffff; } .flip { right: 0; transform: scaleX(-1); } </style>

Go To #100<div class="bracket"></div> <div class="inlay"></div> <div class="buttons"></div> <div class="container"> <div class="l"> <div class="s-container"> <div class="blade2"></div> <div class="handle2"></div> <div class="hilt2"></div> </div> </div> <div class="l r"> <div class="s-container"> <div class="blade2"></div> <div class="handle2"></div> <div class="hilt2"></div> </div> </div> </div> <style> body { margin: 0; background: #14313e; } div { position: absolute; } .buttons { z-index: -1; transform: translate(-50%, -50%); left: 50%; top: 50%; height: 40px; width: 294px; background: #ffdf00; border-radius: 5px; } .inlay { transform: translate(-50%, -50%); left: 50%; top: 50%; width: 224px; height: 100px; background: #14313e; border-radius: 10px; } .bracket { background: #ffdf00; transform: translate(-50%, -50%); height: 100px; width: 224px; top: 50%; left: 50%; border: 25px solid #ffdf00; border-radius: 20px; } .container { transform: translate(-50%, -50%); top: 50%; left: 50%; height: 100%; width: 194px; background: #14313e; } .l { right: 24px; top: 71px; width: 160px; height: 160px; overflow: hidden; } .r { transform: scaleX(-1); right: 10px; z-index: 10px; } .hilt2 { background: #ffdf00; width: 80px; height: 20px; top: 109px; } .handle2 { background: #ffdf00; width: 20px; height: 50px; top: 119px; left: 30px; border-radius: 0 0 8px 8px; } .blade2 { background: #ffdf00; width: 30px; height: 200px; top: -100px; border: 10px solid #14313e; left: 15px; background-clip: padding-box; } .s-container { background: red; transform: rotate(45deg); left: 103px; top: 1px; } </style>

Go To #101<div class="container"> <div class="center"></div> <div class="outer o1"></div> <div class="outer o2"></div> <div class="outer o3"></div> </div> <style> body { background: #161616; margin: 0; } div { position: absolute; } .container { transform: translate(-50%, -50%); top: 50%; left: 50%; background: #a22015; border-radius: 100%; width: 190px; height: 190px; border: 5px solid #000000; overflow: hidden; } .center { z-index: 10; transform: translate(-50%, -50%); left: 50%; top: 50%; width: 50px; height: 50px; background: #000000; border-radius: 100%; outline: 10px solid #e96a23; box-shadow: 0 0 0 25px #000000; background-clip: padding-box; } .outer { width: 70px; height: 70px; border-radius: 100%; border: 15px solid; } .o1 { left: 45px; bottom: -40px; } .o2 { left: 45px; bottom: -40px; transform-origin: center -35px; transform: rotate(-120deg); } .o3 { left: 45px; bottom: -40px; transform-origin: center -35px; transform: rotate(120deg); } </style>

Go To #102<div class="head"> <div class="eye"></div> <div class="eye e-r"></div> </div> <div class="tooth t1"></div> <div class="tooth t2"></div> <div class="tooth t3"></div> <div class="l"> <div class="dot"></div> <div class="dot d2"></div> <div class="dot d3"></div> <div class="dot d4"></div> <div class="bone1"></div> <div class="bone2"></div> </div> <div class="l r"> <div class="dot"></div> <div class="dot d2"></div> <div class="dot d3"></div> <div class="dot d4"></div> <div class="bone1"></div> <div class="bone2"></div> </div> <style> body { margin: 0; background: #000000; } div { position: absolute; } .l { width: 50%; height: 100%; } .r { right: 0; transform: scaleX(-1); } .dot { width: 25px; height: 25px; border-radius: 100%; background: #ffffff; top: 95px; left: 95px; } .d2 { top: 85px; left: 105px; } .d3 { top: 200px; } .d4 { top: 210px; left: 105px; } .bone1 { width: 20px; height: 15px; background: #ffffff; left: 115px; top: 108px; transform: rotate(-45deg); } .bone2 { width: 20px; height: 15px; background: #ffffff; left: 115px; bottom: 87px; transform: rotate(45deg); } .head { z-index: 9; transform: translateX(-50%); left: 50%; width: 150px; height: 100px; background: #ffffff; top: 100px; border-radius: 60px; border: 10px solid #000000; } .eye { width: 50px; height: 40px; background: #000000; border-radius: 100%; left: 20px; top: 30px; transform: rotate(-30deg); } .e-r { transform: rotate(30deg); left: 80px; } .tooth { width: 15px; height: 30px; background: #ffffff; bottom: 60px; } .t1 { left: 173px; } .t2 { left: 193px; } .t3 { left: 213px; } </style>

Go To #103<div class="l"> <div class="h2"></div> <div class="face"></div> <div class="h1"></div> </div> <div class="l r"> <div class="h2"></div> <div class="face f2"></div> <div class="h1"></div> </div> <div class="mouth"></div> <div class="mid"></div> <style> body { margin: 0; background: #161616; } div { position: absolute; } .l { width: 50%; height: 100%; overflow: hidden; } .face { right: 0; width: 40px; height: 60px; background: #ffffff; bottom: 84px; border-radius: 0 0 0 50px; } .mouth { z-index: 9; bottom: 94px; background: #161616; width: 20px; height: 10px; border-radius: 0 0 20px 20px; transform: translateX(-50%); left: 50%; } .mid { transform: translateX(-50%) rotate(45deg); left: 50%; width: 60px; height: 60px; background: #ebae11; border-radius: 0 60px 0 60px; top: 96px; } .h1 { width: 59px; height: 30px; background: #ebae11; border-radius: 0 0 60px 60px; transform: rotate(61deg); top: 134px; right: -1px; } .h2 { width: 60px; height: 30px; background: #ebae11; border-radius: 0 0 60px 60px; transform: rotate(15deg); top: 160px; right: 3px; } .r { transform: scaleX(-1); right: 0; } .f2 { background: #ffdeb9; } </style>

Go To #104<div class="container"> <div class="inner"> <div class="grill g1"></div> <div class="grill g2"></div> <div class="grill g3"></div> <div class="grill g4"></div> <div class="dot d1"></div> <div class="dot d2"></div> <div class="dot d3"></div> <div class="dot d4"></div> <div class="dot d5"></div> <div class="dot d6"></div> <div class="shine"></div> </div> </div> <style> body { margin: 0; background: #000; } div { position: absolute; } .container { transform: translate(-50%, -50%); left: 50%; top: 50%; width: 240px; height: 120px; background: #37385a; border-radius: 20px; } .inner { display: block; width: 200px; height: 80px; background: #9897ae; z-index: -2; transform: translate(-50%, -50%); top: 50%; left: 50%; border-radius: 10px; overflow: hidden; } .shine { z-index: -1; transform: rotate(15deg); background: #c0c3db; top: -15px; left: 70px; width: 50px; height: 150px; } .grill { transform: translateY(-50%); width: 10px; height: 50px; top: 50%; background: #000000; border-radius: 10px; } .g1 { left: 125px; } .g2 { left: 105px; } .g3 { left: 85px; } .g4 { left: 65px; } .dot { width: 10px; height: 10px; border-radius: 100%; background: #000000; } .d1 { left: 15px; top: 15px; } .d2 { left: 15px; top: 35px; } .d3 { left: 15px; top: 55px; } .d4 { right: 15px; top: 15px; } .d5 { right: 15px; top: 35px; } .d6 { right: 15px; top: 55px; } </style>

Go To #105<div class="top"></div> <div class="lid"> <div class="container"> <div class="eye"></div> <div class="pupil"></div> </div> </div> <div class="lid2"> <div class="container r2"> <div class="eye"></div> <div class="pupil"></div> </div> </div> <style> body { margin: 0; background: #bac7ce; } div { position: absolute; } .container { overflow: hidden; width: 100px; height: 100px; border-radius: 100%; transform: rotate(15deg); } .top { border-top: 91.5px solid #475862; border-left: 91.5px solid transparent; border-right: 91.5px solid transparent; transform: translateX(-50%); left: 50%; } .eye { width: 100px; height: 100px; background: #868a64; border-radius: 100%; box-shadow: 0 -10px 0 10px #5a6042; top: 15px; } .pupil { width: 30px; height: 30px; border-radius: 100%; transform: translate(-50%, -50%); left: 50%; top: 50%; background: #4e2b24; outline: 5px solid; } .lid { left: 30px; top: 130px; width: 100px; height: 100px; background: #000; border-radius: 0 50% 0 50%; border: 10px solid #000; overflow: hidden; transform: rotate(-15deg); } .lid2 { right: 30px; top: 130px; width: 100px; height: 100px; background: #000; border-radius: 0 50% 0 50%; border: 10px solid #000; overflow: hidden; transform: rotate(105deg); } .r2 { transform: rotate(-105deg); } </style>

Go To #106<div class="stem"></div> <div class="half"></div> <div class="half left"></div> <div class="bite"></div> <style> body { margin: 0; background: #000; } div { position: absolute; } .bite { background: #000000; width: 50px; height: 50px; border-radius: 50%; top: 100px; left: 101px; box-shadow: 0 3px, -10px 40px 0 10px; } .half { top: 100px; width: 120px; height: 100px; border-radius: 100%; background: #d4392d; left: 170px; transform: rotate(-60deg); } .left { overflow: hidden; left: 110px; transform: rotate(60deg); } .stem { height: 50px; width: 10px; transform: translateX(-50%); left: 50%; background: #d4392d; top: 70px; } </style>

Go To #107<div class="mid"></div> <div class="stick1"></div> <div class="stick2"></div> <div class="right"></div> <div class="l a"></div> <div class="l b"></div> <div class="l c"></div> <style> body { margin: 0; background: #161616; } div { position: absolute; } .l { height: 12px; background: #fff; border-radius: 0 0 0 12px; } .a { right: 215px; width: 55px; top: 132px; } .b { right: 215px; width: 40px; top: 144px; } .c { right: 215px; width: 25px; top: 156px; } .mid { transform: translate(-50%, -50%); left: 50%; top: 50%; width: 20px; height: 20px; background: #161616; border-radius: 100%; border: 5px solid #a22015; outline: 10px solid #ffffff; box-shadow: 0 0 0 15px #a22015; } .right { z-index: -9; left: 50%; top: 149px; transform: translateY(-50%); width: 80px; height: 40px; background: #e96a23; border-radius: 0 40px 5px 0; } .stick2 { z-index: -9; top: 50%; transform: translateX(-50%); left: 50%; width: 30px; height: 53px; border-radius: 0 0 10px 10px; background: #a22015; } .stick1 { z-index: -10; top: 50%; transform: translateX(-50%); left: 50%; width: 20px; height: 50%; background: #e96a23; } </style>

Go To #108<div class="outline"> <div class="shine1"></div> <div class="shine2"></div> <div class="inner2"></div> <div class="inner1"> <div class="mid"></div> <div class="mid2"></div> <div class="mid3"></div> </div> </div> <style> body { margin: 0; background: #000; } div { position: absolute; } .mid { transform: translate(-50%, -50%); top: 50%; left: 50%; width: 50px; height: 50px; background: #ebae11; border-radius: 100%; } .mid2 { transform: translate(-50%, -50%); top: 50%; left: 50%; width: 200px; height: 80px; border-radius: 100%; border: 5px solid #ebae11; } .mid3 { transform: translate(-50%, -50%); top: 50%; left: 50%; width: 120px; height: 60px; border-radius: 100%; border: 5px solid #ebae11; } .inner1 { transform: translate(-50%, -50%); top: 50%; left: 50%; width: 240px; height: 120px; background: #000000; border-radius: 12px; } .inner2 { transform: translate(-50%, -50%); top: 50%; left: 50%; width: 270px; height: 90px; background: #000000; border-radius: 12px; } .shine1 { transform: rotate(15deg); top: -20px; width: 50px; height: 300%; background: #ebae11; left: 70px; } .shine2 { transform: rotate(15deg); top: -20px; width: 25px; height: 300%; background: #ebae11; left: 136px; } .outline { transform: translate(-50%, -50%); top: 50%; left: 50%; background: #e96a23; width: 300px; height: 150px; overflow: hidden; } </style>

Go To #109<div class="grid"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> <div></div> <div class="dot"></div> <div class="dot"></div> <div></div> <div></div> <div class="dot"></div> </div> <style> .grid { display: grid; grid-template-columns: repeat(4, 60px); grid-template-rows: repeat(4, 60px); margin: 20px; } .dot { width: 40px; height: 40px; background: #f6e59c; border-radius: 100%; } body { background: #191919; margin: 0; } </style>

Go To #110<div></div> <div class="a"></div> <div class="b"></div> <div class="c"></div> <div class="d"></div> <div class="e"></div> <div class="f"></div> <style> .a { transform: rotate(90deg); } .b { transform: rotate(180deg); } .c { transform: rotate(60deg); } .d { transform: rotate(30deg); } .e { transform: rotate(120deg); } .f { transform: rotate(150deg); } div { transform-origin: 120%; position: absolute; top: 195px; left: 80px; width: 100px; height: 10px; background: #f2e09f; border-radius: 10px; } body { background: #d25b70; margin: 0; } </style>

Go To #111<div class="outer"> <div class="inner"></div> </div> <div class="outer a"> <div class="inner"></div> </div> <div class="outer b"> <div class="inner"></div> </div> <style> .a { transform: rotate(90deg) translate(10px); transform-origin: 150%; } .b { transform: rotate(-90deg) translate(10px); transform-origin: 150%; } .outer { position: absolute; border-radius: 50% 0 50% 50%; left: 80px; top: 110px; } .inner { transform: rotate(45deg); border-radius: 50% 0 50% 50%; width: 80px; height: 80px; background: #254241; } body { margin: 0; background: #f3ac3c; } </style>

Go To #112<div></div> <div class="b"></div> <div class="c"></div> <style> body { background: #6592cf; margin: 0; } div { position: absolute; background: #293d7e; transform: translateX(-50%); left: 50%; width: 250px; height: 100px; top: 50px; clip-path: polygon(0 0, 15% 0, 50% 70px, 85% 0, 100% 0, 50% 100%); } .c { top: 100px; } .b { top: 150px; } </style>

Go To #113<div></div> <style> div { position: absolute; width: 100%; height: 100%; background: #191919; clip-path: polygon(0% 125px, 100% 100px, 100% 200px, 0% 175px); } body { margin: 0; background: #5776f6; } </style>

Go To #114<div class="a"></div> <div class="b"></div> <style> div.a { position: absolute; width: 100%; height: 100%; clip-path: polygon(50% 50%, 380px 85px, 50% 20px); background: #e9af53; } div.b { position: absolute; width: 100%; height: 100%; clip-path: polygon(50% 50%, 20px 85px, 20px 215px, 50% 280px); background: #e9af53; } body { margin: 0; background: #172d2c; } </style>

Go To #115<div class="b"></div> <div class="a"></div> <div class="swirl1"></div> <div class="left"></div> <div class="swirl2"></div> <style> .swirl2 { position: absolute; width: 95%; height: 50%; top: 50%; left: 5%; background: #c36271; border-radius: 100px 0 0 0; } .left { position: absolute; width: 30%; height: 100%; background: #f2e09f; } .swirl1 { position: absolute; height: 50%; width: 95%; background: #f2e09f; border-radius: 0 0 100px 0; } div.a, div.b { z-index: 10; position: absolute; width: 100px; height: 50px; left: 150px; } .a { top: 150px; border-radius: 0 0 50px 50px; background: #f2e09f; } .b { top: 100px; border-radius: 50px 50px 0 0; background: #c36271; } body { margin: 0; background: #c36271; } </style>

Go To #116<div class="top"></div> <div class="left"></div> <div class="right"></div> <style> .right { position: absolute; width: 60px; height: 80px; right: 115px; top: 165px; border-radius: 20px 0 30px 30px; } .left { position: absolute; width: 60px; height: 80px; left: 115px; top: 165px; border-radius: 0 20px 30px 30px; } .top { border-top: 20px solid #6e91ca; border-left: 20px solid #6e91ca; border-right: 20px solid #6e91ca; border-radius: 120px 120px 0px 0px; width: 130px; height: 100px; background: #293d7e; position: absolute; top: 45px; left: 115px; } div { background: #6e91ca; } body { background: #293d7e; margin: 0; } </style>