add dot pattern

views/cards.html

@@ -39,6 +39,16 @@
       >
         <rect width="2" height="8" fill="#fff" />
       </pattern>
+
+      <pattern
+        id="pattern-dot"
+        width="40"
+        height="40"
+        patternUnits="userSpaceOnUse"
+      >
+        <circle cx="18" cy="18" r="12" fill="#fff" />
+      </pattern>
+
       <mask id="mask-stripe">
         <rect
           x="0"
@@ -48,13 +58,23 @@
           fill="url(#pattern-stripe)"
         />
       </mask>
+
+      <mask id="mask-dot">
+        <rect
+          x="0"
+          y="0"
+          width="200"
+          height="400"
+          fill="url(#pattern-dot)"
+        />
+      </mask>
     </defs>
   </svg>
 
   <div id="main">
     <div class="card">
       <svg class="item" height="160" width="80" viewBox="0 0 200 400">
-        <use href="#squiggle" fill="#008002" mask="url(#mask-stripe)"></use>
+        <use href="#squiggle" fill="#008002" mask="url(#mask-dot)"></use>
         <use href="#squiggle" stroke="#008002" fill="none" stroke-width="18"></use>
       </svg>
 
@@ -136,6 +156,34 @@
         <use href="#oval" stroke="#800080" fill="none" stroke-width="18"></use>
       </svg>
     </div>
+
+    <div class="card">
+      <svg class="item" height="160" width="80" viewBox="0 0 200 400">
+        <use href="#oval" stroke="#800080" fill="#800080" stroke-width="18"></use>
+      </svg>
+
+      <svg class="item" height="160" width="80" viewBox="0 0 200 400">
+        <use href="#oval" stroke="#800080" fill="#800080" stroke-width="18"></use>
+      </svg>
+
+      <svg class="item" height="160" width="80" viewBox="0 0 200 400">
+        <use href="#oval" stroke="#800080" fill="#800080" stroke-width="18"></use>
+      </svg>
+    </div>
+
+    <div class="card">
+      <svg class="item" height="160" width="80" viewBox="0 0 200 400">
+        <use href="#oval" stroke="#800080" fill="none" stroke-width="18"></use>
+      </svg>
+
+      <svg class="item" height="160" width="80" viewBox="0 0 200 400">
+        <use href="#oval" stroke="#800080" fill="none" stroke-width="18"></use>
+      </svg>
+
+      <svg class="item" height="160" width="80" viewBox="0 0 200 400">
+        <use href="#oval" stroke="#800080" fill="none" stroke-width="18"></use>
+      </svg>
+    </div>
   </div>
 
 </body>