-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
1 lines (1 loc) · 17.2 KB
/
index.html
1
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="shortcut icon" href="./icon/icon.png" type="image/x-icon"> <title>[email protected]</title> <style> .zdog-canvas { align-self: center; justify-self: center; display: grid; grid-area: 1 / 1 / 2 / 2; } svg { display: grid; align-self: center; justify-self: center; grid-area: 1 / 1 / 2 / 2; } body { background: #342c47; display: grid; margin: 0; } .container { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; grid-column-gap: 0px; grid-row-gap: 0px; width: 100vw; height: 100vh; align-self: center; justify-self: center; } </style> </head> <body oncontextmenu="return false" onselectstart="return false"> <div class="container"> <canvas class="zdog-canvas" width="640" height="640"></canvas> <svg width="640px" height="640px" viewBox="0 0 640 640" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g id="Artboard" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="background" transform="translate(0.000000, 14.202532)"> <path d="M311.09096,81.0126582 L512.405063,81.0126582 C537.013194,81.0126582 556.962025,100.96149 556.962025,125.56962 L556.962025,141.772152 C556.962025,152.543831 553.139705,162.42276 546.777421,170.126582 L585.316456,170.126582 C609.924586,170.126582 629.873418,190.075414 629.873418,214.683544 L629.873418,230.886076 C629.873418,255.494207 609.924586,275.443038 585.316456,275.443038 L560.506491,275.443038 C565.917968,282.81933 569.113924,291.922513 569.113924,301.772152 L569.113924,317.974684 C569.113924,329.715359 564.572978,340.39544 557.15158,348.35443 L595.443038,348.35443 C620.051169,348.35443 640,368.303262 640,392.911392 L640,409.113924 C640,433.722055 620.051169,453.670886 595.443038,453.670886 L528.797149,453.670886 C536.218547,461.629877 540.759494,472.309957 540.759494,484.050633 L540.759494,500.253165 C540.759494,524.861295 520.810662,544.810127 496.202532,544.810127 L440.784299,544.810127 C441.266849,547.437175 441.518987,550.144839 441.518987,552.911392 L441.518987,569.113924 C441.518987,593.722055 421.570156,613.670886 396.962025,613.670886 L307.848101,613.670886 C283.239971,613.670886 263.291139,593.722055 263.291139,569.113924 L263.291139,552.911392 C263.291139,550.144839 263.543277,547.437175 264.025828,544.810127 L204.556962,544.810127 C179.948831,544.810127 160,524.861295 160,500.253165 L160,484.050633 C160,472.309957 164.540946,461.629877 171.962344,453.670886 L127.594937,453.670886 C102.986806,453.670886 83.0379747,433.722055 83.0379747,409.113924 L83.0379747,392.911392 C83.0379747,381.170717 87.5789212,370.490636 95.0003191,362.531646 L56.7088608,362.531646 C32.1007301,362.531646 12.1518987,342.582814 12.1518987,317.974684 L12.1518987,301.772152 C12.1518987,277.164021 32.1007301,257.21519 56.7088608,257.21519 L81.5188253,257.21519 C76.1073487,249.838898 72.9113924,240.735715 72.9113924,230.886076 L72.9113924,214.683544 C72.9113924,203.911865 76.7337125,194.032936 83.0959968,186.329114 L44.556962,186.329114 C19.9488314,186.329114 -1.83026552e-14,166.380283 0,141.772152 L0,125.56962 C-3.01362684e-15,100.96149 19.9488314,81.0126582 44.556962,81.0126582 L152.70649,81.0126582 C149.600233,74.936163 147.848101,68.0524445 147.848101,60.7594937 L147.848101,44.556962 C147.848101,19.9488314 167.796933,1.16258676e-14 192.405063,0 L271.392405,0 C296.000536,2.5849871e-15 315.949367,19.9488314 315.949367,44.556962 L315.949367,60.7594937 C315.949367,68.0524445 314.197235,74.936163 311.090958,81.0126628 Z M72.9113924,475.949367 L91.1392405,475.949367 C101.206203,475.949367 109.367089,484.110253 109.367089,494.177215 L109.367089,504.303797 C109.367089,514.37076 101.206203,522.531646 91.1392405,522.531646 L72.9113924,522.531646 C62.8444299,522.531646 54.6835443,514.37076 54.6835443,504.303797 L54.6835443,494.177215 C54.6835443,484.110253 62.8444299,475.949367 72.9113924,475.949367 Z M520.506329,6.07594937 L538.734177,6.07594937 C548.80114,6.07594937 556.962025,14.2368349 556.962025,24.3037975 L556.962025,34.4303797 C556.962025,44.4973423 548.80114,52.6582278 538.734177,52.6582278 L520.506329,52.6582278 C510.439367,52.6582278 502.278481,44.4973423 502.278481,34.4303797 L502.278481,24.3037975 C502.278481,14.2368349 510.439367,6.07594937 520.506329,6.07594937 Z" id="Combined-Shape" fill="#342C47"></path> <path d="M510.379747,498.227848 C511.054852,513.755274 519.156118,521.518987 534.683544,521.518987 C519.156118,521.518987 511.054852,529.2827 510.379747,544.810127 C510.379747,529.2827 502.278481,521.518987 486.075949,521.518987 C502.278481,521.518987 510.379747,513.755274 510.379747,498.227848 Z" id="stars-1" fill="#F19925"></path> <path d="M151.898734,534.683544 C152.57384,550.21097 160.675105,557.974684 176.202532,557.974684 C160.675105,557.974684 152.57384,565.738397 151.898734,581.265823 C151.898734,565.738397 143.797468,557.974684 127.594937,557.974684 C143.797468,557.974684 151.898734,550.21097 151.898734,534.683544 Z" id="stars-2" fill="#F19925"></path> <path d="M81.0126582,291.64557 C81.6877637,307.172996 89.7890295,314.936709 105.316456,314.936709 C89.7890295,314.936709 81.6877637,322.700422 81.0126582,338.227848 C81.0126582,322.700422 72.9113924,314.936709 56.7088608,314.936709 C72.9113924,314.936709 81.0126582,307.172996 81.0126582,291.64557 Z" id="stars-3" fill="#F19925"></path> <path d="M558.987342,95.1898734 C559.662447,110.7173 567.763713,118.481013 583.291139,118.481013 C567.763713,118.481013 559.662447,126.244726 558.987342,141.772152 C558.987342,126.244726 550.886076,118.481013 534.683544,118.481013 C550.886076,118.481013 558.987342,110.7173 558.987342,95.1898734 Z" id="stars-4" fill="#F19925"></path> <path d="M266.329114,6.07594937 C266.863572,18.2278481 273.277075,24.3037975 285.56962,24.3037975 C273.277075,24.3037975 266.863572,30.3797468 266.329114,42.5316456 C266.329114,30.3797468 259.915612,24.3037975 247.088608,24.3037975 C259.915612,24.3037975 266.329114,18.2278481 266.329114,6.07594937 Z" id="stars-5" fill="#F19925"></path> <path d="M206.582278,194.43038 C207.257384,209.957806 215.35865,217.721519 230.886076,217.721519 C215.35865,217.721519 207.257384,225.485232 206.582278,241.012658 C206.582278,225.485232 198.481013,217.721519 182.278481,217.721519 C198.481013,217.721519 206.582278,209.957806 206.582278,194.43038 Z" id="stars-5-copy" fill="#F19925"></path> <path d="M344.303797,449.620253 C344.697609,459.07173 349.423347,463.797468 358.481013,463.797468 C349.423347,463.797468 344.697609,468.523207 344.303797,477.974684 C344.303797,468.523207 339.578059,463.797468 330.126582,463.797468 C339.578059,463.797468 344.303797,459.07173 344.303797,449.620253 Z" id="stars-5-copy-2" fill="#F19925"></path> <path d="M410.126582,103.291139 C410.942335,122.194093 420.731364,131.64557 439.493671,131.64557 C420.731364,131.64557 410.942335,141.097046 410.126582,160 C410.126582,141.097046 400.337553,131.64557 380.759494,131.64557 C400.337553,131.64557 410.126582,122.194093 410.126582,103.291139 Z" id="stars-5-copy-3" fill="#F19925"></path> <path d="M182.500113,199.79489 L182.494594,199.800831 C179.17794,203.116017 173.804512,203.115805 170.487646,199.800831 C167.170785,196.485857 167.170785,191.11515 170.487646,187.799964 C247.854997,110.47179 373.745174,110.454817 451.129508,187.799964 C481.132229,217.788341 496.605317,256.989647 494.714715,298.197251 C492.893357,338.242577 474.99693,377.164665 444.332321,407.813745 C418.977669,433.158104 385.675277,445.822221 352.372884,445.822221 C319.070491,445.822221 285.77107,433.158528 260.413447,407.813745 C219.184966,366.605717 219.184966,299.537753 260.413447,258.330149 C276.716505,242.036196 298.374523,233.068538 321.426793,233.068538 C344.478637,233.068538 366.13793,242.036196 382.440139,258.330149 C410.019903,285.895524 410.019903,330.748241 382.440139,358.314039 C359.717751,381.023223 322.753539,381.039772 300.016292,358.314039 C281.176495,339.481661 281.176495,308.833429 300.016292,290.003172 C307.645189,282.378053 317.778134,278.184348 328.558107,278.184348 C339.338079,278.184348 349.471024,282.378138 357.099922,290.003172 C363.534832,296.418402 367.067289,304.954926 367.067289,314.02188 C367.067289,323.105808 363.517977,331.625784 357.099922,338.040589 C351.643492,343.494128 344.379715,346.494367 336.668029,346.494367 C328.939785,346.494367 321.692566,343.494256 316.236137,338.040589 C312.919271,334.725615 312.919483,329.354908 316.236137,326.039722 C319.55279,322.724536 324.926219,322.724536 328.243084,326.039722 C332.737464,330.548375 340.581612,330.531825 345.075992,326.039722 C348.293426,322.824044 350.067954,318.564057 350.067954,314.022305 C350.067954,309.480553 348.293341,305.220608 345.075992,302.004888 C335.970904,292.904835 321.127903,292.904835 312.02324,302.004888 C306.119028,307.939336 302.85192,315.796062 302.85192,324.167092 C302.85192,332.554672 306.102767,340.411822 312.02324,346.329297 C328.127604,362.424658 354.313967,362.424658 370.43404,346.329297 C391.396631,325.379443 391.396631,291.298269 370.43404,270.346293 C357.331731,257.268017 339.918451,250.057567 321.410235,250.057567 C302.902018,250.057567 285.504872,257.251467 272.403412,270.346293 C237.792104,304.938801 237.792104,361.214005 272.403412,395.807786 C316.502335,439.884378 388.2273,439.884378 432.326223,395.807786 C459.971369,368.157543 476.107915,333.214951 477.749769,297.410942 C479.408096,261.027703 465.692724,226.366027 439.124683,199.79489 C368.376204,129.082237 253.248592,129.082237 182.500113,199.79489 Z M489.427433,430.03592 L489.428713,430.037191 C492.762915,426.727356 498.164774,426.727568 501.499189,430.037191 C504.833604,433.346815 504.833604,438.708855 501.499189,442.01869 C464.41836,478.822792 414.571791,498.797468 362.73631,498.797468 C348.848498,498.797468 334.827097,497.37444 320.856058,494.44522 C316.254416,493.468686 313.303485,488.983832 314.270455,484.399838 C315.254241,479.832117 319.755754,476.902939 324.390431,477.86278 C385.709522,490.703888 445.863435,473.27879 489.427433,430.03592 Z M301.143233,471.30247 L301.143444,471.30026 C305.532662,472.877601 307.842651,477.725665 306.30815,482.158884 C305.087409,485.645443 301.820216,487.837072 298.338697,487.837072 C297.398177,487.837072 296.457699,487.687648 295.51718,487.355569 C268.230029,477.644566 243.378869,462.535917 221.68136,442.462318 C193.663876,416.526073 177.427641,376.928883 177.130435,333.825071 C177.097703,329.126454 180.843139,325.291103 185.51279,325.257864 L185.578769,325.257864 C190.215304,325.257864 193.993814,329.010161 194.026804,333.692457 C194.290805,371.534212 208.893232,407.512569 233.115436,429.926891 C253.12883,448.439725 276.01371,462.353148 301.143233,471.30247 Z M373.005488,211.908556 L373.0057,211.908684 C327.812927,189.226791 268.975292,198.817749 233.071555,234.739241 C213.718265,254.103801 200.849469,279.188956 195.82456,307.295814 C195.07821,311.410454 191.495988,314.297468 187.466125,314.297468 C186.968602,314.297468 186.454521,314.247687 185.956997,314.164733 C181.346655,313.335187 178.262084,308.938128 179.091262,304.309153 C184.713081,272.766879 199.224015,244.561478 221.048155,222.726545 C261.9785,181.794223 329.073528,170.843201 380.617487,196.726894 C384.813177,198.834102 386.504732,203.927843 384.398566,208.125607 C382.292401,212.323372 377.18462,214.015721 373.005488,211.908556 Z M424.998085,298.29755 L424.998169,298.298858 C425.064493,271.594671 415.691273,246.883264 399.272085,230.497055 C397.374502,228.601086 395.394289,226.771248 393.381083,225.05679 C389.8167,222.040188 389.387664,216.715345 392.407473,213.154547 C395.443589,209.59375 400.773837,209.165146 404.321703,212.181917 C406.697958,214.193266 409.024619,216.336117 411.235868,218.545141 C430.806921,238.097348 441.995094,267.175822 441.913043,298.349205 C441.830214,329.473212 430.559368,358.551686 410.955364,378.119507 C403.562568,385.504865 394.585602,391.472656 384.288494,395.824531 C383.199387,396.286137 382.093763,396.500439 380.988138,396.500439 C377.687572,396.500439 374.568742,394.571468 373.199089,391.356854 C371.367365,387.070814 373.38074,382.108656 377.671097,380.295276 C385.971728,376.783644 393.133446,372.035914 398.991497,366.183757 C415.443636,349.7334 424.932057,324.986966 424.998085,298.29755 Z M292.253989,366.722332 L292.253181,366.722246 C305.487521,380.012243 325.629579,387.28249 347.349148,386.682214 C352.098258,386.598973 355.967261,390.267136 356.08348,394.986274 C356.216534,399.705327 352.513571,403.62394 347.814197,403.757339 C346.834491,403.790678 345.854785,403.807369 344.875079,403.807369 C319.552444,403.807369 296.122737,394.786154 280.231582,378.81152 C269.288905,367.806175 261.899729,352.948682 259.408954,336.940752 C258.678649,332.271559 261.849823,327.919451 266.499462,327.185733 C271.132522,326.469004 275.482982,329.636867 276.213628,334.30606 C278.139712,346.762364 283.835073,358.26801 292.253989,366.722332 Z" id="Combined-Shape" fill="#FFFFFF"></path> </g> </g> </svg> </div> </body> </html> <script src="./js/zdog.dist.min.js"></script> <script> var jump = 0.0001; const TAU = Zdog.TAU; let illo = new Zdog.Illustration({ element: '.zdog-canvas', dragRotate: true, zoom: .7 }); let Gato = new Zdog.Anchor({ addTo: illo, translate: { x: -160 }, }); let Robot = new Zdog.Group({ addTo: illo, translate: { x: 80, z: -600 }, rotate: { x: 3 }, scale: 0.5, }); let rglass = new Zdog.Hemisphere({ addTo: Robot, stroke: 6, diameter: 300, color: 'rgba(189,233,232,.4)', fill: true, }); let rBase = new Zdog.Hemisphere({ addTo: Robot, stroke: false, diameter: 320, color: '#B5B9BD', fill: true, backface: '#889B9B', rotate: { x: 2 }, }); let cBody = new Zdog.RoundedRect({ addTo: Gato, width: 40, height: 90, stroke: 100, cornerRadius: 10, color: '#F5C685', fill: false, }); let cBelly = new Zdog.RoundedRect({ addTo: Gato, color: '#FAD3B1', width: 20, height: 45, stroke: 10, fill: true, translate: { z: 50, y: 30 } }); let cRightEye = new Zdog.Ellipse({ addTo: Gato, diameter: 10, stroke: 20, color: '#FEF9DC', translate: { z: 45, x: 30, y: -40 }, }); let cpupil = new Zdog.Ellipse({ addTo: cRightEye, diameter: 5, stroke: 10, color: '#000', translate: { z: 8 }, }); let cLeftEye = new Zdog.Ellipse({ addTo: Gato, diameter: 10, stroke: 20, color: '#FEF9DC', translate: { z: 45, x: -30, y: -40 }, }); cpupil.copyGraph({ addTo: cLeftEye }); let cEar = new Zdog.RoundedRect({ addTo: Gato, width: 18, height: 50, color: '#F5C685', stroke: 20, cornerRadius: 20, translate: { x: 40, y: -75, z: 0 }, fill: true }); let cInsideEar = new Zdog.RoundedRect({ addTo: cEar, width: 8, height: 20, stoke: 10, cornerRadius: 20, fill: true, translate: { z: 10, y: -10 }, color: '#FFA0B7' }); cEar.copyGraph({ translate: { x: -40, y: -75, z: 0 }, }); let cMufflet = new Zdog.RoundedRect({ addTo: Gato, color: '#F5C685', width: 30, height: 5, stroke: 28, cornerRadius: 20, translate: { x: 60, y: -35 }, fill: true }); cMufflet.copyGraph({ translate: { x: -60, y: -35 }, }); cMufflet.copyGraph({ translate: { x: -60, y: -10 }, }); cMufflet.copyGraph({ translate: { x: 60, y: -10 }, }); let cMouth = new Zdog.Shape({ addTo: Gato, translate: { y: -30, z: 50 }, color: '#F5C685', stroke: 30 }); let cNose = new Zdog.Shape({ addTo: cMouth, path: [{ x: -7, y: -7 }, { bezier: [{ x: -7, y: -7 }, { x: 0, y: -14 }, { x: 7, y: -7 }, ] }, { x: 0, y: 0 }], closed: true, translate: { z: 15 }, stroke: 6, color: '#FF6C8D', fill: true, scale: 0.7 }); let cLips = new Zdog.Shape({ addTo: cMouth, color: '#623728', stroke: 4, path: [{ x: -10, y: 10 }, { x: 0, y: 0 }, { x: 10, y: 10 }], closed: false, translate: { z: 14, y: 2 } }); let cArm = new Zdog.RoundedRect({ addTo: Gato, color: '#F5C685', cornerRadius: 10, width: 30, height: 5, stroke: 20, fill: true, translate: { x: 70, y: 20 } }); let cPaw = new Zdog.Ellipse({ addTo: cArm, color: '#FFA0B7', fill: true, stroke: 5, diameter: 6, translate: { x: 10, z: 10 } }); let cFinger = new Zdog.Shape({ addTo: cPaw, color: '#FFA0B7', stroke: 4, translate: { x: 3, y: -8, z: -1 } }); cFinger.copyGraph({ translate: { x: 9, y: -5, z: -1 } }); cFinger.copyGraph({ translate: { x: 9, y: 3, z: -1 } }); cFinger.copyGraph({ translate: { x: 5, y: 8 }, z: -1 }); cArm.copyGraph({ rotate: { z: TAU / 2 }, translate: { x: -70, y: 20 } }); cArm.copyGraph({ rotate: { z: TAU / 4 }, translate: { x: -40, y: 90 } }); cArm.copyGraph({ rotate: { z: TAU / 4 }, translate: { x: 40, y: 90 }, }); let cTail = new Zdog.Shape({ addTo: Gato, path: [{ x: -40, y: -40 }, { arc: [{ x: 20, y: -40 }, { x: 20, y: 20 }, ] }, { arc: [{ x: 20, y: 40 }, { x: 40, y: 40 }, ] }], closed: false, stroke: 15, color: '#F5C685', translate: { x: 10, y: 85, z: -40 } }); let cTailPoint = new Zdog.Shape({ addTo: cTail, color: '#854730', stroke: 16, path: [{ x: 41, y: 40 }], fill: true }); function animate() { Robot.rotate.z += 0.01; Robot.rotate.y += 0.001; Gato.rotate.y -= 0.001; Gato.rotate.z -= -0.01; illo.zoom = illo.zoom - jump; if (illo.zoom < .65) { jump = -1 * jump; }; if (illo.zoom > .7) { jump = -1 * jump; }; illo.dragRotate = Gato; illo.updateRenderGraph(); requestAnimationFrame(animate); }; animate(); </script> <script> document.oncontextmenu = new Function("return false"); document.onselectstart = new Function("return false"); window.onload = function() { document.onkeydown = function() { var e = window.event || arguments[0]; if(e.keyCode == 123) { return false; } else if((e.ctrlKey) && (e.shiftKey) && (e.keyCode == 73)) { return false; } else if((e.shiftKey) && (e.keyCode == 121)){ return false; } }; } </script>