Test of Larking (Branch 8159)
✨ Jakarin Yensuk
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>เต้ย จักริน เย็นสุข 63070017</title> </head> <style> body { margin: 0px; background-image: url('https://i.ytimg.com/vi/5s_9ABbtykA/maxresdefault.jpg'); } img { position: absolute; top: 50px; left: 40%; } .ref{ left:100px; } svg { width: 100%; } :root { cursor: none; --cursorX: 50vw; --cursorY: 50vh; } :root:before { content: ''; display: block; width: 100%; height: 100%; position: fixed; pointer-events: none; background: radial-gradient(circle 25vmax at var(--cursorX) var(--cursorY), rgba(0, 0, 0, 0)0%, rgba(0, 0, 0, 0.5)80%, rgba(0, 0, 0, 0.95)100%) } </style> <body> <script type="text/javascript"> function update(e) { var x = e.clientX || e.touches[0].clientX var y = e.clientY || e.touches[0].clientY document.documentElement.style.setProperty('--cursorX', x + 'px') document.documentElement.style.setProperty('--cursorY', y + 'px') } document.addEventListener('mousemove', update) document.addEventListener('touchmove', update) </script> <svg viewbox="0 0 200 200"> <!-- Batman low polygon art by Larking --> <path fill="#195D8E" d="M60,200 L70,200 L63,195" /> <path fill="#06518D" d="M60,200 L60,192.5 L63,195" /> <path fill="#2E83C4" d="M70,200 L80,200 L80,190" /> <path fill="#102D4B" d="M80,200 L90,200 L90,192.5" /> <path fill="#2167A2" d="M90,200 L90,192.5 L105,200" /> <path fill="#103A60" d="M105,200 L120,200 L120,190" /> <path fill="#080A0A" d="M120,200 L130,200 L120,195" /> <path fill="#091731" d="M130,195 L120,195 L130,200" /> <path fill="#080A0A" d="M130,200 L135,200 L130,195" /> <path fill="#122A4E" d="M135,200 L130,195 L140,196" /> <path fill="#122A4E" d="M140,200 L135,200 L140,196" /> <path fill="#0B74B3" d="M130,195 L120,195 L120,190" /> <!-- Layer2 --> <path fill="#23476B" d="M130,195 L140,196 L140,185" /> <path fill="#1F5987" d="M140,185 L125,182.5 L130,195" /> <path fill="#448AC8" d="M130,195 L120,190 L126.5,186.5" /> <path fill="#0E74B4" d="M120,190 L126.5,186.5 L120,185" /> <path fill="#4F91CD" d="M120,185 L126.5,186.5 L125,182.5" /> <path fill="#0D436F" d="M120,190 L100,190 L105,200" /> <path fill="#0B5385" d="M100,190 L90,192.5 L105,200" /> <path fill="#143C5F" d="M90,192.5 L80,200 L80,190" /> <path fill="#116FAD" d="M70,200 L70,185 L80,190" /> <path fill="#2367A4" d="M70,200 L70,185 L63,195" /> <path fill="#1F6AA3" d="M70,185 L60,192.5 L63,195" /> <!-- Layer3 --> <path fill="#0E0D10" d="M120,185 L110,180 L115,187.5" /> <path fill="#19325A" d="M105,182.5 L110,180 L115,187.5" /> <path fill="#142C52" d="M105,182.5 L115,187.5 L120,185 L120,190 L100,190 L90, 192.5 L95, 187.5" /> <path fill="#2373A8" d="M90,192.5 L95, 187.5 L95, 175.5 L94, 172 L90, 170" /> <path fill="#1F4370" d="M90,192.5 L80, 190 L80, 180" /> <path fill="#8091A5" d="M80,180 L80, 190 L70, 185" /> <path fill="#04182C" d="M70,185 L60, 192.5 L60, 190" /> <!-- Layer4 --> <path fill="#C2BDB9" d="M140,185 L140,175 L125,182.5" /> <path fill="#11162C" d="M125,177.5 L140,175 L125,182.5" /> <path fill="#2F435C" d="M125,177.5 L120, 175 L120, 185" /> <path fill="#103A66" d="M125,177.5 L125, 182.5 L120, 185" /> <path fill="#344A67" d="M110,180 L120, 175 L120, 185" /> <path fill="#385573" d="M110,180 L110,170 L120, 175" /> <path fill="#3F628A" d="M110,180 L110,170 L100, 175" /> <path fill="#385573" d="M110,180 L100, 185 L100, 175" /> <path fill="#0D1424" d="M100,175 L100, 185 L95, 187.5 L95, 175 L94, 172" /> <path fill="#2965A8" d="M90,170 L80, 180 L90, 192.5" /> <path fill="#0F0B0B" d="M80,180 L70, 185 L75, 177.5" /> <path fill="#1C4F7A" d="M70,175 L70, 185 L75, 177.5" /> <path fill="#1F6AA4" d="M70,175 L70, 185 L60, 190" /> <path fill="#2D7EBF" d="M70,175 L60, 175 L60, 190" /> <!-- Layer5 --> <path fill="#090A0C" d="M125,177.5 L140,175 L120,175" /> <path fill="#090A0C" d="M125,167.5 L140,175 L120,175" /> <path fill="#0F1523" d="M125,167.5 L140,165 L140,175" /> <path fill="#152330" d="M125,167.5 L140,165 L135,162.5" /> <path fill="#0B0A0F" d="M135,162.5 L125,167.5 L115,162.5 L125,157.5" /> <path fill="#0C0D11" d="M115,162.5 L125,157.5 L120,150" /> <path fill="#100F14" d="M115,162.5 L125,167.5 L120,175 L110,170" /> <path fill="#0A0B0D" d="M115,162.5 L105,157.5 L120,150" /> <path fill="#12151E" d="M115,162.5 L105,157.5 L110,170" /> <path fill="#153158" d="M105,157.5 L90,170 L110,170" /> <path fill="#19325A" d="M100,175 L90,170 L110,170" /> <path fill="#D7D3D0" d="M70,175 L60, 175 L60, 170 L70, 165 L80, 170" /> <path fill="#222931" d="M80,170 L70, 165 L75, 162.5" /> <path fill="#16131A" d="M80,170 L90, 165 L75, 162.5" /> <path fill="#495466" d="M80,170 L70, 175 L80, 180 L90, 170 L105, 157.5" /> <!--Layer5 --> <path fill="#0A0B0D" d="M120,150 L120, 140 L105, 150 L100, 160" /> <path fill="#305D94" d="M100,160 L100, 150 L105, 150" /> <path fill="#345C8D" d="M100,160 L90, 165 L90, 160" /> <path fill="#1B4F74" d="M100,160 L90, 140 L90, 160" /> <path fill="#192929" d="M90,165 L75, 162.5 L90, 150" /> <path fill="#0B0C0E" d="M120,140 L110,147 L110,140" /> <path fill="#15141A" d="M105,150 L110,147 L110,140" /> <path fill="#132B4F" d="M100,150 L100,160 L90,140" /> <path fill="#132B4F" d="M100,150 L110,140 L90,140" /> <path fill="#141519" d="M100,150 L110,140 L105,150" /> <path fill="#15141A" d="M110,135 L110,140 L120,140" /> <path fill="#0A0B0C" d="M110,135 L110,130 L120,127.5 L120,140" /> <path fill="#08090B" d="M110,125 L110,130 L120,127.5" /> <path fill="#08090B" d="M110,125 L120,127.5 L125, 122.5 L110, 120" /> <path fill="#0F1012" d="M125,122.5 L110,120 L130,110" /> <path fill="090A0C" d="M110,95 L115,80 L115,60 L130,100 L130,110 L110,120" /> <path fill="#4996CB" d="M115,60 L110, 80 L114,82.5 L115,80" /> <path fill="#1B598A" d="M110,80 L114,82.5 L110,100" /> <path fill="#D8D0CD" d="M110,80 L105,77.5 L100,80" /> <path fill="#121116" d="M110,80 L110,100 L100,80" /> <path fill="#090B0A" d="M110,80 L105,77.5 L105,60" /> <path fill="#144070" d="M100,80 L105,77.5 L105,60" /> <path fill="#11151A" d="M100,100 L107.5,95 L100,80" /> <path fill="#111B27" d="M107.5,95 L100,100 L100,140 L110, 140 L110,100 " /> <path fill="#0B0C0E" d="M100,140 L90,140 L80,135 L90,130 L100,135 " /> <path fill="#0D233A" d="M90,130 L100,135 L100,125 " /> <path fill="#0D233A" d="M90,130 L90,120 L100,125 " /> <path fill="#2C415D" d="M90,110 L90,120 L100,125 L100,100 " /> <path fill="#13395E" d="M90,110 L90,120 L75,115 " /> <path fill="#184B6A" d="M75,115 L80,120 L85,118 " /> <path fill="#D8C3D3" d="M80,120 L85,118 L90,120 L90,125 " /> <path fill="#D7CEDF" d="M90,125 L90,130 L85,132.5 L85,122.5 " /> <path fill="#D9D1E2" d="M85,132.5 L80,135 L80,130 L85,127.5 " /> <path fill="#CBC2D5" d="M85,127.5 L80,125 L80,120 L85,122.5 " /> <path fill="#9365A3" d="M85,127.5 L80,125 L80,130 " /> <path fill="#0F395F" d="M75,115 L85,100 L90,110 " /> <path fill="#1D74B5" d="M86.5,103 L90,105 L100,100 L90,110 " /> <path fill="red" d="M86,102 L87,104 L90,105 L95,102.5 L90,100 " /> <path fill="#0D5997" d="M85,97.5 L90,95 L100,100 L95,102.5 L90,100 L86,102 L85,101 " /> <path fill="#074B7A" d="M90,95 L100,80 L100,100 " /> <path fill="#7587A3" d="M90,95 L100,80 L85,97.5 " /> <path fill="#B9B4B5" d="M85,97.5 L100,80 L85,92.5 " /> <img src="https://cdn.discordapp.com/attachments/838602710596583436/840553505295171624/the_batman__2022__logo_png__by_mintmovi3_de3mn3j-fullview.png" width="300" height="100"> </svg> <img class="ref" src="https://cdn.discordapp.com/attachments/838602710596583436/840422580741734440/SVG-Animated-Low-Poly-Batman-1-700x400.jpg" width="200"> </body> </html>