<div class="flex-item">
	<h1>xを指定</h1>
	<svg>
	    <!-- 長方形 -->
	    <rect x="40%" y="15%"
				 width="100" height="100"
				 fill="blue"
				 stroke="orange"
				 stroke-width="1">
			 <animate attributeName="x" from="-20%" to="120%" dur="10s" repeatCount="indefinite">
		</rect>
      </svg>
</div>
<div class="flex-item">
	<h1>yを指定</h1>
	<svg>
	    <!-- 長方形 -->
	    <rect x="40%" y="15%"
				 width="100" height="100"
				 fill="blue"
				 stroke="orange"
				 stroke-width="1">
			 <animate attributeName="y" from="200%" to="-100%" dur="5s" repeatCount="indefinite">
		</rect>
      </svg>
</div>
<div class="flex-item">
	<h1>fillを指定</h1>
	<svg>
	    <!-- 長方形 -->
	    <rect x="40%" y="15%"
				 width="100" height="100"
				 fill="blue"
				 stroke="orange"
				 stroke-width="1">
			 <animate attributeName="fill" from="blue" to="orange" dur="5s" repeatCount="indefinite">
		</rect>
      </svg>
</div>
<div class="flex-item">
	<h1>stroke-widthを指定</h1>
	<svg>
	    <!-- 長方形 -->
	    <rect x="40%" y="15%"
				 width="100" height="100"
				 fill="blue"
				 stroke="orange"
				 stroke-width="1">
			 <animate attributeName="stroke-width" from="15" to="1" dur="3s" repeatCount="indefinite">
		</rect>
      </svg>
</div>
$black: #021836;
$maincolor: #173762;
$subcolor: #53739F;
$subcolor2: #D8E8FF;

@mixin max-screen($breakpoint) {
  @media screen and (max-width: $breakpoint) {
    @content;
  }
}

body {
	background: #FAFAFA;
	font-family: sans-serif;
	margin: 30px 0;
	line-height: 1.4;
	div {
		max-width: 500px;
		width: 100vw;
		margin: 0 auto;
		margin-bottom: 30px;
		color: $maincolor;
		@include max-screen(480px) {
		   width: 90%;
	   }
	}
}


svg {
	background: $subcolor2;
	margin: 0 auto;
	margin-bottom: 10px;
	width: 100%;
	height: 150px;
	position: relative;
	rect{
		fill: $maincolor;
		stroke: orange;
		stroke-width: 4px;
		position: absolute;
		transform: translate(0%,0%);
	}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.