cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div class="center"><svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="400px"
         height="400px" viewBox="0 0 400 400" enable-background="new 0 0 400
400" xml:space="preserve">
<g id="Background">
        <rect fill="#67488A" width="400" height="400"/>
        <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse"
x1="200.0005" y1="209.3125" x2="200.0005" y2="136.9624">
                <stop  offset="0" style="stop-color:#67488A"/>
                <stop  offset="1" style="stop-color:#4B3067"/>
        </linearGradient>
        <rect fill="url(#SVGID_1_)" width="400" height="205.728"/>

                <linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse"
x1="200.7344" y1="145.728" x2="200.7344" y2="11.4894"
gradientTransform="matrix(-1 0 0 -1 400.7344 400)">
                <stop  offset="0" style="stop-color:#67488A;stop-opacity:0"/>
                <stop  offset="1" style="stop-color:#2F1E55"/>
        </linearGradient>
        <rect y="252.945" opacity="0.68" fill="url(#SVGID_2_)" width="400"
height="147.055"/>
</g>
<g id="BigHole">
        <g>
                <polygon fill="#87D6F8" points="63.257,67.289 199.464,119.545
335.675,67.288 199.464,15.028           "/>
                <polygon fill="#9CDCF9" points="87.822,57.864 199.464,100.695
311.108,57.863 199.464,15.028           "/>
                <polygon fill="#AFE2FA" points="112.387,48.439 199.464,81.845
286.544,48.438 199.464,15.028           "/>
                <polygon fill="#C2E8FB" points="136.955,39.013 199.464,62.995
261.978,39.013 199.464,15.028           "/>
        </g>
</g>
<g id="BackProtrusion">
        <path fill="#9E9ECE"
d="M73.271,132.802l0.002,0.001l0,0L200,181.423l126.734-48.621L200,84.183L73.271,132.802z"/>
</g>
<g id="LittleHole">
        <g>
                <polygon fill="#87D6F8" points="142.972,132.877 200,154.755
257.029,132.876 200,110.997             "/>
                <polygon fill="#9CDCF9" points="153.257,128.931 200,146.863
246.744,128.93 200,110.997              "/>
                <polygon fill="#AFE2FA" points="163.542,124.984 200,138.971
236.459,124.984 200,110.997             "/>
                <polygon fill="#C2E8FB" points="173.828,121.038 200,131.079
226.173,121.038 200,110.997             "/>
        </g>
</g>
<g id="Beam">
        <g>
                <polygon opacity="0.8" fill="#B9E5FB" points="200.002,110.909
185,116.619 185,400 214.938,400 214.938,116.64          "/>
                <polygon opacity="0.06" fill="#ECF2FA" points="153.145,128.889
142.943,132.803 142.943,400 153.145,400                 "/>
                <polygon opacity="0.245" fill="#DFEEFA" points="163.9,124.878
153.145,128.889 153.145,400 163.9,400                 "/>
                <polygon opacity="0.43" fill="#D3EBFA" points="174.1,120.851
163.598,124.878 163.598,400 174.1,400                 "/>
                <polygon opacity="0.615" fill="#C6E8FA" points="185.121,116.619
173.9,120.851 173.9,400 185.121,400                 "/>
                <polygon opacity="0.06" fill="#ECF2FA" points="246.914,128.889
257.115,132.803 257.115,400 246.914,400                 "/>
                <polygon opacity="0.245" fill="#DFEEFA" points="236.461,124.878
246.914,128.889 246.914,400 236.461,400                 "/>
                <polygon opacity="0.43" fill="#D3EBFA" points="225.965,120.851
236.461,124.878 236.461,400 225.965,400                 "/>
                <polygon opacity="0.615" fill="#C6E8FA" points="214.938,116.619
226,120.851 226,400 214.938,400                 "/>
        </g>
</g>
<g id="Speck1">

                <rect x="224.359" y="216.472" transform="matrix(0.7071 0.7071
-0.7071 0.7071 220.8868 -96.1145)" opacity="0.615" fill="#EFF9FE"
width="4.209" height="4.21"/>
</g>
<g id="Speck2">

                <rect x="201.309" y="338.985" transform="matrix(0.7071 0.7071
-0.7071 0.7071 300.7659 -43.9324)" fill="#5D3A6D" width="4.209"
height="4.21"/>

                <rect x="207.286" y="315.501" transform="matrix(0.7071 0.7071
-0.7071 0.7071 285.9104 -55.0369)" fill="#9E76B4" width="4.209"
height="4.21"/>
</g>
<g id="Speck3">

                <rect x="178.468" y="314.059" transform="matrix(0.707 0.7072 -0.7072
0.707 277.8885 -35.6541)" fill="#5D3A6D" width="7.017"
height="7.017"/>

                <rect x="207.309" y="350.772" transform="matrix(0.7071 0.7071
-0.7071 0.7071 310.858 -44.7227)" fill="#9E76B4" width="4.209"
height="4.21"/>
</g>
<g id="House">
        <g>
                <path fill="#5D3A6D"
d="M160.063,286.933h0.002l0,0l39.937,15.322l39.935-15.322l-39.935-15.322L160.063,286.933z"/>
                <polygon fill="#9178A2" points="160.063,252.384 160.063,286.933
200.002,271.61 200.002,237.165          "/>
                <polygon fill="#9699BB" points="239.937,252.384 239.937,286.933
200,271.61 200,237.165          "/>
                <polygon fill="#9E9ECE" points="219.97,237.841 243.352,251.187
203.415,236.24 180.033,222.622          "/>
                <polygon opacity="0.615" fill="#ECF8FE" points="219.97,237.841
243.352,251.187 203.415,236.24 180.033,222.622          "/>
                <polygon fill="#5D3A6D" points="174.094,259.338 174.094,281.55
183.581,277.91 183.581,255.698          "/>
                <polygon fill="#9178A2" points="156.649,253.958 180.032,222.622
203.415,235.968                 "/>
                <polygon fill="#5D3A6D" points="203.415,235.968 180.032,222.622
156.649,253.958 160.538,252.462 180.113,226.229
                        200.002,237.165 239.937,252.384 239.937,252.651 243.352,251.35
243.352,251.187                 "/>
                <polygon fill="#5D3A6D" points="226,258.003 216.928,254.546
216.928,265.646 226,269.128             "/>
                <polygon fill="#DCECCB" points="223.837,259.812 216.928,257.178
216.928,265.635 223.837,268.285                 "/>
        </g>
        <polygon fill="#756F90" points="200,237.165 200,243.166
239.937,258.385 239.937,252.384         "/>
        <polygon fill="#765D89" points="200.002,237.165 180.113,226.229
160.538,252.462 160.063,252.645 160.063,258.564
                180.032,231.804 200.002,243.201 200.002,237.281         "/>
</g>
<g id="Shadow1">
        <polygon fill="#756F90" points="200,237.165 200,243.166
239.937,258.385 239.937,252.384         "/>
        <polygon fill="#765D89" points="200.002,237.165 180.113,226.229
160.538,252.462 160.063,252.645 160.063,258.564
                180.032,231.804 200.002,243.201 200.002,237.281         "/>
</g>
<g id="Shadow2">
        <polygon fill="#756F90" points="200,237.165 200,243.166
239.937,258.385 239.937,252.384         "/>
        <polygon fill="#765D89" points="200.002,237.165 180.113,226.229
160.538,252.462 160.063,252.645 160.063,258.564
                180.032,231.804 200.002,243.201 200.002,237.281         "/>
</g>
<g id="Speck4">

                <rect x="223.895" y="324.368" transform="matrix(0.7071 0.7071
-0.7071 0.7071 297.0452 -64.1844)" fill="#9E9ECE" width="4.209"
height="4.21"/>
</g>
<g id="FrontProtrusionTop">
        <path fill="#A098CA"
d="M73.271,98.742l0.002,0.001l0,0l126.73,0l126.73,0L200,50.123L73.271,98.742z"/>
        <polygon fill="#9E76B4" points="200,19.002 326.916,67.693
326.916,98.816 200,50.123       "/>
        <polygon fill="#5D3A6D" points="73.082,98.816 200,50.123 200,19.002
73.082,67.693   "/>
</g>
<g id="FrontProtrusionBottom">
        <polygon fill="#9E76B4" points="200,53.062 326.916,101.753
326.916,132.876 200,84.183      "/>
        <polygon fill="#5D3A6D" points="73.082,132.876 200,84.183 200,53.062
73.082,101.753  "/>
        <polygon fill="#9E9ECE" points="142.898,132.799 200,110.891
257.105,132.799 326.729,132.799 200,84.183 73.277,132.799       "/>
</g>
<g id="HiddenShip">
        <polygon fill="#4B3067" points="0,0 0,67.622 62.217,67.622
62.215,67.621 199.998,14.76 337.789,67.621 337.785,67.622
                400,67.622 400,0        "/>
</g>
</svg>
</div>
            
          
!
            
              body {
  background-color: #1e1e1e;
}

.center {
  text-align: center;
}

@keyframes housemotion {
    0% {transform: translateY(180px)} 
    50% {transform: translateY(180px)} 
    69% {transform: translateY(-195px)} 
    78% {transform: translateY(-195px)}
    78.1% {transform: translateY(-360px) scale(0)}
    100% {transform: translateY(-360px) scale(0)}
}


#House { 
  transform-origin: 50% 50%;
  animation-timing-function: ease-in;   
  animation-name: housemotion;
  animation-duration: 11s;
  animation-iteration-count: infinite;
}

@keyframes shadow1motion {
    0% {transform: translateY(185px)} 
    50% {transform: translateY(185px)} 
    69% {transform: translateY(-193px)} 
    78% {transform: translateY(-193px)}
    79% {transform: translateY(-360px) scale(0)}
    100% {transform: translateY(-360px) scale(0)}
}

#Shadow1 { 
  transform-origin: 50% 50%;
  animation-timing-function: ease-in;   
  animation-name: shadow1motion;
  animation-duration: 11s;
  animation-iteration-count: infinite;
}

@keyframes shadow2motion {
    0% {transform: translateY(190px)} 
    50% {transform: translateY(190px)} 
    69% {transform: translateY(-193px)} 
    78% {transform: translateY(-193px)}
    79% {transform: translateY(-360px) scale(0)}
    100% {transform: translateY(-360px) scale(0)}
}

#Shadow2 { 
  transform-origin: 50% 50%;
  animation-timing-function: ease-in;   
  animation-name: shadow2motion;
  animation-duration: 11s;
  animation-iteration-count: infinite;
}

@keyframes speck1motion {
    0% {transform: translateY(190px); opacity:1} 
    53% {transform: translateY(190px); opacity:1} 
    72% {transform: translateY(-193px); opacity:0} 
    100% {transform: translateY(-193px); opacity:0}
}

#Speck1 { 
  transform-origin: 50% 50%;
  animation-timing-function: cubic;   
  animation-name: speck1motion;
  animation-duration: 11s;
  animation-iteration-count: infinite;
}

@keyframes speck2motion {
    0% {transform: translateY(190px); opacity:1} 
    53% {transform: translateY(190px); opacity:1} 
    72% {transform: translateY(-293px); opacity:0.5} 
    75% {transform: translateY(-293px); opacity:0}  
    100% {transform: translateY(-293px); opacity:0}
}

#Speck2 { 
  transform-origin: 50% 50%;
  animation-timing-function: cubic;   
  animation-name: speck2motion;
  animation-duration: 11s;
  animation-iteration-count: infinite;
}

@keyframes speck3motion {
    0% {transform: translateY(190px); opacity:1} 
    53% {transform: translateY(190px); opacity:1} 
    70% {transform: translateY(-283px); opacity:0.5} 
    73% {transform: translateY(-283px); opacity:0}  
    100% {transform: translateY(-293px); opacity:0}
}

#Speck3 { 
  transform-origin: 50% 50%;
  animation-timing-function: cubic;   
  animation-name: speck3motion;
  animation-duration: 11s;
  animation-iteration-count: infinite;
}

@keyframes speck4motion {
    0% {transform: translateY(190px); opacity:1} 
    53% {transform: translateY(190px); opacity:1} 
    77% {transform: translateY(-293px); opacity:1} 
    80% {transform: translateY(-293px); opacity:0}  
    100% {transform: translateY(-293px); opacity:0}
}

#Speck4 { 
  transform-origin: 50% 50%;
  animation-timing-function: cubic;   
  animation-name: speck4motion;
  animation-duration: 11s;
  animation-iteration-count: infinite;
}

@keyframes beammotion {
    0% {opacity: 0} 
    46% {opacity: 0}
    49% {opacity: 1}
    72% {opacity: 1} 
    74% {opacity: 0}
    100% {opacity: 0}
}

#Beam { 
  transform-origin: 50% 50%;
  animation-timing-function: cubic;   
  animation-name: beammotion;
  animation-duration: 11s;
  animation-iteration-count: infinite;
}

@keyframes lholemotion {
    0% {transform: scale(0)} 
    40% {transform: scale(0)} 
    44% {transform: scale(1)}
    73.4% {transform: scale(1)}
    74.1% {transform: scale(1.1)} 
    76% {transform: scale(0)}
    100% {transform: scale(0)}
}

#LittleHole { 
  transform-origin: 50% 50%;
  animation-timing-function: cubic;   
  animation-name: lholemotion;
  animation-duration: 11s;
  animation-iteration-count: infinite;
}

@keyframes fpromotion {
    0% {transform: translateY(-200px)} 
    40% {transform: translateY(0px)}
    78% {transform: translateY(0px)}
    85% {transform: translateY(-200px)}
    100% {transform: translateY(-200px)}
}

#FrontProtrusionTop { 
  transform-origin: 50% 50%;
  animation-timing-function: cubic;   
  animation-name: fpromotion;
  animation-duration: 11s;
  animation-iteration-count: infinite;
}

#FrontProtrusionBottom { 
  transform-origin: 50% 50%;
  animation-timing-function: cubic;   
  animation-name: fpromotion;
  animation-duration: 11s;
  animation-iteration-count: infinite;
}

#BackProtrusion { 
  transform-origin: 50% 50%;
  animation-timing-function: cubic;   
  animation-name: fpromotion;
  animation-duration: 11s;
  animation-iteration-count: infinite;
}

@keyframes bholemotion {
    0% {transform: scale(0)} 
    5% {transform: scale(1)}
    83% {transform: scale(1)}
    88% {transform: scale(0)}
    100% {transform: scale(0)}
}

#BigHole { 
  transform-origin: 50% 50%;
  animation-timing-function: cubic;   
  animation-name: bholemotion;
  animation-duration: 11s;
  animation-iteration-count: infinite;
}
            
          
!
999px
Loading ..................

Console