📝 Added sandbox (code sketchbook)

sandbox/codepens/circuit_tests/css/styles.css

@@ -0,0 +1,133 @@
+/* Taken from https://www.demo2s.com/html-css/css-flowing-circuit-animation.html */
+
+html, body {
+   height:100%;
+   padding:0;
+   margin:0;
+}
+
+* {
+   box-sizing:border-box;
+}
+
+.circuit-outer {
+   position:relative;
+   width:80vw;
+   height:80vh;
+   margin:5% 10% 0;
+   padding:3px;
+   background:#eee;
+   /* border:1px solid #ddd; */
+   border:1px solid red;
+   overflow:hidden;
+}
+
+.circuit-inner {
+   position:absolute;
+   top:3px;
+   bottom:3px;
+   left:3px;
+   right:3px;
+   background:#fff;
+   /* border:1px solid #ddd; */
+   border:1px solid blue;
+}
+
+.current {
+   background:orange;
+   position:absolute;
+   animation-iteration-count:1;
+   animation-timing-function:linear;
+   animation-fill-mode:forwards;
+}
+
+.current.bottom-left {
+   bottom:0;
+   right:80%;
+   width:20%;
+   height:3px;
+   animation-name:zap1;
+   animation-duration:.2s;
+}
+
+.current.left {
+   bottom:0;
+   left:0;
+   width:3px;
+   height:0;
+   animation-name:zap2;
+   animation-delay:.2s;
+   animation-duration:.5s;
+}
+
+.current.top {
+   top:0;
+   width:0;
+   height:3px;
+   animation-name:zap3;
+   animation-delay:.7s;
+   animation-duration:1s;
+}
+
+.current.right {
+   top:0;
+   right:0;
+   width:3px;
+   height:0;
+   animation-name:zap2;
+   animation-delay:1.7s;
+   animation-duration:.5s;
+}
+
+.current.bottom-right {
+   bottom:0;
+   right:0;
+   width:0%;
+   height:3px;
+   animation-name:zap4;
+   animation-delay:2.2s;
+   animation-duration:.8s;
+}
+
+@keyframes zap1  {
+   0% {
+      width:0;
+   }
+
+   100% {
+      width:20%;
+   }
+
+}
+
+@keyframes zap2  {
+   0% {
+      height:0;
+   }
+
+   100% {
+      height:100%;
+   }
+
+}
+
+@keyframes zap3  {
+   0% {
+      width:0;
+   }
+
+   100% {
+      width:100%;
+   }
+
+}
+
+@keyframes zap4  {
+   0% {
+      width:0;
+   }
+
+   100% {
+      width:80%;
+    }
+}