gsap+svg实现圣诞彩虹屋动画效果代码
代码语言：html
所属分类：动画
代码描述：gsap+svg实现圣诞彩虹屋动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
body {
min-height: 100vh;
margin: 0;
padding: 1rem;
color: #FFFFFF;
/*background-color: #ED839A;*/
background: -webkit-linear-gradient(180deg, rgba(228,71,113,1) 0%, rgba(237,131,154,1) 100%);
background: linear-gradient(180deg, rgba(228,71,113,1) 0%, rgba(237,131,154,1) 100%);
/*background: -webkit-linear-gradient(180deg, #152966 0%, #522550 100%);
background: linear-gradient(180deg, #152966 0%, #522550 100%);*/
}
.svg-wrapper {
position: relative;
}
svg {
display: block;
max-height: 90vh;
margin: auto;
}
.snowbox {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}
.snow {
position: absolute;
width: 0.625rem;
height: 0.625rem;
background-color: #ECF0F1;
}
.bg {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}
* {
box-sizing: border-box;
}
</style>
</head>
<body >
<main class="main">
<section class="svg-wrapper">
<svg width="100%" height="100%" viewBox="0 0 418 400" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<defs>
<linearGradient id="_Linear2" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-9.10111,-25.977,47.7686,0,71.1011,341.023)"><stop offset="0" style="stop-color:#c2576f;stop-opacity:1"></stop><stop offset="1" style="stop-color:#e96985;stop-opacity:1"></stop></linearGradient>
<linearGradient id="_Linear3" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-9.10111,-25.977,47.7686,0,71.1011,341.023)"><stop offset="0" style="stop-color:#c2576f;stop-opacity:1"></stop><stop offset="1" style="stop-color:#e96985;stop-opacity:1"></stop></linearGradient>
<linearGradient id="_Linear4" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-1.28571,-22.5167,4.05549,0,119.929,240.755)"><stop offset="0" style="stop-color:#c84965;stop-opacity:1"></stop><stop offset="1" style="stop-color:#e65474;stop-opacity:1"></stop></linearGradient>
<linearGradient id="_Linear5" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-2.79175,-4.58311,5.56692,0,104.883,327.17)"><stop offset="0" style="stop-color:#894fa1;stop-opacity:1"></stop><stop offset="1" style="stop-color:#9b59b6;stop-opacity:1"></stop></linearGradient>
<linearGradient id="_Linear6" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-2.44057,-4.58311,5.54621,0,89.3961,327.17)"><stop offset="0" style="stop-color:#2e87c3;stop-opacity:1"></stop><stop offset="1" style="stop-color:#3498db;stop-opacity:1"></stop></linearGradient>
<linearGradient id="_Linear7" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-2.67101,-4.74986,5.54225,0,72.7269,327.358)"><stop offset="0" style="stop-color:#26aa5e;stop-opacity:1"></stop><stop offset="1" style="stop-color:#2ecc71;stop-opacity:1"></stop></linearGradient>
<linearGradient id="_Linear8" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-3.2057,-4.58311,4.88822,0,57.1797,327.17)"><stop offset="0" style="stop-color:#d3ab0d;stop-opacity:1"></stop><stop offset="1" style="stop-color:#f1c40f;stop-opacity:1"></stop></linearGradient>
<linearGradient id="_Linear9" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-4.02737,-4.74986,3.02801,0,40.8921,327.358)"><stop offset="0" style="stop-color:#d87620;stop-opacity:1"></stop><stop offset="1" style="stop-color:#e67e22;stop-opacity:1"></stop></linearGradient>
<linearGradient id="_Linear10" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-3.39935,-16.9702,5.08614,0,25.8742,341.214)"><stop offset="0" style="stop-color:#d44f42;stop-opacity:1"></stop><stop offset="1" style="stop-color:#e85748;stop-opacity:1"></stop></linearGradient>
<linearGradient id="_Linear12" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(6.05404e-15,110.851,-158.392,0,488,27.7128)"><stop offset="0" style="stop-color:#22bbf7;stop-opacity:1"></stop><stop offset="1" style="stop-color:#056084;stop-opacity:1"></stop></linearGradient>
<linearGradient id="_Linear13" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-2.68766e-13,110.851,-158.392,0,368,387.979)"><stop offset="0" style="stop-color:#56caf8;stop-opacity:1"></stop><stop offset="1" style="stop-color:#0884b5;stop-opacity:1"></stop></linearGradient>
<linearGradient id="_Linear14" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(27.7128,-16,6.19677,0,249.415,320)"><stop offset="0" style="stop-color:#000;stop-opacity:0.3"></stop><stop offset="1" style="stop-color:#000;stop-opacity:0"></stop></linearGradient>
<linearGradient id="_Linear15" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-31.1769,-18,5.47723,0,471.118,320)"><stop offset="0" style="stop-color:#000;stop-opacity:0.3"></stop><stop offset="1" style="stop-color:#000;stop-opacity:0"></stop></linearGradient>
<linearGradient id="_Linear16" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-18,31.1769,-36,0,366.172,55.3513)"><stop offset="0" style="stop-color:#39a598;stop-opacity:1"></stop><stop offset="1" style="stop-color:#4dccbd;stop-opacity:1"></stop></linearGradient>
<linearGradient id="_Linear18" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(16,27.7128,-10.6667,0,464,388.054)"><stop offset="0" style="stop-color:#34b7a7;stop-opacity:1"></stop><stop offset="1" style="stop-color:#91e0d6;stop-opacity:1"></stop></linearGradient>
<linearGradient id="_Linear19" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(32,7.10543e-15,0,27.7128,452,446.869)"><stop offset="0" style="stop-color:#b9eafd;stop-opacity:1"/><stop offset="1" style="stop-color:#d9f4fe;stop-opacity:1"/></linearGradient>
<mask id="house-mask">
<path d="M135.415,291l0,-205.591l221.703,0l0,205.591l-110.851,64l-110.852,-64Z" style="fill:#FFF;"></path>
</mask>
<mask id="side-window-mask">
<g transform="matrix(0.974279,0.5625,-6.245e-17,1.29904,-159.033,-45)">
<rect data-origin="100% 0%" x="352" y="69.282" width="32" height="27.713" style="fill:#FFF;"/>
</g>
</mask>
</defs>
<g id="rainbow-slot-mask" transform="matrix(11.5145,-6.6479,1.60518,0.926751,3679.38,-2354.7)">
<clipPath id="rainbow-slot-mask-path">
<rect data-origin="0% 50%" x="-364.099" y="319.617" width="8.432" height="7.553"></rect>
</clipPath>
<g clip-path="url(#rainbow-slot-mask-path)">
<g id="rainbow-slot" transform="matrix(0.0434235,0.311492,-0.0752117,0.539519,-336.421,123.349)">
<g id="rainbow-slot-bg" transform="matrix(1,-4.44089e-16,-5.55112e-16,1,-3.65131,3.89191)">
<path d="M97.044,305.915l-97.044,56.028l0,16.944l97.044,-56.029l0,-16.943Zm12.173,7.028l-12.173,-7.028l0,13.465l12.173,7.028l0,-13.465Z" style="fill:url(#_Linear2);"></path>
</g>
<g id="rainbow-slot-back" transform="matrix(0.866463,-0.500253,6.36692e-18,0.746277,-3.65131,130.724)">
<rect x="0" y="315.046" width="112" height="22.704" style="fill:url(#_Linear3);"></rect>
</g>
<g id="rainbow-slot-side" transform="matrix(1.01445,0.585693,1.85848e-17,0.597989,-20.2258,113.705)">
<rect x="112" y="218.238" width="12" height="22.517" style="fill:url(#_Linear4);"></rect>
</g>
</g>
</g>
</g>
<g id="rainbow-stubs" transform="matrix(1,0,0,1,3.65131,-4.10809)">
<g id="purple-stub" class="stub" transform="matrix(0.866025,-0.5,5.88773e-17,1.29639,-5.61684e-14,-46.1412)">
<rect x="92.178" data-origin="50% 100%" y="322.025" width="17.514" height="5.145" style="fill:url(#_Linear5);"></rect>
</g>
<g id="blue-stub" class="stub" transform="matrix(0.866025,-0.5,5.72615e-17,1.29639,-6.00223e-14,-46.1412)">
<rect data-origin="50% 100%" x="77.113" y="322.025" width="15.842" height="5.145" style="fill:url(#_Linear6);"></rect>
</g>
<g id="green-stub" class="stub" transform="matrix(0.862173,-0.497776,5.33241e-17,1.25088,0.232912,-31.6199)">
<rect data-origin="50% 100%" x="60.463" y="322.025" width="17.537" height="5.333" style="fill:url(#_Linear7);"></rect>
</g>
<g id="yellow-stub" class="stub" transform="matrix(0.865552,-0.499726,5.90601e-17,1.29639,0.0215063,-46.1536)">
<rect data-origin="50% 100%" x="45.399" y="322.025" width="15.889" height="5.145" style="fill:url(#_Linear8);"></rect>
</g>
<g id="orange-stub" class="stub" transform="matrix(0.875715,-0.505594,6.20837e-17,1.25088,-0.278557,-31.3246)">
<rect data-origin="50% 100%" x="28.749" y="322.025" width="17.251" height="5.333" style="fill:url(#_Linear9);"></rect>
</g>
<g id="red-stub" class="stub" transform="matrix(0.840053,-0.485005,1.00554e-17,0.350115,0.355424,258.331)">
<rect data-origin="50% 100%" x="13.685" y="322.161" width="16.315" height="19.053" style="fill:url(#_Linear10);"></rect>
</g>
</g>
<g id="rainbow-mask" transform="matrix(0.68386,-0.394827,3.79619e-17,0.777778,15.8463,141.073)">
<mask id="red-mask"><path d="M10,280c0,-74.5 26.367,-138.133 79.1,-190.9c52.767,-52.733 117.159,-81.671 191.659,-81.671c74.533,0 137.223,26.981 189.957,79.714c33.166,33.167 56.084,72.59 68.384,114.357" style="fill:none;fill-rule:nonzero;stroke:#fff;stroke-width:36px;"/></mask>
<mask id="orange-mask"><path d="M30,280c0,-68.967 24.417,-127.883 73.25,-176.75c48.867,-48.833 107.783,-73.25 176.75,-73.25c69,0 126.686,21.167 175.519,70c43.567,43.6 68.931,98.433 73.631,158" style="fill:none;fill-rule:nonzero;stroke:#fff;stroke-width:39.7px;"/></mask>
<mask id="yellow-mask"><path d="M50,280c0,-63.467 22.467,-117.667 67.4,-162.6c44.933,-44.933 99.133,-67.4 162.6,-67.4c63.5,0 117.717,22.467 162.65,67.4c26,26 44.467,55.117 55.4,87.35" style="fill:none;fill-rule:nonzero;stroke:#fff;stroke-width:39.7px;"/></mask>
<mask id="green-mask"><path d="M70.05,280c0,-57.933 20.5,-107.417 61.5,-148.45c41.033,-41 90.517,-61.5 148.45,-61.5c57.967,0 107.467,20.5 148.5,61.5c34.467,34.5 55.45,74.983 62.95,121.45" style="fill:none;fill-rule:nonzero;stroke:#fff;stroke-width:39.7px;"/></mask>
<mask id="blue-mask"><path d="M90.05,280c0,-52.4 18.55,-97.167 55.65,-134.3c37.133,-37.1 81.917,-55.65 134.35,-55.65c52.467,0 97.25,18.55 134.35,55.65c17.833,17.833 31.383,37.433 40.65,58.8" style="fill:none;fill-rule:nonzero;stroke:#fff;stroke-width:36.09px;"/></mask>
<mask id="purple-mask"><path d="M110.1,280c0.033,-46.867 16.633,-86.9 49.8,-120.1c33.233,-33.2 73.3,-49.8 120.2,-49.8c46.933,0 87,16.6 120.2,49.8c24.333,24.367 41.121,52.4 47.621,84.1" style="fill:none;fill-rule:nonzero;stroke:#fff;stroke-width:39.7px;"/></mask>
</g>
<g id="rainbow" transform="matrix(1,0,0,1,-95.3487,-22.8919)">
<g id="purple" class="bow" mask="url(#purple-mask)" transform="matrix(0.686634,-0.396429,3.81159e-17,0.792857,110.851,162)">
<path d="M434.05,184.25c5.533,8.7 10.233,17.767 14.1,27.2l0.45,1.15l0.4,1l1.1,2.9l0.35,0.9l0.3,0.8l0,0.05l2.4,7.25l0.15,0.45l0.05,0.1l0.1,0.4l0.9,3.15l0.15,0.55l0.05,0.3l0,0.7c0,3.067 -1.067,5.7 -3.2,7.9l-0.05,0.05c-2.2,2.1 -4.817,3.15 -7.85,3.15c-3.067,0 -5.683,-1.05 -7.85,-3.15l0,-0.05c-1.267,-1.267 -2.15,-2.683 -2.65,-4.25l0,-0.05l-0.25,-0.8c-5.133,-17.5 -13.367,-33.7 -24.7,-48.6c-4.667,-6.133 -9.85,-12.05 -15.55,-17.75c-31.033,-31.033 -68.5,-46.55 -112.4,-46.55c-43.933,0 -81.417,15.517 -112.45,46.55c-31.033,31.033 -46.55,68.5 -46.55,112.4l-22.05,0c0,-49.967 17.667,-92.633 53,-128c35.367,-35.333 78.033,-53 128,-53c49.967,0 92.617,17.667 127.95,53c10.133,10.133 18.833,20.867 26.1,32.2l0,0.05" style="fill:#9b59b6;fill-rule:nonzero;"></path>
</g>
<g id="blue" class="bow" mask="url(#blue-mask)" transform="matrix(0.686634,-0.396429,3.81159e-17,0.792857,110.851,162)">
<path d="M433.2,184.75c-7.2,-11.267 -15.85,-21.95 -25.95,-32.05c-35.133,-35.133 -77.55,-52.7 -127.25,-52.7c-49.7,0 -92.133,17.567 -127.3,52.7c-35.133,35.167 -52.7,77.6 -52.7,127.3l-20,0c0,-55.2 19.517,-102.35 58.55,-141.45c39.1,-39.033 86.25,-58.55 141.45,-58.55c55.2,0 102.333,19.517 141.4,58.55c14.3,14.333 25.983,29.733 35.05,46.2c3.967,7.233 7.45,14.683 10.45,22.35l-1.75,-2.35c-2,-2 -4.4,-3 -7.2,-3c-2.767,0 -5.133,1 -7.1,3c-2,1.967 -3,4.333 -3,7.1l0.05,1.1l0.15,1l-0.4,-1l-0.45,-1.1c-3.833,-9.4 -8.5,-18.433 -14,-27.1" style="fill:#3498db;fill-rule:nonzero;"></path>
</g>
<g id="green" class="bow" mask="url(#green-mask)" transform="matrix(0.686634,-0.396429,3.81159e-17,0.792857,110.851,162)">
<path d="M479.95,184.35c4.5,9.267 8.283,18.85 11.35,28.75l0.25,0.9l0.7,2.35l0.05,0.1l0,0.1l0.1,0.3l0.05,0.05l0.2,0.75l-0.05,0l0.7,2.25l0,0.2l0.05,1.1l0,0.1c0,2.667 -0.8,5.017 -2.4,7.05c2.1,0.4 3.983,1.433 5.65,3.1c0.967,0.967 1.7,2.017 2.2,3.15l0,-0.05l0.3,0.85l0.35,0.8l0.1,0.25l0.3,1.85l0,1c0,3.1 -1.067,5.767 -3.2,8l-0.05,0.05c-2.233,2.1 -4.883,3.15 -7.95,3.15c-3.067,0 -5.7,-1.05 -7.9,-3.15l0,-0.05l-1.2,-1.5l-0.05,0l-0.65,-1.05l-0.05,-0.1l-0.05,-0.15l-0.05,-0.05c-0.633,-1.2 -1.033,-2.467 -1.2,-3.8l0.05,0.1l-0.1,-0.8l0,-0.65c0,-2.767 0.867,-5.133 2.6,-7.1c-2.133,-0.4 -4,-1.4 -5.6,-3l-1.55,-1.95l-0.05,0l-0.3,-0.5l0,-0.05l-0.65,-1.4l-0.05,-0.05l-0.5,-1.8l-0.4,-1.3l0,-0.05l-0.15,-0.55c-1.2,-3.967 -2.517,-7.883 -3.95,-11.75l-0.9,-2.35c-2.967,-7.633 -6.417,-15.033 -10.35,-22.2c-9.033,-16.433 -20.667,-31.767 -34.9,-46c-38.867,-38.833 -85.767,-58.25 -140.7,-58.25c-54.933,0 -101.85,19.417 -140.75,58.25c-38.833,38.9 -58.25,85.817 -58.25,140.75l-22,0c0,-61 21.583,-113.083 64.75,-156.25c43.167,-43.167 95.25,-64.75 156.25,-64.75c61,0 113.083,21.583 156.25,64.75c18.533,18.533 33.1,38.733 43.7,60.6" style="fill:#2ecc71;fill-rule:nonzero;"></path>
</g>
<g id="yellow" class="bow" mask="url(#yellow-mask)" transform="matrix(0.686634,-0.396429,3.81159e-17,0.792857,110.851,162)">
<path d="M479.05,184.75c-10.533,-21.733 -25.033,-41.833 -43.5,-60.3c-42.967,-42.967 -94.817,-64.45 -155.55,-64.45c-60.733,0 -112.583,21.483 -155.55,64.45c-42.967,42.967 -64.45,94.817 -64.45,155.55l-20,0c0,-66.267 23.433,-122.833 70.3,-169.7c46.867,-46.867 103.433,-70.3 169.7,-70.3c66.267,0 122.817,23.433 169.65,70.3c22.6,22.567 39.75,47.383 51.45,74.45c2.4,5.567 4.583,11.25 6.55,17.05l0.4,1.2l1.2,3.65l0.15,0.45l-0.25,-0.35l-1.25,-1.45c-2,-2.033 -4.417,-3.05 -7.25,-3.05c-2.833,0 -5.217,1.017 -7.15,3.05c-2.033,2 -3.05,4.383 -3.05,7.15l0,0.55l0.05,0.45l0.1,0.85l-0.25,-0.9c-3.067,-9.833 -6.833,-19.383 -11.3,-28.65" style="fill:#f1c40f;fill-rule:nonzero;"></path>
</g>
<g id="orange" class="bow" mask="url(#orange-mask)" transform="matrix(0.686634,-0.396429,3.81159e-17,0.792857,110.851,162)">
<path d="M528.5,197.85l0.35,1l2.5,8.4l0.05,0l0.9,3.4l0.05,0.2l0,0.95c0,3.1 -1.067,5.767 -3.2,8l-0.05,0.05c-2.233,2.1 -4.883,3.15 -7.95,3.15c-3.067,0 -5.7,-1.05 -7.9,-3.15l0,-0.05l-1.2,-1.5l-0.05,0l-0.65,-1.05l0,-0.05l-0.15,-0.2l-0.1,-0.3l-1,-3.75l-0.1,-0.3l-0.1,-0.35l-1.35,-4.5l-0.1,-0.4l-0.15,-0.45l-1.2,-3.65l-0.4,-1.2c-1.933,-5.733 -4.1,-11.383 -6.5,-16.95c-11.667,-26.967 -28.75,-51.683 -51.25,-74.15c-46.633,-46.667 -102.95,-70 -168.95,-70c-66,0 -122.333,23.333 -169,70c-46.667,46.667 -70,103 -70,169l-22,0c0,-72.033 25.483,-133.55 76.45,-184.55c51,-50.967 112.517,-76.45 184.55,-76.45c72.033,0 133.533,25.483 184.5,76.45c26.767,26.733 46.5,56.383 59.2,88.95c1.733,4.433 3.333,8.917 4.8,13.45m7.15,39.6c1.467,1.433 2.45,3.1 2.95,5l0,0.15l0.1,0.85l0.2,1.55l0,0.25c0,3.067 -1.083,5.683 -3.25,7.85l0,0.05c-2.2,2.133 -4.817,3.2 -7.85,3.2c-3.067,0 -5.683,-1.083 -7.85,-3.25l-0.15,-0.15c-0.733,-0.767 -1.317,-1.567 -1.75,-2.4l-0.9,-2.05l-0.05,-0.15l-0.4,-3.2l0,-0.15c0.033,-1.9 0.483,-3.583 1.35,-5.05l0,0.05c0.467,-0.933 1.1,-1.783 1.9,-2.55c2.167,-2.2 4.783,-3.3 7.85,-3.3c3.033,0 5.65,1.1 7.85,3.3" style="fill:#e67e22;fill-rule:nonzero;"></path>
</g>
<g id="red" class="bow" mask="url(#red-mask)" transform="matrix(0.686634,-0.396429,3.81159e-17,0.792857,110.851,162)">
<path data-origin="0% 0%" d="M550.65,205.55c-0.5,-1.167 -1.217,-2.233 -2.15,-3.2c-2,-1.967 -4.4,-2.95 -7.2,-2.95c-2.767,0 -5.133,0.983 -7.1,2.95c-0.733,0.7 -1.317,1.483 -1.75,2.35c-0.833,1.4 -1.25,3 -1.25,4.8l0,0.2l0.3,1.85l0,0.05l-0.15,-0.7l-0.95,-3.4l-2.5,-8.35l-0.35,-1c-1.467,-4.533 -3.05,-9 -4.75,-13.4c-12.7,-32.433 -32.367,-61.967 -59,-88.6c-50.767,-50.767 -112.033,-76.15 -183.8,-76.15c-71.767,0 -133.05,25.383 -183.85,76.15c-50.767,50.8 -76.15,112.083 -76.15,183.85l-20,0c0,-77.3 27.333,-143.3 82,-198c54.7,-54.667 120.7,-82 198,-82c77.3,0 143.283,27.333 197.95,82c30.7,30.7 52.783,64.95 66.25,102.75c2.433,6.8 4.583,13.733 6.45,20.8" style="fill:#e85748;fill-rule:nonzero;"></path>
</g>
</g>
<g id="hole-mask" transform="matrix(0.866025,-0.5,1,0.57735,-114,-13)">
<clipPath id="hole-mask-path">
<rect x="-160" y="387.979" data-origin="50% 50%" width="128" height="110.851"/>
</clipPath>
<g clip-path="url(#hole-mask-path)">
<g id="hole" transform="matrix(0.57735,0.5,-1,0.866025,40.0859,76.2846)">
<g id="hole-wall-side" transform="matrix(0.866025,0.5,-4.72972e-17,1.1547,-111,-24)">
<rect x="416" y="27.713" width="128" height="110.851" style="fill:url(#_Linear12);"/>
</g>
<g id="hole-wall-back" transform="matrix(0.866025,-0.5,4.85723e-17,1.1547,-111,-24)">
<rect x="288" y="387.979" width="128" height="110.851" style="fill:url(#_Linear13);"/>
</g>
<g id="hole-edges" data-origin="50% 0%">
<g id="hole-edge-side">
<g transform="matrix(0.866025,0.5,-5.55112e-17,1.1547,-111,-24)">
<rect x="416" y="27.713" width="128" height="13.856" style="fill:#e65474;"></rect>
</g>
<g id="hole-shadow-side" transform="matrix(1,0,0,1,-111,-24)">
<path d="M471.118,304l0,16l-34.641,-20l34.641,4Z" style="fill:url(#_Linear15);"></path>
</g>
</g>
<g id="hole-edge-back">
<g transform="matrix(0.866025,-0.5,5.55112e-17,1.1547,-111,-24)">
<rect x="288" y="387.979" width="128" height="13.856" style="fill:#e96985;"></rect>
</g>
<g id="hole-shadow-back" transform="matrix(1,0,0,1,-111,-24)">
<path d="M249.415,320l0,-16l27.713,0l-27.713,16Z" style="fill:url(#_Linear14);"></path>
</g>
</g>
</g>
</g>
</g>
</g>
<g id="grass" transform="matrix(1,0,0,1,-3,11)">
<g id="grass-strip-1" transform="matrix(0.707177,-0.408289,1.01,0.583127,-34.0189,6.67838)">
<rect data-origin="0% 0%" x="-212.904" y="319.795" width="10.904" height="109.753" style="fill:#9faa3a;"></rect>
</g>
<g id="grass-strip-2" transform="matrix(0.866025,-0.5,1,0.57735,6.9282,-4)">
<rect data-origin="0% 0%" x="-200" y="311.769" width="16" height="110.851" style="fill:#939d36;"></rect>
</g>
<g id="grass-strip-3" transform="matrix(1.42963,-0.8254,1.01,0.583127,139.63,-93.578)">
<rect data-origin="0% 0%" x="-212.904" y="319.795" width="10.904" height="109.753" style="fill:#9faa3a;"></rect>
</g>
<g id="grass-strip-4" transform="matrix(0.866025,-0.5,1,0.57735,34.641,-20)">
<rect data-origin="0% 0%" x="-200" y="311.769" width="16" height="110.851" style="fill:#939d36;"></rect>
</g>
<g id="grass-strip-5" transform="matrix(1.42963,-0.8254,1.01,0.583127,167.426,-109.626)">
<rect data-origin="0% 0%" x="-212.904" y="319.795" width="10.904" height="109.753" style="fill:#9faa3a;"></rect>
</g>
<g id="grass-strip-6" transform="matrix(0.866025,-0.5,1,0.57735,62.3538,-36)">
<rect data-origin="0% 0%" x="-200" y="311.769" width="16" height="110.851" style="fill:#939d36;"></rect>
</g>
<g id="grass-strip-7" transform="matrix(1.42963,-0.8254,1.01,0.583127,195.056,-125.578)">
<rect data-origin="0% 0%" x="-212.904" y="319.795" width="10.904" height="109.753" style="fill:#9faa3a;"></rect>
</g>
<g id="grass-strip-8" transform="matrix(0.866025,-0.5,1,0.57735,90.0666,-52)">
<rect data-origin="0% 0%" x="-200" y="311.769" width="16" height="110.851" style="fill:#939d36;"></rect>
</g>
<g id="grass-strip-9" transform="matrix(0.714817,-0.4127,1.01,0.583127,70.6646,-53.7607)">
<rect data-origin="0% 0%" x="-212.904" y="319.795" width="10.904" height="109.753" style="fill:#9faa3a;"></rect>
</g>
</g>
<g id="house-box-shadow" data-origin="50% 50%" transform="matrix(0.956236,-0.552083,1.10417,0.637491,-151.528,43.6667)">
<rect x="-64" y="332.554" width="96" height="83.138" style="fill-opacity:0.05;"/>
</g>
<g id="house-group" mask="url(#house-mask)">
<g id="house" data-origin="50% 100%">
<path id="house-box-bg" d="M163.128,195l83.139,-48l83.138,48l0,96l-83.138,48l-83.139,-48l0,-96Z" style="fill:#91e0d6;"/>
<g id="house-box" transform="matrix(1,0,0,1,-3,11)">
<g id="house-box-side" transform="matrix(0.866025,0.5,-5.55112e-17,1.1547,-111,-40)">
<rect data-origin="50% 100%" x="320" y="55.426" width="96" height="83.138" style="fill:#4dccbd;"></rect>
</g>
<g id="house-box-side-gradient" transform="matrix(0.866025,0.5,-5.55112e-17,1.1547,-111,-40)">
<rect data-origin="50% 100%" x="320" y="55.426" width="96" height="83.138" style="fill:url(#_Linear16);"></rect>
</g>
<g id="house-box-front" transform="matrix(0.866025,-0.5,5.55112e-17,1.1547,-111,-40)">
<rect data-origin="50% 100%" x="416" y="415.692" width="96" height="83.138" style="fill:#91e0d6;"></rect>
</g>
<g id="house-box-top" transform="matrix(0.866025,-0.5,1,0.57735,-111,-40)">
<rect data-origin="50% 50%" x="-64" y="332.554" width="96" height="83.138" style="fill:#72d7cb;"></rect>
</g>
</g>
<g id="door" transform="matrix(1,0,0,1,-3,11)">
<g id="door-back" transform="matrix(0.866025,-0.5,5.55112e-17,1.1547,-111,-24)">
<rect data-origin="50% 100%" x="448" y="429.549" width="32" height="55.426" style="fill:#ebebeb;"></rect>
</g>
<g id="door-side" transform="matrix(0.866025,0.5,-5.55112e-17,1.1547,-111,-24)">
<rect data-origin="0% 50%" x="448" y="41.569" width="4" height="55.426" style="fill:#b9eafd;"></rect>
</g>
<g id="door-top" transform="matrix(0.866025,-0.5,1,0.57735,-111,-24)">
<rect data-origin="0% 50%" x="-48" y="429.549" width="32" height="3.464" style="fill:#d9f4fe;"></rect>
</g>
<g id="door-front" transform="matrix(0.866025,-0.5,5.55112e-17,1.1547,-111,-24)">
<rect data-origin="0% 0%" x="452" y="433.013" width="32" height="55.426" style="fill:#ebebeb;"></rect>
</g>
</g>
<g id="door-window-mask" transform="matrix(1.40581,-0.811645,7.29007e-17,1.51642,-361.85,-33.0406)">
<clipPath id="_clip17">
<rect x="457.215" y="439.941" width="14.785" height="15.827"></rect>
</clipPath>
<g clip-path="url(#_clip17)">
<g id="door-window" transform="matrix(0.711333,0.380731,-3.41967e-17,0.659446,255.262,165.668)">
<g id="door-window-pane" transform="matrix(1.40581,-0.811645,7.29007e-17,1.51642,-358.85,-44.0406)">
<rect data-origin="50% 0%" x="457.215" y="439.941" width="14.785" height="15.827" style="fill:#56caf8;"></rect>
</g>
<g id="door-window-sill-right" transform="matrix(0.866025,0.5,-5.55112e-17,1.1547,-111,-24)">
<rect data-origin="100% 50%" x="477.987" y="20.785" width="2.013" height="20.785" style="fill:#b9eafd;"></rect>
</g>
<g id="door-window-sill-bottom" transform="matrix(0.866025,-0.5,1,0.57735,-111,-24)">
<rect data-origin="100% 50%" x="-72" y="455.545" width="24" height="1.716" style="fill:#d9f4fe;"></rect>
</g>
</g>
</g>
</g>
<g id="window" transform="matrix(1,0,0,1,-114,-13)">
<g id="window-back" transform="matrix(0.974279,0.5625,1.2326e-32,1.29904,-41.5692,-34)">
<rect x="352" data-origin="0% 50%" y="69.282" width="32" height="27.713" style="fill:#b9eafd;"></rect>
</g>
<g id="window-front" transform="matrix(0.974279,0.5625,-6.245e-17,1.29904,-45.0333,-32)">
<rect x="352" y="69.282" width="32" height="27.713" style="fill:#b9eafd;"></rect>
</g>
<g id="window-sill-right" transform="matrix(0.866025,-0.5,6.245e-17,1.29904,-2.7883e-15,-58)">
<rect data-origin="100% 50%" x="380" y="401.836" width="4" height="27.713" style="fill:#ebebeb;"></rect>
</g>
<g id="window-sill-top" transform="matrix(0.866025,-0.5,1.125,0.649519,-50.2295,-29)">
<rect data-origin="100% 50%" x="-84" y="374.123" width="4" height="27.713" style="fill:#d9f4fe;"></rect>
</g>
</g>
<g mask="url(#side-window-mask)">
<g id="window-glass" transform="matrix(1,0,0,1,-114,-13)">
<clipPath id="window-glass-mask">
<path d="M325.626,292l-10.393,-6l0,12l10.393,6l0,-12Zm-13.857,-8l-10.392,-6l0,12l10.392,6l0,-12Zm13.857,-8l-10.393,-6l0,12l10.393,6l0,-12Zm-13.857,-8l-10.392,-6l0,12l10.392,6l0,-12Z"/>
</clipPath>
<g clip-path="url(#window-glass-mask)">
<g id="window-pane-top-right" transform="matrix(0.866025,0.5,-5.55112e-17,1.1547,0,0)">
<rect x="364" y="76.21" width="12" height="10.392" style="fill:#56caf8;"/>
</g>
<g id="window-pane-top-left" transform="matrix(0.866025,0.5,-5.55112e-17,1.1547,0,0)">
<rect x="348" y="76.21" width="12" height="10.392" style="fill:#56caf8;"/>
</g>
<g id="window-pane-bottom-right" transform="matrix(0.866025,0.5,-5.55112e-17,1.1547,0,0)">
<rect x="364" y="90.067" width="12" height="10.392" style="fill:#56caf8;"/>
</g>
<g id="window-pane-bottom-left" transform="matrix(0.866025,0.5,-5.55112e-17,1.1547,0,0)">
<rect x="348" y="90.067" width="12" height="10.392" style="fill:#56caf8;"/>
</g>
<g id="window-top-left-sill-left" transform="matrix(0.866025,-0.5,5.55112e-17,1.1547,0,0)">
<rect x="348" y="377.587" width="1.984" height="10.392" style="fill:#ebebeb;"/>
</g>
<g id="window-top-left-sill-bottom" transform="matrix(0.866025,-0.5,1,0.57735,0,0)">
<rect x="-100" y="387.979" width="1.984" height="10.392" style="fill:#d9f4fe;"/>
</g>
<g id="window-top-right-sill-left" transform="matrix(0.866025,-0.5,5.55112e-17,1.1547,13.8564,8)">
<rect x="348" y="377.587" width="1.984" height=&q.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0