DEV MAN

HTML
<div id="screen1"> <svg version="1.1" id="devman" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 2222 337.5" enable-background="new 0 0 2222 337.5" xml:space="preserve"> <g> <g class="beams" opacity="0.7"> <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="1003.7168" y1="97.4979" x2="1003.7168" y2="965.6392" gradientTransform="matrix(-4.489700e-11 -1 -1 4.489700e-11 1211.5673 1211.5673)"> <stop offset="0" style="stop-color:#00AEEF" /> <stop offset="1" style="stop-color:#000000;stop-opacity:0" /> </linearGradient> <polygon fill="url(#SVGID_1_)" points="1571.4,183.7 1839.3,183.7 1839.3,232 1832.2,232 1832.2,226.9 -540,226.9 -540,197.5 1571.4,197.5 " /> <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="1060.0645" y1="193.7215" x2="1060.0645" y2="991.7781" gradientTransform="matrix(-4.489700e-11 -1 -1 4.489700e-11 1211.5673 1211.5673)"> <stop offset="0" style="stop-color:#008ABE" /> <stop offset="1" style="stop-color:#000000;stop-opacity:0" /> </linearGradient> <polygon fill="url(#SVGID_2_)" points="1576.6,121.5 1580,121.5 1580,181.5 1571.4,181.5 1571.4,177 -540,177 -540,132.5 1576.6,132.5 " /> <linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="1148.2195" y1="-308.2337" x2="1148.2195" y2="681.9942" gradientTransform="matrix(-4.489700e-11 -1 -1 4.489700e-11 1211.5673 1211.5673)"> <stop offset="0" style="stop-color:#00AEEF" /> <stop offset="1" style="stop-color:#000000;stop-opacity:0" /> </linearGradient> <polygon fill="url(#SVGID_3_)" points="2008,50.2 2008,76.5 2005.2,76.5 2005.2,67.2 -540,67.2 -540,50.2 " /> <linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="1020.9952" y1="-206.7266" x2="1020.9952" y2="821.0875" gradientTransform="matrix(-4.489700e-11 -1 -1 4.489700e-11 1211.5673 1211.5673)"> <stop offset="0" style="stop-color:#00AEEF" /> <stop offset="1" style="stop-color:#000000;stop-opacity:0" /> </linearGradient> <rect x="-540" y="183.7" fill="url(#SVGID_4_)" width="2111.4" height="13.8" /> <linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="1032.2737" y1="183.351" x2="1032.2737" y2="986.7203" gradientTransform="matrix(-4.489700e-11 -1 -1 4.489700e-11 1211.5673 1211.5673)"> <stop offset="0" style="stop-color:#008ABE" /> <stop offset="1" style="stop-color:#000000;stop-opacity:0" /> </linearGradient> <rect x="-540" y="177" fill="url(#SVGID_5_)" width="2111.4" height="4.5" /> <linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="982.0814" y1="91.3785" x2="982.0814" y2="962.7315" gradientTransform="matrix(-4.489700e-11 -1 -1 4.489700e-11 1211.5673 1211.5673)"> <stop offset="0" style="stop-color:#00AEEF" /> <stop offset="1" style="stop-color:#000000;stop-opacity:0" /> </linearGradient> <rect x="-540" y="226.9" fill="url(#SVGID_6_)" width="2372.2" height="5.1" /> <linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="1084.567" y1="189.5999" x2="1084.567" y2="989.768" gradientTransform="matrix(-4.489700e-11 -1 -1 4.489700e-11 1211.5673 1211.5673)"> <stop offset="0" style="stop-color:#008ABE" /> <stop offset="1" style="stop-color:#000000;stop-opacity:0" /> </linearGradient> <rect x="-540" y="121.5" fill="url(#SVGID_7_)" width="2116.6" height="11.1" /> <linearGradient id="SVGID_8_" gradientUnits="userSpaceOnUse" x1="1139.6808" y1="-310.5708" x2="1139.6808" y2="680.7806" gradientTransform="matrix(-4.489700e-11 -1 -1 4.489700e-11 1211.5673 1211.5673)"> <stop offset="0" style="stop-color:#00AEEF" /> <stop offset="1" style="stop-color:#000000;stop-opacity:0" /> </linearGradient> <rect x="-540" y="67.2" fill="url(#SVGID_8_)" width="2545.2" height="9.3" /> </g> <linearGradient id="SVGID_9_" gradientUnits="userSpaceOnUse" x1="1024.3059" y1="-232.9818" x2="1024.3059" y2="1162.5428" gradientTransform="matrix(-4.489700e-11 -1 -1 4.489700e-11 1211.5673 1211.5673)"> <stop offset="0" style="stop-color:#00AEEF" /> <stop offset="1" style="stop-color:#000000;stop-opacity:0" /> </linearGradient> <polygon fill="url(#SVGID_9_)" points="1571.4,181.5 1571.4,183.7 1571.4,197.5 -540,197.5 -540,197.5 -540,177 -540,177 1571.4,177 " /> <linearGradient id="SVGID_10_" gradientUnits="userSpaceOnUse" x1="966.5306" y1="-194.8019" x2="966.5306" y2="810.1349" gradientTransform="matrix(-4.489700e-11 -1 -1 4.489700e-11 1211.5673 1211.5673)"> <stop offset="0" style="stop-color:#008ABE" /> <stop offset="1" style="stop-color:#000000;stop-opacity:0" /> </linearGradient> <polygon fill="url(#SVGID_10_)" points="1832.2,232 1832.2,263.1 -540,263.1 -540,226.9 -540,226.9 1832.2,226.9 " /> <linearGradient id="SVGID_11_" gradientUnits="userSpaceOnUse" x1="1092.6057" y1="256.8444" x2="1092.6057" y2="1157.1801" gradientTransform="matrix(-4.489700e-11 -1 -1 4.489700e-11 1211.5673 1211.5673)"> <stop offset="0" style="stop-color:#2E2E2E" /> <stop offset="1" style="stop-color:#000000;stop-opacity:0" /> </linearGradient> <polygon fill="url(#SVGID_11_)" points="-540,106 1576.6,106 1576.6,121.5 1576.6,132.5 -540,132.5 -540,132.5 -540,105.4 -540,105.4 " /> <linearGradient id="SVGID_12_" gradientUnits="userSpaceOnUse" x1="1124.9304" y1="583.1299" x2="1124.9304" y2="1130.3929" gradientTransform="matrix(-4.489700e-11 -1 -1 4.489700e-11 1211.5673 1211.5673)"> <stop offset="0" style="stop-color:#FFD000" /> <stop offset="0.6305" style="stop-color:#000000;stop-opacity:0" /> </linearGradient> <polygon class="beam__1" fill="url(#SVGID_12_)" points="2005.2,76.5 2005.2,106 1576.6,106 -540,106 -540,105.4 -540,67.2 -540,67.2 2005.2,67.2 " /> <path class="cape__1" fill="#E2A500" d="M1959.3,131.4c-2.4-11.3-12.1-56.2-73.4-62.2c-61.3-6-362.9,0-362.9,0s-171.1,4.3-174.5,4.3 s14.7,7.8,16.4,12.1c1.7,4.3-89,18.1-83.8,18.1c55.3,3.5,96.8,15.6,96.8,19c0,3.5,0.9,18.1,0.9,18.1l546,24.2 C1924.8,165.1,1963.6,151.3,1959.3,131.4z" /> <path class="cape__2" fill="#D09300" d="M1744.7,66.5c61.8-0.2,118.3,0.4,141.2,2.7c23,2.3,38.7,10,49.5,19.3c0.5,2,1.9,3.6,4.7,4.5 c1.1,1.1,2.1,2.3,3.1,3.4c0,0,0,0,0.1,0.1c1,1.2,1.9,2.3,2.7,3.5l-37.5,48.9c0,0-259.9,0-349,0l-37.7-1.7 c-29.1-6.2,17.3-27.7,23.8-28.5c7.5-0.9,56.6-2.8,56.6-2.8s27.3-17,35.8-18.9c8.5-1.9,39.6-5.7,51.8-5.7 c12.3,0,48.1-12.3,48.1-12.3S1734.3,72.2,1744.7,66.5z" /> <path class="cape__3" fill="#D09300" d="M1894.6,78.6c-10.7-2.5-437.3,5.8-472.9,5.8s-50.4,9.1,50.4,9.9s409.2,0,409.2,0L1894.6,78.6z" /> <path class="cape__4" fill="#D09300" d="M1752.4,104.3c0,0-261.2,0-320.8,0s-45.5,5-10.7,5c34.7,0,86,0,122.4,0c36.4,0,71.9,5-28.1,5 c-100,0-23.1,6.6,46.3,6.6c69.4,0,195.9,0,195.9,0L1752.4,104.3z" /> <polygon fill="#D09300" points="1627.5,132.4 1398.5,132.4 1477.1,139.8 1648.2,139.8 " /> <path fill="#1C1C1C" d="M1287.7,155c8.9,1,60.6-0.7,68.5-2.4c7.9-1.7,24-2.1,24-2.1l96.5,10.2c-2.2,5.3-4.5,9.9-6.5,11.2 c-5.4,3.5-8.5,16.7-6.6,22.1c0.5,1.4,1.1,2.5,1.7,3.3c-30.3-6.5-69.5-14.2-75.6-14.7c-9.9-0.7-53.7-3.1-69.5-5.1 c-15.7-2.1-37.7-11.6-40.1-15.1C1277.7,159.2,1278.8,154,1287.7,155z" /> <g> <path fill="#008ABE" d="M1465.2,197.4c-0.6-0.8-1.2-1.9-1.7-3.3c-1.9-5.4,1.2-18.6,6.6-22.1c2-1.3,4.3-5.9,6.5-11.2l-55.2-5.9 l139.4,14.8c0,0,130.8,8.6,111.3,40.1c-9.3,15-44.2,17.5-83.9,16.8c-38-0.7-52.7-9.2-58.5-12.7c-8.2-3.4-26.4-5.8-28.4-7.9 c-0.8-0.8-16.9-4.5-36.6-8.7C1464.8,197.4,1465,197.4,1465.2,197.4z" /> </g> <path fill="#00AEEF" d="M1960.2,152.9c-1.2,18.5-19.1,75-62.5,97.1c-43.4,22.1-94.9,16.6-122.9-1.5c-12.5-8.1-25.7-17.7-32.4-19.9 s-41.2-9.6-41.2-9.6v-92c0,0,97.8-9.6,113.3-14.7s89.7-28,107.4-22.8C1939.6,94.7,1963.1,108.7,1960.2,152.9z" /> <path fill="#2E2E2E" d="M1711.8,211.5c-0.8,3.8-2.7,10.6-4.8,10.6c-2.1,0-20.5,1.7-60.6-9.9c-3.8-2.7-0.3-6.2-0.3-6.2 s35.6-10.6,39.7-32.2c4.1-21.6-16.1-45.9-32.9-49.6c-9.9-3.4-1.4-3.4-1.4-3.4s70.2,1.4,71.2,4.5 C1723.8,128.3,1713.2,205,1711.8,211.5z" /> <g> <path fill="#00AEEF" d="M1463.1,142.9c2.5-9.3,4.3-14.9,7.2-17.3c6-0.7,10.8-1.1,13.5-1.1c13.4,0,38.3,34.2,39.4,32.5 c1-1.7,6.2-1.4,10.6-6.2c3.1-7.5,101.3-54.4,145.8-15.1c12.5,11.1,13,71.2-25,80.4c-38,9.2-88.7,4.5-102,1.7 c-13.4-2.7-15.4-12.3-18.8-13c-3.4-0.7-16.4-15.4-17.5-16.8c-1.8,0-26.3-5.3-53.8-12.1C1459.4,170.5,1459.9,155.3,1463.1,142.9z" /> </g> <path fill="#2E2E2E" d="M1462.5,176.1c-23.7-5.9-49.8-12.8-65.7-18.3c-6.5-2.7-21.9-5.5-25.3-5.1c-3.4,0.3-31.8-4.5-31.8-4.5 s-47.9-2.7-67.8-9.6c-9.2-6.2,8.6-11.3,17.1-11c9.9-1,24.3-10.6,37.3-9.9c13,0.7,34.9,13.4,40.7,12.7c5.8-0.7,18.5-5.8,25.3-1.7 c6.8,4.1,9.9,6.2,9.9,6.2s43.7-6.6,68-9.2c-2.9,2.4-4.7,8-7.2,17.3C1459.9,155.3,1459.4,170.5,1462.5,176.1z" /> <path fill="#BB906D" d="M1955.4,178.6l-0.7,1.4c0,0-12.6,28.8-24.7,35.7c-12.1,6.9-11.6,3.9-11.6,3.9l26.2-71.2l6.4-30.3 L1955.4,178.6z" /> <g class="head"> <path fill="#ECC19C" d="M1932.9,195.2c0,0,15.5-35.6,18.1-77.1c-6.5-8.4-13.6-14.9-13.6-14.9s47.3-42.8,59-50.5 s55.1-8.4,55.1,27.9s-22.7,103-22.7,103s7.8,6.5,3.2,16.8s-12.3,13-33.7,1.3c-21.4-11.7-33.7-28.5-33.7-28.5L1932.9,195.2z" /> <path fill="#ECC19C" d="M2034,152.4l18.1,7.8c0,0-6.5-42.1-3.2-68C2034.6,111.6,2034,152.4,2034,152.4z" /> <path fill="#BB906D" d="M1971.3,141.9c3.1,6.3,19.7,37,26.2,42.7c6.6,5.8,15,10.1,19.1,15c3.6,4.2-1.6,3.3,1.6,6.8 c1.9,1.2,1.4,2.1-0.8,2.7c-4.8-0.7-11-3-19.1-7.5c-21.4-11.7-33.7-28.5-33.7-28.5C1948.6,151,1938.4,100.3,1971.3,141.9z" /> <path fill="#ECC19C" d="M2025.5,174.3c0,0,0.1-11,6.5-6.2c6.4,4.9,5.9,5.8,5.2,8.5s-2,4.3-5.2,2.7 C2030.3,178.5,2025.5,174.3,2025.5,174.3z" /> <path fill="#2E2E2E" d="M2048.5,125.4c0,0-7.5-3.6-15.6,1.7c-1.1-1.9-6.5-20.9-19.8-28.4s5.1-27.9,5.1-27.9l31.8,22.1l0.3,5.1 c0,0,0.7,1.5,0.7,2.2c0,0.6-1.1,19.1-1.6,25.2c-0.1,1.2-0.7,1.6-0.7,1.6L2048.5,125.4z" /> <path fill="#00AEEF" d="M1996.4,52.6c11.7-7.8,55.1-8.4,55.1,27.9c0,5.3-0.5,11.2-1.3,17.4c-4.3-5.1-11.6-11.7-22.5-14.7 c-10.5,15.3-10.2,43.5-10.2,43.5s-17.3-6.8-40.7,18.8c-1.1,1.2-7.1,3-26.8-16c0.4-3.8-3.4-5.2-3.1-9.1c-6.5-8.4-9.4-17.3-9.4-17.3 S1984.7,60.4,1996.4,52.6z" /> <path class="eye" fill="#FFFFFF" d="M2037.8,105.3c0,0-3.5,3.8-5,2.8c-1.5-1-7-10.7-7-10.7L2037.8,105.3z" /> <path fill="#BB906D" d="M1990.4,77.3c0,0,8.9,9.5-4.6,23.9s-21.3-1.4-18.7-8.6C1969.7,85.3,1990.4,77.3,1990.4,77.3z" /> <path fill="#DFB28B" d="M1991.1,78.2c1.8,2.7,5.6,11-4.9,22.5c-1.9,0.9-3.6,1.4-4.4,1.5c-2.6,0.5-6.2-2.6-6.2-2.6l13.7-20.7 L1991.1,78.2z" /> <path fill="#ECC19C" d="M1975.7,99.6c0,0-17.6-9.5-11.5-23.9s25.3-4.9,27.4,3.2C1993.5,86.9,1992.4,98.7,1975.7,99.6z" /> <path fill="#DFB28B" d="M2028.8,199.9c-1.2,2.3-3.2,5.2-5.9,5.4c-2.7,0.2-3.1-0.3-4.8-1.3c-1.6,0.5,1,3.4,3.1,3.4 c2,0,1.4-1.4,1.4-1.4s3,1.2,6.8-5.6c1.5-3.3,1.7-5.7,1.9-6.9c0.1-0.6,0.9-1.1,0.1-1.7c-1.4-1.3-1.4-0.3-0.7,0.9 C2030.5,194.2,2030.4,196.8,2028.8,199.9z" /> <path fill="#DFB28B" d="M2028.9,176.8c0.5,0.4,3.9,3.4,5.6,2.9s2.6-1.3,0.4-2.8c-2.2-1.5-6.9-4.7-9.3-5.9 S2027.6,175.8,2028.9,176.8z" /> <path fill="#BB906D" d="M2033.4,169.1c-4.8-3.3-24-20.3-24-20.3s4.5-6.7,4.2-6c-0.4,0.7-0.8,6.2-0.8,6.2 S2025.8,162.3,2033.4,169.1z" /> <path fill="#BB906D" d="M2052.1,160.2l-19.7-13.6c-0.2-0.1-0.5,0.1-0.3,0.3l5.8,7.2L2052.1,160.2z" /> </g> <path fill="#FFF200" d="M1949.5,116.1c2.6,45.8-13.5,79.2-24.5,95.7c17.4-6.3,29.7-31.9,29.7-31.9c-3.4,9-15,36-27.9,42.6 c-12.9,6.6-21.1,9.3-21.1,9.3s35.4-59,37.4-105.7c-1.1-7.9-0.8-13.4,0-17.3C1945.6,111.4,1946.8,112.6,1949.5,116.1z" /> <g class="chest"> <g> <path class="chest__logo" fill="#FFF200" d="M1906.1,226.8l-27.3,11.9c-1.1,0.5-2.1,1-3,1.5c-0.9,0.5-1.7,1.1-2.3,1.6c-0.6,0.5-1.1,1.1-1.3,1.5 c-0.3,0.5-0.3,0.9-0.2,1.2c0.1,0.3,0.5,0.5,0.9,0.6c0.5,0.1,1.1,0.1,1.8,0c0.7-0.1,1.5-0.3,2.4-0.5c0.9-0.3,1.8-0.6,2.7-1 l11.4-5.1c0.3-0.1,0.6-0.2,0.9-0.3c0.3-0.1,0.5-0.1,0.7-0.1c0.2,0,0.3,0,0.4,0.1c0.1,0,0.2,0.1,0.1,0.2c0,0.1-0.1,0.2-0.2,0.4 c-0.1,0.1-0.3,0.3-0.5,0.5c-0.2,0.2-0.4,0.3-0.7,0.5c-0.3,0.2-0.6,0.3-0.9,0.4l-11,4.9c-0.9,0.4-1.8,0.9-2.5,1.3 c-0.8,0.5-1.4,0.9-2,1.4c-0.5,0.4-0.9,0.8-1.2,1.2c-0.2,0.4-0.3,0.7-0.2,0.9c0.1,0.2,0.4,0.4,0.8,0.4c0.4,0.1,0.9,0,1.5-0.1 c0.6-0.1,1.3-0.3,2-0.5c0.7-0.2,1.5-0.5,2.4-0.9l10-4.5c0.3-0.1,0.5-0.2,0.8-0.3c0.2-0.1,0.4-0.1,0.6-0.1c0.2,0,0.3,0,0.4,0 c0.1,0,0.1,0.1,0.1,0.2c0,0.1-0.1,0.2-0.2,0.3c-0.1,0.1-0.3,0.2-0.4,0.4c-0.2,0.1-0.4,0.3-0.6,0.4c-0.2,0.1-0.5,0.3-0.7,0.4 l-18.4,8.3l-2.1,2.1l20.4-9.3c0.8-0.3,1.5-0.7,2.1-1.1c0.7-0.4,1.3-0.8,1.8-1.2c0.5-0.4,1-0.8,1.3-1.1c0.3-0.3,0.5-0.7,0.6-0.9 c0.1-0.3-0.1-0.5-0.3-0.6c-0.2-0.1-0.6-0.1-1.1-0.1c-0.5,0.1-1.1,0.2-1.8,0.4c-0.7,0.2-1.5,0.5-2.3,0.9l-10.3,4.6 c-0.3,0.1-0.6,0.2-0.8,0.3c-0.3,0.1-0.5,0.1-0.7,0.2c-0.2,0-0.4,0-0.5,0c-0.1,0-0.2-0.1-0.2-0.2c0-0.1,0-0.2,0.1-0.3 c0.1-0.1,0.2-0.3,0.4-0.4c0.2-0.1,0.4-0.3,0.7-0.4c0.3-0.1,0.5-0.3,0.8-0.4l10.7-4.8c0.9-0.4,1.7-0.8,2.4-1.3 c0.8-0.4,1.4-0.9,2-1.4c0.6-0.5,1.1-0.9,1.5-1.3c0.4-0.4,0.6-0.8,0.7-1.2c0.1-0.3,0-0.6-0.3-0.8c-0.3-0.2-0.7-0.2-1.3-0.2 c-0.6,0-1.3,0.2-2.1,0.4c-0.8,0.2-1.7,0.6-2.7,1l-11.9,5.3c-0.3,0.1-0.7,0.3-1,0.4c-0.3,0.1-0.6,0.1-0.8,0.2c-0.2,0-0.4,0-0.6,0 c-0.2,0-0.2-0.1-0.3-0.2c0-0.1,0-0.3,0.1-0.4c0.1-0.2,0.3-0.3,0.5-0.5c0.2-0.2,0.5-0.4,0.8-0.5c0.3-0.2,0.6-0.3,1-0.5l23-10.1 L1906.1,226.8z" /> </g> <g> <path fill="#FFD000" d="M1917.2,229.1c1.2-2.3,1.5-4.2,1-5.7c-0.6-1.7-2.2-2.8-4.8-3.4c-2.8-0.6-6.6-0.5-11.4,0.4 c-5,0.9-11,2.8-17.4,5.5c-6.5,2.8-12.6,6.1-17.9,9.6c-5.1,3.4-9.2,6.8-12.1,10.1c-2.7,3-4.3,5.7-4.8,8c-0.4,2.1,0.3,3.7,1.9,4.9 c1.5,1,3.8,1.5,6.4,1.6c2.5,0.1,5.4-0.2,8.5-0.9c3-0.6,6.2-1.5,9.5-2.6c3.2-1.1,6.6-2.4,10.1-4c3.5-1.6,6.7-3.3,9.8-5.1 c3.1-1.8,6-3.7,8.7-5.7c2.7-2,5.2-4.1,7.3-6.2C1914.3,233.4,1916,231.2,1917.2,229.1z M1857,256c-1.2-1-1.5-2.5-1-4.3 c0.6-1.9,2.1-4.2,4.4-6.7c2.5-2.6,5.9-5.4,10.1-8.1c4.2-2.8,9.1-5.4,14.3-7.6c5.1-2.2,9.9-3.7,14-4.6c3.9-0.8,7.2-1,9.6-0.6 c2.3,0.4,3.8,1.2,4.5,2.5c0.6,1.2,0.5,2.7-0.3,4.6c-0.8,1.7-2.2,3.6-4,5.4c-1.7,1.8-3.8,3.6-6.2,5.3c-2.3,1.7-4.8,3.4-7.5,5 c-2.7,1.6-5.6,3.1-8.6,4.5c-3.1,1.4-6.1,2.6-8.9,3.5c-2.9,1-5.7,1.7-8.2,2.2c-2.7,0.5-5.1,0.7-7.1,0.6 C1859.8,257.5,1858.1,256.9,1857,256" /> </g> <g> <path fill="#2E2E2E" d="M1912.6,231.1c0.9-1.8,0.9-3.4,0.3-4.6c-0.7-1.3-2.2-2.1-4.5-2.5c-2.4-0.4-5.7-0.2-9.6,0.6 c-4.1,0.9-8.9,2.4-14,4.6c-5.2,2.2-10.1,4.9-14.3,7.6c-4.1,2.7-7.6,5.5-10.1,8.1c-2.4,2.5-3.9,4.7-4.4,6.7 c-0.5,1.8-0.2,3.3,1,4.3c1.1,1,2.9,1.5,5,1.6c2,0.1,4.5-0.1,7.1-0.6c2.5-0.5,5.3-1.2,8.2-2.2c2.8-0.9,5.8-2.1,8.9-3.5 c3-1.4,5.9-2.9,8.6-4.5c2.7-1.6,5.3-3.3,7.5-5c2.4-1.8,4.5-3.6,6.2-5.3C1910.4,234.7,1911.8,232.8,1912.6,231.1z M1872.1,244.6 c-0.1-0.3-0.1-0.7,0.2-1.2c0.3-0.5,0.7-1,1.3-1.5c0.6-0.5,1.4-1.1,2.3-1.6c0.9-0.5,1.9-1.1,3-1.5l27.3-11.9l-3.9,3.6l-23,10.1 c-0.3,0.2-0.7,0.3-1,0.5c-0.3,0.2-0.5,0.4-0.8,0.5c-0.2,0.2-0.4,0.3-0.5,0.5c-0.1,0.2-0.1,0.3-0.1,0.4c0,0.1,0.1,0.2,0.3,0.2 c0.2,0,0.4,0,0.6,0c0.2,0,0.5-0.1,0.8-0.2c0.3-0.1,0.6-0.2,1-0.4l11.9-5.3c1-0.4,1.9-0.7,2.7-1c0.8-0.2,1.5-0.4,2.1-0.4 c0.6,0,1,0,1.3,0.2c0.3,0.2,0.4,0.4,0.3,0.8c-0.1,0.3-0.3,0.7-0.7,1.2c-0.4,0.4-0.9,0.9-1.5,1.3c-0.6,0.5-1.3,0.9-2,1.4 c-0.8,0.4-1.6,0.9-2.4,1.3l-10.7,4.8c-0.3,0.1-0.6,0.3-0.8,0.4c-0.3,0.1-0.5,0.3-0.7,0.4c-0.2,0.1-0.3,0.3-0.4,0.4 c-0.1,0.1-0.1,0.2-0.1,0.3c0,0.1,0.1,0.1,0.2,0.2c0.1,0,0.3,0,0.5,0c0.2,0,0.4-0.1,0.7-0.2c0.3-0.1,0.5-0.2,0.8-0.3l10.3-4.6 c0.8-0.4,1.6-0.7,2.3-0.9c0.7-0.2,1.3-0.4,1.8-0.4c0.5-0.1,0.9,0,1.1,0.1c0.2,0.1,0.4,0.3,0.3,0.6c-0.1,0.3-0.3,0.6-0.6,0.9 c-0.3,0.3-0.8,0.7-1.3,1.1c-0.5,0.4-1.1,0.8-1.8,1.2c-0.7,0.4-1.4,0.8-2.1,1.1l-20.4,9.3l2.1-2.1l18.4-8.3 c0.3-0.1,0.5-0.2,0.7-0.4c0.2-0.1,0.4-0.3,0.6-0.4c0.2-0.1,0.3-0.3,0.4-0.4c0.1-0.1,0.2-0.2,0.2-0.3c0-0.1,0-0.1-0.1-0.2 c-0.1,0-0.2,0-0.4,0c-0.2,0-0.4,0.1-0.6,0.1c-0.2,0.1-0.5,0.2-0.8,0.3l-10,4.5c-0.8,0.4-1.6,0.7-2.4,0.9c-0.7,0.2-1.4,0.4-2,0.5 c-0.6,0.1-1.1,0.1-1.5,0.1c-0.4-0.1-0.7-0.2-0.8-0.4c-0.1-0.2,0-0.6,0.2-0.9c0.2-0.4,0.6-0.8,1.2-1.2c0.5-0.4,1.2-0.9,2-1.4 c0.8-0.5,1.6-0.9,2.5-1.3l11-4.9c0.3-0.1,0.6-0.3,0.9-0.4c0.3-0.2,0.5-0.3,0.7-0.5c0.2-0.2,0.4-0.3,0.5-0.5 c0.1-0.1,0.2-0.3,0.2-0.4c0-0.1,0-0.2-0.1-0.2c-0.1,0-0.3-0.1-0.4-0.1c-0.2,0-0.4,0.1-0.7,0.1c-0.3,0.1-0.6,0.2-0.9,0.3 l-11.4,5.1c-0.9,0.4-1.9,0.8-2.7,1c-0.9,0.3-1.7,0.4-2.4,0.5c-0.7,0.1-1.3,0.1-1.8,0C1872.5,245.1,1872.2,244.9,1872.1,244.6" /> </g> </g> <path fill="#008ABE" d="M1758.1,234.6c1.1,0.2,5.7-29.4,2.5-39c-3.2-9.6-2.8-20.9-21.3-22.8c-5.8-0.6,12.7,15.1,10.8,36.3 C1748.9,223.5,1758.1,236.5,1758.1,234.6z" /> <path fill="#008ABE" d="M1913.6,172.5c0,0-9.8,21.3-58.6,0.6c-15-6.4-12.3-8.7-17.1-8.7s-45.7,3.9-71.5-25.2 c-2-2-34.2-2.8-43.5-6.5c-9.3-3.6,25.2-21.6,26.1-21.6S1906.1,151.5,1913.6,172.5z" /> <g> <path fill="#00AEEF" d="M1859.7,75.8c0,0,76.6-16.9,89,31.1c6.5,25-13.9,56.5-13.9,56.5c-3.7,3.7-25,27.8-64,15.8l-29.2-19 c0,0-26,0-32.9-2.3c-7-2.3-34.8-16.7-38-20.4c-2-0.9-8.6-1.7-17.5-2.5c2.6-4.6,3.6-12.4,2.6-21.3c-1-8.9,0.8-20.3-9.4-25.8 c-9,1.5,7-2,14.1-1.4c6,0.9,7-0.9,9.3-1.9s11.6-10.2,43.6-15.8C1845.4,63.3,1859.7,75.8,1859.7,75.8z" /> <path fill="#2E2E2E" d="M1647.6,90.5c2.5,1.4,9.6,4.1,9.6,4.1l9.5,4.1l29.8,0.4c13-3.2,34.8-8.6,49.9-11.2 c10.2,5.5,8.4,16.9,9.4,25.8c1,8.8,0,16.7-2.6,21.3c-23.8-2.1-64.1-4.1-75.9-6.7c-3.8-0.4-7.6-0.7-8.3-0.5 c-1.4,0.4-5.7,0.4-8.1-0.9c-2.3-1.3-11.8-1.8-16.3-2.7c-4.5-0.9-23.1-0.7-25.8-4.3c-2.7-3.6-14-11.6-16.1-14.1s0.4-6.1,1.4-10.7 c1.1-4.7,6.1-5.2,6.1-5.2s2.1-5.2,4.7-7c2.5-1.8,2.7-1.8,4.3-1.8c1.6,0,3.8,0.4,3.8,0.4s0.9-1.3,6.1-2.3 c5.2-1.1,13.8,2.9,14.5,3.4C1648.9,84.8,1648.1,86.6,1647.6,90.5z" /> </g> <path fill="#1C1C1C" d="M1603,104c0.2,0.6,1.5-2.1,2.8-3c1.3-0.9,4.8-0.4,5.6-0.2c0.8,0.2,1.1-0.6,1.1-0.6s2.5-4.3,4.1-5.2 s3.9-0.4,4.6,0c0.7,0.4,2.2-1.1,4.8-1.6c2.2-0.5,4,1.1,4.1-0.3c0.1-1.4,1.4-9.6,1.8-10.7s1.3-3.4-2.6-2.6c-3.9,0.8-6.3,2.4-6.3,2.4 s-4.1-0.8-5.4-0.4c-1.3,0.4-5.7,5.4-6.7,8.3c-1.7,0.7-4.7,1.8-5.1,2.6c-0.4,0.8-1.1,3.2-1.3,4.9C1604.3,99.3,1602.3,101.6,1603,104 z" /> <path fill="#008ABE" d="M1933.3,96.5c-8.8-1.5-20-8.8-43.8-5.8c-18.6,2.9-34.4,11-34.4,11s-40.5-14.1-48.8-16.3 c-10.9,2-24.3,2.6-21.7,1s24-8.2,28.4-9.3c4.4-1,18.3,11.1,22.4,12.6c4.1,1.5,18.4,0.1,24.5-1.9c6.1-2-4.9-5.2-4.7-7.2 c0.1-2,4-1.3,10.3-3.8c6.4-2.5,14.5-3.2,35.7-1.4C1922.7,77.3,1954,100.1,1933.3,96.5z" /> <path fill="#008ABE" d="M1819.8,110.9c-2.4,0,7.2-3.8,5.4-3.8s-8.6,3.5-12.4,4s-20.8-0.7-22.8-0.3s-12.8,4.5-12.5,6.1 c0.3,1.6,18,3.3,25,2s16.5-3.7,18.3-5.3C1822.6,112.1,1821.3,110.9,1819.8,110.9z" /> <path fill="#008ABE" d="M1536,198.6c-0.3-1.5-1.1-7.3-4.7-10.1c-3.6-2.8-3.1-15.2,0.7-16.6c3.7-1.5,17.9-13.7,32.3-15.2 s-4.4,4.6-9,5.9c-4.6,1.3-22.3,16.3-20.2,26.1C1537.1,198.4,1536.5,201.2,1536,198.6z" /> <path fill="#008ABE" d="M1530.5,182.3c-1,0.5-2.2-0.4-3.9-0.9c-1.8-0.5-7.4,0.7-7.2-0.7s13.3-2.2,14.3-4.5 C1534.8,173.8,1532.3,181.4,1530.5,182.3z" /> </g> </svg> </div> <div class="particles"></div> <div class="particles"></div> <div class="particles"></div> <a class="brand" href="http://wpmudev.org" target="_blank"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="108px" height="25px" viewBox="0 0 485.567 113.386" xml:space="preserve"> <path d="M63.378,89.713H52.549l-8.738-32.612c-0.658-2.46-1.292-4.984-1.908-7.569c-0.614-2.583-1.088-4.654-1.415-6.214 c-0.329,1.56-0.8,3.651-1.415,6.278c-0.616,2.626-1.252,5.167-1.907,7.628l-8.615,32.49H17.722L0,25.104h12.553l7.63,31.38 c0.655,2.462,1.271,5.047,1.845,7.755c0.573,2.707,1.025,4.84,1.354,6.398c0.41-1.639,0.942-3.771,1.6-6.398 c0.655-2.626,1.312-5.209,1.97-7.755l8.615-31.38h10.213l8.738,31.504c0.655,2.543,1.292,5.106,1.908,7.691 c0.615,2.585,1.127,4.698,1.538,6.337c0.41-1.639,0.881-3.793,1.416-6.461c0.532-2.664,1.126-5.229,1.783-7.691l7.63-31.38h12.553 L63.378,89.713z"></path> <path d="M141.548,58.455c0,5.579-0.698,10.399-2.093,14.459c-1.396,4.062-3.261,7.446-5.599,10.154 c-2.34,2.708-5.047,4.718-8.123,6.029c-3.077,1.311-6.298,1.969-9.66,1.969c-3.282,0-6.359-0.745-9.23-2.238 c-2.873-1.492-5.21-3.231-7.014-5.222v23.258l-12.553,6.522V25.183H99.83v6.153c2.378-2.155,4.923-3.958,7.63-5.408 c2.707-1.451,5.784-2.179,9.23-2.179c3.445,0,6.685,0.658,9.721,1.969c3.035,1.315,5.681,3.365,7.938,6.153 c2.255,2.791,4.019,6.38,5.291,10.768C140.911,47.032,141.548,52.302,141.548,58.455z M128.749,58.816 c0-8.157-1.245-14.072-3.737-17.745c-2.492-3.671-6.066-5.506-10.722-5.506c-3.023,0-5.801,0.837-8.333,2.508 c-2.533,1.674-4.615,3.57-6.25,5.69V70.81c0.734,0.979,1.634,1.956,2.695,2.935c1.061,0.981,2.245,1.879,3.554,2.694 c1.307,0.815,2.695,1.488,4.166,2.019c1.469,0.531,3.023,0.795,4.657,0.795c4.574,0,8.048-1.694,10.416-5.078 C127.565,70.79,128.749,65.668,128.749,58.816z"></path> <path d="M225.33,89.713V53.246c0-6.549-1.021-11.133-3.062-13.751c-2.043-2.62-5.144-3.931-9.308-3.931 c-4.245,0-7.368,1.433-9.368,4.298c-1.999,2.865-2.999,6.918-2.999,12.156v37.695h-12.799V53.246 c0-6.549-1.021-11.133-3.062-13.751c-2.041-2.62-5.144-3.931-9.307-3.931c-4.245,0-7.368,1.433-9.367,4.298 c-2,2.865-3,6.918-3,12.156v37.695H150.26v-64.53h12.799l-0.123,6.153c1.64-2.404,3.772-4.27,6.398-5.596 c2.624-1.326,5.619-1.991,8.984-1.991c4.43,0,8.061,0.811,10.892,2.425c2.829,1.617,5.106,4.001,6.829,7.152 c1.152-1.492,2.365-2.816,3.641-3.979c1.274-1.16,2.692-2.154,4.26-2.987c1.563-0.828,3.311-1.471,5.244-1.925 c1.934-0.457,4.176-0.686,6.727-0.686c7.568,0,13.164,2.421,16.784,7.261c3.621,4.842,5.433,12.062,5.433,21.661v37.042H225.33z"></path> <path d="M287.216,89.634l0.122-6.153c-1.641,2.403-3.918,4.268-6.829,5.596c-2.913,1.327-6.052,1.989-9.415,1.989 c-7.549,0-13.271-2.419-17.167-7.259c-3.896-4.84-5.846-12.062-5.846-21.661V25.104h12.799v36.467 c0,6.548,1.157,11.133,3.476,13.753c2.314,2.618,5.547,3.929,9.693,3.929c4.226,0,7.475-1.434,9.752-4.298 c2.276-2.865,3.415-6.916,3.415-12.155V25.104h12.798v64.53H287.216z"></path> <path d="M350.507,89.634v-6.153c-2.381,2.154-4.923,3.959-7.631,5.408c-2.707,1.451-5.784,2.176-9.229,2.176 c-3.446,0-6.688-0.658-9.722-1.969c-3.036-1.311-5.682-3.363-7.938-6.153c-2.257-2.788-4.021-6.378-5.291-10.768 c-1.272-4.388-1.907-9.66-1.907-15.813c0-5.496,0.695-10.294,2.092-14.397c1.395-4.101,3.262-7.508,5.6-10.215 c2.338-2.707,5.045-4.715,8.122-6.031c3.076-1.311,6.295-1.969,9.66-1.969c3.28,0,6.357,0.748,9.229,2.24 c2.871,1.493,5.209,3.234,7.016,5.222V6.538L363.059,0v89.634H350.507z M350.63,44.007c-0.737-0.977-1.637-1.956-2.698-2.937 c-1.062-0.979-2.245-1.875-3.553-2.692c-1.309-0.815-2.716-1.488-4.228-2.019c-1.511-0.529-3.044-0.795-4.595-0.795 c-4.577,0-8.048,1.693-10.417,5.078c-2.368,3.387-3.554,8.504-3.554,15.359c0,8.159,1.246,14.072,3.738,17.743 c2.492,3.673,6.065,5.509,10.723,5.509c3.021,0,5.799-0.835,8.332-2.509c2.532-1.671,4.616-3.568,6.251-5.692V44.007z"></path> <path d="M426.841,56.117c0,1.149-0.041,2.235-0.122,3.26c-0.083,1.027-0.166,1.866-0.247,2.523h-42.703 c0.327,3.118,0.984,5.784,1.97,7.998c0.984,2.216,2.215,4.042,3.692,5.478c1.476,1.436,3.116,2.502,4.922,3.199 c1.804,0.697,3.692,1.047,5.661,1.047c2.707,0,5.188-0.45,7.444-1.355c2.257-0.902,4.45-2.172,6.585-3.815l7.507,8.122 c-2.873,2.707-6.072,4.8-9.599,6.277c-3.529,1.475-7.753,2.214-12.676,2.214c-3.775,0-7.365-0.739-10.769-2.214 c-3.405-1.477-6.38-3.651-8.921-6.522c-2.545-2.871-4.554-6.4-6.031-10.584c-1.478-4.184-2.215-8.941-2.215-14.275 c0-5.496,0.696-10.337,2.093-14.522c1.394-4.185,3.322-7.691,5.783-10.521c2.461-2.83,5.434-4.984,8.922-6.461 c3.486-1.477,7.322-2.216,11.507-2.216c4.593,0,8.593,0.863,11.998,2.585c3.403,1.724,6.234,4.062,8.491,7.014 c2.256,2.954,3.938,6.4,5.047,10.337C426.288,47.624,426.841,51.769,426.841,56.117z M412.875,45.164 c-0.616-1.969-1.538-3.693-2.77-5.168c-1.23-1.477-2.769-2.646-4.615-3.509c-1.845-0.861-4.081-1.292-6.707-1.292 c-4.267,0-7.65,1.416-10.151,4.246c-2.504,2.832-4.043,6.831-4.615,11.999h30.027C413.877,49.226,413.49,47.132,412.875,45.164z"></path> <path d="M462.799,89.713h-12.676l-23.136-64.608h13.291l11.567,35.073c1.065,3.118,2.031,6.092,2.893,8.921 c0.861,2.832,1.496,5.15,1.907,6.953c0.409-1.803,1.004-4.121,1.785-6.953c0.778-2.83,1.661-5.804,2.646-8.921l11.076-35.073 h13.414L462.799,89.713z"></path> </svg> </a>
SCSS
html, body { overflow: hidden; height: 100%; margin: 0; background-color: #00495F; } #devman { width: 80%; height: auto; padding: 0; position: absolute; top: 50%; animation: 8s flying infinite; .eye { animation: 8s blink infinite; } [class^="beam"] { animation: 8s beam infinite; } } .particles { background-image: radial-gradient(70px 2px at 20% 30%, rgba(#FFF,.3), rgba(0,0,0,0)), radial-gradient(40px 2px at 40% 70%, rgba(#FFF,.28), rgba(0,0,0,0)), radial-gradient(330px 2px at 50% 16%, rgba(#FFF,.26), rgba(0,0,0,0)), radial-gradient(50px 4px at 90% 40%, rgba(#FFF,.25), rgba(0,0,0,0)), radial-gradient(13px 1px at 10% 80%, rgba(#FFF,.22), rgba(0,0,0,0)), radial-gradient(94px 2px at 16% 20%, rgba(#FFF,.33), rgba(0,0,0,0)), radial-gradient(130px 5px at 10% 80%, rgba(#FFF,.2), rgba(0,0,0,0)), radial-gradient(90px 2px at 16% 25%, rgba(#FFF,.2), rgba(0,0,0,0)), radial-gradient(130px 2px at 10% 84%, rgba(#FFF,.2), rgba(0,0,0,0)), radial-gradient(200px 4px at 90% 45%, rgba(#FFF,.5), rgba(0,0,0,0)), radial-gradient(130px 1px at 40% 55%, rgba(#FFF,.2), rgba(0,0,0,0)), radial-gradient(940px 2px at 26% 63%, rgba(#FFF,.14), rgba(0,0,0,0)), radial-gradient(120px 5px at 30% 63%, rgba(#FFF,.42), rgba(0,0,0,0)), radial-gradient(900px 5px at 46% 14%, rgba(#FFF,.21), rgba(0,0,0,0)), radial-gradient(1300px 3px at 30% 80%, rgba(#FFF,.22), rgba(0,0,0,0)), radial-gradient(900px 2px at 56% 20%, rgba(#FFF,.2), rgba(0,0,0,0)); background-repeat: repeat; background-size: 100%; animation: flyby 0.5s infinite linear; top: 0; bottom: 0; left: 0; right: 0; position: absolute; &:nth-of-type(2) { background-size: 300%; animation-duration: 2s; } &:nth-of-type(3) { background-position: -10%; background-size: 300%; animation-duration: 3s; } } [id^="screen"] { position: absolute; animation: shake 2s steps(1, end) infinite; top: 0; left: 0; height: 100%; width: 100%; } @keyframes blink { 0%, 20%, 24%, 70%, 72%, 80%, 82%, 100% { fill: #fff; } 22%, 71%, 81% { fill: #111; } } @keyframes beam { 0%, 100% { opacity: 0.2; } 20%, 28% { opacity: 0.8; } 24%, 70% { opacity: 0.7; } 40% { opacity: 0.4; } 50% { opacity: 0.2; } } @keyframes flying { 0%, 100% { transform: translate(-60%, -50%); } 20%, 28% { transform: translate(-25%, -50%); } 24%, 70% { transform: translate(-30%, -50%); } 40% { transform: translate(-40%, -50%); } 50% { transform: translateX(-50%, -50%); } } @keyframes shake { 0%, 12%, 26%, 67%, 96%, 100% { transform: translateY(0px); } 34%, 46%, 85% { transform: translateY(2px); } 45%, 70% { transform: translateY(4px); } 87% { transform: translateY(-1px); } 75% { transform: translateY(-4px); } } @keyframes flyby { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } } a.brand { position: fixed; z-index: 1; bottom: 0; right: 0; margin: 10px 20px; opacity: 0.4; transition: 0.3s ease; &:hover { opacity: 1; } svg { fill: #fff; } }
JAVASCRIPT
Expand for more options Login