pdap-design-system 1.0.0

package/system/css/normalize.css

@@ -0,0 +1,349 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+ html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+  margin: 0;
+}
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+
+main {
+  display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+  border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+  display: none;
+}

package/system/demo.html

@@ -0,0 +1,184 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>PDAP design system</title>
+  <meta content="width=device-width, initial-scale=1" name="viewport">
+  <meta name="description" content="Design system for the Police Data Accessibility Project and its services.">
+  <meta name="keywords" content="design, system, design system">
+  <link href="css/normalize.css" rel="stylesheet" type="text/css">
+  <link href="css/global-styles.css" rel="stylesheet" type="text/css">
+  <link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
+  <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript"></script>
+  <script type="text/javascript">WebFont.load({  google: {    families: ["Libre Franklin:100,200,300,regular,500,600,700,800,900,100italic,200italic,300italic,italic,500italic,600italic,700italic,800italic,900italic"]  }});</script>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,400;0,600;0,900;1,400;1,600;1,900&display=swap" rel="stylesheet">
+  <!-- [if lt IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js" type="text/javascript"></script><![endif] -->
+  <!-- Global site tag (gtag.js) - Google Analytics -->
+  <script async src="https://www.googletagmanager.com/gtag/js?id=G-REKS6B95BL"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+    gtag('config', 'G-REKS6B95BL');
+  </script>
+  <!-- Google ads tag (gtag.js) -->
+  <script async src="https://www.googletagmanager.com/gtag/js?id=AW-11016541790"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+    gtag('config', 'AW-11016541790');
+  </script>
+  <!-- Event snippet for newsletter signup conversion page
+  In your html page, add the snippet and call gtag_report_conversion when someone clicks on the chosen link or button. -->
+  <script>
+  function gtag_report_conversion(url) {
+    var callback = function () {
+      if (typeof(url) != 'undefined') {
+        window.location = url;
+      }
+    };
+    gtag('event', 'conversion', {
+        'send_to': 'AW-11016541790/BTkiCN2cyoEYEN6sjIUp',
+        'event_callback': callback
+    });
+    return false;
+  }
+  </script>
+  <link href="images/favicon.png" rel="shortcut icon" type="image/x-icon">
+  <link href="images/webclip.gif" rel="apple-touch-icon">
+</head>
+<body>
+  <div data-collapse="medium" data-animation="default" data-duration="400" role="banner" class="navbar nav">
+    <a href="index.html" aria-current="page" class="brand nav-brand current"><img src="images/lockup.svg" loading="lazy" width="250" alt="Police Data Accessibility Project Logo" class="logo"></a>
+    <div class="nav-container-last">
+      <div class="nav-container container">
+        <div class="menu-button nav-button">
+          <div class="nav-menu-icon"></div>
+        </div>
+      </div>
+    </div>
+    <nav role="navigation" class="nav-menu nav-menu">
+      <a href="index.html" aria-current="page" class="nav-link nav-link">Home</a>
+      <a href="data-sources.html" aria-current="page" class="nav-link nav-link current">Current page</a>
+      <a href="donate.html" class="nav-link nav-link">Page</a>
+    </nav>
+  </div>
+  <div class="section">
+    <div class="container">
+      <h1 class="shout">Shout</h1>
+      <p>For big messages, saying big things.</p>
+      <h1>Heading 1</h1>
+      <p>This is a paragraph. There's a max line length, so that things stay readable at unexpected screen and font sizes. The text is large to encourage brevity and readability.</p>
+      <h2>Heading 2</h2>
+      <p>Another paragraph.</p>
+      <h3>Heading 3</h3>
+      <p>This paragraph has <code>&lt;code&gt;</code> in it.</p>
+      <h4>Heading 4</h4>
+      <div>
+        <pre><code>This is a whole code block!
+It has many lines.</code></pre>
+      </div>
+      <h5>Heading <code>code</code> 5</h5>
+      <p>Another paragraph.</p>
+      <h6>Heading 6</h6>
+      <div class="small">
+        <p>Another paragraph, inside a div with class "small".</p>
+      </div>
+    </div>
+  </div>
+  <div class="section">
+    <div class="container small">
+      <h3>Testimonials</h3>
+      <div class="boxed">
+        <p class="quote">“PDAP's work was invaluable in helping us find and access data we otherwise wouldn't have been able to.”</p> 
+        <p class="citation">&mdash;Dr. Jesse Wozniak, Director of Law & Public Policy at the <a href="https://apa-pgh.org/">Alliance for Police Accountability</a></p>
+      </div>
+    </div>
+  </div>
+  <div class="section">
+    <div class="container">
+      <div class="layout-grid grid-2">
+        <div class="shout-box grid-span-2">
+          <h1 class="shout">This is a grid layout.<br></h1>
+          <p class="bottom-0">The grid is our main tool for layout. The div containing this paragraph and the header above it spans multiple grid columns.</p>
+        </div>
+        <div>
+          <h3>This doesn't span columns.</h3>
+          <p>Here's a button though!</p>
+          <a href="https://airtable.com/shrbFfWk6fjzGnNsk"><div class="button">Normal button.</div></a>
+        </div>
+        <div>
+          <h3>Neither does this.</h3>
+          <p>This is a deprioritized button.</p>
+          <a href="https://airtable.com/shrS4PAZTYVT1zSq8"><div class="button button-outline">Outline button.</div></a>
+        </div>
+      </div>
+      <div class="layout-grid grid-3">
+        <h2 class="grid-span-3 top-45 bottom-0">More grids</h2>
+        <div>
+          <p>For some applications, we will need custom grids.</p>
+        </div>
+        <div>
+          <p>Instead of <code>grid-3</code>, make a new custom grid class with the right column widths.</p>
+        </div>
+        <div>
+          <p>You may want to override the spacing, too!</p>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="section">
+    <div class="container">
+      <div class="form">
+        <h3>Here's a little form.</h3>
+        <p class="small">We could use more styles for these.</p>
+        <form action="https://buttondown.email/api/emails/embed-subscribe/pdap" method="post" target="popupwindow" onsubmit="window.open('https://buttondown.email/pdap', 'popupwindow')" style="max-width:500px;">
+          <input type="email" class="input input-text" maxlength="256" name="email" id="bd-email" placeholder="Placeholder..."/>
+          <input type="submit" class="button" value="Get Updates"/>
+        </form>
+      </div>
+    </div>
+  </div>
+  <div class="section">
+    <div class="container">
+      <div class="layout-grid grid-2 top-45">
+        <h2 class="grid-span-2">How do you make nice tiles with icons?</h2>
+        <div>
+          <img class="tile-icon" src="images/icons/automation.svg">
+          <h3>Good question.</h3>
+          <p>Here's how you do it! These are custom SVG icons.</p>
+        </div>
+        <div>
+          <img class="tile-icon" src="images/icons/standard.svg">
+          <h3>This is another tile.</h3>
+          <p><i class="fa fa-info-circle"></i> Here's how to do a <a href="https://fontawesome.com/">fontawesome</a> icon.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="section">
+    <div class="airtable-box">
+      <div class="container">
+        <p><a href="https://airtable.com/shrUAtA8qYasEaepI">Always link to the source</a> of an embed.</p>
+      </div>
+        <iframe class="airtable-embed" src="https://airtable.com/embed/shrUAtA8qYasEaepI?backgroundColor=gray&viewControls=on" frameborder="0" onmousewheel="scroll" width="100%" height="750" style="background: transparent; border: 1px solid #512a4f;"></iframe>
+    </div>
+</div>
+  <div class="footer section">
+    <div class="container">
+      <div class="footer-actions">
+        <a href="https://github.com/orgs/Police-Data-Accessibility-Project" class="button button-footer">GitHub</a>
+        <a href="https://discord.gg/wMqex8nKZJ" class="button button-footer">Discord</a>
+        <a href="https://www.linkedin.com/company/pdap" class="button button-footer">LinkedIn</a>
+      </div>
+      <p class="footer-p">© 2023 Police Data Accessibility Project<br></p>
+      <p class="footer-p">PDAP is a non-profit. EIN: 85-4207132. <a href="https://docs.pdap.io/meta/policy/pdap-privacy-policy" alt="Privacy Policy">Privacy Policy</a>. <a href="mailto:contact@pdap.io">contact@pdap.io</a><br><br></p>
+      <p class="footer-p"><a href="https://www.guidestar.org/profile/85-4207132" target="_blank"><img src="https://widgets.guidestar.org/gximage2?o=9973356&l=v4" /></a><img src="images/acronym.svg" loading="lazy" width="150" alt="" class="footer-logo"></p>
+    </div>
+  </div>
+  <!-- [if lte IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script><![endif] -->
+</body>
+</html>

package/system/images/acronym.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 113.8 86.1" style="enable-background:new 0 0 113.8 86.1;" xml:space="preserve">
+<path d="M0,80.9L21.5,2.6h5.1L5.1,80.9H0z"/>
+<polygon points="78.8,20.4 61.8,20.4 75,7.2 71.1,3.2 58.4,15.8 58.4,0 52.8,0 52.8,15.8 40.2,3.2 36.2,7.2 49.5,20.4 32.5,20.4 
+	32.5,26 48.3,26 36.2,38 40.2,42 52.8,29.3 52.8,46.3 58.4,46.3 58.4,29.3 71.1,42 75,38 63,26 78.8,26 "/>
+<path d="M42.1,71.1h-2.6v9.1h-5V57.3h7.6c5.1,0,8.4,2.4,8.4,6.7S47.3,71.1,42.1,71.1z M42.1,61.5h-2.6v5.3h2.6
+	c2.3,0,3.3-0.9,3.3-2.7S44.3,61.5,42.1,61.5z"/>
+<path d="M60.5,80.1h-6.9V57.3h6.9c6.5,0,11.9,4,11.9,11.4C72.4,76.2,66.6,80.1,60.5,80.1z M60.5,61.5h-1.9v14.4h1.9
+	c4.3,0,6.7-3.4,6.7-7.2S64.5,61.5,60.5,61.5z"/>
+<path d="M88.7,80.1L87,74.4h-7l-1.8,5.8h-5.3l8.2-22.9h4.8l8.3,22.9h-5.5V80.1z M84,64.6c-0.2-0.7-0.5-1.6-0.5-1.8
+	c0,0.1-0.2,1-0.5,1.8l-1.7,5.6h4.4L84,64.6z"/>
+<path d="M104.7,71.1h-2.6v9.1h-5V57.3h7.6c5.1,0,8.4,2.4,8.4,6.7S109.8,71.1,104.7,71.1z M104.7,61.5h-2.6v5.3h2.6
+	c2.3,0,3.3-0.9,3.3-2.7S106.9,61.5,104.7,61.5z"/>
+</svg>

package/system/images/icons/automation.svg

@@ -0,0 +1,50 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 300 300">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+      }
+
+      .cls-1, .cls-2 {
+        stroke: #231f20;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        stroke-width: 5px;
+      }
+
+      .cls-2 {
+        fill: #fff;
+      }
+    </style>
+  </defs>
+  <title>Artboard 3</title>
+  <path class="cls-1" d="M49.8842,50H250.1158A12.3842,12.3842,0,0,1,262.5,62.3842V87.5a0,0,0,0,1,0,0H37.5a0,0,0,0,1,0,0V62.3842A12.3842,12.3842,0,0,1,49.8842,50Z"/>
+  <path class="cls-1" d="M262.5,235.3428V87.5H37.5V235.3428a11.9126,11.9126,0,0,0,11.9126,11.9126H250.5874A11.9126,11.9126,0,0,0,262.5,235.3428Z"/>
+  <line class="cls-1" x1="62.5" y1="37.5" x2="62.5" y2="62.5"/>
+  <line class="cls-1" x1="237.5" y1="37.5" x2="237.5" y2="62.5"/>
+  <line class="cls-1" x1="137.5" y1="112.5" x2="112.5" y2="112.5"/>
+  <line class="cls-1" x1="237.5" y1="112.5" x2="212.5" y2="112.5"/>
+  <line class="cls-1" x1="137.5" y1="137.5" x2="112.5" y2="137.5"/>
+  <line class="cls-1" x1="187.5" y1="137.5" x2="162.5" y2="137.5"/>
+  <line class="cls-1" x1="237.5" y1="137.5" x2="212.5" y2="137.5"/>
+  <line class="cls-1" x1="137.5" y1="162.5" x2="112.5" y2="162.5"/>
+  <line class="cls-1" x1="187.5" y1="162.5" x2="162.5" y2="162.5"/>
+  <line class="cls-1" x1="137.5" y1="187.5" x2="112.5" y2="187.5"/>
+  <line class="cls-1" x1="187.5" y1="187.5" x2="162.5" y2="187.5"/>
+  <line class="cls-1" x1="237.5" y1="187.5" x2="212.5" y2="187.5"/>
+  <line class="cls-1" x1="87.5" y1="212.5" x2="62.5" y2="212.5"/>
+  <line class="cls-1" x1="137.5" y1="212.5" x2="112.5" y2="212.5"/>
+  <line class="cls-1" x1="237.5" y1="212.5" x2="212.5" y2="212.5"/>
+  <polyline class="cls-1" points="65.019 112.5 72.179 119.659 86.497 105.341"/>
+  <polyline class="cls-1" points="65.019 137.5 72.179 144.659 86.497 130.341"/>
+  <polyline class="cls-1" points="65.019 162.5 72.179 169.659 86.497 155.341"/>
+  <polyline class="cls-1" points="65.019 187.5 72.179 194.659 86.497 180.341"/>
+  <polyline class="cls-1" points="165.019 212.5 172.179 219.659 186.497 205.341"/>
+  <polyline class="cls-1" points="215.019 162.5 222.179 169.659 236.497 155.341"/>
+  <polyline class="cls-1" points="165.019 112.5 172.179 119.659 186.497 105.341"/>
+  <circle class="cls-2" cx="262.5" cy="250" r="27.7446"/>
+  <g>
+    <rect class="cls-1" x="250" y="244.1426" width="25" height="20.8333"/>
+    <path class="cls-1" d="M270.8333,239.9759a8.3333,8.3333,0,0,0-16.6666,0v4.1667h16.6666Z"/>
+  </g>
+</svg>

package/system/images/icons/community.svg

@@ -0,0 +1,38 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 300 300">
+  <defs>
+    <style>
+      .cls-1 {
+        fill: none;
+        stroke: #231f20;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        stroke-width: 5px;
+      }
+    </style>
+  </defs>
+  <title>Artboard 4</title>
+  <circle class="cls-1" cx="93.071" cy="118.9739" r="12.1991"/>
+  <polygon class="cls-1" points="72.739 139.306 113.403 139.306 93.071 212.5 72.739 139.306"/>
+  <circle class="cls-1" cx="150" cy="98.2951" r="12.1991"/>
+  <polygon class="cls-1" points="129.668 118.627 170.332 118.627 150 191.821 129.668 118.627"/>
+  <circle class="cls-1" cx="206.929" cy="118.9739" r="12.1991"/>
+  <polygon class="cls-1" points="186.597 139.306 227.261 139.306 206.929 212.5 186.597 139.306"/>
+  <line class="cls-1" x1="150" y1="31.2636" x2="150" y2="41.1966"/>
+  <line class="cls-1" x1="150" y1="255.4984" x2="150" y2="280.5261"/>
+  <line class="cls-1" x1="105.7639" y1="30.5834" x2="114.962" y2="55.8549"/>
+  <line class="cls-1" x1="187.7543" y1="255.8504" x2="191.5198" y2="266.1959"/>
+  <line class="cls-1" x1="72.0554" y1="59.2304" x2="78.9579" y2="67.4565"/>
+  <line class="cls-1" x1="215.563" y1="230.2561" x2="233.4237" y2="251.5416"/>
+  <line class="cls-1" x1="38.0021" y1="87.4591" x2="61.2687" y2="100.8921"/>
+  <line class="cls-1" x1="246.7322" y1="207.9695" x2="253.997" y2="212.1639"/>
+  <line class="cls-1" x1="30.2681" y1="131.0092" x2="41.471" y2="132.9846"/>
+  <line class="cls-1" x1="251.9851" y1="170.1039" x2="276.2758" y2="174.387"/>
+  <line class="cls-1" x1="21.042" y1="174.8599" x2="50.6972" y2="169.6309"/>
+  <line class="cls-1" x1="257.8381" y1="133.1064" x2="270.4228" y2="130.8874"/>
+  <line class="cls-1" x1="43.1828" y1="213.7921" x2="56.0879" y2="206.3413"/>
+  <line class="cls-1" x1="239.3423" y1="100.5393" x2="261.3869" y2="87.8119"/>
+  <line class="cls-1" x1="67.3239" y1="250.6507" x2="83.6894" y2="231.1471"/>
+  <line class="cls-1" x1="220.9929" y1="67.5151" x2="227.9938" y2="59.1718"/>
+  <line class="cls-1" x1="108.304" y1="266.68" x2="112.4218" y2="255.3663"/>
+  <line class="cls-1" x1="184.8507" y1="56.3697" x2="194.4235" y2="30.0687"/>
+</svg>