Add Quix downsampling html diagram (#5426)

* scaffolding for quix diagram

* WIP quix downsampling diagram

* add quix downsampling html diagram

* replace png diagram with html diagram

* restruction downsample data guides

---------

Co-authored-by: Jason Stirnaman <stirnamanj@gmail.com>
pull/5425/head^2
Scott Anderson 2024-04-15 15:28:46 -06:00 committed by GitHub
parent 248c9c0b39
commit e8e16641e4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
14 changed files with 421 additions and 12 deletions

View File

@ -529,10 +529,285 @@ table tr.point{
}
}
/////////////////////////// QUIX DOWNSAMPLING DIAGRAM //////////////////////////
#quix-downsample-pipeline {
margin: 3rem auto;
.logo-row {
display: flex;
&.top {
justify-content: flex-start;
margin-bottom: -2.6rem;
.quix-connector {margin-top: .5rem;}
}
&.bottom {
justify-content: flex-end;
margin-top: -2.6rem;
}
}
.influxdb-connector {
display: flex;
flex-direction: column;
align-items: center;
width: 29%;
}
.influxdb-logo {
background: $influxdb-logo;
width: 175px;
height: 55px;
background-repeat: no-repeat;
background-size: contain;
position: relative;
&:after {
content: attr(data-precision) " data db";
position: absolute;
bottom: -2px;
left: 45px;
width: 100%;
color: $article-text;
font-style: italic;
font-size: 1rem;
}
}
.quix-connector {
display: block;
height: 80px;
width: 20px;
position: relative;
&:before {
content: "";
display: block;
height: 100%;
width: 100%;
background-color: $article-text;
mask-image: url('/svgs/quix-connector-plug.svg');
mask-repeat: no-repeat;
background-size: contain;
}
&:after {
content: "Connector";
display: block;
position: absolute;
top: 1.5rem;
left: 1.75rem;
padding: .25rem .5rem;
color: $article-text;
font-size: 1rem;
font-style: italic;
background-color: $article-bg;
border-radius: $radius * 3;
border: 1.5px solid rgba($article-text, .5);
box-shadow: 2px 2px 6px $sidebar-search-shadow;
}
}
.quix-stream-container {
display: flex;
flex-direction: row;
border: 2px dashed $article-text;
background: rgba($article-text, .1);
border-radius: $radius * 4;
padding: 2.5rem;
justify-content: space-between;
align-items: center;
}
.quix-stream-component {
padding: 1rem;
border-radius: $radius * 2;
border-style: dashed;
border-width: 2px;
position: relative;
p {
margin: 0;
line-height: 1.2rem;
font-size: 1rem;
text-align: center;
color: $article-bold;
}
&:before {
content: url('/svgs/quix-python-heart.svg');
display: block;
position: absolute;
width: 40px;
height: 40px;
top: -15px;
left: -15px;
filter:
drop-shadow( 2px 0px 0px $article-bg)
drop-shadow(-2px 0px 0px $article-bg)
drop-shadow( 0px 2px 0px $article-bg)
drop-shadow( 0px -2px 0px $article-bg);
}
&#source-producer {
background: rgba($b-dodger, .2);
border-color: $b-dodger
}
&#downsampling-process {
background: rgba($br-magenta, .2);
border-color: $br-magenta
}
&#sink-consumer {
background: rgba($y-tiger, .2);
border-color: $y-tiger
}
}
.arrow {
margin: .5rem .75rem .5rem .5rem;
height: 2px;
width: auto;
min-width: 25px;
background: $article-text;
position: relative;
&:after{
content: "";
position: absolute;
right: -4px;
top: -.48em;
font-size: .75rem;
color: $article-text;
}
}
.kafka-toggle {
display: flex;
justify-content: flex-end;
width: 60px;
min-width: 60px;
height: 40px;
border-radius: 20px;
background: $grey5;
position: relative;
&:after {
content: "TOPIC:\A" attr(topic);
position: absolute;
width: 215%;
color: $article-text;
text-align: center;
font-style: italic;
bottom: -42px;
font-size: .9rem;
left: -60%;
white-space: pre-wrap;
}
.toggle-icon {
display: block;
height: 34px;
width: 34px;
margin: 3px;
border-radius: 50%;
background: url('/svgs/apache-kafka-icon.svg');
background-color: #fff;
background-size: 86%;
background-position: 90%;
background-repeat: no-repeat;
}
}
#quix-brand-icons {
height: 50px;
display: flex;
align-items: flex-start;
margin-top: -3rem;
& > * {
height: 45px;
display: inline-block;
background-color: $g0-obsidian;
border-radius: $radius * 3;
margin-right: .25rem;
box-shadow: 0 1px 10px rgba($g20-white, .1);
img {
margin: 0;
box-shadow: none;
border-radius: 0;
height: 100%;
}
}
.quix-logo {
padding: .75rem;
}
.quix-streams-logo {
position: relative;
padding: .6rem;
&::after {
content: "Quix\A Streams";
display: inline-block;
white-space: pre-wrap;
font-size: .92rem;
font-weight: $medium;
color: $g20-white;
line-height: .9rem;
margin-left: .15rem;
}
}
}
}
////////////////////////////////////////////////////////////////////////////////
///////////////////////////////// MEDIA QUERIES ////////////////////////////////
////////////////////////////////////////////////////////////////////////////////
@include media(large) {
#quix-downsample-pipeline {
max-width: 325px;
.logo-row .influxdb-connector {width: 100%;}
.quix-stream-container {flex-direction: column;}
.arrow {
margin: .5rem .5rem .75rem .5rem ;
width: 2px;
min-width: 2px;
height: auto;
min-height: 25px;
&:after{
content: "";
right: -4.25px;
bottom: -.5em;
top: unset;
font-size: 1rem;
}
}
.kafka-toggle {
margin-bottom: 1.5rem;
&:after {
content: "TOPIC: " attr(topic);
width: 400%;
bottom: -25px;
left: -150%;
}
}
#quix-brand-icons {
margin-top: 1.5rem;
align-items: center;
justify-content: center;
}
}
}
@include media(small) {
#shard-diagram {
flex-direction: row;

View File

@ -215,6 +215,7 @@ $html-diagram-shard-group-bg: $article-table-row-alt;
$diagram-arrow: $g6-smoke;
$flux-water-process-img: url('/img/flux/0-x-water-process-dark.svg');
$influxdb-logo: url('/svgs/influxdb-logo-white.svg') !default;
// Code placeholder colors
$code-placeholder: #e659a2;

View File

@ -211,6 +211,7 @@ $svg-geo-point: $p-potassium !default;
$html-diagram-shard-group-bg: $g20-white !default;
$flux-water-process-img: url('/img/flux/0-x-water-process-light.svg') !default;
$influxdb-logo: url('/svgs/influxdb-logo-blue.svg') !default;
// Diagram colors
$diagram-arrow: $g14-chromium !default;

View File

@ -0,0 +1,18 @@
---
title: Downsample data stored in InfluxDB
description: >
Learn about different methods for querying and downsampling time series data
stored in InfluxDB.
menu:
influxdb_cloud_serverless:
name: Downsample data
parent: Process & visualize data
weight: 101
related:
- /influxdb/cloud-serverless/query-data/sql/aggregate-select/, Aggregate or apply selector functions to data (SQL)
---
Learn about different methods for querying and downsampling time series data
stored in InfluxDB.
{{< children >}}

View File

@ -1,13 +1,14 @@
---
title: Downsample data stored in InfluxDB
title: Downsample data with client libraries
description: >
Query and downsample time series data stored in InfluxDB and write the
downsampled data back to InfluxDB.
Use InfluxDB client libraries to query and downsample time series data stored
in InfluxDB and write the downsampled data back to InfluxDB.
menu:
influxdb_cloud_serverless:
name: Downsample data
parent: Process & visualize data
weight: 101
name: Use client libraries
parent: Downsample data
identifier: downsample-client-libs
weight: 201
related:
- /influxdb/cloud-serverless/query-data/sql/aggregate-select/, Aggregate or apply selector functions to data (SQL)
---

View File

@ -6,9 +6,9 @@ description: >
downsample it, and then write the downsampled data back to InfluxDB.
menu:
influxdb_cloud_serverless:
name: Downsample data with Quix
parent: Process & visualize data
weight: 101
name: Use Quix
parent: Downsample data
weight: 202
related:
- /influxdb/cloud-serverless/query-data/sql/aggregate-select/, Aggregate or apply selector functions to data (SQL)
---
@ -29,13 +29,11 @@ but you can use your runtime of choice and any of the available
This guide also assumes you have already
[setup your Python project and virtual environment](/influxdb/cloud-serverless/query-data/execute-queries/client-libraries/python/#create-a-python-virtual-environment).
## Pipeline architecture
The following diagram illustrates how data is passed between processes as it is downsampled:
![downsampling pipeline architecture](quix-pipeline-downsample.png)
{{< html-diagram/quix-downsample-pipeline >}}
{{% note %}}
It is usually more efficient to write raw data directly to Kafka rather than

Binary file not shown.

Before

Width:  |  Height:  |  Size: 216 KiB

View File

@ -0,0 +1,43 @@
<div id="quix-downsample-pipeline">
<div class="logo-row top">
<div class="influxdb-connector">
<div class="influxdb-logo" data-precision="raw"></div>
<div class="quix-connector"></div>
</div>
</div>
<div class="quix-stream-container">
<div id="source-producer" class="quix-stream-component">
<p>InfluxDB v2 Source Producer</p>
</div>
<div class="arrow"></div>
<div class="kafka-toggle" topic="raw-data">
<div class="toggle-icon"></div>
</div>
<div class="arrow"></div>
<div id="downsampling-process" class="quix-stream-component">
<p>Downsampling Process</p>
</div>
<div class="arrow"></div>
<div class="kafka-toggle" topic="downsampled-data">
<div class="toggle-icon"></div>
</div>
<div class="arrow"></div>
<div id="sink-consumer" class="quix-stream-component">
<p>InfluxDB v3 Sink Consumer</p>
</div>
</div>
<div class="logo-row bottom">
<div class="influxdb-connector">
<div class="quix-connector"></div>
<div class="influxdb-logo" data-precision="downsampled"></div>
</div>
</div>
<div id="quix-brand-icons">
<div class="quix-logo">
<img src="/svgs/quix-logo-white.svg" alt="Quix logo">
</div>
<div class="quix-streams-logo">
<img src="/svgs/quix-python-heart.svg" alt="Quix Streams logo">
</div>
</div>
</div>

View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 32 32" preserveAspectRatio="xMidYMid"><path d="M21.538 17.724a4.16 4.16 0 0 0-3.128 1.42l-1.96-1.388c.208-.573.328-1.188.328-1.832a5.35 5.35 0 0 0-.317-1.802l1.956-1.373a4.16 4.16 0 0 0 3.122 1.414 4.18 4.18 0 0 0 4.172-4.172 4.18 4.18 0 0 0-4.172-4.172 4.18 4.18 0 0 0-4.172 4.172c0 .412.062.8.174 1.185l-1.957 1.374c-.818-1.014-1.995-1.723-3.336-1.94V8.25a4.18 4.18 0 0 0 3.313-4.082A4.18 4.18 0 0 0 11.388 0a4.18 4.18 0 0 0-4.172 4.172c0 1.98 1.387 3.637 3.24 4.063v2.4C7.928 11.067 6 13.273 6 15.925c0 2.665 1.947 4.88 4.493 5.308v2.523c-1.87.4-3.276 2.08-3.276 4.072A4.18 4.18 0 0 0 11.388 32a4.18 4.18 0 0 0 4.172-4.172c0-1.993-1.405-3.66-3.276-4.072v-2.523c1.315-.22 2.47-.916 3.28-1.907l1.973 1.397a4.15 4.15 0 0 0-.171 1.173 4.18 4.18 0 0 0 4.172 4.172 4.18 4.18 0 0 0 4.172-4.172 4.18 4.18 0 0 0-4.172-4.172zm0-9.754c1.115 0 2.022.908 2.022 2.023s-.907 2.022-2.022 2.022-2.022-.907-2.022-2.022.907-2.023 2.022-2.023zM9.366 4.172c0-1.115.907-2.022 2.023-2.022s2.022.907 2.022 2.022-.907 2.022-2.022 2.022-2.023-.907-2.023-2.022zM13.41 27.83c0 1.115-.907 2.022-2.022 2.022s-2.023-.907-2.023-2.022.907-2.022 2.023-2.022 2.022.907 2.022 2.022zm-2.023-9.082c-1.556 0-2.82-1.265-2.82-2.82s1.265-2.82 2.82-2.82 2.82 1.265 2.82 2.82-1.265 2.82-2.82 2.82zm10.15 5.172c-1.115 0-2.022-.908-2.022-2.023s.907-2.022 2.022-2.022 2.022.907 2.022 2.022-.907 2.023-2.022 2.023z"/></svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

View File

@ -0,0 +1,11 @@
<svg width="231" height="55" viewBox="0 0 231 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M65.3531 20.4515C64.2703 20.4515 63.3513 20.099 62.5959 19.3939C61.8657 18.6889 61.5005 17.8328 61.5005 16.8256C61.5005 15.768 61.8657 14.8993 62.5959 14.2195C63.3513 13.5145 64.2703 13.1619 65.3531 13.1619C66.4358 13.1619 67.3423 13.5145 68.0725 14.2195C68.8027 14.8993 69.1678 15.768 69.1678 16.8256C69.1678 17.8328 68.8027 18.6889 68.0725 19.3939C67.3423 20.099 66.4358 20.4515 65.3531 20.4515ZM61.916 43V23.5108H68.7523V43H61.916ZM73.3502 43V23.5108H80.0732L80.1487 25.9281C80.6523 24.9713 81.3951 24.2285 82.3772 23.6997C83.3592 23.1709 84.4923 22.9065 85.7764 22.9065C87.9671 22.9065 89.6289 23.6116 90.762 25.0216C91.9203 26.4065 92.4994 28.4461 92.4994 31.1403V43H85.6631V32.4245C85.6631 30.1331 84.7944 28.9874 83.057 28.9874C82.1254 28.9874 81.4077 29.3148 80.9041 29.9695C80.4257 30.5989 80.1865 31.5054 80.1865 32.6889V43H73.3502ZM98.9581 43V28.9874H95.8232V23.5108H98.9581V21.6223C98.9581 18.6259 99.6883 16.3094 101.149 14.6727C102.634 13.036 104.724 12.2177 107.418 12.2177C108.199 12.2177 108.929 12.2806 109.609 12.4065C110.314 12.5073 110.906 12.6583 111.384 12.8598L111.044 18.5252C110.767 18.3993 110.427 18.3112 110.025 18.2608C109.647 18.1853 109.294 18.1475 108.967 18.1475C107.884 18.1475 107.079 18.4623 106.55 19.0918C106.046 19.7213 105.794 20.7159 105.794 22.0756V23.5108H110.402V28.9874H105.794V43H98.9581ZM113.424 43V12.4065H120.26V43H113.424ZM131.299 43.6043C129.158 43.6043 127.522 42.9245 126.389 41.5648C125.256 40.1799 124.689 38.1655 124.689 35.5216V23.5108H131.563V34.1241C131.563 35.2824 131.764 36.1385 132.167 36.6925C132.595 37.2464 133.263 37.5234 134.169 37.5234C135.076 37.5234 135.768 37.2086 136.246 36.5792C136.75 35.9245 137.002 35.0054 137.002 33.822V23.5108H143.838V43H137.115L137.04 40.5827C136.536 41.5396 135.781 42.2824 134.773 42.8112C133.791 43.3399 132.633 43.6043 131.299 43.6043ZM146.936 43L154.037 32.9533L147.314 23.5108H154.943L158.116 28.7986L161.213 23.5108H168.465L161.78 33.0288L168.918 43H161.251L157.701 37.1079L154.188 43H146.936ZM180.891 43.6043C179.154 43.6043 177.593 43.1763 176.208 42.3201C174.848 41.464 173.778 40.2806 172.997 38.7698C172.217 37.2338 171.826 35.4964 171.826 33.5576C171.826 31.6943 172.242 30.0072 173.073 28.4964C173.929 26.9605 175.075 25.7518 176.51 24.8705C177.945 23.9641 179.531 23.5108 181.269 23.5108C182.704 23.5108 184.013 23.8633 185.197 24.5684C186.406 25.2734 187.375 26.268 188.105 27.5522V12.4065H191.316V43H188.181L188.105 39.563C187.35 40.8471 186.355 41.8417 185.121 42.5468C183.888 43.2518 182.477 43.6043 180.891 43.6043ZM181.722 40.7338C183.031 40.7338 184.177 40.4317 185.159 39.8273C186.141 39.223 186.909 38.3795 187.463 37.2968C188.042 36.214 188.332 34.9676 188.332 33.5576C188.332 32.1475 188.042 30.9011 187.463 29.8184C186.909 28.7356 186.141 27.8921 185.159 27.2878C184.177 26.6835 183.031 26.3813 181.722 26.3813C180.438 26.3813 179.292 26.6835 178.285 27.2878C177.303 27.8921 176.522 28.7356 175.943 29.8184C175.389 30.9011 175.112 32.1475 175.112 33.5576C175.112 34.9676 175.389 36.214 175.943 37.2968C176.522 38.3795 177.303 39.223 178.285 39.8273C179.292 40.4317 180.438 40.7338 181.722 40.7338ZM208.166 43.6043C206.68 43.6043 205.333 43.2518 204.125 42.5468C202.941 41.8417 202.009 40.8471 201.33 39.563L201.254 43H198.119V12.4065H201.33V27.5522C202.085 26.268 203.08 25.2734 204.313 24.5684C205.547 23.8633 206.957 23.5108 208.544 23.5108C210.306 23.5108 211.867 23.9389 213.227 24.795C214.587 25.6511 215.657 26.8346 216.437 28.3454C217.218 29.8561 217.608 31.5935 217.608 33.5576C217.608 35.4209 217.18 37.1205 216.324 38.6565C215.493 40.1673 214.36 41.3759 212.925 42.2824C211.515 43.1637 209.928 43.6043 208.166 43.6043ZM207.713 40.7338C209.022 40.7338 210.168 40.4317 211.15 39.8273C212.132 39.223 212.9 38.3795 213.454 37.2968C214.033 36.214 214.322 34.9676 214.322 33.5576C214.322 32.1475 214.033 30.9011 213.454 29.8184C212.9 28.7356 212.132 27.8921 211.15 27.2878C210.168 26.6835 209.022 26.3813 207.713 26.3813C206.429 26.3813 205.283 26.6835 204.276 27.2878C203.294 27.8921 202.513 28.7356 201.934 29.8184C201.38 30.9011 201.103 32.1475 201.103 33.5576C201.103 34.9676 201.38 36.214 201.934 37.2968C202.513 38.3795 203.294 39.223 204.276 39.8273C205.283 40.4317 206.429 40.7338 207.713 40.7338Z" fill="#020A47"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M32.3034 38.6373L42.5565 36.2865C42.7145 36.2545 42.8641 36.19 42.9958 36.097C43.1274 36.004 43.2383 35.8847 43.3213 35.7465C43.4043 35.6083 43.4576 35.4544 43.4778 35.2945C43.498 35.1346 43.4847 34.9723 43.4387 34.8178L39.0783 15.906C38.9996 15.5939 38.8003 15.3258 38.5241 15.1604C38.2479 14.9951 37.9174 14.946 37.6051 15.0239L27.3562 17.3747C27.046 17.4543 26.7799 17.6535 26.6162 17.9287C26.4524 18.204 26.4043 18.5328 26.4825 18.8434L30.8302 37.7552C30.9089 38.0673 31.1082 38.3354 31.3844 38.5008C31.6606 38.6661 31.9911 38.7152 32.3034 38.6373Z" fill="#020A47"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M28.7703 50.3236L41.2015 38.8145C41.67 38.3418 41.5518 38.0506 40.906 38.2827L32.3624 40.2241C32.0091 40.3114 31.6835 40.4863 31.4157 40.7327C31.1479 40.9791 30.9465 41.289 30.8302 41.6338L28.2384 49.9733C28.0611 50.6191 28.2975 50.7963 28.7703 50.3236Z" fill="#020A47"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.09025 46.5674L24.7054 52.3199C25.0234 52.3791 25.3522 52.3233 25.6329 52.1625C25.9136 52.0017 26.1279 51.7463 26.2377 51.442L29.3571 41.4565C29.4022 41.3007 29.4162 41.1376 29.3982 40.9765C29.3802 40.8153 29.3305 40.6593 29.2521 40.5174C29.1737 40.3755 29.068 40.2504 28.9411 40.1494C28.8143 40.0484 28.6687 39.9734 28.5128 39.9287L9.8977 34.2311C9.58257 34.1409 9.24459 34.1791 8.95751 34.3373C8.67043 34.4954 8.45759 34.7607 8.36543 35.0752L5.26713 45.0396C5.17511 45.3514 5.20997 45.6868 5.36413 45.9729C5.5183 46.2591 5.77927 46.4728 6.09025 46.5674Z" fill="#020A47"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.0792906 26.1278L3.85297 42.6509C3.97116 43.2966 4.27508 43.2966 4.43971 42.6509L7.03148 34.3113C7.11979 33.9559 7.12341 33.5848 7.04203 33.2278C6.96064 32.8708 6.79654 32.5379 6.56293 32.2559L0.611152 25.8324C0.197482 25.3471 -0.11066 25.4821 0.0792906 26.1278Z" fill="#020A47"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.6338 8.46529L0.374854 21.6626C0.146094 21.8803 0.0117872 22.179 0.000739528 22.4946C-0.0103081 22.8102 0.102784 23.1176 0.315758 23.3508L7.44523 31.0615C7.66493 31.2946 7.96774 31.4315 8.28786 31.4426C8.60797 31.4536 8.91951 31.3379 9.15479 31.1206L23.4095 17.9022C23.6403 17.6856 23.776 17.3865 23.787 17.0703C23.7981 16.754 23.6836 16.4462 23.4686 16.214L16.3518 8.50749C16.2423 8.39099 16.1108 8.2974 15.9649 8.23213C15.8189 8.16687 15.6614 8.13124 15.5016 8.12732C15.3418 8.12339 15.1828 8.15125 15.0338 8.20926C14.8848 8.26728 14.7489 8.35431 14.6338 8.46529Z" fill="#020A47"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M28.4158 38.3419C29.0659 38.5191 29.4753 38.1688 29.3022 37.4978L25.1782 19.6453C25.0009 18.9996 24.4691 18.8223 24.0005 19.2908L10.5689 31.7664C10.0962 32.2349 10.2143 32.7624 10.8602 32.9397L28.4158 38.3419Z" fill="#020A47"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M35.427 13.4413L19.1672 8.46535C18.5214 8.2881 18.4032 8.52444 18.9309 9.052L24.8826 15.4544C25.1496 15.7039 25.4725 15.8859 25.8243 15.985C26.1761 16.0842 26.5465 16.0976 26.9046 16.0242L35.4481 14.087C36.077 13.9097 36.077 13.6143 35.427 13.4413Z" fill="#020A47"/>
<path d="M221.623 17.93V13.913H220.128V13.12H224.028V13.913H222.546V17.93H221.623ZM224.86 17.93L225.107 13.12H226.004L227.473 16.175L228.968 13.12H229.865L230.112 17.93H229.293L229.137 14.368L227.811 17.098H227.161L225.822 14.342L225.679 17.93H224.86Z" fill="#020A47"/>
</svg>

After

Width:  |  Height:  |  Size: 7.6 KiB

View File

@ -0,0 +1,11 @@
<svg width="231" height="55" viewBox="0 0 231 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M65.3531 20.4515C64.2703 20.4515 63.3513 20.099 62.5959 19.3939C61.8657 18.6889 61.5005 17.8328 61.5005 16.8256C61.5005 15.768 61.8657 14.8993 62.5959 14.2195C63.3513 13.5145 64.2703 13.1619 65.3531 13.1619C66.4358 13.1619 67.3423 13.5145 68.0725 14.2195C68.8027 14.8993 69.1678 15.768 69.1678 16.8256C69.1678 17.8328 68.8027 18.6889 68.0725 19.3939C67.3423 20.099 66.4358 20.4515 65.3531 20.4515ZM61.916 43V23.5108H68.7523V43H61.916ZM73.3502 43V23.5108H80.0732L80.1487 25.9281C80.6523 24.9713 81.3951 24.2285 82.3772 23.6997C83.3592 23.1709 84.4923 22.9065 85.7764 22.9065C87.9671 22.9065 89.6289 23.6116 90.762 25.0216C91.9203 26.4065 92.4994 28.4461 92.4994 31.1403V43H85.6631V32.4245C85.6631 30.1331 84.7944 28.9874 83.057 28.9874C82.1254 28.9874 81.4077 29.3148 80.9041 29.9695C80.4257 30.5989 80.1865 31.5054 80.1865 32.6889V43H73.3502ZM98.9581 43V28.9874H95.8232V23.5108H98.9581V21.6223C98.9581 18.6259 99.6883 16.3094 101.149 14.6727C102.634 13.036 104.724 12.2177 107.418 12.2177C108.199 12.2177 108.929 12.2806 109.609 12.4065C110.314 12.5073 110.906 12.6583 111.384 12.8598L111.044 18.5252C110.767 18.3993 110.427 18.3112 110.025 18.2608C109.647 18.1853 109.294 18.1475 108.967 18.1475C107.884 18.1475 107.079 18.4623 106.55 19.0918C106.046 19.7213 105.794 20.7159 105.794 22.0756V23.5108H110.402V28.9874H105.794V43H98.9581ZM113.424 43V12.4065H120.26V43H113.424ZM131.299 43.6043C129.158 43.6043 127.522 42.9245 126.389 41.5648C125.256 40.1799 124.689 38.1655 124.689 35.5216V23.5108H131.563V34.1241C131.563 35.2824 131.764 36.1385 132.167 36.6925C132.595 37.2464 133.263 37.5234 134.169 37.5234C135.076 37.5234 135.768 37.2086 136.246 36.5792C136.75 35.9245 137.002 35.0054 137.002 33.822V23.5108H143.838V43H137.115L137.04 40.5827C136.536 41.5396 135.781 42.2824 134.773 42.8112C133.791 43.3399 132.633 43.6043 131.299 43.6043ZM146.936 43L154.037 32.9533L147.314 23.5108H154.943L158.116 28.7986L161.213 23.5108H168.465L161.78 33.0288L168.918 43H161.251L157.701 37.1079L154.188 43H146.936ZM180.891 43.6043C179.154 43.6043 177.593 43.1763 176.208 42.3201C174.848 41.464 173.778 40.2806 172.997 38.7698C172.217 37.2338 171.826 35.4964 171.826 33.5576C171.826 31.6943 172.242 30.0072 173.073 28.4964C173.929 26.9605 175.075 25.7518 176.51 24.8705C177.945 23.9641 179.531 23.5108 181.269 23.5108C182.704 23.5108 184.013 23.8633 185.197 24.5684C186.406 25.2734 187.375 26.268 188.105 27.5522V12.4065H191.316V43H188.181L188.105 39.563C187.35 40.8471 186.355 41.8417 185.121 42.5468C183.888 43.2518 182.477 43.6043 180.891 43.6043ZM181.722 40.7338C183.031 40.7338 184.177 40.4317 185.159 39.8273C186.141 39.223 186.909 38.3795 187.463 37.2968C188.042 36.214 188.332 34.9676 188.332 33.5576C188.332 32.1475 188.042 30.9011 187.463 29.8184C186.909 28.7356 186.141 27.8921 185.159 27.2878C184.177 26.6835 183.031 26.3813 181.722 26.3813C180.438 26.3813 179.292 26.6835 178.285 27.2878C177.303 27.8921 176.522 28.7356 175.943 29.8184C175.389 30.9011 175.112 32.1475 175.112 33.5576C175.112 34.9676 175.389 36.214 175.943 37.2968C176.522 38.3795 177.303 39.223 178.285 39.8273C179.292 40.4317 180.438 40.7338 181.722 40.7338ZM208.166 43.6043C206.68 43.6043 205.333 43.2518 204.125 42.5468C202.941 41.8417 202.009 40.8471 201.33 39.563L201.254 43H198.119V12.4065H201.33V27.5522C202.085 26.268 203.08 25.2734 204.313 24.5684C205.547 23.8633 206.957 23.5108 208.544 23.5108C210.306 23.5108 211.867 23.9389 213.227 24.795C214.587 25.6511 215.657 26.8346 216.437 28.3454C217.218 29.8561 217.608 31.5935 217.608 33.5576C217.608 35.4209 217.18 37.1205 216.324 38.6565C215.493 40.1673 214.36 41.3759 212.925 42.2824C211.515 43.1637 209.928 43.6043 208.166 43.6043ZM207.713 40.7338C209.022 40.7338 210.168 40.4317 211.15 39.8273C212.132 39.223 212.9 38.3795 213.454 37.2968C214.033 36.214 214.322 34.9676 214.322 33.5576C214.322 32.1475 214.033 30.9011 213.454 29.8184C212.9 28.7356 212.132 27.8921 211.15 27.2878C210.168 26.6835 209.022 26.3813 207.713 26.3813C206.429 26.3813 205.283 26.6835 204.276 27.2878C203.294 27.8921 202.513 28.7356 201.934 29.8184C201.38 30.9011 201.103 32.1475 201.103 33.5576C201.103 34.9676 201.38 36.214 201.934 37.2968C202.513 38.3795 203.294 39.223 204.276 39.8273C205.283 40.4317 206.429 40.7338 207.713 40.7338Z" fill="#FFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M32.3034 38.6373L42.5565 36.2865C42.7145 36.2545 42.8641 36.19 42.9958 36.097C43.1274 36.004 43.2383 35.8847 43.3213 35.7465C43.4043 35.6083 43.4576 35.4544 43.4778 35.2945C43.498 35.1346 43.4847 34.9723 43.4387 34.8178L39.0783 15.906C38.9996 15.5939 38.8003 15.3258 38.5241 15.1604C38.2479 14.9951 37.9174 14.946 37.6051 15.0239L27.3562 17.3747C27.046 17.4543 26.7799 17.6535 26.6162 17.9287C26.4524 18.204 26.4043 18.5328 26.4825 18.8434L30.8302 37.7552C30.9089 38.0673 31.1082 38.3354 31.3844 38.5008C31.6606 38.6661 31.9911 38.7152 32.3034 38.6373Z" fill="#FFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M28.7703 50.3236L41.2015 38.8145C41.67 38.3418 41.5518 38.0506 40.906 38.2827L32.3624 40.2241C32.0091 40.3114 31.6835 40.4863 31.4157 40.7327C31.1479 40.9791 30.9465 41.289 30.8302 41.6338L28.2384 49.9733C28.0611 50.6191 28.2975 50.7963 28.7703 50.3236Z" fill="#FFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.09025 46.5674L24.7054 52.3199C25.0234 52.3791 25.3522 52.3233 25.6329 52.1625C25.9136 52.0017 26.1279 51.7463 26.2377 51.442L29.3571 41.4565C29.4022 41.3007 29.4162 41.1376 29.3982 40.9765C29.3802 40.8153 29.3305 40.6593 29.2521 40.5174C29.1737 40.3755 29.068 40.2504 28.9411 40.1494C28.8143 40.0484 28.6687 39.9734 28.5128 39.9287L9.8977 34.2311C9.58257 34.1409 9.24459 34.1791 8.95751 34.3373C8.67043 34.4954 8.45759 34.7607 8.36543 35.0752L5.26713 45.0396C5.17511 45.3514 5.20997 45.6868 5.36413 45.9729C5.5183 46.2591 5.77927 46.4728 6.09025 46.5674Z" fill="#FFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.0792906 26.1278L3.85297 42.6509C3.97116 43.2966 4.27508 43.2966 4.43971 42.6509L7.03148 34.3113C7.11979 33.9559 7.12341 33.5848 7.04203 33.2278C6.96064 32.8708 6.79654 32.5379 6.56293 32.2559L0.611152 25.8324C0.197482 25.3471 -0.11066 25.4821 0.0792906 26.1278Z" fill="#FFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.6338 8.46529L0.374854 21.6626C0.146094 21.8803 0.0117872 22.179 0.000739528 22.4946C-0.0103081 22.8102 0.102784 23.1176 0.315758 23.3508L7.44523 31.0615C7.66493 31.2946 7.96774 31.4315 8.28786 31.4426C8.60797 31.4536 8.91951 31.3379 9.15479 31.1206L23.4095 17.9022C23.6403 17.6856 23.776 17.3865 23.787 17.0703C23.7981 16.754 23.6836 16.4462 23.4686 16.214L16.3518 8.50749C16.2423 8.39099 16.1108 8.2974 15.9649 8.23213C15.8189 8.16687 15.6614 8.13124 15.5016 8.12732C15.3418 8.12339 15.1828 8.15125 15.0338 8.20926C14.8848 8.26728 14.7489 8.35431 14.6338 8.46529Z" fill="#FFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M28.4158 38.3419C29.0659 38.5191 29.4753 38.1688 29.3022 37.4978L25.1782 19.6453C25.0009 18.9996 24.4691 18.8223 24.0005 19.2908L10.5689 31.7664C10.0962 32.2349 10.2143 32.7624 10.8602 32.9397L28.4158 38.3419Z" fill="#FFF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M35.427 13.4413L19.1672 8.46535C18.5214 8.2881 18.4032 8.52444 18.9309 9.052L24.8826 15.4544C25.1496 15.7039 25.4725 15.8859 25.8243 15.985C26.1761 16.0842 26.5465 16.0976 26.9046 16.0242L35.4481 14.087C36.077 13.9097 36.077 13.6143 35.427 13.4413Z" fill="#FFF"/>
<path d="M221.623 17.93V13.913H220.128V13.12H224.028V13.913H222.546V17.93H221.623ZM224.86 17.93L225.107 13.12H226.004L227.473 16.175L228.968 13.12H229.865L230.112 17.93H229.293L229.137 14.368L227.811 17.098H227.161L225.822 14.342L225.679 17.93H224.86Z" fill="#FFF"/>
</svg>

After

Width:  |  Height:  |  Size: 7.6 KiB

View File

@ -0,0 +1,13 @@
<svg version="1.1" id="quix-connector-plug" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 20 100" style="enable-background:new 0 0 20 100;" xml:space="preserve">
<style type="text/css">
.st0{fill:#D4D7DD;}
</style>
<path d="M18.3,29.9h-0.8v-9.6c0-1.4-1.1-2.4-2.4-2.4h-2.9v-4.2c0-0.4-0.3-0.7-0.7-0.7h-0.3V-0.1H8.8v12.9H8.6
c-0.4,0-0.7,0.3-0.7,0.7v4.2H5c-1.4,0-2.4,1.1-2.4,2.4v9.6H1.7c-1,0-1.7,0.8-1.7,1.7v0.2c0,1,0.8,1.7,1.7,1.7h2.8v7.3
c0,0.6,0.4,1,1,1s1-0.4,1-1v-7.3h7v7.3c0,0.6,0.4,1,1,1h0c0.6,0,1-0.4,1-1v-7.3h2.8c1,0,1.7-0.8,1.7-1.7v-0.2
C20,30.6,19.2,29.9,18.3,29.9z"/>
<path d="M18.3,60.3H1.7C0.8,60.3,0,61,0,62v0.2c0,1,0.8,1.7,1.7,1.7h0.8v9.6C2.6,74.9,3.7,76,5,76h2.9v4.2
c0,0.4,0.3,0.7,0.7,0.7h0.3V100h2.3V80.9h0.3c0.4,0,0.7-0.3,0.7-0.7V76H15c1.4,0,2.4-1.1,2.4-2.4V64h0.8c1,0,1.7-0.8,1.7-1.7V62
C20,61,19.2,60.3,18.3,60.3z"/>
</svg>

After

Width:  |  Height:  |  Size: 910 B

View File

@ -0,0 +1,33 @@
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 139 50" style="enable-background:new 0 0 139 50;" xml:space="preserve">
<style type="text/css">
.st0{clip-path:url(#SVGID_00000181075645780536720220000009196893729404315553_);}
.st1{fill:#0064FF;}
.st2{fill:#BC2EFF;}
.st3{fill:#FF7828;}
.st4{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
</style>
<g>
<defs>
<rect id="SVGID_1_" width="138.6" height="50"/>
</defs>
<clipPath id="SVGID_00000012462499044799638470000009725415952126080949_">
<use xlink:href="#SVGID_1_" style="overflow:visible;"/>
</clipPath>
<g style="clip-path:url(#SVGID_00000012462499044799638470000009725415952126080949_);">
<path class="st1" d="M29.5,20.5h-9.1v9.1h9.1V20.5z"/>
<path class="st2" d="M38.4,30.7H32c-0.8,0-1.4,0.6-1.4,1.4v6.4c0,0.8,0.6,1.4,1.4,1.4h6.4c0.8,0,1.4-0.6,1.4-1.4V32
C39.8,31.3,39.2,30.7,38.4,30.7z"/>
<path class="st3" d="M44.8,50c2.9,0,5.2-2.3,5.2-5.2c0-2.9-2.3-5.2-5.2-5.2c-2.9,0-5.2,2.3-5.2,5.2C39.5,47.7,41.9,50,44.8,50z"/>
<path class="st4" d="M0,0.9v48.2C0,49.6,0.4,50,0.9,50h27.7c0.5,0,0.9-0.4,0.9-0.9v-7.3c0-0.5-0.4-0.9-0.9-0.9H9.1V9.1h31.8v19.6
c0,0.5,0.4,0.9,0.9,0.9h7.3c0.5,0,0.9-0.4,0.9-0.9V0.9C50,0.4,49.6,0,49.1,0H0.9C0.4,0,0,0.4,0,0.9z M101.3,20.5h-7.3
c-0.5,0-0.9,0.4-0.9,0.9v27.7c0,0.5,0.4,0.9,0.9,0.9h7.3c0.5,0,0.9-0.4,0.9-0.9V21.4C102.3,20.9,101.9,20.5,101.3,20.5z M94.1,4.5
h7.3c0.5,0,0.9,0.4,0.9,0.9v7.3c0,0.5-0.4,0.9-0.9,0.9h-7.3c-0.5,0-0.9-0.4-0.9-0.9V5.4C93.2,4.9,93.6,4.5,94.1,4.5z M77.3,21.4
v19.5H65.9V21.4c0-0.5-0.4-0.9-0.9-0.9h-7.3c-0.5,0-0.9,0.4-0.9,0.9l0,27.7c0,0.5,0.4,0.9,0.9,0.9h27.7c0.5,0,0.9-0.4,0.9-0.9
V21.4c0-0.5-0.4-0.9-0.9-0.9h-7.3C77.7,20.5,77.3,20.9,77.3,21.4z M130.4,20.5h7.3c0.5,0,0.9,0.4,0.9,0.9v8.2l-8.5,5.7l8.5,5.7
v8.2c0,0.5-0.4,0.9-0.9,0.9h-7.3c-0.5,0-0.9-0.4-0.9-0.9v-5.9l-5.7-3.8l-5.6,3.7v6c0,0.5-0.4,0.9-0.9,0.9H110
c-0.5,0-0.9-0.4-0.9-0.9v-8.2l8.5-5.7l-8.5-5.7v-8.2c0-0.5,0.4-0.9,0.9-0.9h7.3c0.5,0,0.9,0.4,0.9,0.9v5.9l5.7,3.8l5.7-3.8v-5.9
C129.5,20.9,129.9,20.5,130.4,20.5z"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.1 KiB

View File

@ -0,0 +1,3 @@
<svg width="100%" height="100%" viewBox="0 0 58 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M23.8603 2.69724C20.264 -0.89908 14.4332 -0.89908 10.8369 2.69724L2.69724 10.8369C-0.899084 14.4332 -0.899078 20.264 2.69724 23.8603L10.8369 32C14.4332 35.5963 20.264 35.5963 23.8603 32L40.1396 15.7207L41.7672 17.3482L24.6739 34.4415C22.2222 36.8932 18.7321 37.6735 15.6193 36.7824L25.4883 46.6514C27.2865 48.4496 30.2018 48.4495 32 46.6514L54.791 23.8603C58.3873 20.264 58.3873 14.4332 54.791 10.8369L46.6514 2.69724C43.055 -0.89908 37.2242 -0.89908 33.6279 2.69724L17.3486 18.9765L15.7207 17.3486L27.1162 5.9531L23.8603 2.69724ZM18.9765 4.32517C20.1004 5.44904 20.1004 7.27115 18.9765 8.395C17.8527 9.51885 16.0306 9.51887 14.9067 8.395C13.7829 7.27113 13.7829 5.44902 14.9067 4.32517C16.0306 3.20132 17.8527 3.2013 18.9765 4.32517Z" fill="#F5333F"></path>
</svg>

After

Width:  |  Height:  |  Size: 914 B