added UI components

Standard UI Components/README.md

@@ -0,0 +1,2 @@
+# compoents
+ This is a Native Web Component library

Standard UI Components/css/main.css

@@ -0,0 +1,272 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");
+* {
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  font-family: 'Roboto', sans-serif;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  --accent-color: rgb(9, 155, 82);
+  --light-accent-shade: rgb(223, 255, 239);
+  --text: 17, 17, 17;
+  --foreground: 255, 255, 255;
+  --font-family: 'Roboto', sans-serif;
+  --error-color: red;
+}
+
+.hide-completely {
+  display: none;
+}
+
+h1, h2, h3, h4.h5 {
+  font-family: 'Poppins', sans-serif;
+  font-weight: 500;
+}
+
+a:-webkit-any-link {
+  text-decoration: none;
+  color: var(--accent-color);
+}
+
+a:-moz-any-link {
+  text-decoration: none;
+  color: var(--accent-color);
+}
+
+a:any-link {
+  text-decoration: none;
+  color: var(--accent-color);
+}
+
+h2 {
+  margin: 3rem 0 1rem 0;
+  text-transform: capitalize;
+}
+
+h2:first-of-type {
+  margin-top: 1rem;
+}
+
+h1.headline {
+  color: rgba(var(--text), 1);
+}
+
+section {
+  height: 100vh;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  background-size: cover;
+  text-align: center;
+  color: rgba(var(--text), 1);
+  padding: 2rem;
+  border-bottom: 1px solid rgba(var(--text), 0.2);
+}
+
+section h1 {
+  font-weight: 600;
+  font-size: 2.5rem;
+  line-height: 1.2em;
+  z-index: 1;
+  text-transform: uppercase;
+  letter-spacing: 0.2rem;
+}
+
+section h4 {
+  z-index: 1;
+  font-weight: 400;
+  margin-top: 1.2rem;
+}
+
+section .background-box {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-item-align: center;
+      align-self: center;
+  position: absolute;
+  border: solid 1px rgba(var(--text), 0.3);
+  width: 60vw;
+  height: 40%;
+  -webkit-transform: skewX(-10deg);
+          transform: skewX(-10deg);
+  background: rgba(var(--foreground), 1);
+  z-index: -1;
+}
+
+section a {
+  margin-top: 2rem;
+  font-weight: 500;
+}
+
+section sm-button {
+  margin-top: 4rem;
+}
+
+section sm-button:first-of-type {
+  margin-right: 1rem;
+}
+
+pre {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  max-width: 100%;
+}
+
+code {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  color: #311B92;
+  background: rgba(var(--text), 0.1);
+  padding: 0.2rem 0.4rem;
+  border-radius: 0.2rem;
+  margin: 0.2rem 0;
+}
+
+code.extend {
+  padding: 0 1.5rem;
+  line-height: 1.6;
+  margin: 1rem 0;
+  overflow-x: auto;
+  max-width: 100%;
+}
+
+main {
+  height: 100vh;
+}
+
+p {
+  margin: 1rem 0 1.5rem 0;
+  line-height: 1.6em;
+  color: rgba(var(--text), 0.8);
+  font-size: 1rem;
+}
+
+p::first-letter {
+  text-transform: capitalize;
+}
+
+ol {
+  padding: 0.6rem 1rem;
+}
+
+ol li {
+  margin-bottom: 1rem;
+}
+
+ol li:last-of-type {
+  margin-bottom: 0;
+}
+
+ol li::first-letter {
+  text-transform: capitalize;
+}
+
+.left {
+  max-height: 100%;
+  overflow-y: auto;
+}
+
+.left h3 {
+  padding: 1.5rem;
+}
+
+.right {
+  padding: 1.5rem;
+}
+
+.right h1 {
+  margin-bottom: 1.5rem;
+}
+
+.list {
+  list-style: none;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  margin-bottom: 0.5rem;
+}
+
+.list .item {
+  padding: 0.6rem 1.5rem;
+  text-transform: capitalize;
+}
+
+.list .active {
+  color: var(--accent-color);
+  background: rgba(var(--text), 0.06);
+}
+
+.card {
+  height: 24rem;
+  margin-right: 1rem;
+  border-radius: 0.4rem;
+  width: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
+sm-carousel {
+  margin-bottom: 1rem;
+}
+
+@media screen and (min-width: 640px) {
+  main {
+    display: -ms-grid;
+    display: grid;
+    -ms-grid-columns: 14rem minmax(0, 1fr);
+        grid-template-columns: 14rem minmax(0, 1fr);
+    gap: 1.5rem;
+  }
+  p {
+    max-width: 46vw;
+  }
+  .background-box {
+    width: 24rem !important;
+    height: 50% !important;
+  }
+}
+
+@media screen and (max-width: 640px) {
+  .left {
+    position: fixed;
+    z-index: 2;
+    background: rgba(var(--foreground), 1);
+    -webkit-box-shadow: 0.5rem 0 2rem rgba(0, 0, 0, 0.1);
+            box-shadow: 0.5rem 0 2rem rgba(0, 0, 0, 0.1);
+    height: 100vh;
+    -webkit-transform: translateX(-100%);
+            transform: translateX(-100%);
+  }
+}
+
+@media (any-hover: hover) {
+  .item:hover {
+    background: rgba(var(--text), 0.1);
+    cursor: pointer;
+  }
+}
+/*# sourceMappingURL=main.css.map */

Standard UI Components/css/main.css.map

@@ -0,0 +1,9 @@
+{
+    "version": 3,
+    "mappings": "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",
+    "sources": [
+        "main.scss"
+    ],
+    "names": [],
+    "file": "main.css"
+}

Standard UI Components/css/main.scss

@@ -0,0 +1,196 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
+*{
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
+    font-family: 'Roboto', sans-serif;
+}
+html{
+    scroll-behavior: smooth;
+}
+body{
+    --accent-color: rgb(9, 155, 82);
+    --light-accent-shade: rgb(223, 255, 239);
+    --text: 17, 17, 17;
+    --foreground: 255, 255, 255;
+    --font-family: 'Roboto', sans-serif;
+    --error-color: red;
+}
+.hide-completely{
+    display: none;
+}
+h1,h2,h3,h4.h5{
+    font-family: 'Poppins', sans-serif;
+    font-weight: 500;
+}
+a:any-link{
+    text-decoration: none;
+    color: var(--accent-color)
+}
+h2{
+  margin: 3rem 0 1rem 0;
+  text-transform: capitalize;
+  &:first-of-type{
+      margin-top: 1rem;
+  }  
+}
+h1.headline{
+    color: rgba(var(--text), 1);
+}
+section{
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background-size: cover;
+    text-align: center;
+    color: rgba(var(--text), 1);
+    padding: 2rem;
+    border-bottom: 1px solid rgba(var(--text), .2);
+    h1{
+        font-weight: 600;
+        font-size: 2.5rem;
+        line-height: 1.2em;
+        z-index: 1;
+        text-transform: uppercase;
+        letter-spacing: 0.2rem;
+    }
+    h4{
+        z-index: 1;
+        font-weight: 400;
+        margin-top: 1.2rem;
+    }
+    .background-box{
+        display: flex;
+        align-self: center;
+        position: absolute;
+        border: solid 1px rgba(var(--text), 0.3);
+        width: 60vw;
+        height: 40%;
+        transform: skewX(-10deg);
+        background: rgba(var(--foreground), 1);
+        z-index: -1;
+    }
+    a{
+        margin-top: 2rem;
+        font-weight: 500;
+    }
+    sm-button{
+        margin-top: 4rem;
+    }
+    sm-button:first-of-type{
+        margin-right: 1rem;
+    }
+}
+pre{
+    display: inline-flex;
+        max-width: 100%;
+}
+code{
+    display: inline-flex;
+    color: #311B92;
+    background: rgba(var(--text), .1);
+    padding: 0.2rem 0.4rem;
+    border-radius: 0.2rem;
+    margin: 0.2rem 0;
+}
+code.extend{
+    padding: 0 1.5rem;
+    line-height: 1.6;
+    margin: 1rem 0;
+    overflow-x: auto;
+    max-width: 100%;
+}
+main{
+    height: 100vh;
+}
+p{
+    margin: 1rem 0 1.5rem 0;
+    line-height: 1.6em;
+    color: rgba(var(--text), .8);
+    font-size: 1rem;
+    &::first-letter{
+        text-transform: capitalize;
+    }
+}
+ol{
+    padding: 0.6rem 1rem;
+    li{
+        margin-bottom: 1rem;
+        &:last-of-type{
+            margin-bottom: 0;
+        }
+        &::first-letter{
+            text-transform: capitalize;
+        }
+    }
+}
+.left{
+    max-height: 100%;
+    overflow-y: auto;
+    h3{
+        padding: 1.5rem;
+    }
+}
+.right{
+    padding: 1.5rem;
+    h1{
+        margin-bottom: 1.5rem;
+    }
+}
+.list{
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 0.5rem;
+    .item{
+        padding: 0.6rem 1.5rem;
+        text-transform: capitalize;
+    }
+    .active{
+        color: var(--accent-color);
+        background: rgba(var(--text), .06);
+    }
+}
+.card{
+    height: 24rem;
+    margin-right: 1rem;
+    border-radius: 0.4rem;
+    width: 100%;
+    object-fit: cover;
+}
+sm-carousel{
+    margin-bottom: 1rem;
+}
+@media screen and (min-width: 640px){
+    main{
+        display: grid;
+        grid-template-columns: 14rem minmax(0, 1fr);
+        gap: 1.5rem;    
+    }
+    p{
+        max-width: 46vw;
+    }
+    .background-box{
+        width: 24rem !important;
+        height: 50% !important;
+    }
+}
+@media screen and (max-width: 640px){
+    .left{
+        position: fixed;
+        z-index: 2;
+        background: rgba(var(--foreground), 1);
+        box-shadow: 0.5rem 0 2rem rgba(0,0,0, 0.1);
+        height: 100vh;
+        transform: translateX(-100%);
+    }
+}
+@media (any-hover: hover){
+    .item:hover{
+        background: rgba(var(--text), .1);
+        cursor: pointer;
+    }
+}

Standard UI Components/index.html

@@ -0,0 +1,260 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SM Components</title>
+    <link rel="stylesheet" href="css/main.css">
+</head>
+
+<body>
+    <sm-notifications id="notify"></sm-notifications>
+    <section>
+        <div class="background-box"></div>
+        <h1>SM Web Components</h1>
+        <h4>UI components based on custom elements API.</h4>
+        <div>
+            <sm-button id="get_started_btn" variant="primary">Get started</sm-button>
+        </div>
+    </section>
+    <main>
+        <div id="menu" class="left">
+            <h3>Getting Started</h3>
+            <ul class="list">
+                <li id="overview_entry" class="item active" data-target="overview_page">Overview</li>
+                <li id="download_entry" class="item" data-target="download_page">Quick start</li>
+            </ul>
+            <h3>Components</h3>
+            <ul class="list">
+                <li id="button_entry" class="item" data-target="button_page">button</li>
+                <li class="item" data-target="carousel_page">carousel</li>
+                <li class="item" data-target="checkbox_page">checkbox</li>
+                <li class="item" data-target="input_page">input</li>
+                <li class="item" data-target="notification_page">notifications</li>
+                <li class="item" data-target="popup_page">popup</li>
+                <li class="item" data-target="switch_page">switch</li>
+                <li class="item" data-target="select_page">select</li>
+                <li class="item" data-target="strip_select_page">strip-select</li>
+                <li class="item" data-target="tabs_page">tabs</li>
+            </ul>
+        </div>
+        <div class="right language-html">
+            <div id="overview_page" class="page">
+                <h1 class="headline">Overview</h1>
+                <p class="description">
+                    These components are based on HTML5 custom elements API.<br> It uses 'sm' namespace for all components.
+                    So every component tag starts with '<strong>sm-</strong>'.
+                </p>
+                <p>
+                    They can replace some older UI elements like <code>&lt;select&gt;</code> <code>&lt;input&gt;</code> <code>&lt;checkbox&gt;</code> <code>&lt;button&gt;</code>
+                    But also more modern additions like <strong>popups(modals), tabs and many more.</strong> 
+                </p>
+                <p>
+                    Some of the components have some cool tricks under their sleeves like <strong>custom events and variantions</strong>.
+                    They allow developers to access more information about component or simply react to whatever state change happen to them.
+                    We will go more in-depth about all the variantions and customs events related to each event as we go further.
+                </p>
+            </div>
+
+            <div id="download_page" class="page hide-completely">
+                <h1 class="headline">Quick Start</h1>
+                <p class="description">
+                    To start using SM Components
+                </p>
+                <ol type="1">
+                    <li>Download <a href="https://github.com/sairaj-mote/components"> components.js from Github.</a></li>
+                    <li>Add file to bottom of your HTML file just before closing <code>&lt;/body&gt;</code> tag with <code>&lt;script&gt;</code>tag.</li>
+                </ol>
+                <p>Now you are ready to use them in your HTML markup as any other standard HMTL tags 😄.</p>
+            </div>
+
+            <div id="button_page" class="page hide-completely">
+                <h1 class="headline">Buttons</h1>
+                <p class="description">
+                    Buttons are used in various basic UI interactions to perform an action.  
+                </p>
+                <sm-button variant="primary">primary</sm-button>
+                <sm-button>default</sm-button>
+                <sm-button variant="outlined">outlined</sm-button>
+                <sm-button variant="no-outline">no-outline</sm-button>
+                <sm-button variant="primary" disabled="true">disabled</sm-button>
+                <pre><code class="extend">
+&lt;sm-button variant="primary"&gt;primary&lt;/sm-button&gt;
+&lt;sm-button&gt;default&lt;/sm-button&gt;
+&lt;sm-button variant="outlined"&gt;outlined&lt;/sm-button&gt;
+&lt;sm-button variant="no-outline"&gt;no-outline&lt;/sm-button&gt;
+&lt;sm-button variant="primary" disabled="true"&gt;disabled&lt;/sm-button&gt;
+                </code></pre>
+            </div>
+
+            <div id="carousel_page" class="page hide-completely">
+                <h1 class="headline">Carousel</h1>
+                <p class="description">
+                    To start using SM Components
+                </p>
+                <sm-carousel>
+                    <img src="resources/background2.jpg" alt="" class="card">
+                    <img src="resources/background3.jpg" alt="" class="card">
+                    <img src="resources/background4.jpg" alt="" class="card">
+                </sm-carousel>
+            </div>
+
+            <div id="checkbox_page" class="page hide-completely">
+                <h1 class="headline">Checkbox</h1>
+                <p class="description">
+                    To start using SM Components
+                </p>
+                <label>
+                <sm-checkbox id="checkbox">Default</sm-checkbox>
+                <sm-checkbox id="checkbox" checked="true">Checked</sm-checkbox>
+                <sm-checkbox id="checkbox" disabled="true">Disabled</sm-checkbox>
+                <sm-checkbox id="checkbox" checked="true" disabled="true">Checked Disabled</sm-checkbox>
+            </label>
+            </div>
+
+            <div id="input_page" class="page hide-completely">
+                <h1 class="headline">Input</h1>
+                <p class="description">
+                    To start using SM Components
+                </p>
+                <sm-input placeholder="something" type="email" helper-text="please enter correct email" animate></sm-input>
+            </div>
+
+            <div id="notification_page" class="page hide-completely">
+                <h1 class="headline">Notifications</h1>
+                <p class="description">
+                    To start using SM Components
+                </p>
+                <h4>Example</h4>
+                
+                <sm-button
+                    onclick="document.getElementById('notify').push('heading', 'Lorem ipsum dolor, sit amet consectetur adipisicing elit.Lorem ipsum dolor, sit amet consectetur adipisicing elit.', 'success')">
+                    push success notification</sm-button>
+                <sm-button onclick="document.getElementById('notify').push('heading', 'Lorem ipsum dolor, sit amet.', 'error', true)">
+                    push error notification</sm-button>
+                <sm-button
+                    onclick="document.getElementById('notify').push('heading', 'Lorem ipsum dolor, sit amet consectetur adipisicing elit.', '', true)">
+                    push notification</sm-button>
+            </div>
+
+            <div id="popup_page" class="page hide-completely">
+                <h1 class="headline">Popup(Modal)</h1>
+                <p class="description">
+                    Popups are used to show addition UI elements that you may want to hide at first and reveal them when needed.
+                </p>
+                <sm-popup id="popup" heading="something">
+                    idhfioushdfiuh<br>
+                    idhfioushdfiuh<br>
+                    idhfioushdfiuh<br>
+                    idhfioushdfiuh<br>
+                    idhfioushdfiuh<br>
+                    idhfioushdfiuh<br>
+                    idhfioushdfiuh<br>
+                    idhfioushdfiuh<br>
+                    idhfioushdfiuh<br>
+                </sm-popup>
+                
+                <sm-button variant="primary" onclick="document.getElementById('popup').show()">show popup</sm-button>
+            </div>
+
+            <div id="switch_page" class="page hide-completely">
+                <h1 class="headline">Switch</h1>
+                <p class="description">
+                    To start using SM Components
+                </p>
+                <sm-switch id="switch"></sm-switch>
+                <sm-switch id="switch" checked="true"></sm-switch>
+                <sm-switch id="switch" disabled="true"></sm-switch>
+                <sm-switch id="switch"checked="true" disabled="true"></sm-switch>
+            </div>
+
+            <div id="select_page" class="page hide-completely">
+                <h1 class="headline">Select</h1>
+                <p>
+                    <code>&lt;sm-select&gt;</code> is very similar to starndatd HTML5 select and it's markup stucture is also identical.</p>
+                <sm-select>
+                    <sm-option value="1">option1</sm-option>
+                    <sm-option value="2">option2 something</sm-option>
+                    <sm-option value="3">option3</sm-option>
+                </sm-select>
+            </div>
+
+            <div id="strip_select_page" class="page hide-completely">
+                <h1 class="headline">Strip-select</h1>
+                <p class="description">
+                    To start using SM Components
+                </p>
+                <sm-strip-select>
+                    <sm-strip-option value="something">option1</sm-strip-option>
+                    <sm-strip-option>option1</sm-strip-option>
+                    <sm-strip-option>option1</sm-strip-option>
+                    <sm-strip-option>option1</sm-strip-option>
+                    <sm-strip-option>option1</sm-strip-option>
+                    <sm-strip-option>option1</sm-strip-option>
+                    <sm-strip-option>option1</sm-strip-option>
+                </sm-strip-select>
+            </div>
+
+            <div id="tabs_page" class="page hide-completely">
+                <h1 class="headline">Tabs</h1>
+                <p class="description">
+                    To start using SM Components
+                </p>
+                <sm-tabs>
+                    <sm-tab slot="tab">inbox</sm-tab>
+                    <sm-panel slot="panel">
+                        gjdhnsrfijbgn<br>bdfjnbj
+                    </sm-panel>
+                    <sm-tab slot="tab">sent</sm-tab>
+                    <sm-panel slot="panel">
+                        jadifjoaijdiajdo
+                        dosfighjoi<br>
+                        flkmgklfmzkl<br>
+                        hbdsfhb
+                    </sm-panel>
+                    <sm-tab slot="tab">draft</sm-tab>
+                    <sm-panel slot="panel">
+                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Facere neque incidunt aut laudantium, quam
+                        id,
+                        molestiae vero blanditiis nisi alias in magnam autem quasi cumque eveniet qui cupiditate nam
+                        corrupti?
+                    </sm-panel>
+                    <sm-tab slot="tab">spam</sm-tab>
+                    <sm-panel slot="panel">
+                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis fuga ipsam, explicabo, eius
+                        accusamus
+                        consectetur ex sunt soluta voluptatem iure totam nulla expedita suscipit minus molestiae similique
+                        odio optio
+                        quibusdam.
+                    </sm-panel>
+                </sm-tabs>
+            </div>            
+        </div>
+    </main>
+    <script src="components.js"></script>
+    <script>
+        let currentPage = document.getElementById('overview_page'),
+            selectedItem = document.getElementById('overview_entry'),
+            main = document.querySelector('main');
+        function showPage(item, targetPage){
+            let page = document.getElementById(targetPage)
+            currentPage.classList.add('hide-completely')
+            selectedItem.classList.remove('active')
+            page.classList.remove('hide-completely')
+            item.classList.add('active')
+            currentPage = page
+            selectedItem = item
+        }
+        document.getElementById('menu').addEventListener('click', e => {
+            if(e.target.closest('.item'))
+                showPage(e.target.closest('.item'), e.target.closest('.item').dataset.target)
+        })
+        showPage(selectedItem, 'overview_page')
+        document.getElementById('get_started_btn').addEventListener('click', e => {
+            main.scrollIntoView()
+        })
+    </script>
+</body>
+
+</html>

Standard UI Components/resources/artwork1.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><defs><style>.a{fill:#fff;}.a,.b{stroke:#000;stroke-miterlimit:10;stroke-width:13px;}.b{fill:none;}</style></defs><title>Artboard 1</title><path class="a" d="M94.14,385.72v-115a62.3,62.3,0,0,1,31.15-53.95l99.56-57.48a62.29,62.29,0,0,1,62.3,0l99.56,57.48a62.3,62.3,0,0,1,31.15,53.95v115a62.28,62.28,0,0,1-31.15,53.95l-99.56,57.48a62.29,62.29,0,0,1-62.3,0l-99.56-57.48A62.28,62.28,0,0,1,94.14,385.72Z"/><path class="b" d="M141.4,262.07l90,52A49.1,49.1,0,0,1,256,356.58V460.37"/><line class="b" x1="302.28" y1="301.52" x2="371.21" y2="261.72"/><path class="a" d="M383.27,191.09v-90.4a49,49,0,0,0-24.49-42.43l-78.29-45.2a49,49,0,0,0-49,0l-78.29,45.2a49,49,0,0,0-24.49,42.43v90.4a49,49,0,0,0,24.49,42.42l78.29,45.2a49,49,0,0,0,49,0l78.29-45.2A49,49,0,0,0,383.27,191.09Z"/><path class="b" d="M346.11,93.86,275.3,134.74A38.61,38.61,0,0,0,256,168.17v81.62"/><line class="b" x1="219.61" y1="124.87" x2="165.41" y2="93.58"/></svg>

Standard UI Components/resources/artwork2.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1920" height="1080" viewBox="0 0 1920 1080"><defs><style>.a{fill:#008c61;}.b{fill:#00aa6d;}.c{fill:#00cc7e;}.d{fill:#00db82;}.e{fill:#00ff85;}</style></defs><title>Artboard 1</title><path class="a" d="M107.24-188.92C-186.38-21.48-268.74,144.2-296,208.52-433.1,532.58-298.18,948-59.8,1179.08c390.6,378.74,1027.31,232.09,1647.36,89.28,371.53-85.57,474.35-172.31,532.8-239,255.13-291.28,217.24-832.18-23-1149.12C1672.23-680.5,646.81-496.62,107.24-188.92Z"/><path class="b" d="M536.19-10.36C315.51,110,244,128.16,190.59,220c-103.47,178.09-8.67,409.07,17.28,472.32,118.17,287.95,381.26,413.09,469.44,455s503,239.29,820.8,34.56c240.63-155,301-460.36,305.28-483.84,39.52-215.38-43.52-348.5,57.6-561.6,56.9-119.9,107.58-129.17,100.8-187.2C1940-237.22,1381.72-437,968.19-272.44,837.77-220.55,863.68-188.89,536.19-10.36Z"/><path class="c" d="M726.44,61.64C675.44,100.67,447.7,275,473,505.16,490.1,660.78,613.78,759.58,691.88,822c65.11,52,252.63,201.8,466.56,155.52,217.82-47.13,336.28-270.11,391.68-374.4,65.29-122.9,49.28-165.29,144-328.32,75-129.06,119.3-161.49,106.56-211.68-30.9-121.72-344.12-138.23-426.24-142.56C1183.07-89.57,940.72-102.34,726.44,61.64Z"/><path class="d" d="M876.55,140.13c-26.08,34-129.48,179.94-74.88,342.72C858.46,652.17,1054,743.7,1207.75,719c136.56-21.93,207.43-130.29,337-328.32,89-136.14,83.64-184.54,80.64-201.6-22.22-126.18-205-195.24-322.56-210.24C1277.78-24.34,1024.23-52.36,876.55,140.13Z"/><path class="e" d="M1171.72,159.13c-47.63,47-54.5,139.73-17.28,190.08,66,89.34,287.89,68.42,342.72-46.08,29.29-61.16,13.37-154.14-40.32-190.08-37.91-25.37-84.79-15-178.56,5.76C1221.81,131.31,1193.58,137.56,1171.72,159.13Z"/></svg>