+
+
+
+
+
+
+
diff --git a/Art/markwsch-ExpandingCircles/meta.json b/Art/markwsch-ExpandingCircles/meta.json
new file mode 100644
index 000000000..4bace5227
--- /dev/null
+++ b/Art/markwsch-ExpandingCircles/meta.json
@@ -0,0 +1,4 @@
+{
+ "artName": "Expanding Circles",
+ "githubHandle": "MarkwSch"
+ }
\ No newline at end of file
diff --git a/Art/markwsch-ExpandingCircles/styles.css b/Art/markwsch-ExpandingCircles/styles.css
new file mode 100644
index 000000000..4e0616c05
--- /dev/null
+++ b/Art/markwsch-ExpandingCircles/styles.css
@@ -0,0 +1,76 @@
+html {
+ background: black;
+ height: 100%;
+ position: relative;
+ overflow: hidden;
+}
+
+body {
+ margin: 0;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+}
+
+h1 {
+ color: white;
+ justify-content: center;
+ align-items: center;
+ font-size: 3em;
+}
+
+.container {
+ display: grid;
+ position: absolute;
+ grid-template-columns: repeat(2, 150px);
+ grid-template-rows: repeat(2, 150px);
+ gap: 0;
+ height: 300px;
+ width: 300px;
+}
+
+.circle {
+ width: 100px;
+ height: 100px;
+ border-radius: 50%;
+ background: rgb(136, 226, 235);
+ animation: expand-shrink 4s infinite, color-change 4s infinite;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.one {
+ animation-delay: 0s;
+}
+
+.two {
+ animation-delay: 1s;
+}
+
+.three {
+ animation-delay: 2s;
+}
+
+.four {
+ animation-delay: 3s;
+}
+
+@keyframes expand-shrink {
+ 0%, 100% { transform: scale(1); }
+ 50% { transform: scale(1.3); }
+}
+
+@keyframes color-change {
+ 0% { background: rgb(136, 226, 235); }
+ 12.5% { background: rgb(160, 218.5, 177);}
+ 25% { background: rgb(185, 211, 117.5); }
+ 37.5% {background: rgb(210, 204, 59.5);}
+ 50% { background: rgb(235, 196, 0); }
+ 62.5% { background: rgb(210, 204, 59.5); }
+ 75% { background: rgb(185, 219, 117.5); }
+ 87.5% { background: rgb(160, 218.5, 177) }
+ 100% { background: rgb(136, 226, 235); }
+}