sguzman/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Hi</h1>
    <svg width="500" height="100">
        <!-- Rotate rect -->
        <rect x="0" y="0" width="100" height="100" fill="red">
            <animateTransform attributeName="transform"
                attributeType="XML"
                type="rotate"
                from="0 50 50"
                to="360 50 50"
                dur="5s"
                repeatCount="indefinite" />
            <!-- Animate the color changing -->
            <animate attributeName="fill"
                values="red;orange;yellow;green;cyan;blue;purple;pink"
                dur="5s"
                repeatCount="indefinite" />
        </rect>
        <circle id="circ" x="0" cx="50" cy="50" r="40" stroke="purple" stroke-width="4" fill="orange" />
        <rect id="rect" x="100" y="10" width="80" height="80" stroke="orange" stroke-width="4" fill="purple" />
    </svg>
    <style>
        h1 {
            font-size: 100px;
            text-align: center;
        }
        @keyframes recolor-circ {
            0%, 100% {
                cx: 50;
                fill: orange;
                stroke: purple;
                r: 20;
            }
            50% {
                fill: purple;
                stroke: orange;
                r: 40;
                cx: 150;
            }
        }

        #circ {
            animation: recolor-circ 2s ease-in-out forwards infinite;
        }

        @keyframes recolor-rect {
            0%, 100% {
                x: 100;
                fill: purple;
                stroke: orange;
                width: 80;
                height: 80;
            }
            50% {
                fill: orange;
                stroke: purple;
                width: 40;
                height: 40;
                x: 0;
            }
        }

        #rect {
            animation: recolor-rect 2s ease-in-out forwards infinite;
        }

    </style>
    <div id="shape">WOW</div>
    <style>
        h1 {
            font-size: 100px;
            text-align: center;
        }
        @keyframes resize {
            0%, 100% {
                font-size: larger;
                background-color: red;
                border-radius: 0%;
            }
            50% {
                font-size: small;
                background-color: blue;
                text-align: center;
                border-radius: 50%;
            }
        }

        #shape {
            animation: resize 2s ease-in-out forwards infinite;
    }
    </style>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	</head>
	<body>
	<h1>Hi</h1>
	<svg width="500" height="100">
	<!-- Rotate rect -->
	<rect x="0" y="0" width="100" height="100" fill="red">
	<animateTransform attributeName="transform"
	attributeType="XML"
	type="rotate"
	from="0 50 50"
	to="360 50 50"
	dur="5s"
	repeatCount="indefinite" />
	<!-- Animate the color changing -->
	<animate attributeName="fill"
	values="red;orange;yellow;green;cyan;blue;purple;pink"
	dur="5s"
	repeatCount="indefinite" />
	</rect>
	<circle id="circ" x="0" cx="50" cy="50" r="40" stroke="purple" stroke-width="4" fill="orange" />
	<rect id="rect" x="100" y="10" width="80" height="80" stroke="orange" stroke-width="4" fill="purple" />
	</svg>
	<style>
	h1 {
	font-size: 100px;
	text-align: center;
	}
	@keyframes recolor-circ {
	0%, 100% {
	cx: 50;
	fill: orange;
	stroke: purple;
	r: 20;
	}
	50% {
	fill: purple;
	stroke: orange;
	r: 40;
	cx: 150;
	}
	}

	#circ {
	animation: recolor-circ 2s ease-in-out forwards infinite;
	}

	@keyframes recolor-rect {
	0%, 100% {
	x: 100;
	fill: purple;
	stroke: orange;
	width: 80;
	height: 80;
	}
	50% {
	fill: orange;
	stroke: purple;
	width: 40;
	height: 40;
	x: 0;
	}
	}

	#rect {
	animation: recolor-rect 2s ease-in-out forwards infinite;
	}

	</style>
	<div id="shape">WOW</div>
	<style>
	h1 {
	font-size: 100px;
	text-align: center;
	}
	@keyframes resize {
	0%, 100% {
	font-size: larger;
	background-color: red;
	border-radius: 0%;
	}
	50% {
	font-size: small;
	background-color: blue;
	text-align: center;
	border-radius: 50%;
	}
	}

	#shape {
	animation: resize 2s ease-in-out forwards infinite;
	}
	</style>
	</body>
	</html>