<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="303px"
	 height="213.001px" viewBox="0 0 303 213.001" xml:space="preserve">

  <g class="wall">
	  <rect x="21.5" y="101.501" width="260" height="20"/>
	  <rect x="21.5" y="131.501" width="260" height="80"/>
  </g>
  
  <g class="wall wall-top">
    <rect x="41.5" y="31.501" width="220" height="40"/>
  </g>
  
  
  <g class="lamp lamp-yellow">
    <g class="animation-pendulum animation-delayed-1">
      <line x1="101.5" y1="141.501" x2="101.5" y2="131.417"/>
      <rect x="96.5" y="141.501" width="10" height="2"/>
      <circle cx="101.5" cy="154.001" r="10"/>
  		<rect x="96.5" y="164.501" width="10" height="2"/>
    </g>
  </g>
  
  <g class="lamp lamp-yellow">
    <g class="animation-pendulum animation-delayed-2">
      <line x1="201.5" y1="141.501" x2="201.5" y2="131.417"/>
      <rect x="196.5" y="141.501" width="10" height="2"/>
      <circle cx="201.5" cy="154.001" r="10"/>
  		<rect x="196.5" y="164.501" width="10" height="2"/>
    </g>
  </g>
  
  <g class="lamp lamp-red">
    <g class="animation-pendulum">
      <line x1="151.5" y1="141.501" x2="151.5" y2="131.417"/>
      <rect x="146.5" y="141.501" width="10" height="2"/>
      <path d="
			M151.656,171.084L151.656,171.084c-5.586,0-10.156-4.57-10.156-10.156v-6.813c0-5.586,4.57-10.156,10.156-10.156h0,c5.586,0,9.844,4.57,9.844,10.156v6.813C161.5,166.514,157.242,171.084,151.656,171.084z"/>
      <rect x="146.5" y="171.542" width="10" height="2"/>
    </g>
  </g>
  
  <g class="windows">
		<line x1="41.5" y1="131.501" x2="41.5" y2="141.459"/>
		<line x1="51.5" y1="141.459" x2="51.5" y2="131.501"/>
		<line x1="61.5" y1="131.501" x2="61.5" y2="141.459"/>
		<line x1="41.5" y1="181.501" x2="41.5" y2="211.501"/>
		<line x1="51.5" y1="181.501" x2="51.5" y2="211.501"/>
		<line x1="61.5" y1="181.501" x2="61.5" y2="211.501"/>
		<line x1="241.5" y1="131.501" x2="241.5" y2="141.459"/>
		<line x1="251.5" y1="131.501" x2="251.5" y2="141.459"/>
		<line x1="261.5" y1="131.501" x2="261.5" y2="141.459"/>
		<line x1="241.5" y1="181.501" x2="241.5" y2="211.501"/>
		<line x1="251.5" y1="181.501" x2="251.5" y2="211.501"/>
		<line x1="261.5" y1="181.501" x2="261.5" y2="211.501"/>
		<line class="window-red" x1="31.5" y1="181.501" x2="71.5" y2="181.501"/>
		<line class="window-red" x1="231.5" y1="181.501" x2="271.5" y2="181.501"/>
		<line class="window-red" x1="31.5" y1="141.501" x2="71.5" y2="141.501"/>
		<line class="window-red" x1="231.5" y1="141.501" x2="271.5" y2="141.501"/>
  </g>
  
  <g class="floor floor-middle">
		<line x1="21.5" y1="111.501" x2="281.5" y2="111.501"/>
		<line x1="51.501" y1="101.501" x2="51.501" y2="122.667"/>
		<line x1="251.501" y1="101.501" x2="251.501" y2="122.667"/>
		<line x1="151.501" y1="101.501" x2="151.501" y2="122.667"/>
		<line x1="201.501" y1="101.501" x2="201.501" y2="122.667"/>
		<line x1="101.501" y1="101.501" x2="101.501" y2="122.667"/>
		<rect x="21.5" y="121.501" width="260" height="10.001"/>
  </g>
  
  <g class="floor floor-top">
		<line x1="41.5" y1="41.501" x2="261.5" y2="41.501"/>
		<line x1="56.833" y1="31.479" x2="56.833" y2="51.501"/>
		<line x1="246.458" y1="31.501" x2="246.458" y2="51.501"/>
		<line x1="201.5" y1="31.479" x2="201.5" y2="51.501"/>
		<line x1="101.5" y1="31.479" x2="101.5" y2="51.501"/>
		<rect x="146.5" y="31.479" width="10" height="20.022"/>
    <polygon points="
		261.5,31.492 41.5,31.46 41.5,71.501 261.5,71.501 	"/>
  </g>
  
  
  <g class="columns">
    <rect x="21.5" y="102" height="109.916"/>
    <rect x="71.5" y="33" height="179.958"/>
		<rect x="121.5" y="33" height="178.5"/>
    <rect x="171.5" y="33" height="178.5"/>	
		<rect x="221.5" y="33" height="178.5"/>
		<rect x="271.5" y="102" height="109.916"/>
  </g>
  
  <g class="balcony">
		<rect x="21.5" y="51.501" width="260" height="20"/>
		<line x1="21.5" y1="61.501" x2="281.5" y2="61.501"/>
  </g>
  
  <g class="base">
    <line x1="21.5" y1="211.501" x2="281.5" y2="211.501"/>
  </g>
  
  <g class="roof roof-top">
		<polygon points="
		11.5,31.5 21.48,11.5 21.48,1.5 281.48,1.5 281.48,11.5 291.5,31.5 	"/>
  </g>
  <g class="roof roof-middle">
    <polygon points="
		1.5,101.501 21.5,71.501 281.5,71.501 301.5,101.501 	"/>
  </g>
  
</svg>

<h1>浅草寺</h1>
<h5>Sensoji Temple</h5>
$animation-time: 10s;
$color-black: #222;
$color-gray: #736357;
$color-beige: #EDE4C6;
$color-red: #E40B12;
$color-yellow: #FBC926;

html {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: lighten($color-beige, 5%);
}

h1, h2, h3, h4, h5, h6 {
  margin-top: .6em;
  margin-bottom: 0;
  font-weight: 300;
  text-transform: uppercase;
  font-family: 'Roboto', Arial, sans-serif;
  font-weight: 300;
  color: $color-black;
}

svg {
  display: block;
  margin: 0 auto;
  fill: none;
  stroke: $color-black;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
}

.wall {
  fill: $color-beige;
}

.windows {
  .window-red {
    stroke: $color-red;
  }
}

.floor {
  line {
    stroke: $color-red;
  }
  rect {
    fill: $color-red;
  }
}

.columns {
  rect {
    fill: $color-red;
    width: 10px;
  }
}

.balcony {
}

.roof {
  fill: $color-gray;
}

.lamp {
  &.lamp-yellow {
    fill: $color-yellow;
  }
  &.lamp-red {
    fill: $color-red;
  }
}

/* ANIMATIONS */

@mixin animate-scale-X($selector, $start:0, $duration:10) {
  $animationName: 'animation-scale-X-#{$start}-#{$duration}';
  $start: $start * 1%;
  @keyframes #{$animationName} {
    from {
      transform: scaleX(1);
    }
    0.1%, #{$start} {
      transform: scaleX(0);
    }
    to, #{$start + $duration} {
      transform: scaleX(1);
    }
  }
  #{$selector} {
    animation: #{$animationName} $animation-time infinite alternate both;
    transform-origin: 50% 0;
  }
}

@mixin animate-slide-up($selector, $start:0, $duration:20) {
  $animationName: 'animation-slide-up-#{$start}-#{$duration}';
  $start: $start * 1%;
  @keyframes #{$animationName} {
    from {
      transform: translateY(0);
    }
    0.1%, #{$start} {
      transform: translateY(105%);
    }
    to, #{$start + $duration} {
      transform: translateY(0);
    }
  }
  #{$selector} {
    animation: #{$animationName} $animation-time ease-in infinite alternate both;
  }
}

@mixin animate-fall-down($selector, $start:0, $duration:20) {
  $animationName: 'animation-fall-down-#{$start}-#{$duration}';
  $start: $start * 1%;
  @keyframes #{$animationName} {
    from {
      transform: translateY(0);
    }
    0.1%, #{$start} {
      transform: translateY(-1000%);
    }
    #{$start + $duration} {
      transform: translateY(0);
    }
    #{$start + $duration - 3} {
      transform: translateY(-2px);
    }
    #{$start + $duration - 2} {
      transform: translateY(0);
    }
    #{$start + $duration - 1} {
      transform: translateY(-1px);
    }
    #{$start + $duration - 0}, to {
      transform: translateY(0);
    }
  }
  #{$selector} {
    animation: #{$animationName} $animation-time ease-in infinite alternate;
  }
}

@mixin animate-grow-down($selector, $start:0, $duration:10) {
  $animationName: 'animation-grow-down-#{$start}-#{$duration}';
  $start: $start * 1%;
  @keyframes #{$animationName} {
    from {
      transform: scaleY(1.0) translateY(0);
    }
    0.1%, #{$start} {
      transform: scaleY(0) translateY(-100%);
    }
    #{$start + $duration}, to {
      transform: scaleY(1.0) translateY(0);
    }
  }
  #{$selector} {
    animation: #{$animationName} $animation-time ease infinite alternate both;
    transform-origin: 50% top;
  }
}

@include animate-scale-X('.base', 5, 10);
@include animate-slide-up('.windows', 8, 50);
@include animate-slide-up('.columns', 10, 15);
@include animate-slide-up('.wall', 20, 20);
@include animate-fall-down('.floor', 18, 20);
@include animate-fall-down('.roof', 24, 18);
@include animate-fall-down('.wall.wall-top', 24, 22);
@include animate-fall-down('.balcony', 34, 18);
@include animate-fall-down('.floor.floor-top', 37, 23);
@include animate-fall-down('.roof.roof-top', 34, 30);
@include animate-grow-down('.lamp', 60, 5);


/* Pendulum */

@keyframes pendulum {
    0% { transform: rotate( 2deg); }
  100% { transform: rotate(-2deg); }
}

.animation-pendulum {
  animation: pendulum 1s infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  transform-origin: 50% top;
}

.animation-delayed-1 {
  animation-delay: .2s;
}

.animation-delayed-2 {
  animation-delay: .5s;
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.