HTML5+SVG实现的深夜办公室场景动画特效

 首页 > 网页特效 > 其他特效 > HTML5+SVG实现的深夜办公室场景动画特效
HTML5+SVG实现的深夜办公室场景动画特效

 2018-12-04  466  收藏  0 赞一个  0 真差劲  0 去评论
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5 SVG深夜办公室场景特效</title>
<style>
body {
    vertical-align: bottom;
    background-color: #f2f2b0;
}
svg.scene {
    left: 50%;
    bottom: 0;
    -webkit-transform: translatex(-50%);
    transform: translatex(-50%);
    width: 50%;
    max-height: 600px;
    position: absolute;
}
svg.scene #Zebra g {
    opacity: .25;
}
#end {
    visibility: hidden;
}
svg.cats {
    -webkit-filter: blur(1px);
    filter: blur(1px);
    position: fixed;
    bottom: 0;
    left: 0;
    height: auto;
    width: 100%;
}
.illuminate {
    z-index: 100;
    width: 100%;
    height: 100%;
    padding: 300px;
    position: fixed;
    top: 0;
    left: 0;
    background-repeat: no-repeat;
    background: -webkit-radial-gradient(circle contain at 300px 300px, rgba(0, 0, 0, 0), rgba(29, 35, 40, 0.75), rgba(29, 35, 40, 0.96)) center center;
    background: radial-gradient(circle contain at 300px 300px, rgba(0, 0, 0, 0), rgba(29, 35, 40, 0.75), rgba(29, 35, 40, 0.96)) center center;
    background: -webkit-radial-gradient(300px 300px, circle contain, transparent, rgba(29, 35, 40, 0.75), rgba(29, 35, 40, 0.96)) center center;
    background: -ms-radial-gradient(300px 300px, circle contain, transparent, rgba(29, 35, 40, 0.75), rgba(29, 35, 40, 0.96)) center center;
}
</style>

</head>

<body>
<div id="illuminate" class="illuminate"></div>

<?xml version="1.0" encoding="utf-8" ?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg class="scene" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 800 600" style="enable-background:new 0 0 800 600;" xml:space="preserve">
    <style type="text/css">
        .st0 {
            fill: none;
        }
        .st1 {
            fill: #F5F6E2;
        }
        .st2 {
            fill: #F2F2B0;
        }
        .st3 {
            fill: #A97C50;
            stroke: #594A42;
            stroke-width: 3;
            stroke-miterlimit: 10;
        }
        .st4 {
            opacity: 0.57;
            fill: url(#SVGID_1_);
            stroke: #594A42;
            stroke-width: 3;
            stroke-miterlimit: 10;
        }
        .st5 {
            opacity: 0.57;
            fill: url(#SVGID_2_);
            stroke: #594A42;
            stroke-width: 3;
            stroke-miterlimit: 10;
        }
        .st6 {
            opacity: 0.57;
            fill: url(#SVGID_3_);
            stroke: #594A42;
            stroke-width: 3;
            stroke-miterlimit: 10;
        }
        .st7 {
            fill: #E8E8E8;
            stroke: #676E73;
            stroke-width: 5;
            stroke-miterlimit: 10;
        }
        .st8 {
            fill: #B1D5E5;
            stroke: #676E73;
            stroke-width: 5;
            stroke-miterlimit: 10;
        }
        .st9 {
            fill: #EAF3E4;
            stroke: #676E73;
            stroke-width: 4;
            stroke-miterlimit: 10;
        }
        .st10 {
            fill: none;
            stroke: #676E73;
            stroke-width: 4;
            stroke-miterlimit: 10;
        }
        .st11 {
            fill: #676E73;
        }
        .st12 {
            fill: none;
            stroke: #676E73;
            stroke-miterlimit: 10;
        }
        .st13 {
            opacity: 0.3;
        }
        .st14 {
            fill: #B1D5E5;
        }
        .st15 {
            fill: #EAF3E4;
            stroke: #676E73;
            stroke-width: 3;
            stroke-miterlimit: 10;
        }
        .st16 {
            fill: #EAF3E4;
            stroke: #676E73;
            stroke-miterlimit: 10;
        }
        .st17 {
            fill: #676E73;
            stroke: #676E73;
            stroke-miterlimit: 10;
        }
        .st18 {
            fill: #EF452E;
        }
        .st19 {
            fill: #01B1A0;
        }
        .st20 {
            fill: #E8E8E8;
            stroke: #676E73;
            stroke-width: 3;
            stroke-miterlimit: 10;
        }
    </style>
    <pattern width="124.4" height="124.4" patternUnits="userSpaceOnUse" id="Zebra" viewBox="9.1 -267.9 124.4 124.4" style="overflow:visible;">
        <g>
            <rect x="9.1" y="-267.9" class="st0" width="124.4" height="124.4" />
            <g>
                <path d="M47-16.6c-1.1-3.1-3.3-15.5-4.7-21.8c-1.5-6.6,0-3.7-0.7-12.7c-0.7-9,0-11.3,0-14S41-73,43-83s1.2-15.8,4.5-26.1
				c3.3-10.3,1.7-26,1.7-26l-5.7-15c0,0-1,13.7-1,15.3c0,1.7,1.7,5.3,0.3,11.3c-1.3,6-1.3,19-2.7,21.7c-1.3,2.7-3.3,9.3-3.3,17.3
				s1,12.3,1,12.3c-3-1.7-4.3-8.3-4.3-12s-1.7-6.7,0-9.7c1.7-3-0.5-12.9-0.5-15.9s0.7-8,0-16c-0.2-2.8-0.1-7.8-1.7-10.1
				c-1.7-2.3-1.7-9-1.7-10.3c0-1.3-8.9,2.7-8.9,2.7s0.8,4.6,3.2,13c1.7,5.8-0.3,6.4,1.7,14.8c2,8.3,3.5,14.9,3.2,21.2
				c-0.3,6.3,2.3,21,2.3,26s2.3,4.3,0.7,10.7c-1.7,6.3-6.7,14.4-2.8,21.5c0.2,3.1-1.8,7.1-3.2,8.9s-7.3,6-4.5,10.1h8.3
				c0,0-0.2-1.1-0.1-3.9c0-2.7,1.1-4.1,2.4-7.1c1.3-3,1.8-6.7,1.3-9c3.1,2.8,5.9,5.7,6.4,11.4s3,5.6,3.4,6.8S47-16.6,47-16.6z" />
                <path d="M53.7-143.7c0.4,7.2,5.8,13.9,5.1,18.9c-0.7,5.3-7.3,11.3-7.3,23.3c0,12,3,10.3,4,21c1,10.7-2,4-3.7,15.3
				c-1.7,11.3-3.7,18-2.3,27.7c1.3,9.7,3,11.5,4.3,19c1.3,7.6-0.7,14.3,5.3,8c6-6.3,9.8-7.4,9.1-8.6c-2.9-5.2-7.5-20-4.8-28.4
				c2.7-8.3-2.9-11.3-0.6-20.9c2.3-9.7,10.7-26.3,10.7-29.3s1.2-13.7,2.2-20.1c1-6.3,0.7-11-4.7-20.3c-1.3-2.2-2.2-4-3-5.6
				L53.7-143.7z" />
                <path d="M75.8-143.8c1.1,2.2,3.1,5.8,4.8,15.3c1.9,10.5,2,5.8-0.6,21.8c-2.7,16,6,20,5,40.3c-1,20.3-13,22.6-12.4,32.6
				c0.7,10,9,31.7,10,32.7c1,1,5,3.3,5-4.3c0-7.7-2-18-0.7-24.7c1.3-6.7,6.3-18.7,7.3-24.3c1-5.7,4-6,7-16.7
				c3-10.7-4.6-12.2-7.6-21.9c-3-9.7-2.3-16-3.3-19.3c-1-3.3-2.5-10.2-2.7-17.1c-0.2-6.7-0.5-8.5-0.9-14.5L75.8-143.8z" />
                <path d="M113.2-39.7c1,1.8-1.2,11.2-1.5,21.1l-13.9,0.1c0.3-2,0.9-4.1,1.2-6.5c0.4-3,0-9.1,0-9.1c-0.3-7,7-18.7,10-26.3
				c3-7.7,6.8-15.2,6.8-24.6c0-9.3-9.5-20.1-13.8-31.1c-4.3-11-6.3-17.7-3-33.3c0,0,12.9-17.1,14.3-14.7c1.3,2.3-1.5,17.1-2.3,29.3
				c-0.5,7.1,4.4,13.1,5.1,16.1c0.7,3,0,7,1.7,15.7c1.7,8.7,11,19.7,10.3,28.3c-0.5,6.4,1.1,14.1-7,27
				C119.5-45.3,113.2-39.7,113.2-39.7z" />
                <path d="M134.7-144.1c-0.1,6.1-1.6,12.8,0.9,21.3c3,10,9.6,9,8.9,22.3c-0.7,13.5-1.5,29.2,1.1,39c1.7,6.3,4.7,14.3,1.3,22.3
				c-6.3,15-11.4,9.2-12.3,20.3c-1,12.3-3.4,14-3.4,14c-3-5-5-6.7-5.3-13.7c-0.3-7,0.1-13,3.1-24.3c3-11.3,6.7-22.3,4-30.7
				c-2.7-8.3-2-13-5.3-21.3c-3.3-8.3-0.3-6.6-2-18.2c-2.4-16.6-0.5-12.3-0.5-21.4c0-3.2,0.5-5.7,0.8-9.4L134.7-144.1z" />
            </g>
            <g>
                <path d="M10.3-144.1c-0.1,6.1-1.6,12.8,0.9,21.3c3,10,9.6,9,8.9,22.3c-0.7,13.5-1.5,29.2,1.1,39c1.7,6.3,4.7,14.3,1.3,22.3
				c-6.3,15-11.4,9.2-12.3,20.3c-1,12.3-3.4,14-3.4,14c-3-5-5-6.7-5.3-13.7c-0.3-7,0.1-13,3.1-24.3c3-11.3,6.7-22.3,4-30.7
				c-2.7-8.3-2-13-5.3-21.3c-3.3-8.3-0.3-6.6-2-18.2c-2.4-16.6-0.5-12.3-0.5-21.4c0-3.2,0.5-5.7,0.8-9.4L10.3-144.1z" />
            </g>
            <g>
                <path d="M134.7-267.8c-0.1,6.1-1.6,12.8,0.9,21.3c3,10,9.6,9,8.9,22.3c-0.7,13.5-1.5,29.2,1.1,39c1.7,6.3,4.7,14.3,1.3,22.3
				c-6.3,15-11.4,9.2-12.3,20.3c-1,12.3-3.4,14-3.4,14c-3-5-5-6.7-5.3-13.7c-0.3-7,0.1-13,3.1-24.3c3-11.3,6.7-22.3,4-30.7
				c-2.7-8.3-2-13-5.3-21.3c-3.3-8.3-0.3-6.6-2-18.2c-2.4-16.6-0.5-12.3-0.5-21.4c0-3.2,0.5-5.7,0.8-9.4L134.7-267.8z" />
            </g>
            <g>
                <rect x="9.1" y="-267.9" class="st1" width="124.4" height="124.4" />
                <path d="M47-141c-1.1-3.1-3.3-15.5-4.7-21.8c-1.5-6.6,0-3.7-0.7-12.7c-0.7-9,0-11.3,0-14c0-2.7-0.7-8,1.3-18s1.2-15.8,4.5-26.1
				c3.3-10.3,1.7-26,1.7-26l-5.7-15c0,0-1,13.7-1,15.3c0,1.7,1.7,5.3,0.3,11.3c-1.3,6-1.3,19-2.7,21.7c-1.3,2.7-3.3,9.3-3.3,17.3
				s1,12.3,1,12.3c-3-1.7-4.3-8.3-4.3-12c0-3.7-1.7-6.7,0-9.7c1.7-3-0.5-12.9-0.5-15.9s0.7-8,0-16c-0.2-2.8-0.1-7.8-1.7-10.1
				c-1.7-2.3-1.7-9-1.7-10.3c0-1.3-8.9,2.7-8.9,2.7s0.8,4.6,3.2,13c1.7,5.8-0.3,6.4,1.7,14.8c2,8.3,3.5,14.9,3.2,21.2
				c-0.3,6.3,2.3,21,2.3,26s2.3,4.3,0.7,10.7c-1.7,6.3-6.7,14.4-2.8,21.5c0.2,3.1-1.8,7.1-3.2,8.9s-7.3,6-4.5,10.1h8.3
				c0,0-0.2-1.1-0.1-3.9c0-2.7,1.1-4.1,2.4-7.1c1.3-3,1.8-6.8,1.3-9c3.1,2.8,5.9,5.8,6.4,11.4s3,5.6,3.4,6.8S47-141,47-141z" />
                <path d="M53.7-268.1c0.4,7.2,5.8,13.9,5.1,18.9c-0.7,5.3-7.3,11.3-7.3,23.3c0,12,3,10.3,4,21c1,10.7-2,4-3.7,15.3
				c-1.7,11.3-3.7,18-2.3,27.7c1.3,9.7,3,11.5,4.3,19c1.3,7.6-0.7,14.3,5.3,8c6-6.3,9.8-7.4,9.1-8.6c-2.9-5.2-7.5-20-4.8-28.4
				c2.7-8.3-2.9-11.3-0.6-20.9c2.3-9.7,10.7-26.3,10.7-29.3s1.2-13.7,2.2-20.1c1-6.3,0.7-11-4.7-20.3c-1.3-2.2-2.2-4-3-5.6
				L53.7-268.1z" />
                <path d="M75.8-268.2c1.1,2.2,3.1,5.8,4.8,15.3c1.9,10.5,2,5.8-0.6,21.8c-2.7,16,6,20,5,40.3c-1,20.3-13,22.6-12.4,32.6
				c0.7,10,9,31.7,10,32.7s5,3.3,5-4.3c0-7.7-2-18-0.7-24.7c1.3-6.7,6.3-18.7,7.3-24.3c1-5.7,4-6,7-16.7c3-10.7-4.6-12.2-7.6-21.9
				c-3-9.7-2.3-16-3.3-19.3c-1-3.3-2.5-10.2-2.7-17.1c-0.2-6.7-0.5-8.5-0.9-14.5L75.8-268.2z" />
                <path d="M113.2-164.1c1,1.8-1.2,11.2-1.5,21.1L97.7-143c0.3-2,0.9-4.1,1.2-6.5c0.4-3,0-9.1,0-9.1c-0.3-7,7-18.7,10-26.3
				c3-7.7,6.8-15.2,6.8-24.6c0-9.3-9.5-20.1-13.8-31.1c-4.3-11-6.3-17.7-3-33.3c0,0,12.9-17.1,14.3-14.7c1.3,2.3-1.5,17.1-2.3,29.3
				c-0.5,7.1,4.4,13.1,5.1,16.1c0.7,3,0,7,1.7,15.7c1.7,8.7,11,19.7,10.3,28.3c-0.5,6.4,1.1,14.1-7,27
				C119.5-169.7,113.2-164.1,113.2-164.1z" />
                <path d="M134.7-268.5c-0.1,6.1-1.6,12.8,0.9,21.3c3,10,9.6,9,8.9,22.3c-0.7,13.5-1.5,29.2,1.1,39c1.7,6.3,4.7,14.3,1.3,22.3
				c-6.3,15-11.4,9.2-12.3,20.3c-1,12.3-3.4,14-3.4,14c-3-5-5-6.7-5.3-13.7c-0.3-7,0.1-13,3.1-24.3c3-11.3,6.7-22.3,4-30.7
				c-2.7-8.3-2-13-5.3-21.3c-3.3-8.3-0.3-6.6-2-18.2c-2.4-16.6-0.5-12.3-0.5-21.4c0-3.2,0.5-5.7,0.8-9.4L134.7-268.5z" />
                <path d="M10.3-267.8c-0.1,6.1-1.6,12.8,0.9,21.3c3,10,9.6,9,8.9,22.3c-0.7,13.5-1.5,29.2,1.1,39c1.7,6.3,4.7,14.3,1.3,22.3
				c-6.3,15-11.4,9.2-12.3,20.3c-1,12.3-3.4,14-3.4,14c-3-5-5-6.7-5.3-13.7c-0.3-7,0.1-13,3.1-24.3c3-11.3,6.7-22.3,4-30.7
				c-2.7-8.3-2-13-5.3-21.3c-3.3-8.3-0.3-6.6-2-18.2c-2.4-16.6-0.5-12.3-0.5-21.4c0-3.2,0.5-5.7,0.7-9.4L10.3-267.8z" />
            </g>
            <g>
                <path d="M10.3-268.5c-0.1,6.1-1.6,12.8,0.9,21.3c3,10,9.6,9,8.9,22.3c-0.7,13.5-1.5,29.2,1.1,39c1.7,6.3,4.7,14.3,1.3,22.3
				c-6.3,15-11.4,9.2-12.3,20.3c-1,12.3-3.4,14-3.4,14c-3-5-5-6.7-5.3-13.7c-0.3-7,0.1-13,3.1-24.3c3-11.3,6.7-22.3,4-30.7
				c-2.7-8.3-2-13-5.3-21.3c-3.3-8.3-0.3-6.6-2-18.2c-2.4-16.6-0.5-12.3-0.5-21.4c0-3.2,0.5-5.7,0.8-9.4L10.3-268.5z" />
            </g>
            <g>
                <path d="M134.7-392.2c-0.1,6.1-1.6,12.8,0.9,21.3c3,10,9.6,9,8.9,22.3c-0.7,13.5-1.5,29.2,1.1,39c1.7,6.3,4.7,14.3,1.3,22.3
				c-6.3,15-11.4,9.2-12.3,20.3c-1,12.3-3.4,14-3.4,14c-3-5-5-6.7-5.3-13.7c-0.3-7,0.1-13,3.1-24.3c3-11.3,6.7-22.3,4-30.7
				c-2.7-8.3-2-13-5.3-21.3c-3.3-8.3-0.3-6.6-2-18.2c-2.4-16.6-0.5-12.3-0.5-21.4c0-3.2,0.5-5.7,0.8-9.4L134.7-392.2z" />
            </g>
            <g>
                <path d="M47-265.4c-1.1-3.1-3.3-15.5-4.7-21.8c-1.5-6.6,0-3.7-0.7-12.7c-0.7-9,0-11.3,0-14s-0.7-8,1.3-18s1.2-15.8,4.5-26.1
				c3.3-10.3,1.7-26,1.7-26l-5.7-15c0,0-1,13.7-1,15.3c0,1.7,1.7,5.3,0.3,11.3c-1.3,6-1.3,19-2.7,21.7c-1.3,2.7-3.3,9.3-3.3,17.3
				s1,12.3,1,12.3c-3-1.7-4.3-8.3-4.3-12c0-3.7-1.7-6.7,0-9.7c1.7-3-0.5-12.9-0.5-15.9s0.7-8,0-16c-0.2-2.8-0.1-7.8-1.7-10.1
				c-1.7-2.3-1.7-9-1.7-10.3c0-1.3-8.9,2.7-8.9,2.7s0.8,4.6,3.2,13c1.7,5.8-0.3,6.4,1.7,14.8c2,8.3,3.5,14.9,3.2,21.2
				c-0.3,6.3,2.3,21,2.3,26s2.3,4.3,0.7,10.7c-1.7,6.3-6.7,14.4-2.8,21.5c0.2,3.1-1.8,7.1-3.2,8.9s-7.3,6-4.5,10.1h8.3
				c0,0-0.2-1.1-0.1-3.9c0-2.7,1.1-4.1,2.4-7.1c1.3-3,1.8-6.8,1.3-9c3.1,2.8,5.9,5.8,6.4,11.4s3,5.6,3.4,6.8S47-265.4,47-265.4z" />
                <path d="M53.7-392.5c0.4,7.2,5.8,13.9,5.1,18.9c-0.7,5.3-7.3,11.3-7.3,23.3c0,12,3,10.3,4,21c1,10.7-2,4-3.7,15.3
				c-1.7,11.3-3.7,18-2.3,27.7c1.3,9.7,3,11.5,4.3,19c1.3,7.6-0.7,14.3,5.3,8c6-6.3,9.8-7.4,9.1-8.6c-2.9-5.2-7.5-20-4.8-28.4
				c2.7-8.3-2.9-11.3-0.6-20.9c2.3-9.7,10.7-26.3,10.7-29.3s1.2-13.7,2.2-20.1c1-6.3,0.7-11-4.7-20.3c-1.3-2.2-2.2-4-3-5.6
				L53.7-392.5z" />
                <path d="M75.8-392.6c1.1,2.2,3.1,5.8,4.8,15.3c1.9,10.5,2,5.8-0.6,21.8c-2.7,16,6,20,5,40.3c-1,20.3-13,22.6-12.4,32.6
				c0.7,10,9,31.7,10,32.7s5,3.3,5-4.3c0-7.7-2-18-0.7-24.7c1.3-6.7,6.3-18.7,7.3-24.3c1-5.7,4-6,7-16.7c3-10.7-4.6-12.2-7.6-21.9
				c-3-9.7-2.3-16-3.3-19.3c-1-3.3-2.5-10.2-2.7-17.1c-0.2-6.7-0.5-8.5-0.9-14.5L75.8-392.6z" />
                <path d="M113.2-288.5c1,1.8-1.2,11.2-1.5,21.1l-13.9,0.1c0.3-2,0.9-4.1,1.2-6.5c0.4-3,0-9.1,0-9.1c-0.3-7,7-18.7,10-26.3
				c3-7.7,6.8-15.2,6.8-24.6c0-9.3-9.5-20.1-13.8-31.1c-4.3-11-6.3-17.7-3-33.3c0,0,12.9-17.1,14.3-14.7c1.3,2.3-1.5,17.1-2.3,29.3
				c-0.5,7.1,4.4,13.1,5.1,16.1c0.7,3,0,7,1.7,15.7c1.7,8.7,11,19.7,10.3,28.3c-0.5,6.4,1.1,14.1-7,27
				C119.5-294.1,113.2-288.5,113.2-288.5z" />
                <path d="M134.7-392.9c-0.1,6.1-1.6,12.8,0.9,21.3c3,10,9.6,9,8.9,22.3c-0.7,13.5-1.5,29.2,1.1,39c1.7,6.3,4.7,14.3,1.3,22.3
				c-6.3,15-11.4,9.2-12.3,20.3c-1,12.3-3.4,14-3.4,14c-3-5-5-6.7-5.3-13.7c-0.3-7,0.1-13,3.1-24.3c3-11.3,6.7-22.3,4-30.7
				c-2.7-8.3-2-13-5.3-21.3c-3.3-8.3-0.3-6.6-2-18.2c-2.4-16.6-0.5-12.3-0.5-21.4c0-3.2,0.5-5.7,0.8-9.4L134.7-392.9z" />
                <path d="M10.3-392.2c-0.1,6.1-1.6,12.8,0.9,21.3c3,10,9.6,9,8.9,22.3c-0.7,13.5-1.5,29.2,1.1,39c1.7,6.3,4.7,14.3,1.3,22.3
				c-6.3,15-11.4,9.2-12.3,20.3c-1,12.3-3.4,14-3.4,14c-3-5-5-6.7-5.3-13.7c-0.3-7,0.1-13,3.1-24.3c3-11.3,6.7-22.3,4-30.7
				c-2.7-8.3-2-13-5.3-21.3c-3.3-8.3-0.3-6.6-2-18.2c-2.4-16.6-0.5-12.3-0.5-21.4c0-3.2,0.5-5.7,0.7-9.4L10.3-392.2z" />
            </g>
            <g>
                <path d="M10.3-392.9c-0.1,6.1-1.6,12.8,0.9,21.3c3,10,9.6,9,8.9,22.3c-0.7,13.5-1.5,29.2,1.1,39c1.7,6.3,4.7,14.3,1.3,22.3
				c-6.3,15-11.4,9.2-12.3,20.3c-1,12.3-3.4,14-3.4,14c-3-5-5-6.7-5.3-13.7c-0.3-7,0.1-13,3.1-24.3c3-11.3,6.7-22.3,4-30.7
				c-2.7-8.3-2-13-5.3-21.3c-3.3-8.3-0.3-6.6-2-18.2c-2.4-16.6-0.5-12.3-0.5-21.4c0-3.2,0.5-5.7,0.8-9.4L10.3-392.9z" />
            </g>
        </g>
    </pattern>
    <g id="Background">
        <rect class="st2" width="800" height="600" />
    </g>
    <g id="desk">
        <g>
            <rect x="78" y="454.8" class="st3" width="644.1" height="18.4" />
            <pattern id="SVGID_1_" xlink:href="#Zebra" patternTransform="matrix(1.1044 0 0 0.4374 758.3398 -4030.2043)">
            </pattern>
            <rect x="78" y="454.8" class="st4" width="644.1" height="18.4" />
        </g>
        <g>
            <g>

                <rect x="93.1" y="527.4" transform="matrix(-1.836970e-16 1 -1 -1.836970e-16 693.1383 380.0973)" class="st3" width="126.8" height="18.4" />
                <pattern id="SVGID_2_" xlink:href="#Zebra" patternTransform="matrix(0 0.7995 -0.4374 0 -11279.6572 -1394.3264)">
                </pattern>
                <rect x="147.3" y="473.2" class="st5" width="18.4" height="126.8" />
            </g>
            <g>

                <rect x="580.1" y="527.4" transform="matrix(-1.836970e-16 1 -1 -1.836970e-16 1180.0973 -106.8617)" class="st3" width="126.8" height="18.4" />
                <pattern id="SVGID_3_" xlink:href="#Zebra" patternTransform="matrix(0 0.7995 -0.4374 0 -11228.0605 -1394.3264)">
                </pattern>
                <rect x="634.3" y="473.2" class="st6" width="18.4" height="126.8" />
            </g>
        </g>
    </g>
    <g id="window">
        <g>
            <rect x="489.3" y="46.4" class="st7" width="215.9" height="268.4" />
            <rect x="507.6" y="66.8" class="st8" width="80.4" height="95.7" />
            <rect x="605.2" y="66.8" class="st8" width="81.6" height="95.7" />
            <rect x="507.6" y="196.4" class="st8" width="80.4" height="95.7" />
            <rect x="605.2" y="196.4" class="st8" width="81.6" height="95.7" />
        </g>
    </g>
    <g id="clock">
        <circle class="st9" cx="165.7" cy="107.5" r="49.7" />
        <line id="minutehand" class="st10" x1="165.7" y1="65.8" x2="165.7" y2="107.5" />
        <line id="hourhand" class="st10" x1="165.7" y1="108.7" x2="189.9" y2="128.5" />
        <circle id="center" class="st11" cx="165.7" cy="107.5" r="4" />
        <line id="secondhand" class="st12" x1="165.7" y1="65.8" x2="165.7" y2="107.5" />
    </g>
    <g id="mug">
        <g id="steam3" class="st13">
            <path class="st2" d="M177.9,348.7c0,0-8.2,3.5-8.2,9.3s8.1,8.7,8.1,8.7" />
            <g>
                <g>
                    <path class="st14" d="M178.1,349.1c-1.7,0.9-3.2,2.1-4.5,3.4c-1.3,0.9-2.5,2.1-3.2,3.6c0,0,0,0.2-0.1,0.6c0,0.2-0.1,0.4-0.1,0.6
					c0,0.2,0,0.5,0,0.7c0.1,1,0.6,2,0.7,2.1c0.1,0.2,0.4,1,1,1.6c0.5,0.7,1.2,1.3,1.4,1.4c0.2,0.1,0.6,0.5,1.1,0.9
					c0.5,0.4,1,0.8,1.3,0.9c0.3,0.2,0.8,0.6,1.2,1c0.4,0.4,0.9,0.7,0.9,0.7s-1.5-0.5-2.9-1.3c-1.5-0.8-2.8-1.9-3-2.3
					c-0.3-0.3-0.8-0.8-1.2-1.4c-0.4-0.6-0.8-1.3-0.9-1.6c-0.2-0.7-0.5-2.3-0.2-2.7c0.1-0.1,0.1-0.3,0.2-0.6c0.1-0.3,0.2-0.6,0.3-0.9
					c0.2-0.6,0.5-1.2,0.8-1.4c0.2-0.2,0.7-1,1.2-1.7c0.5-0.7,1.2-1.4,1.3-1.5c0.3-0.3,0.8-1,1.4-1.4c0.3-0.2,1.1-0.5,1.9-0.7
					c0.4-0.1,0.7-0.2,1-0.2C177.9,349.1,178.1,349.1,178.1,349.1z" />
                    <path class="st14" d="M177.7,348.2c-0.8,0.3-1.5,0.6-2.2,1l-0.4,0.2c0,0-0.6,0.4-1.3,0.9c-0.6,0.5-1.3,1.1-1.4,1.2
					c-0.1,0.1-0.6,0.6-1,1.2c-0.4,0.6-0.8,1.2-1,1.4c-0.4,0.4-1,1.7-1.1,2.1c0,0.1-0.1,0.3-0.2,0.6c-0.1,0.3-0.1,0.7-0.2,1.1
					c0,0.4,0,0.8,0,1c0,0.3,0,0.5,0,0.5s0.1,0.2,0.1,0.4c0.1,0.3,0.2,0.6,0.4,0.9c0.3,0.7,0.8,1.3,0.9,1.5c0.1,0.1,0.5,0.8,1.1,1.2
					c0.2,0.2,0.5,0.5,0.7,0.6c0.2,0.2,0.3,0.3,0.3,0.3c0.8,0.8,1.7,1.5,2.7,2.2c0,0-1-0.3-2-0.9c-1-0.5-2-1.2-2.1-1.4
					c-0.1-0.1-1.1-1-1.8-2.3c-0.7-1.3-1.1-2.8-1-3c0-0.1-0.1-0.6,0-1.2c0-0.3,0.1-0.6,0.1-1c0.1-0.4,0.2-0.7,0.3-1.1
					c0.1-0.4,0.3-0.7,0.4-1c0.1-0.3,0.3-0.6,0.4-0.8c0.3-0.4,0.5-0.7,0.5-0.7c0.9-1.2,1.9-2.3,3-3.1
					C174.4,349.3,176,348.7,177.7,348.2z" />
                    <path class="st14" d="M173.9,363.3c0,0-0.8-0.6-1.5-1.4c-0.7-0.8-1.1-1.7-1.2-1.7c0-0.1-0.6-0.9-0.7-1.8
					c-0.1-0.5-0.1-0.9-0.1-1.3c0-0.4,0.1-0.6,0.1-0.6c0.1-0.3,0.2-0.6,0.4-0.9c0.1-0.3,0.3-0.6,0.5-0.8c0.5-0.6,1.1-1.2,1.8-1.7
					c0.7-0.7,1.5-1.3,2.4-1.9c-0.7,0.7-1.4,1.4-2,2.1c-0.8,0.7-1.5,1.4-2,2.2c0,0-0.2,0.3-0.3,0.6c-0.2,0.3-0.3,0.7-0.3,0.9
					c0,0.2,0.1,0.6,0.1,0.9c0.1,0.4,0.2,0.7,0.2,0.8c0,0.1,0.1,0.2,0.1,0.4c0.1,0.2,0.1,0.4,0.3,0.6c0.2,0.4,0.6,0.8,0.6,0.9
					c0,0.1,0.2,0.4,0.3,0.7c0.1,0.3,0.3,0.6,0.3,0.6C173.3,362.5,173.6,362.9,173.9,363.3z" />
                </g>
            </g>
        </g>
        <g id="steam2" class="st13">
            <g>
                <g>
                    <path class="st14" d="M154.7,313.7c3.2,3.1,5.7,6.8,7.5,11c0.4,2,0.7,4,0.7,6c0,1,0,2-0.2,3c-0.2,1-0.4,2.1-1,3
					c0,0-0.1,0.1-0.2,0.4c-0.1,0.3-0.4,0.6-0.7,1c-0.7,0.8-1.8,1.5-2.9,2.1c-1.1,0.6-2.1,1.1-2.8,1.6c-0.7,0.5-0.9,1-1,1.2
					c0,0.1-0.1,0.2-0.2,0.4c-0.1,0.2-0.2,0.4-0.3,0.7c-0.1,0.3-0.2,0.6-0.3,1c0,0.4-0.1,0.8-0.1,1.3c-0.1,1.9,0.3,3.8,0.6,4.2
					c0.1,0.2,0.3,0.6,0.4,1.1c0.2,0.5,0.3,1.1,0.5,1.7c0.4,1.2,1,2.5,1.4,3.1c0.4,0.6,0.8,2,1.3,3.2c0.2,0.6,0.5,1.2,0.7,1.6
					c0.2,0.4,0.3,0.7,0.3,0.7s-0.6-0.6-1.5-1.5c-0.9-1-1.9-2.4-2.9-3.9c-0.9-1.5-1.7-3.3-2.2-4.8c-0.5-1.5-0.6-2.7-0.6-3.1
					c-0.1-0.9-0.2-2.5-0.1-4.2c0.1-0.4,0.2-0.8,0.3-1.2c0.2-0.4,0.3-0.8,0.5-1.1c0.4-0.6,0.9-1.2,1.2-1.4c0.7-0.5,1.8-1.1,2.9-1.6
					c1.1-0.4,2-0.8,2.5-0.9c0.5,0,1.8-0.7,2.4-1.9c0.7-1.2,0.7-2.7,0.9-3.3c0.2-0.6,0-2.7-0.5-4.6c-0.5-1.9-1.4-3.7-1.6-4.1
					c-0.3-0.9-1.5-2.3-2.2-3.6c-0.3-0.6-0.9-2.4-1.5-4C155.4,315.1,154.7,313.7,154.7,313.7z" />
                    <path class="st14" d="M153.2,315.1c1,1.3,1.9,2.7,2.7,4.1c0.1,0.3,0.3,0.5,0.4,0.8c0,0,0.8,1.3,1.5,2.7c0.7,1.4,1.3,3,1.4,3.4
					c0.1,0.3,0.6,1.6,1,3c0.4,1.4,0.6,2.9,0.5,3.5c-0.1,0.6-0.1,1.5-0.3,2.2c-0.1,0.4-0.2,0.7-0.4,0.9c-0.1,0.1-0.2,0.2-0.2,0.3
					c-0.1,0.1-0.2,0.1-0.2,0.2c-0.2,0.2-1.1,0.8-2.4,1.2c-0.7,0.2-1.4,0.5-1.8,0.6c-0.3,0.1-0.5,0.2-0.7,0.3
					c-0.2,0.1-0.3,0.1-0.3,0.1s-0.1,0-0.2,0.1c-0.1,0.1-0.4,0.2-0.6,0.4c-0.5,0.4-1.3,0.9-1.9,1.7c-0.3,0.4-0.6,0.8-0.8,1.3
					c-0.2,0.4-0.4,0.9-0.5,1.2c-0.2,0.8-0.3,1.4-0.3,1.6c0,0.2-0.1,0.8-0.1,1.5c0.1,0.6,0.1,1.5,0.2,2.2c0.1,0.8,0.2,1.5,0.4,2
					c0.1,0.5,0.2,0.9,0.2,0.9c0.5,2.5,1.4,5,2.7,7.3c0,0-1.6-1.7-2.9-3.9c-1.3-2.2-2.2-4.9-2.2-5.3c0-0.2-0.2-1.1-0.3-2.3
					c0-0.3,0-0.6,0-1c0-0.4,0-0.8,0.1-1.2c0-0.8,0.3-1.8,0.6-2.8c0.2-0.5,0.5-1,0.7-1.5c0.3-0.5,0.6-0.9,1-1.3c0.3-0.4,0.7-0.7,1-1
					c0.4-0.3,0.7-0.5,1-0.7c0.6-0.4,1.1-0.7,1.5-0.9c0.4-0.2,0.6-0.3,0.7-0.3c0.1,0,0.3-0.1,0.7-0.3c0.3-0.1,0.8-0.3,1.1-0.4
					c0.2-0.1,0.4-0.1,0.6-0.2c0.2-0.1,0.3-0.1,0.5-0.2c0.1-0.1,0.2-0.1,0.3-0.2c0.1-0.1,0.2-0.1,0.2-0.2c0.3-0.2,0.5-0.9,0.6-1.6
					c0-0.4,0-0.7,0.1-1c0-0.2,0-0.4,0-0.4c-0.1-2.5-0.7-5-1.7-7.5C156.4,321.3,155,318.1,153.2,315.1z" />
                    <path class="st14" d="M154.8,351.4c0,0,0-0.1-0.1-0.4c-0.1-0.2-0.2-0.5-0.3-0.9c-0.2-0.8-0.4-1.8-0.5-2.9c0-0.5-0.1-1.1,0-1.5
					c0-0.2,0-0.5,0-0.6c0.1-0.2,0.1-0.3,0.1-0.5c0-0.3,0.2-0.5,0.3-0.7c0.1-0.2,0.1-0.3,0.2-0.3c0.1,0,0.2-0.4,0.6-0.9
					c0.5-0.5,1.3-1,2.4-1.6c1-0.6,2.2-1.3,3-2c0.2-0.2,0.4-0.4,0.5-0.5c0.1-0.2,0.3-0.3,0.3-0.5c0.2-0.3,0.3-0.4,0.3-0.4
					c0.3-0.4,0.5-0.8,0.8-1.2c0.2-0.4,0.3-0.9,0.5-1.3c0.1-0.4,0.1-0.9,0.2-1.3c0.1-0.5,0.1-0.9,0.1-1.3c0.2-2,0.1-4.1-0.2-6.2
					c-0.6-2.4-1.5-4.8-2.7-7c1.4,2,2.6,4.1,3.6,6.5c0.3,1.4,0.4,2.8,0.5,4.1c0,0.7,0.1,1.4,0,2.1l0,1c0,0.4-0.1,0.8-0.1,1.2
					c0,0,0,0.3-0.1,0.7c-0.1,0.4-0.3,1-0.6,1.7c-0.1,0.3-0.3,0.6-0.5,0.9c-0.2,0.3-0.4,0.6-0.6,0.8c-0.4,0.5-0.8,0.9-1,1.1
					c-0.2,0.2-0.6,0.7-1,1c-0.2,0.2-0.5,0.4-0.7,0.6c-0.2,0.2-0.5,0.3-0.7,0.5c-0.4,0.3-0.9,0.6-1.2,0.8c-0.3,0.2-0.6,0.4-0.7,0.5
					c-0.1,0-0.2,0.1-0.3,0.2c-0.1,0.1-0.3,0.2-0.4,0.3c-0.3,0.2-0.5,0.5-0.6,0.7c0,0.1-0.1,0.2-0.1,0.3c0,0.1-0.1,0.2-0.1,0.3
					c0,0.3,0,0.4-0.1,0.5c0,0.1,0,0.3-0.1,0.5c0,0.1-0.1,0.2-0.2,0.4c0,0.2-0.1,0.4-0.1,0.5c-0.2,0.7-0.3,1.4-0.3,1.4
					c-0.1,0.5-0.1,1-0.1,1.6C154.7,350.3,154.8,350.8,154.8,351.4z" />
                </g>
            </g>
        </g>
        <g id="steam1" class="st13">
            <g>
                <g>
                    <path class="st14" d="M176.9,336.6c-0.8-0.8-1.4-1.9-1.7-3c-0.3-1.1-0.4-2.2-0.4-3.2c0-2.1,0.2-4.1,0.3-6
					c0.4-1.7,0.9-3.3,1.2-4.9c0.3-1.7,0.6-3.3,0.4-4.9c0,0,0-0.1-0.1-0.3c-0.1-0.2-0.2-0.4-0.4-0.8c-0.3-0.6-0.9-1.3-1.7-1.9
					c-0.8-0.6-1.8-1.1-2.6-1.6c-0.4-0.3-0.8-0.5-1.1-0.8c-0.3-0.2-0.5-0.4-0.6-0.5c-0.1-0.1-0.3-0.3-0.5-0.5
					c-0.2-0.3-0.4-0.6-0.6-1.1c-0.2-0.4-0.3-0.9-0.5-1.4c-0.1-0.5-0.2-1.1-0.2-1.6c0-0.5,0-1.1,0-1.5c0-0.5,0-0.9,0.1-1.3
					c0-0.8,0.1-1.4,0-1.6c-0.1-0.5,0.1-1.7,0.4-3c0.3-1.3,0.7-2.6,0.9-3.3c0.2-0.7,0.9-1.9,1.6-2.9c0.4-0.5,0.8-0.9,1-1.2
					c0.3-0.3,0.5-0.4,0.5-0.4s-0.1,0.2-0.2,0.5c-0.1,0.3-0.3,0.7-0.5,1.3c-0.4,1.1-0.8,2.6-1.1,4.1c-0.6,3.1-0.7,6.5-0.7,7.3
					c-0.1,0.8,0,2.2,0.5,3.4c0.4,1.2,1.3,2.1,1.7,2.6c0.4,0.5,1.2,1.1,2.1,1.7c0.8,0.6,1.6,1.4,1.8,1.9c0.2,0.5,0.9,1.6,1.1,2.9
					c0.3,1.3,0.2,2.6,0,3.2c-0.2,0.6-0.2,2.4-0.3,4.2c-0.1,1.8-0.2,3.6-0.2,4c-0.1,0.9,0.1,2.5,0,3.9c0,0.7-0.6,2.2-0.7,3.8
					c0,0.4,0,0.8,0.1,1.2c0.1,0.4,0.1,0.7,0.2,1C176.8,336.2,176.9,336.6,176.9,336.6z" />
                    <path class="st14" d="M178.4,335.3c-0.7-1-0.9-2.3-0.9-3.7l0.1-0.8c0,0,0-0.3,0-0.9c0-0.5,0.1-1.2,0.2-2
					c0.2-1.5,0.4-3.1,0.4-3.4c0-0.3,0.1-1.7,0.2-3c0.1-1.4,0.1-2.8,0.2-3.4c0.1-0.6,0.2-1.5,0.1-2.5c0-0.5-0.1-1-0.1-1.4
					c0-0.4-0.1-0.7-0.1-0.9c0-0.1-0.1-0.3-0.1-0.5c0-0.1-0.1-0.3-0.1-0.4c-0.1-0.1-0.1-0.3-0.2-0.4c-0.2-0.3-0.3-0.7-0.6-1
					c-0.2-0.3-0.5-0.7-0.8-1c-0.3-0.3-0.6-0.6-0.8-0.8c-0.3-0.2-0.5-0.4-0.7-0.6c-0.4-0.3-0.6-0.5-0.6-0.5s-0.1,0-0.2-0.1
					c-0.1-0.1-0.3-0.2-0.4-0.3c-0.4-0.2-0.8-0.5-1.1-0.9c-0.4-0.3-0.6-0.8-0.8-1.1c-0.2-0.4-0.3-0.7-0.3-0.8c0-0.1-0.1-0.5-0.2-0.9
					c0-0.5-0.1-1-0.1-1.6c0-1.2,0-2.4,0-2.4c0.3-2.1,0.8-4.1,1.5-6.1c0,0-0.2,1.9-0.1,3.8c0,1.9,0.3,3.9,0.3,4.2
					c0,0.4,0,2.4,0.6,3.4c0.2,0.5,0.7,0.9,1.2,1.3c0.5,0.4,1.2,0.8,1.3,0.9c0.1,0.1,0.7,0.5,1.7,1.5c0.1,0.1,0.2,0.2,0.4,0.4
					c0.1,0.2,0.2,0.3,0.4,0.5c0.2,0.3,0.5,0.6,0.7,1c0.5,0.8,0.7,1.6,1,2.5c0.1,0.8,0.3,1.6,0.3,2.3c0,0.3,0,0.7,0,1
					c0,0.3,0,0.5-0.1,0.8c-0.1,1-0.2,1.6-0.2,1.6c-0.2,2.8-0.6,5.5-1.1,8c-0.5,1.6-1,3.1-1.2,4.5
					C177.7,332.8,177.7,334.1,178.4,335.3z" />
                    <path class="st14" d="M167.9,298.5c0,0,0,0.1,0,0.4c0,0.3-0.1,0.6-0.1,1.1c0,0.4-0.1,1,0,1.5c0,0.6,0,1.1,0,1.8
					c0,0.7,0.1,1.3,0.2,2c0.1,0.6,0.3,1.3,0.5,1.8c0.5,1.1,1,1.7,1.1,1.8c0,0,0.2,0.2,0.4,0.5c0.2,0.2,0.6,0.5,1,0.8
					c0.8,0.6,1.8,1.1,2.7,1.6c0.8,0.5,1.5,1,1.9,1.5c0.2,0.2,0.3,0.5,0.4,0.7c0.1,0.2,0.1,0.3,0.1,0.3c0.3,1.2,0.2,2.4,0.1,3.7
					c-0.3,1.7-0.7,3.3-1.1,5c-0.3,2.1-0.7,4.1-1,6.4c-0.1-2.2,0-4.3,0-6.3c0.5-2.2,0.9-4.3,1-6.3c0,0,0-0.1,0-0.4
					c0-0.2,0.1-0.6,0-0.9c0-0.6-0.2-1.3-0.4-1.5c-0.1-0.1-0.2-0.2-0.5-0.4c-0.2-0.1-0.4-0.3-0.8-0.4c-0.3-0.1-0.6-0.3-0.9-0.4
					c-0.3-0.1-0.6-0.3-0.7-0.4c-0.2-0.1-0.6-0.4-1.1-0.7c-0.5-0.4-1.2-0.9-1.9-1.6c-0.7-0.7-1.2-1.5-1.6-2.2
					c-0.3-0.7-0.5-1.2-0.6-1.4c-0.1-0.2-0.1-0.6-0.1-1.1c0-0.2,0-0.5,0-0.8c0-0.3,0-0.5,0.1-0.8c0.1-0.5,0.1-1,0.2-1.3
					c0.1-0.3,0.1-0.5,0.1-0.5C167.2,300.8,167.5,299.6,167.9,298.5z" />
                </g>
            </g>
        </g>
        <g id="cup">
            <g>
                <path class="st11" d="M197.2,431.3c-7.4,0-13.2-10-13.2-22.8c0-12.8,5.8-22.8,13.2-22.8s13.2,10,13.2,22.8
				C210.3,421.3,204.6,431.3,197.2,431.3z M197.2,389.7c-5.4,0-9.1,9.9-9.1,18.8c0,8.9,3.8,18.8,9.1,18.8s9.1-9.9,9.1-18.8
				C206.3,399.6,202.6,389.7,197.2,389.7z" />
            </g>
            <path class="st15" d="M189.5,442.7h-45c-4.9-4.9,0-69,0-69h45C189.5,373.7,195.2,437,189.5,442.7z" />
            <path class="st15" d="M189.5,451.9h-45c-4.9-0.6,0-9.1,0-9.1h45C189.5,442.7,195.2,451.1,189.5,451.9z" />
        </g>
    </g>
    <g id="books">
        <g>
            <g>
                <g>

                    <rect x="509.4" y="400.7" transform="matrix(0.894 -0.4481 0.4481 0.894 -124.4717 296.1285)" class="st16" width="108.4" height="20.8" />
                </g>
                <g>
                    <path class="st17" d="M617.6,396.4l-98.2,49.2l-9.9-19.8l98.2-49.2L617.6,396.4z M520.1,443.7l95.6-47.9l-8.7-17.3l-95.6,47.9
					L520.1,443.7z" />
                </g>
            </g>
            <g>
                <g>
                    <path class="st18" d="M622.5,400.3l-102.8,51.5c-7.2-2.4-17.1-22.5-14.8-29.5l102.8-51.5l3.7,7.3l-95.1,47.7
					c-1.3,3.8,1.4,12.7,6.7,14.5l95.5-47.9L622.5,400.3z" />
                </g>
                <g>
                    <path class="st11" d="M623.4,400.6l-103.7,52l-0.3-0.1c-7.5-2.5-17.7-22.9-15.2-30.4l0.1-0.3l103.7-52l4.3,8.6l-95.5,47.9
					c-1,3.7,1.6,11.5,6.1,13.2l95.9-48.1L623.4,400.6z M519.7,451l101.8-51l-3.3-6.6L523,441.1l-0.3-0.1c-5.6-1.9-8.6-11.1-7.2-15.4
					l0.1-0.3l94.7-47.5l-3-6l-101.8,51C503.7,429.6,513.1,448.4,519.7,451z" />
                    <path class="st11" d="M624.2,400.9l-104.4,52.3l-0.5-0.2c-7.9-2.6-18.2-23.2-15.6-31.1l0.2-0.5l104.4-52.3l4.8,9.6l-95.7,48
					c-0.7,3.5,1.7,10.4,5.6,12.2l96.2-48.2L624.2,400.9z M519.7,452l102.9-51.6l-4.1-8.1L523,440.2l-0.2-0.1
					c-4.9-1.9-7.5-10-6.4-13.9l0.1-0.3l95.2-47.7l-3.8-7.6l-102.9,51.6l0,0.1C502.4,429.4,512.6,449.6,519.7,452L519.7,452z
					 M622.3,400.2l-102.6,51.4l-0.2-0.1c-6.7-2.7-16.3-21.8-14.5-28.9l0.1-0.2L607.6,371l3.5,7l-95,47.7c-1.3,4,1.6,13,6.8,14.7
					l0.1,0l95.5-47.8L622.3,400.2z M519.6,450.4l101.1-50.7l-2.8-5.5l-94.9,47.5l-0.5-0.2c-2.7-0.9-5.1-3.5-6.6-7.1
					c-1.3-3.2-1.7-6.8-1-9l0.2-0.5l94.4-47.3l-2.5-5L506,423.2C504.6,429.9,513.5,447.6,519.6,450.4z" />
                </g>
            </g>
        </g>
        <g>
            <g>
                <g>
                    <rect x="593.5" y="425.4" class="st16" width="108.4" height="20.8" />
                </g>
                <g>
                    <path class="st17" d="M702.6,446.9H592.8v-22.2h109.8V446.9z M594.3,445.5h106.9v-19.3H594.3V445.5z" />
                </g>
            </g>
            <g>
                <g>
                    <path class="st19" d="M705.2,452.5H590.3c-5.4-5.4-5.2-27.8,0-33h114.9v8.2H598.8c-2.8,2.8-4.4,12-0.5,16h106.9V452.5z" />
                </g>
                <g>
                    <path class="st11" d="M705.9,453.2H590l-0.2-0.2c-5.6-5.6-5.6-28.4,0-34l0.2-0.2h116v9.6H599.1c-2.5,2.9-3.7,11-0.5,14.6h107.3
					V453.2z M590.6,451.8h113.9v-7.3H598l-0.2-0.2c-4.2-4.2-2.7-13.8,0.5-17l0.2-0.2h106v-6.7H590.6
					C585.9,425.5,585.9,446.6,590.6,451.8z" />
                    <path class="st11" d="M706.5,453.8H589.7l-0.4-0.4c-5.9-5.9-5.9-28.9,0-34.8l0.4-0.4h116.8V429H599.4
					c-2.2,2.8-3.2,10.1-0.5,13.4h107.6V453.8z M590.2,452.7h115.2v-9.1h-107l-0.2-0.2c-3.5-3.9-2.2-12.3,0.5-15.3l0.2-0.2h106.5
					v-8.5H590.2l0,0C584.9,424.7,584.9,447.4,590.2,452.7L590.2,452.7z M705.1,452.4H590.3l-0.2-0.2c-4.8-5.4-4.8-26.8,0-32.3
					l0.2-0.2h114.7v7.9l-106.3,0c-3,3-4.4,12.3-0.5,16.2l0,0h106.8V452.4z M590.8,451.2h113.1V445H597.8l-0.4-0.4
					c-2-2-3-5.4-2.7-9.3c0.3-3.5,1.5-6.8,3.2-8.5l0.4-0.4h105.6v-5.6H590.8C586.6,426.1,586.6,446,590.8,451.2z" />
                </g>
            </g>
        </g>
    </g>
    <g id="lamp">
        <g>

            <rect x="270.8" y="345.5" transform="matrix(0.866 -0.5 0.5 0.866 -161.2009 191.0096)" class="st20" width="10.2" height="101.5" />

            <rect x="286.6" y="183.7" transform="matrix(0.8917 0.4527 -0.4527 0.8917 156.1832 -102.2123)" class="st20" width="10.2" height="183.1" />

            <rect x="323.5" y="160.3" transform="matrix(0.9379 -0.347 0.347 0.9379 -39.8971 124.5249)" class="st20" width="8.6" height="26.8" />
            <polygon class="st20" points="402.5,248.4 319.7,279 310,195 355.2,178.3 		" />
            <rect x="236.9" y="435.2" class="st20" width="152" height="16.9" />
            <circle class="st20" cx="252.3" cy="355" r="8.8" />
        </g>
    </g>
</svg>


<svg class="cats" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1600 600" style="enable-background:new 0 0 1600 600;" xml:space="preserve">
    <path id="start" d="M969.7,540.6c-1.7-2.5-2.8-5.2-3.7-8c0.1-2.8-0.2-5.6-0.8-8.4c-0.2-0.9-0.5-1.8-0.8-2.7c-0.5-5.2-2.9-9.7-6.7-13.4
	c-1.4-1.4-2.9-2.7-4.3-4.1c-1.7-1.8-1.9-2.9-0.8-5.1c0.5-1.1,1.1-2.2,1.8-3.2c2.6-3.7,5.2-7.3,7.8-11c0.4-0.6,0.7-1.3,1.1-2
	c-0.1-0.1-0.3-0.2-0.4-0.3c-5.1,2.5-10.2,5-15.4,7.4c-0.3-1.3-1.6-1.9-2.7-1.1c-0.4,0.2-0.7,0.5-1.1,0.8c-0.7-1.1-1.5-1.1-3.5-0.4
	c-3,1.1-6,2.3-8.8,3.8c-6.6,3.7-13.2,7.6-19.7,11.4c-3.8,0.4-7.6,1.1-11.3,1.9c-9.6,2.2-18.9,5.5-28.2,8.8c-0.9,0.3-1.7,0.6-2.6,0.9
	c-3.6,1.2-7.2,2.4-10.9,3.3c-6.2,1.5-12.5,2-18.9,2.4c-13.7,0.9-27.3,0.1-40.9-1c-6.1-0.5-12.2-1.2-18.3-2c-7.1-0.9-14.3-2-21.4-3.1
	c-4.8-0.8-9.7-1.6-14.5-2.5c-4.2-0.8-8.5-1.6-12.6-2.5c-5.1-1.2-10.3-2.3-15.4-3.8c-2.8-0.8-5.6-1.7-8.2-2.8
	c-0.9-0.4-1.7-0.8-2.6-1.3c-5.3-2.9-9-7.7-12.3-12.6c-5.4-8.1-10.6-16.4-15.7-24.7c-4.8-7.9-10.2-15.3-16.9-21.8
	c-7-6.8-14.4-13.1-23.3-17.2c-1.8-0.8-3.7-1.6-5.8-1.4c-1.4,0.1-2.3,1-2.8,2.2c-0.5,1.1,0.4,1.8,1.2,2.5c0.2,0.2,0.4,0.3,0.7,0.5
	c4.1,3.2,8.5,6.2,12.4,9.6c12.4,10.8,21.9,24,30.3,38c5,8.3,8.8,17.1,11.7,26.3c1.8,5.8,3.5,11.6,5.4,17.4c1,3.2,1.8,6.5,1.2,9.9
	c-0.4,2.3-0.6,4.7-1.3,7c-1.8,6.5-3.8,13-5.8,19.4c-2.3,7.3-4.7,14.6-6.8,21.9c-2.4,8.2-5.4,16-10.7,22.8c-1.5,2-3.1,3.9-4.4,6
	c-6.8,10.1-11.4,21.2-13.3,33.3c-1,6.3-1.3,12.5,0.8,18.7c2,6,6.6,9,12.8,8.1c4.1-0.6,6.4-2.8,6.3-7c-0.1-4.4-0.5-8.8-0.9-13.1
	c-0.5-5.6,0.2-10.8,3.5-15.5c2.6-3.7,5.9-6.8,9.5-9.5c7.4-5.6,14.8-11.1,22.4-16.4c1.1-0.8,2.3-1.5,3.5-2.3c2.5-1.5,5-2.9,7.7-4.1
	c3.1-1.4,5.2,0,5.5,3.5c0.2,2.7,0.2,5.3,0.2,8c-0.2,6.3-0.6,12.6-0.6,18.9c0,0.5,0,1.1,0,1.6c0.2,4.9,1.4,9.6,4.2,13.7
	c4.5,6.7,9.3,13.2,14.2,19.6c1.6,2.1,3.9,3.9,6.2,5.3c4.6,2.9,9.8,3.5,15.1,3.4c3-0.1,4.4-2.1,3.1-4.9c-0.6-1.3-1.4-2.7-2.4-3.7
	c-2.6-2.6-5.3-5.2-8-7.6c-3.5-3.1-7-6.3-9.7-10.2c-0.2-0.3-0.4-0.6-0.6-1c-2.2-3.6-3.1-7.6-2.1-11.9c0.4-2,1.1-3.8,1.9-5.6
	c0.7-1.5,1.4-2.9,2.2-4.3c1.9-3.3,3.9-6.5,6.1-9.6c1.5-2.1,3.1-4.2,4.8-6.1c5.1-5.9,12-7.9,19.4-8.4c9-0.7,18.1-1.1,27.1-1.7
	c0.2,0,0.4,0,0.6,0c7.1-0.5,14.2-1.7,21.1-3.6c5.3-1.4,10.3-1.2,15.2,1.3c4.8,2.5,7.8,5.7,7.4,11.5c-0.1,2.5,0.2,5.2,0.9,7.6
	c0.4,1.3,0.8,2.6,1.2,4c1.6,5.3,3.4,10.6,5,15.9c0.3,1,0.6,2,0.9,3.1c1.3,4.2,2.2,8.6,3.1,12.9c0.6,2.8,0.5,5.7,1.2,8.5
	c0.9,4.2,3.7,8.9,10.4,7.8c2.5-0.4,4.4-0.9,3.6-4.6c-0.5-2.2-1.3-4.3-2-6.4c-1.2-3.8-2.8-7.5-3.5-11.4c-0.8-4.4-1.2-8.9-1.3-13.3
	c-0.1-2.5,0-5.1,0-7.7c0.2-3.5,0.3-6.9,0.6-10.4c0.2-3.7,1.5-7.2,2.9-10.6c0.6-1.5,1.6-1.8,3.1-1.1c0.5,0.2,1,0.5,1.4,0.9
	c1.9,1.4,3.8,2.8,5.7,4.1c4.1,2.8,7.8,6.1,10.9,9.9c0.5,0.7,1.1,1.4,1.5,2.1c2.8,4.2,5.6,8.4,8.1,12.8c4.2,7.5,8.2,15.1,12.4,22.6
	c2.4,4.3,5.1,8.5,8.9,11.8c1,0.9,2.1,1.7,3.5,1.3c1.6-0.5,3.1-1,4.6-1.6c2-0.8,2.5-2.1,1.6-4c-0.3-0.7-0.6-1.4-1-2
	c-1.6-2.7-3.3-5.4-4.8-8.2c-3.7-7.2-7.2-14.5-10.7-21.9c-2.9-6-6-12-8.5-18.3c-2.2-5.8-3.8-11.8-5.4-17.8c-0.6-2.3-1-4.7-1.4-7
	c0.4-0.9,1-1.8,1.9-2.6c4.9-4.3,8.8-9.4,12.4-14.7c1.4-2.1,2.6-4.4,4.3-6.4c6.5-7.9,17.9-11.1,27.7-8c2,0.7,3.9,1.7,5.9,2.4
	c5.2,1.8,10,1,12.2-4.6c0.1-0.3,0.6-0.5,0.9-0.6c1.8-0.3,3.1-1.2,3.9-2.8c0.4-0.8,0.6-1.9,1.2-2.5
	C971.7,545.6,971.3,543.1,969.7,540.6z" />
    <path id="end" d="M971.1,542.7c-1.7-2.5-2.8-5.2-3.7-8c0.1-2.8-0.2-5.6-0.8-8.4c-0.2-0.9-0.5-1.8-0.8-2.7c-0.5-5.2-2.9-9.7-6.7-13.4
	c-1.4-1.4-2.9-2.7-4.3-4.1c-1.7-1.8-1.9-2.9-0.8-5.1c0.5-1.1,1.1-2.2,1.8-3.2c2.6-3.7,5.2-7.3,7.8-11c0.4-0.6,0.7-1.3,1.1-2
	c-0.1-0.1-0.3-0.2-0.4-0.3c-5.1,2.5-10.2,5-15.4,7.4c-0.3-1.3-1.6-1.9-2.7-1.1c-0.4,0.2-0.7,0.5-1.1,0.8c-0.7-1.1-1.5-1.1-3.5-0.4
	c-3,1.1-6,0.3-8.8,1.8c-6.6,3.7-13.2,7.6-19.7,11.4c-3.8,0.4-7.6,1.1-11.3,1.9c-9.6,2.2-24.7,0.7-34,4c-0.9,0.3-1.7,0.6-2.6,0.9
	c-3.6,1.2-7.2,2.4-10.9,3.3c-6.2,1.5-12.5,2-18.9,2.4c-13.7,0.9-27.3,0.1-40.9-1c-6.1-0.5-12.2-1.2-18.3-2c-7.1-0.9-14.3-2-21.4-3.1
	c-4.8-0.8-9.7-1.6-14.5-2.5c-4.2-0.8-8.5-1.6-12.6-2.5c-5.1-1.2-10.3-2.3-15.4-3.8c-2.8-0.8-5.6-1.7-8.2-2.8
	c-0.9-0.4-1.7-0.8-2.6-1.3c-5.3-2.9-9-7.7-12.3-12.6c-5.4-8.1-7.7-7.1-12.8-15.4c-4.8-7.9-10.2-15.3-16.9-21.8
	c-7-6.8-14.4-13.1-23.3-17.2c-1.8-0.8-3.7-1.6-5.8-1.4c-1.4,0.1-2.3,1-2.8,2.2c-0.5,1.1,0.4,1.8,1.2,2.5c0.2,0.2,0.4,0.3,0.7,0.5
	c4.1,3.2,8.5,6.2,12.4,9.6c12.4,10.8,19,14.7,27.4,28.7c5,8.3,8.8,17.1,11.7,26.3c1.8,5.8,3.5,11.6,5.4,17.4c1,3.2,1.8,6.5,1.2,9.9
	c-0.4,2.3-0.6,4.7-1.3,7c-1.8,6.5-3.8,13-5.8,19.4c-2.3,7.3-4.7,14.6-6.8,21.9c-2.4,8.2-5.4,16-10.7,22.8c-1.5,2-3.1,3.9-4.4,6
	c-6.8,10.1-11.4,21.2-13.3,33.3c-1,6.3-1.3,12.5,0.8,18.7c2,6,6.6,9,12.8,8.1c4.1-0.6,6.4-2.8,6.3-7c-0.1-4.4-0.5-8.8-0.9-13.1
	c-0.5-5.6,0.2-10.8,3.5-15.5c2.6-3.7,5.9-6.8,9.5-9.5c7.4-5.6,14.8-11.1,22.4-16.4c1.1-0.8,2.3-1.5,3.5-2.3c2.5-1.5,5-2.9,7.7-4.1
	c3.1-1.4,5.2,0,5.5,3.5c0.2,2.7,0.2,5.3,0.2,8c-0.2,6.3-0.6,12.6-0.6,18.9c0,0.5,0,1.1,0,1.6c0.2,4.9,1.4,9.6,4.2,13.7
	c4.5,6.7,9.3,13.2,14.2,19.6c1.6,2.1,3.9,3.9,6.2,5.3c4.6,2.9,9.8,3.5,15.1,3.4c3-0.1,4.4-2.1,3.1-4.9c-0.6-1.3-1.4-2.7-2.4-3.7
	c-2.6-2.6-5.3-5.2-8-7.6c-3.5-3.1-7-6.3-9.7-10.2c-0.2-0.3-0.4-0.6-0.6-1c-2.2-3.6-3.1-7.6-2.1-11.9c0.4-2,1.1-3.8,1.9-5.6
	c0.7-1.5,1.4-2.9,2.2-4.3c1.9-3.3,3.9-6.5,6.1-9.6c1.5-2.1,3.1-4.2,4.8-6.1c5.1-5.9,12-7.9,19.4-8.4c9-0.7,18.1-1.1,27.1-1.7
	c0.2,0,0.4,0,0.6,0c7.1-0.5,14.2-1.7,21.1-3.6c5.3-1.4,10.3-1.2,15.2,1.3c4.8,2.5,7.8,5.7,7.4,11.5c-0.1,2.5,0.2,5.2,0.9,7.6
	c0.4,1.3,0.8,2.6,1.2,4c1.6,5.3,3.4,10.6,5,15.9c0.3,1,0.6,2,0.9,3.1c1.3,4.2,2.2,8.6,3.1,12.9c0.6,2.8,0.5,5.7,1.2,8.5
	c0.9,4.2,3.7,8.9,10.4,7.8c2.5-0.4,4.4-0.9,3.6-4.6c-0.5-2.2-1.3-4.3-2-6.4c-1.2-3.8-2.8-7.5-3.5-11.4c-0.8-4.4-1.2-8.9-1.3-13.3
	c-0.1-2.5,0-5.1,0-7.7c0.2-3.5,0.3-6.9,0.6-10.4c0.2-3.7,1.5-7.2,2.9-10.6c0.6-1.5,1.6-1.8,3.1-1.1c0.5,0.2,1,0.5,1.4,0.9
	c1.9,1.4,3.8,2.8,5.7,4.1c4.1,2.8,7.8,6.1,10.9,9.9c0.5,0.7,1.1,1.4,1.5,2.1c2.8,4.2,5.6,8.4,8.1,12.8c4.2,7.5,8.2,15.1,12.4,22.6
	c2.4,4.3,5.1,8.5,8.9,11.8c1,0.9,2.1,1.7,3.5,1.3c1.6-0.5,3.1-1,4.6-1.6c2-0.8,2.5-2.1,1.6-4c-0.3-0.7-0.6-1.4-1-2
	c-1.6-2.7-3.3-5.4-4.8-8.2c-3.7-7.2-7.2-14.5-10.7-21.9c-2.9-6-6-12-8.5-18.3c-2.2-5.8-3.8-11.8-5.4-17.8c-0.6-2.3-1-4.7-1.4-7
	c0.4-0.9,1-1.8,1.9-2.6c4.9-4.3,8.8-9.4,12.4-14.7c1.4-2.1,2.6-4.4,4.3-6.4c6.5-7.9,23.7-4.4,33.4-1.2c2,0.7,3.9,1.7,5.9,2.4
	c5.2,1.8,10,1,12.2-4.6c0.1-0.3,0.6-0.5,0.9-0.6c1.8-0.3,3.1-1.2,3.9-2.8c0.4-0.8,0.6-1.9,1.2-2.5
	C973.2,547.7,972.8,545.2,971.1,542.7z" />
</svg>
<script>
var flashlight = document.getElementById('illuminate');
flashlight.onmousemove = function(event) {
    this.style.backgroundPosition = (event.clientX - 300) + 'px ' + (event.clientY - 300) + 'px';
}
</script>
</body>
</html>
运行代码 全选代码 复制代码 清除代码 恢复代码
预览图片
这是一款基于HTML5+SVG实现的深夜办公室场景动画特效源码。画面上呈现出黑夜中办公室里桌子、台灯、书籍、杯子及桌下小猫走过的场景，手电筒灯光照射随着鼠标移动而移动。整体画面效果自然流畅。建议使用支持HTML5与css3效果较好的火狐(Firefox)或谷歌(Chrome)等浏览器预览本源码。
一、推荐使用迅雷或快车等多线程下载软件下载本站资源。
二、未登录会员无法下载，登录后可获得更多便利功能，若未注册，请先注册。
三、如果服务器暂不能下载请稍后重试！总是不能下载，请点我报错 ,谢谢合作！
四、本站大部分资源是网上搜集或私下交流学习之用，任何涉及商业盈利目的均不得使用，否则产生的一切后果将由您自己承担！本站将不对任何资源负法律责任.如果您发现本站有部分资源侵害了您的权益，请速与我们联系，我们将尽快处理.
五、如有其他问题，请加网站设计交流群(点击这里查看交流群 )进行交流。
六、如需转载本站资源，请注明转载来自并附带链接
七、本站部分资源为加密压缩文件，统一解压密码为：www.aizhanzhe.com
 大家评论
 站长推荐
 点击排行