css fill possible for mouses, unlikely for banners

index.html

@@ -479,20 +479,20 @@
                
 </pre>
 <pre class="frame f3">
-                     
-                     
-                   
-                   
-             
-                  
-                   
-              
-                 
-                   
-                  
-                  
-                  
-               
+                    
+                    
+                  
+                  
+            
+                 
+                  
+             
+                
+                  
+                 
+                 
+                 
+              
 </pre>
 <pre class="frame f4">
                       
@@ -592,6 +592,7 @@
 
 
 
+
 		<!--
 			BANNER 4
 		-->
@@ -647,8 +648,14 @@
 
 
 
+<figure class="frames_container mouse" id="mouse_test">
+	<div class="ascii frame f1"></div><div class="ascii frame f2"></div><div class="ascii frame f3"></div><div class="ascii frame f4"></div>
+</figure>
 
 
+<p>here</p>
+<div id="test"></div>
+
 
 	</body>
 </html>

styles/elements/mouses.css

@@ -6,14 +6,12 @@
 .frames_container {
 	display: grid;
 	width: fit-content;
+
 	/*
 	border: 1px solid blue;
 	*/
 }
-pre.frame.hide {
-	display: none;
-}
-pre.frame {
+.frame {
 	position: relative;
 	grid-column: 1;
 	grid-row: 1;
@@ -35,9 +33,9 @@ pre.frame {
 	animation-direction: normal;
 }
 
-pre.frame.f2  {animation-delay: calc(var(--tframes) * 25/100);}
-pre.frame.f3  {animation-delay: calc(var(--tframes) * 50/100);}
-pre.frame.f4  {animation-delay: calc(var(--tframes) * 75/100);}
+.frame.f2  {animation-delay: calc(var(--tframes) * 25/100);}
+.frame.f3  {animation-delay: calc(var(--tframes) * 50/100);}
+.frame.f4  {animation-delay: calc(var(--tframes) * 75/100);}
 
 @keyframes ascii_frame {
 	0%    {opacity: 1;}

styles/elements/test.css

@@ -1,24 +1,97 @@
-
+#test {
+	border: 1px solid blue;
+	width: 100px;
+	height: 100px;
+	background-image: url(" \
+		data:image/svg+xml;utf8, \
+		<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='50px' width='100%'>\
+			<text x='0' y='15'>\
+				I love SVG!\
+			</text>\
+		</svg>");
+}
+/*
 #test::after {
 	content: "              \a                 \a                \a              \a     \a         \a          \a          \a      \a         \a         \a    \a         \a        \a   \a       ";
-	white-space: pre-wrap;
-/*
+	white-space: pre;
+}
+*/
 
-              
-                
-               
-             
-    
-        
-         
-         
-     
-        
-        
-   
-        
-       
-  
-      
+#mouse_test .frame.f1::before {
+	content: "                   \A                     \A                   \A                    \A               \A                    \A                     \A                 \A                     \A               \A               \A                \A             \A         ";
+/*
+                   
+                    
+                  
+                   
+              
+                   
+                    
+                
+                    
+              
+              
+               
+            
+        
 */
 }
+
+#mouse_test .frame.f2::before {
+	content: "                    \A                     \A                    \A                    \A               \A                    \A                     \A                 \A                    \A                \A              \A                \A             \A         ";
+/*
+                    
+                    
+                   
+                   
+              
+                   
+                    
+                
+                   
+               
+             
+               
+            
+        
+*/
+}
+
+#mouse_test .frame.f3::before {
+	content: "                     \A                     \A                    \A                    \A               \A                    \A                     \A                \A                   \A               \A               \A                \A             \A         ";
+/*
+                     
+                    
+                   
+                   
+              
+                   
+                    
+               
+                  
+              
+              
+               
+            
+        
+*/
+}
+
+#mouse_test .frame.f4::before {
+	content: "                  \A                          \A                          \A                         \A                        \A                   \A                 \A                       \A                    \A                      \A                      \A         ";
+/*
+                  
+                         
+                         
+                        
+                       
+                  
+                
+                      
+                   
+                     
+                     
+        
+*/
+}
+

styles/frames.css

@@ -1,2 +0,0 @@
-
-

styles/text.css

@@ -36,7 +36,8 @@ h3 { margin: 20px 0px; font-size: 1.75rem; }
 h4 { margin: 20px 0px; font-size: 1.5rem; }
 h5 { margin: 10px 0px; font-size: 1.25rem; }
 h6 { margin: 10px 0px; font-size: 1.0rem; }
-pre {
+pre, .ascii {
 	line-height: 0.8;
 	font-size: min(2.2vw, 1.0rem);
+	white-space: pre;
 }