https://www.bluecaret.com/patterns/

1<!doctype html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6    <title>Caret's Patterns - SVG Background Patterns</title>
7    <link rel="stylesheet" href="/styles.css?v=202301150350" />
8    <link rel="stylesheet" href="patterns-styles.css?v=202301150350" />
9    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=XBbJ30mbK3" />
10    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png?v=XBbJ30mbK3" />
11    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=XBbJ30mbK3" />
12    <link rel="manifest" href="/site.webmanifest?v=XBbJ30mbK3" />
13    <link rel="mask-icon" href="/safari-pinned-tab.svg?v=XBbJ30mbK3" color="#5bbad5" />
14    <link rel="shortcut icon" href="/favicon.ico?v=XBbJ30mbK3" />
15    <meta name="apple-mobile-web-app-title" content="BlueCaret^" />
16    <meta name="application-name" content="BlueCaret^" />
17    

17<script type="module" src="patterns-header.js" defer></script>

17
18    

18<script type="module" src="/js/footer.js" defer></script>

18
19    

19<script type="module" src="patterns-display.js" defer></script>

19
20  </head>
21  <body>
22    <div id="app" class="app">
23      <app-header></app-header>
24
25      <section class="globalOptionsSection">
26        <div class="globalOptions">
27          <div class="colorField">
28            <label for="colorBg" aria-label="Background">
29              <span aria-hidden="true">Background</span>
30              <span aria-hidden="true">BG</span>
31            </label>
32            <input type="color" id="colorBg" class="inputBg" />
33          </div>
34          <div class="colorField">
35            <label for="colorFg" aria-label="Foreground">
36              <span aria-hidden="true">Foreground</span>
37              <span aria-hidden="true">FG</span>
38            </label>
39            <input type="color" id="colorFg" class="inputFg" />
40          </div>
41          <div class="textField">
42            <label for="size">Size</label>
43            <input type="number" id="size" class="inputSize" />
44          </div>
45        </div>
46      </section>
47
48      <section class="patternSection">
49        <div class="patternList" id="patternList"></div>
50      </section>
51
52      <dialog class="dialogPreview" id="dialogPreview" autofocus>
53        <div class="dialogContent">
54          <form class="close" method="dialog">
55            <button>
56              <svg
57                xmlns="http://www.w3.org/2000/svg"
58                fill="none"

59                viewBox="0 0 24 24"
60                stroke-width="1.5"
61                stroke="currentColor"
62                class="w-6 h-6"
63              >
64                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
65              </svg>
66            </button>
67          </form>
68        </div>
69      </dialog>
70
71      <dialog class="dialogCode" id="dialogCode" autofocus>
72        <div class="dialogContent">
73          <form class="close" method="dialog">
74            <button>
75              <svg
76                xmlns="http://www.w3.org/2000/svg"
77                fill="none"
78                viewBox="0 0 24 24"
79                stroke-width="1.5"
80                stroke="currentColor"
81                class="w-6 h-6"
82              >
83                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
84              </svg>
85            </button>
86          </form>
87          <h2 class="dialogCodeTitle">Pattern 1</h2>
88          <div class="dialogCodeContent">
89            <div class="dialogCodePreview"></div>
90            <div class="dialogCodeGet">
91              <textarea class="dialogCodeTextarea" id="dialogCodeTextarea"></textarea>
92              <button class="copyBtn btn" id="copyBtn">
93                <svg
94                  xmlns="http://www.w3.org/2000/svg"
95                  fill="none"

96                  viewBox="0 0 24 24"
97                  stroke-width="1.5"
98                  stroke="currentColor"
99                  class="w-6 h-6"
100                >
101                  <path
102                    stroke-linecap="round"
103                    stroke-linejoin="round"
104                    d="M8.25 7.5V6.108c0-1.135.845-2.098 1.976-2.192.373-.03.748-.057 1.123-.08M15.75 18H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08M15.75 18.75v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5A3.375 3.375 0 0 0 6.375 7.5H5.25m11.9-3.664A2.251 2.251 0 0 0 15 2.25h-1.5a2.251 2.251 0 0 0-2.15 1.586m5.8 0c.065.21.1.433.1.664v.75h-6V4.5c0-.231.035-.454.1-.664M6.75 7.5H4.875c-.621 0-1.125.504-1.125 1.125v12c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V16.5a9 9 0 0 0-9-9Z"
105                  />
106                </svg>
107                Copy code
108              </button>
109            </div>
110          </div>
111        </div>
112      </dialog>
113
114      <app-footer></app-footer>
115    </div>
116    

116<script data-goatcounter="https://bluecaret.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script>

116
117  </body>
118</html>