Ulf Schneider – Developer and Agile Coach Hi, I´m Ulf Schneider, a software developer and agile coach living in Paderborn, Germany. 2026-04-16T14:20:12Z https://ulfschneider.io Ulf Schneider mail@ulfschneider.io Keep your email address away from spammers 2026-04-12T08:06:45Z https://ulfschneider.io/2026-04-10-obfuscate-email/ <p>Use <a href="https://spencermortensen.com/articles/email-obfuscation/"><cite>Email address obfuscation: What works in 2026?</cite></a> by Spencer Mortensen to keep your email address away from spammers.</p> <p>This could be a case for a web component combining multiple of the presented techniques. Unfortunately, what really works requires JavaScript, which can be an issue. My favorite pattern so far is <em>2.10 User Interaction</em>, because it provides decent protection against spammers without additional library dependencies. I am using it with the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API">Intersection Observer API</a> and CSS class name selectors <code>.oma</code> for <em>obfuscated email address</em> and <code>.oml</code> for <em>obfuscated email link</em>.</p> <pre class="language-js" data-language="JavaScript"><code class="language-js"><span class="token comment">// email obfuscation</span> <span class="token keyword">const</span> mObserver <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">IntersectionObserver</span><span class="token punctuation">(</span>decode<span class="token punctuation">)</span> <span class="token keyword">function</span> <span class="token function">decode</span><span class="token punctuation">(</span><span class="token parameter">entries<span class="token punctuation">,</span> observer</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> parts <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">"d"</span><span class="token punctuation">,</span> <span class="token string">"o"</span><span class="token punctuation">,</span> <span class="token string">"n"</span><span class="token punctuation">,</span> <span class="token string">"a"</span><span class="token punctuation">,</span> <span class="token string">"l"</span><span class="token punctuation">,</span> <span class="token string">"d"</span><span class="token punctuation">,</span> <span class="token string">"@"</span><span class="token punctuation">,</span> <span class="token string">"d"</span><span class="token punctuation">,</span> <span class="token string">"u"</span><span class="token punctuation">,</span> <span class="token string">"c"</span><span class="token punctuation">,</span> <span class="token string">"k"</span><span class="token punctuation">,</span> <span class="token string">"."</span><span class="token punctuation">,</span> <span class="token string">"c"</span><span class="token punctuation">,</span> <span class="token string">"o"</span><span class="token punctuation">,</span> <span class="token string">"m"</span><span class="token punctuation">]</span> <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">const</span> e <span class="token keyword">of</span> entries<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>e<span class="token punctuation">.</span>isIntersecting <span class="token operator">&amp;&amp;</span> e<span class="token punctuation">.</span>target<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">contains</span><span class="token punctuation">(</span><span class="token string">"oml"</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> e<span class="token punctuation">.</span>target<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">"href"</span><span class="token punctuation">,</span> <span class="token string">"mai"</span> <span class="token operator">+</span> <span class="token string">"lto"</span> <span class="token operator">+</span> <span class="token string">":"</span> <span class="token operator">+</span> parts<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">""</span><span class="token punctuation">)</span><span class="token punctuation">)</span> mObserver<span class="token punctuation">.</span><span class="token function">unobserve</span><span class="token punctuation">(</span>e<span class="token punctuation">.</span>target<span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>e<span class="token punctuation">.</span>isIntersecting <span class="token operator">&amp;&amp;</span> e<span class="token punctuation">.</span>target<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">contains</span><span class="token punctuation">(</span><span class="token string">"oma"</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> e<span class="token punctuation">.</span>target<span class="token punctuation">.</span>innerText <span class="token operator">=</span> parts<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">""</span><span class="token punctuation">)</span> mObserver<span class="token punctuation">.</span><span class="token function">unobserve</span><span class="token punctuation">(</span>e<span class="token punctuation">.</span>target<span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">function</span> <span class="token function">observe</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">for</span> <span class="token punctuation">(</span>o <span class="token keyword">of</span> document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">".oml,.oma"</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> mObserver<span class="token punctuation">.</span><span class="token function">observe</span><span class="token punctuation">(</span>o<span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>document<span class="token punctuation">.</span>readyState <span class="token operator">==</span> <span class="token string">"loading"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> document<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"DOMContentLoaded"</span><span class="token punctuation">,</span> observe<span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> <span class="token function">observe</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">}</span></code></pre> <p>To challenge the crawler a bit more, you could put that script into a dedicated file <code>mail.js</code>, and load it from inside of your <code>head</code>, like:</p> <pre class="language-js" data-language="JavaScript"><code class="language-js"><span class="token operator">&lt;</span>script<span class="token operator">></span> <span class="token comment">//challenge the crawler!</span> <span class="token keyword">const</span> s <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"script"</span><span class="token punctuation">)</span> s<span class="token punctuation">.</span>src <span class="token operator">=</span> <span class="token string">"/js/mail.js"</span> document<span class="token punctuation">.</span>head<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>s<span class="token punctuation">)</span> <span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">></span></code></pre> <p>This will require the crawler to</p> <ul> <li>execute JS,</li> <li>discover the dynamic script,</li> <li>load the script, and</li> <li>execute it,</li> </ul> <p>to get your email address.</p>

Keep your email address away from spammers appeared on ulfschneider.io.

Reply via email

 Have fun 2026-04-03T08:14:10Z https://ulfschneider.io/2026-04-03-have-fun/ <figure> <img src="https://ulfschneider.io/img/Xnm4fx19er-200.webp" alt="" loading="lazy" decoding="async" width="1200" height="1200" srcset="https://ulfschneider.io/img/Xnm4fx19er-200.webp 200w, https://ulfschneider.io/img/Xnm4fx19er-1200.webp 1200w" sizes="100vw"> </figure>

Have fun appeared on ulfschneider.io.

Reply via email

 JSON Web Tokens 2026-03-25T09:34:52Z https://ulfschneider.io/2026-03-25-jwt/ <p><a href="https://www.jwt.io/introduction"><cite>jwt.io/introduction</cite></a> is a good introduction to JWTs.</p> <p>Tool-wise <a href="https://www.authgear.com/tools/jwt-jwe-debugger"><cite>authgear.com/tools/jwt-jwe-debugger</cite></a> is probably a good choice, as it runs completely in the web browser. Authgear claims:</p> <blockquote> <p>Your data security is our top priority. All encoding, decoding, encryption and decryption happen in this browser. This tool does not store or send your JWT and JWE outside of the browser.</p> </blockquote>

JSON Web Tokens appeared on ulfschneider.io.

Reply via email

 Come, join our cycling route from Paderborn to Aarhus 2026-04-10T16:22:08Z https://ulfschneider.io/2026-03-14-44444/ <p>From May 30 to June 3, we will ride from Paderborn in Germany to Aarhus in Denmark in four days. The route covers 625 kilometers of road cycling with 3,190 meters of elevation gain. The event is organized by the <a href="https://www.cyclingtoserve.org">Rotary Fellowship Cycling to Serve</a> in collaboration with local cycling clubs and everyone is invited to join! The <a href="https://rad-treff-borchen.de/projekt-4-444-4/">Rad-Treff Borchen planned the day-to-day routes</a>.</p> <figure> <iframe src="https://www.komoot.com/de-de/tour/2874466421/embed?share_token=aKv38DM6wNpIarZA6ON4Lf3qN5XtZfuXgg2W02fvQO9dWvXS4i&amp;profile=1" width="100%" height="700" frameborder="0" scrolling="no"></iframe> </figure> <p>This is not only an inspiring cycling event; it is a fantastic way to help! We're aiming to gather donations to buy <a href="https://fund.worldbicyclerelief.org/de-DE/project/rotary-cycling-team?tab=ubersicht&amp;yby6rfrrwwbr7xhah335hpglly=qLswiCWUFUZ1L3g2UXlSmGRfFxunUjgHxUAYBrnGf_VMOr4tOvUqUXbGdTD86ryAv54uklRx">444 Buffalo Bikes</a> for <a href="https://worldbicyclerelief.org/">World Bicycle Relief</a>. 147 euros will fund a Buffalo Bike for someone in need.</p> <p>As we arrive in Aarhus, the <a href="https://4days-favrskov.dk">4Days of Favrskov</a> will begin, and that's another cycling event aiming to contribute to the donation goal. So, the name <span class="inline-block">4 444 4</span> might make more sense now – ride 4 days to help fund 444 bikes, and if you like, take part in the 4Days of Favrskov 😃!</p> <p>On our ride to Aarhus you’re welcome to join us 🚴 for a day or a part of a day! The route is divided into nine sections with clear meeting spots, so you can easily hop on. Riders with a German Cycling license can even earn official kilometers for their clubs during the event. Though, it´s not required to have a license nor to be organized with Rotary. Your passion for road cycling will bring you in.</p> <dl class="line-list marker"> <dt>May 29, 19:00 Warm up and fundraising party</dt> <dd> Meet us at<br> Deelenhaus<br> Krämerstraße 8<br> Paderborn</dd> <dt>May 30, 09:30 Paderborn → Detmold </dt> <dd> Starting point is<br> Zahnmedizinisches Zentrum<br> Mersingweg 26<br> Paderborn <iframe src="https://www.komoot.com/de-de/tour/2843597669/embed?share_token=av4Et9Gvnn6crJsz5XEfCnMQ40MUh8PjB0JYOZgG2xVntVLH4S&amp;profile=1" width="100%" height="700" frameborder="0" scrolling="no"></iframe> </dd> <dt>May 30, 12:00 Detmold → Nienburg </dt> <dd> Starting point is<br> Arminstraße 65A<br> Detmold <iframe src="https://www.komoot.com/de-de/tour/2843606385/embed?profile=1" width="100%" height="700" frameborder="0" scrolling="no"></iframe> </dd> <dt>May 31, 09:30 Nienburg → Rothenburg (Wümme) </dt> <dd> Starting point is<br> Schlossplatz<br> Nienburg <iframe src="https://www.komoot.com/de-de/tour/2874378512/embed?share_token=azYwp3gt3Mt7uTGsIuXONaWtiMGLYhyrO92fNLej6WZSenXjp5&amp;profile=1" width="100%" height="700" frameborder="0" scrolling="no"></iframe> </dd> <dt>May 31, 13:30 Rothenburg (Wümme) → Hamburg/Hagenbeck </dt> <dd> Starting point is<br> Große Str. 1<br> Rothenburg (Wümme) <iframe src="https://www.komoot.com/de-de/tour/2874383615/embed?share_token=aGOT2T4MDlEi8is6ClUl3Z6v3KT8gWnX2MGhYORqeQsmqdQsH7&amp;profile=1" width="100%" height="700" frameborder="0" scrolling="no"></iframe> </dd> <dt>June 1, 09:30 Hamburg → Aukrug </dt> <dd> Starting point is<br> Tierpark Hagenbeck<br> Lokstedter Grenzstraße 2<br> Hamburg <iframe src="https://www.komoot.com/de-de/tour/2874384244/embed?share_token=aaRfo8uzsfbkycXx4gAsY46U2uwTHV62ajlZy45Zv0auv5rP5O&amp;profile=1" width="100%" height="700" frameborder="0" scrolling="no"></iframe> </dd> <dt>June 1, 13:30 Aukrug → Schleswig </dt> <dd> Starting point is<br> Fahrrad Raststation und Eisdiele<br> Itzehoer Str. 2<br> Aukrug <iframe src="https://www.komoot.com/de-de/tour/2874385215/embed?share_token=a894QQDW0C2bD19Iv80Tjg9Pv2IbBor62XUoWKo1sMa0UE0AHy&amp;profile=1" width="100%" height="700" frameborder="0" scrolling="no"></iframe> </dd> <dt>June 2, 09:30 Schleswig → Flensburg </dt> <dd> Starting point is<br> F-Ritz Hotel Schleswig<br> Friedrichstr. 100<br> Schleswig <iframe src="https://www.komoot.com/de-de/tour/2874386024/embed?share_token=aSY9TP25GZnYk0qbdkq4mVsitO44twvyI5EBzH3fK23FJOrjZG&amp;profile=1" width="100%" height="700" frameborder="0" scrolling="no"></iframe> </dd> <dt>June 2, 12:00 Flensburg → Vejle </dt> <dd> Starting point is<br> Ben´s Fischhütte<br> Museumshafen<br> Flensburg <iframe src="https://www.komoot.com/de-de/tour/2874387064/embed?share_token=a5jKvS14D4rDht39G5Ou3OtrymKBOyRwnsF4rNp8n304Ld2zVD&amp;profile=1" width="100%" height="700" frameborder="0" scrolling="no"></iframe> </dd> <dt>June 3, 10:00 Vejle → Aarhus </dt> <dd> Starting point is<br> Willy Sørensens Plads 3<br> 7100 Vejle <iframe src="https://www.komoot.com/de-de/tour/2874389414/embed?share_token=aXaKnPFzRs3ZrRZOJBAmxhyoOQsjPN6pk1Nxi3jQGE2kbiCHI8&amp;profile=1" width="100%" height="700" frameborder="0" scrolling="no"></iframe> </dd> <dt>June 4, 15:00 Our final destination and the beginning of the <a href="https://4days-favrskov.dk">4Days of Favrskov</a> in Aarhus</dt> </dl> <figure><img src="https://ulfschneider.io/img/0P_1ylXRJW-200.webp" alt="" loading="lazy" decoding="async" width="1600" height="726" srcset="https://ulfschneider.io/img/0P_1ylXRJW-200.webp 200w, https://ulfschneider.io/img/0P_1ylXRJW-1600.webp 1600w" sizes="100vw"></figure>

Come, join our cycling route from Paderborn to Aarhus appeared on ulfschneider.io.

Reply via email

 Coziness 2026-04-03T08:14:01Z https://ulfschneider.io/2026-03-09-coziness/ <figure> <img src="https://ulfschneider.io/img/bjhgYUKAxQ-200.webp" alt="" loading="lazy" decoding="async" width="1200" height="1200" srcset="https://ulfschneider.io/img/bjhgYUKAxQ-200.webp 200w, https://ulfschneider.io/img/bjhgYUKAxQ-1200.webp 1200w" sizes="100vw"> </figure>

Coziness appeared on ulfschneider.io.

Reply via email

 Laughter 2026-02-03T18:46:40Z https://ulfschneider.io/2026-02-03-laughter/ <figure> <img src="https://ulfschneider.io/img/9GWAE6IfH9-200.webp" alt="" loading="lazy" decoding="async" width="1200" height="1200" srcset="https://ulfschneider.io/img/9GWAE6IfH9-200.webp 200w, https://ulfschneider.io/img/9GWAE6IfH9-1200.webp 1200w" sizes="100vw"> </figure>

Laughter appeared on ulfschneider.io.

Reply via email

 Accessibility for everyone 2026-02-03T18:46:33Z https://ulfschneider.io/2026-02-03-accessibility-for-everyone/ <p><a href="https://accessibilityforeveryone.site"><cite>Accessibility for everyone</cite></a> by Laura Kalbag is now available online for free.</p>

Accessibility for everyone appeared on ulfschneider.io.

Reply via email

 pure prompt 2026-01-28T06:06:31Z https://ulfschneider.io/2026-01-27-pure/ <p>Pretty, minimal and fast ZSH prompt</p> <p><a href="https://github.com/sindresorhus/pure"><cite>pure</cite></a> by Sindre Sorhus is a prompt enhancement for ZSH.</p> <figure class="max-w-sm"> <img src="https://ulfschneider.io/img/cLqdfO9FTf-200.webp" alt="" loading="lazy" decoding="async" width="724" height="138" srcset="https://ulfschneider.io/img/cLqdfO9FTf-200.webp 200w, https://ulfschneider.io/img/cLqdfO9FTf-724.webp 724w" sizes="100vw"> <figcaption>My pure prompt. I like to see my current folder and the Git status in a dedicated line, followed by a new line for inputting my commands.</figcaption> </figure> <p>My settings in the <code>.zshrc</code> file:</p> <pre class="language-sh" data-language="Shell"><code class="language-sh"><span class="token comment"># .zshrc </span> <span class="token comment"># Pure prompt</span> <span class="token assign-left variable">fpath</span><span class="token operator">+=</span><span class="token punctuation">(</span><span class="token string">"<span class="token variable"><span class="token variable">$(</span>brew <span class="token parameter variable">--prefix</span><span class="token variable">)</span></span>/share/zsh/site-functions"</span><span class="token punctuation">)</span> autoload <span class="token parameter variable">-U</span> promptinit<span class="token punctuation">;</span> promptinit prompt pure zstyle :prompt:pure:path color cyan zstyle :prompt:pure:git:branch color yellow</code></pre>

pure prompt appeared on ulfschneider.io.

Reply via email

 Learning Go 2026-02-14T11:47:37Z https://ulfschneider.io/2026-01-24-golang-resources/ <p>I find these resources useful for learning Go</p> <div class="table-of-contents"><ol><li><a href="https://ulfschneider.io/2026-01-24-golang-resources/#go">Go</a></li><li><a href="https://ulfschneider.io/2026-01-24-golang-resources/#test">Test</a></li><li><a href="https://ulfschneider.io/2026-01-24-golang-resources/#error-handling">Error handling</a></li><li><a href="https://ulfschneider.io/2026-01-24-golang-resources/#vulnerability-management">Vulnerability management</a></li><li><a href="https://ulfschneider.io/2026-01-24-golang-resources/#folder-structure">Folder structure</a></li><li><a href="https://ulfschneider.io/2026-01-24-golang-resources/#logging">Logging</a></li><li><a href="https://ulfschneider.io/2026-01-24-golang-resources/#json">JSON</a></li></ol></div> <h2 id="go" tabindex="-1">Go</h2> <ul> <li><a href="https://gobyexample.com"><cite>gobyexample.com</cite></a> excellent examples with short and clear explanations, by <a href="https://markmcgranaghan.com">Mark McGranaghan</a> and <a href="https://eli.thegreenplace.net">Eli Bendersky</a></li> <li><a href="https://threedots.tech/go-in-one-evening/"><cite>Go in one evening</cite></a> a practical course for experienced programmers. It´s excellent, but it took me more than one evening.</li> <li><a href="https://www.youtube.com/@FloWoelki"><cite>youtube.com/@FloWoelki</cite></a> watch and listen while Florian is coding</li> <li><a href="https://google.github.io/styleguide/go/index"><cite>Google Go Styleguide</cite></a> <q>The Go Style Guide and accompanying documents codify the current best approaches for writing readable and idiomatic Go</q> at Google. It has three parts: the style guide, a more verbose style decisions, and best practices.</li> <li><a href="https://100go.co"><cite>100 Go mistakes and how to avoid them</cite></a> a summary of the original book with the same title by Teiva Harsanyi</li> </ul> <h2 id="test" tabindex="-1">Test</h2> <p><a href="https://www.youtube.com/watch?v=TG5cRcBihCM"><cite>Testen in Go (Golang) in 90 Minuten // deutsch</cite></a>, Golo Roden, the native web GmbH</p> <h2 id="error-handling" tabindex="-1">Error handling</h2> <p><a href="https://www.jetbrains.com/guide/go/tutorials/handle_errors_in_go/"><cite>How to Handle Errors in Go</cite></a>, JetBrains blog</p> <h2 id="vulnerability-management" tabindex="-1">Vulnerability management</h2> <p><a href="https://pkg.go.dev/golang.org/x/vuln/cmd/govulncheck"><cite>govulncheck</cite></a> Go documentation</p> <h2 id="folder-structure" tabindex="-1">Folder structure</h2> <ul> <li><a href="https://go.dev/doc/modules/layout"><cite>Organizing a Go module</cite></a> the official Go guide</li> <li><a href="https://github.com/golang-standards/project-layout"><cite>Standard Go Project Layout</cite></a></li> <li><a href="https://www.youtube.com/watch?v=2k0GYWBGGFM"><cite>Go (Golang): Endlich Struktur im Code // deutsch</cite></a>, Golo Roden, the native Web GmbH, the recommendation is to not create a pkg folder</li> <li><a href="https://medium.com/golang-learn/go-project-layout-e5213cdcfaa2"><cite>Go Project Layout</cite></a> article on Medium by Kyle C. Quest</li> <li><a href="https://bontus.medium.com/embrace-the-internal-package-a-go-project-structure-for-clarity-2207bacb4bed"><cite>Embrace the Internal Package: A Go-Project Structure for Clarity.</cite></a> article on Medium by Ikwechegh Ukandu</li> </ul> <h2 id="logging" tabindex="-1">Logging</h2> <ul> <li><a href="https://betterstack.com/community/guides/logging/logging-in-go/"><cite>Logging in Go with Slog: The Ultimate Guide</cite></a> a betterstack.com article by Ayooluwa Isaiah</li> <li><a href="https://betterstack.com/community/guides/logging/golang-contextual-logging/"><cite>Contextual Logging in Go with Slog</cite></a> a betterstack.com article by Percy Bolmér</li> <li><a href="https://dusted.codes/creating-a-pretty-console-logger-using-gos-slog-package"><cite>Creating a pretty console logger using Go's slog package</cite></a>, a concrete explanation resulting in a pretty useful slog TextHandler with colored console output that does not add any dependency to your code, Dusted Codes</li> <li><a href="https://github.com/golang/example/tree/master/slog-handler-guide"><cite>A guide to writing slog handlers</cite></a>, Jonathan Amsterdam, jba@google.com</li> <li><a href="https://pkuebler.de/posts/slog-glossy/"><cite>Slog Handler für bessere Lesbarkeit in lokalen Logs</cite></a></li> <li><a href="https://medium.com/@thisara.weerakoon2001/implementing-a-dynamic-package-level-logger-in-go-949d573a2192"><cite>Implementing a Dynamic Package-Level Logger in Go</cite></a> a medium.com article by Thisara Weerakoon, this shows how to dynamically set log levels for certain packages and touches the <a href="https://github.com/knadh/koanf"><cite>koanf</cite></a> package to manage the logging configuration</li> </ul> <h2 id="json" tabindex="-1">JSON</h2> <ul> <li>Convert JSON to Go structs with <a href="https://mholt.github.io/json-to-go/"><cite>JSON to Go</cite></a></li> </ul>

Learning Go appeared on ulfschneider.io.

Reply via email

 Creating a scroll-spy with two lines of CSS 2026-01-20T07:35:35Z https://ulfschneider.io/2026-01-20-scroll-spy/ <p>Two incredible lines of CSS code to reflect the current scroll position in a table of contents, by Una Kravets: <a href="https://una.im/scroll-target-group/"><cite>Creating a scroll-spy with 2 lines of CSS</cite></a>. This required JavaScript coding in the past.</p>

Creating a scroll-spy with two lines of CSS appeared on ulfschneider.io.

Reply via email

 Good Luck and Success 2026-01-01T13:16:23Z https://ulfschneider.io/2026-01-01-good-luck-and-success/ <figure> <img src="https://ulfschneider.io/img/oVszQFleUw-200.webp" alt="" loading="lazy" decoding="async" width="1200" height="1200" srcset="https://ulfschneider.io/img/oVszQFleUw-200.webp 200w, https://ulfschneider.io/img/oVszQFleUw-1200.webp 1200w" sizes="100vw"> </figure>

Good Luck and Success appeared on ulfschneider.io.

Reply via email

 bikeinsights.com 2025-12-28T06:37:22Z https://ulfschneider.io/2025-12-27-bike-insights/ <p><a href="https://bikeinsights.com"><cite>bikeinsights.com</cite></a> offers a bike geometry database that allows to search and compare bike frames. Their blog article <a href="https://blog.bikeinsights.com/how-bikes-are-measured/"><cite>How Bikes are Measured</cite></a> made me aware normalizing the different ways of measuring bikes is absolutely required to come to meaningful comparisons of bike frames.</p>

bikeinsights.com appeared on ulfschneider.io.

Reply via email

 Sentimental Chaos 2025-12-23T14:38:49Z https://ulfschneider.io/2025-12-23-sentimental-chaos/ <figure> <img src="https://ulfschneider.io/img/_V0enbw67o-200.webp" alt="" loading="lazy" decoding="async" width="900" height="1200" srcset="https://ulfschneider.io/img/_V0enbw67o-200.webp 200w, https://ulfschneider.io/img/_V0enbw67o-900.webp 900w" sizes="100vw"> <figcaption>Sentimental Chaos</figcaption> </figure>

Sentimental Chaos appeared on ulfschneider.io.

Reply via email

 qrvc 2026-01-07T13:43:04Z https://ulfschneider.io/tools/qrvc/ <p>Use the command line to make a QR code from a vCard</p> <p><a href="https://pkg.go.dev/github.com/ulfschneider/qrvc"><cite>qrvc</cite></a> is a command line tool that allows to prepare a QR code from vCard data.</p> <figure> <img src="https://ulfschneider.io/img/LZAIatoE45-200.webp" alt="" loading="lazy" decoding="async" width="400" height="400" srcset="https://ulfschneider.io/img/LZAIatoE45-200.webp 200w, https://ulfschneider.io/img/LZAIatoE45-400.webp 400w" sizes="100vw"> <figcaption>A QR code for a fictional vCard</figcaption> </figure> <p>One way to create the QR code is by providing a vCard file as input and process that. If you do not have a vCard file, <strong>qrvc</strong> will ask you for data input and will then create a vCard file and a QR code for you.</p> <p>Your data remains on your computer and nowhere else.</p> <figure class="max-w-prose"> <img src="https://ulfschneider.io/img/pceeBgJtmS-200.webp" alt="" loading="lazy" decoding="async" width="1090" height="1012" srcset="https://ulfschneider.io/img/pceeBgJtmS-200.webp 200w, https://ulfschneider.io/img/pceeBgJtmS-1090.webp 1090w" sizes="100vw"> <figcaption><strong>qrvc</strong> in interactive mode</figcaption> </figure> <h2 id="installation" tabindex="-1">Installation</h2> <h3 id="install-with-homebrew-on-mac-and-linux" tabindex="-1">Install with Homebrew on Mac and Linux</h3> <pre class="language-sh" data-language="Shell"><code class="language-sh">brew tap ulfschneider/tap brew <span class="token function">install</span> <span class="token parameter variable">--cask</span> qrvc</code></pre> <h3 id="install-with-go-on-any-machine-that-has-go-on-board" tabindex="-1">Install with Go on any machine that has Go on board</h3> <pre class="language-sh" data-language="Shell"><code class="language-sh">go <span class="token function">install</span> github.com/ulfschneider/qrvc@latest</code></pre> <h3 id="manual-install" tabindex="-1">Manual install</h3> <p>You can also download the appropriate binary directly from GitHub Releases:</p> <p>Visit <a href="https://github.com/ulfschneider/qrvc/releases">github.com/ulfschneider/qrvc/releases</a></p> <ol> <li>Download the archive matching your OS and architecture</li> <li>Extract it</li> <li>Move the binary to a directory included in your PATH (for example /usr/local/bin)</li> </ol> <h3 id="verify-the-installation" tabindex="-1">Verify the installation</h3> <pre class="language-sh" data-language="Shell"><code class="language-sh">qrvc <span class="token parameter variable">--version</span></code></pre> <p>This command should print out the qrvc version you are using.</p> <h2 id="usage" tabindex="-1">Usage</h2> <p>After installation, start the tool by typing:</p> <pre class="language-sh" data-language="Shell"><code class="language-sh">qrvc</code></pre> <p>When using the <code>-h</code> flag, you get information about how to use it:</p> <pre class="language-sh" data-language="Shell"><code class="language-sh">qrvc <span class="token parameter variable">-h</span></code></pre>

qrvc appeared on ulfschneider.io.

Reply via email

 Freeze 2025-11-28T05:37:37Z https://ulfschneider.io/2025-11-23-freeze/ <p>Make images from text</p> <p><a href="https://github.com/charmbracelet/freeze"><cite>Freeze</cite></a> can create images from text files and from shell command output. E.g.</p> <pre class="language-sh" data-language="Shell"><code class="language-sh">freeze <span class="token parameter variable">--execute</span> <span class="token string">"ls -ls"</span> <span class="token parameter variable">-o</span> freeze-ls-ls.png</code></pre> <p>will create a file <code>freeze-ls-ls.png</code> that shows the result of the <code>ls -ls</code> command, which looks like:</p> <figure class="max-w-prose"> <img src="https://ulfschneider.io/img/3bLZaNAsQ9-200.webp" alt="" loading="lazy" decoding="async" width="2207" height="468" srcset="https://ulfschneider.io/img/3bLZaNAsQ9-200.webp 200w, https://ulfschneider.io/img/3bLZaNAsQ9-2207.webp 2207w" sizes="100vw"> <figcaption>Output of <code>freeze --execute "ls -ls" -o freeze-ls-ls.png</code></figcaption> </figure> <p>You can get an image of a text file, like a <code>go.mod</code> file, as well. Issue the command</p> <pre class="language-sh" data-language="Shell"><code class="language-sh">freeze go.mod <span class="token parameter variable">-o</span> freeze-go-mod.png</code></pre> <p>and get the following image:</p> <figure class="max-w-prose"> <img src="https://ulfschneider.io/img/lxLgYFILF1-200.webp" alt="" loading="lazy" decoding="async" width="2840" height="1744" srcset="https://ulfschneider.io/img/lxLgYFILF1-200.webp 200w, https://ulfschneider.io/img/lxLgYFILF1-2840.webp 2840w" sizes="100vw"> <figcaption>Output of <code>freeze go.mod -o freeze-go-mod.png</code></figcaption> </figure> <p>Because Freeze is written in Go, you can use it on any operating system.</p>

Freeze appeared on ulfschneider.io.

Reply via email

 Adjust pointer size and pointer color on a Mac 2025-11-15T06:31:34Z https://ulfschneider.io/2025-11-15-pointer-color/ <p>I often struggle to spot the current mouse pointer location. By default the pointer is small and the white color does not have enough contrast. To help with that I change those settings on MacOS in the menu:</p> <p>System settings → Accessibility → Display → Pointer</p> <p>There it is possible to set size, border color and fill color for the pointer.</p>

Adjust pointer size and pointer color on a Mac appeared on ulfschneider.io.

Reply via email

 One-time passcodes without JavaScript 2025-11-12T16:58:13Z https://ulfschneider.io/2025-11-12-simple-otps/ <p>Tyler Sticka shows how to do OTP´s (one-time passcodes) in his article <a href="https://cloudfour.com/thinks/simple-one-time-passcode-inputs/"><cite>Simple One-Time Passcode Inputs</cite></a>. The key element is the <code>autocomplete=&quot;one-time-code&quot;</code> setting on the <code>input</code> element, which adds support for autofill from password managers or via SMS. The other attributes make typing in the code more convenient and activate client-side input validation:</p> <pre class="language-html" data-language="HTML"><code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</span> <span class="token attr-name">action</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>…<span class="token punctuation">"</span></span> <span class="token attr-name">method</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>post<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span><span class="token punctuation">></span></span>Verify Account<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>otp<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> Enter the 6-digit numeric code sent to +1 (555) 555-5555 <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>otp<span class="token punctuation">"</span></span> <span class="token attr-name">inputmode</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>numeric<span class="token punctuation">"</span></span> <span class="token attr-name">autocomplete</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>one-time-code<span class="token punctuation">"</span></span> <span class="token attr-name">maxlength</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>6<span class="token punctuation">"</span></span> <span class="token attr-name">pattern</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>\d{6}<span class="token punctuation">"</span></span> <span class="token attr-name">required</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span><span class="token punctuation">></span></span> Continue <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>…<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> Try another way… <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form</span><span class="token punctuation">></span></span></code></pre> <p>One by one:</p> <dl> <dt><code>type=&quot;text&quot;</code></dt> <dd>OTP´s appear as a number, but a six digit <code>000004</code> is not the a countable number, but a sequence of 6 digits, therefore the OTP is treated as text</dd> <dt><code>inputmode=&quot;numeric&quot;</code></dt> <dd>enable the numeric virtual keyboard on touch devices</dd> <dt><code>autocomplete=&quot;one-time-code&quot;</code></dt> <dd>this add´s support for <a href="https://cloudfour.com/thinks/autofill-what-web-devs-should-know-but-dont/">autofill</a> from password managers or via <a href="https://web.dev/articles/sms-otp-form">SMS</a></dd> <dt><code>maxlength=&quot;6&quot;</code></dt> <dd>prevent users putting in more than 6 digits</dd> <dt><code>pattern=&quot;\d{6}&quot;</code></dt> <dd>we want 6 digits, and no other values</dd> <dt><code>required</code></dt> <dd>make the field mandatory</dd> </dl>

One-time passcodes without JavaScript appeared on ulfschneider.io.

Reply via email

 SmoothCSV 2025-10-17T05:44:25Z https://ulfschneider.io/2025-10-17-smoothcsv/ <p>A cross-platform editor for <code>.csv</code> files</p> <p>This feels like Markdown for spreadsheets: <a href="https://smoothcsv.com"><cite>SmoothCSV</cite></a> is a cross-platform app made by <a href="https://github.com/kohii">kohii</a>, which allows to comfortably edit <code>.csv</code> files.</p> <p><code>.csv</code> files are text files that can be created, read, and shared with any tool capable of handling text. SmoothCSV can pick up and create <code>.csv</code> files with a comprehensive editing experience – on Mac and Windows. SmoothCSV is fast, probably because it´s written in Rust. kohii explains how he created the tool in his dev.to article <a href="https://dev.to/kohii/the-technology-behind-smoothcsv-the-ultimate-csv-editor-3lg0"><cite>The Technology Behind SmoothCSV - The Ultimate CSV Editor</cite></a>.</p>

SmoothCSV appeared on ulfschneider.io.

Reply via email

 Build possibility 2026-01-07T09:27:10Z https://ulfschneider.io/2025-10-17-build-possibility/ <blockquote> <p>Buy stability. Build possibility.</p> <footer>Ben Werdmüller, <a href="https://werd.io/build-what-makes-you-special-buy-the-rest/"><cite>Build what makes you special. Buy the rest.</cite></a></footer> </blockquote> <p>This sounds true! When deciding to buy or to build a software solution, build what makes you special, what differentiates you.</p> <blockquote> <p>Getting your build vs buy balance right is how you achieve table stakes: stable infrastructure, reliable publishing, sustainable engineering. But that sets you up for <em>today</em>. In order for any business to future-proof itself, it needs to make a bet on what the future will look like and build for <em>that</em>.</p> <footer>Ben Werdmüller</footer> </blockquote>

Build possibility appeared on ulfschneider.io.

Reply via email

 Plex 2025-10-24T20:00:38Z https://ulfschneider.io/tools/plex/ <p>The iA Presenter theme based on the IBM Plex® typeface</p> <figure> <img src="https://ulfschneider.io/img/J-TDPU_FNh-200.webp" alt="" loading="lazy" decoding="async" width="2400" height="1452" srcset="https://ulfschneider.io/img/J-TDPU_FNh-200.webp 200w, https://ulfschneider.io/img/J-TDPU_FNh-2400.webp 2400w" sizes="100vw"> <figcaption>Plex is a custom theme for iA Presenter</figcaption> </figure> <p><a href="https://ia.net/presenter">iA Presenter</a> is my favorite software for writing and presenting a <em>story</em>. Presenter comes with a set of themes to provide a suitable visual style for your message. You can add your own <em>custom themes</em> to fit the tool even better to your needs. That´s what I did with Plex: It is a custom iA Presenter theme based on the IBM Plex® typeface with vibrant dynamic background colors.</p> <p>See it here: <a href="https://ulfschneider.io/assets/plex/"><strong>Plex in action</strong></a>!</p> <p>Download Plex at <a href="https://github.com/ulfschneider/plex"><cite>github.com/ulfschneider/plex</cite></a>.</p> <p>Tell your story.</p>

Plex appeared on ulfschneider.io.

Reply via email

 fork . 2025-10-15T05:56:04Z https://ulfschneider.io/2025-10-15-fork-from-the-terminal/ <p>When you are in the Terminal on a Mac inside of a Git repository, and you use the <a href="https://git-fork.com">Fork Git client</a>, it´s perfectly doable to open the current repo in Fork by issuing the command:</p> <pre class="language-sh" data-language="Shell"><code class="language-sh">fork <span class="token builtin class-name">.</span></code></pre> <p>As a one-time prerequisite, install the Fork Command Line Tools from the Fork menu bar by navigating to Fork → Install Command Line Tools.</p> <p>From any folder within the terminal, to open the current folder in the Finder, issue the command:</p> <pre class="language-sh" data-language="Shell"><code class="language-sh"><span class="token function">open</span> <span class="token builtin class-name">.</span></code></pre>

fork . appeared on ulfschneider.io.

Reply via email

 Pure Paste 2025-10-01T05:46:15Z https://ulfschneider.io/2025-10-01-pure-paste/ <p>The tiny <em>Sindre Sorhus-style</em> app <a href="https://sindresorhus.com/pure-paste"><cite>Pure Paste</cite></a> sits in the menu bar and clears the formatting of text pasted from the clipboard.</p> <p>For example, you can paste text into an email and avoid polluting your message with the source formatting. That makes a lot of sense to me and is probably useful in any text-authoring situation.</p> <p>The app can do even more clever things when pasting. From the following list of options I have activated the ones marked with (on):</p> <ul> <li>Preserve links</li> <li>Remove tracking parameters from URLs (on)</li> <li>Trim leading and trailing whitespace</li> <li>Normalize quotes (on)</li> <li>Normalize newlines (on)</li> <li>Normalize unordered lists (on)</li> <li>Remove invisible characters (on)</li> <li>Remove footnote references (on)</li> <li>Remove mailto: prefix from email addresses (on)</li> </ul>

Pure Paste appeared on ulfschneider.io.

Reply via email

 Unknown at rules with Tailwind CSS in Zed 2025-09-27T16:29:36Z https://ulfschneider.io/2025-09-25-unknown-at-rule/ <p>My Zed editor was complaining about unknown at rules (like <code>@apply</code>) when using Tailwind CSS.</p> <figure class="max-w-prose"> <img src="https://ulfschneider.io/img/1UJeejr0hJ-200.webp" alt="" loading="lazy" decoding="async" width="1516" height="214" srcset="https://ulfschneider.io/img/1UJeejr0hJ-200.webp 200w, https://ulfschneider.io/img/1UJeejr0hJ-1516.webp 1516w" sizes="100vw"> <figcaption>Unknown at rule @apply</figcaption> </figure> <p>You can solve this issue by adding the following lines to your Zed <code>settings.json</code>:</p> <pre class="language-json" data-language="JSON"><code class="language-json"><span class="token property">"languages"</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token property">"CSS"</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token property">"language_servers"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"tailwindcss-language-server"</span><span class="token punctuation">]</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span></code></pre>

Unknown at rules with Tailwind CSS in Zed appeared on ulfschneider.io.

Reply via email

 Riding with the RMC 2025-09-24T15:54:54Z https://ulfschneider.io/2025-09-18-riding-with-the-rmc/ <figure> <video controls=""> <source src="https://ulfschneider.io/assets/2025-09-18-riding-with-the-rmc.mp4" type="video/mp4"> </video> <figcaption>The high season of bike riding is ending. Yesterday, the RMC Schloss Neuhaus held its regular training session. Though I ride at the RTB in Borchen, the RMC welcomes guest riders, and we know each other from biking events, therefore I took a chance for a pleasant ride in the beautiful landscape with great company. </figcaption> </figure>

Riding with the RMC appeared on ulfschneider.io.

Reply via email

 Remove the pedals 2025-09-06T07:03:31Z https://ulfschneider.io/2025-09-06-remove-pedals/ <figure> <iframe width="560" height="315" src="https://www.youtube.com/embed/t42lXHGtUp4?si=5NuRlWjjy-mEkghQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen="" style="aspect-ratio:560/315; max-width:100%; height:auto; width:65ch;"></iframe> <figcaption> If you’ve ever wondered what the correct thread direction is to remove a pedal from a crank arm, this video is for you! Excellent practical advice. <a href="https://youtu.be/t42lXHGtUp4?si=ym0KYXjHmcLWloEb">Get it right every time</a>.</figcaption> </figure>

Remove the pedals appeared on ulfschneider.io.

Reply via email

 Tuesday evening 2025-09-05T05:56:47Z https://ulfschneider.io/2025-09-05-tuesday-training-ride/ <p>My cycling club’s Tuesday training ride was exceptional this week. The beautiful light, mild temperature, and inspiring comrades made it unforgettable. We will meet again on Sunday, for the <a href="https://www.komoot.com/de-de/collection/3731022/-herbst-rtf-die-maehdreschertour-2025">Mähdrescher Tour</a>, organized by the RSG Harsewinkel.</p> <figure> <img src="https://ulfschneider.io/img/sKVdPytZNf-200.webp" alt="" loading="lazy" decoding="async" width="1200" height="900" srcset="https://ulfschneider.io/img/sKVdPytZNf-200.webp 200w, https://ulfschneider.io/img/sKVdPytZNf-1200.webp 1200w" sizes="100vw"> </figure> <figure> <img src="https://ulfschneider.io/img/GWFUuuWgTL-200.webp" alt="" loading="lazy" decoding="async" width="1200" height="900" srcset="https://ulfschneider.io/img/GWFUuuWgTL-200.webp 200w, https://ulfschneider.io/img/GWFUuuWgTL-1200.webp 1200w" sizes="100vw"> </figure> <figure> <img src="https://ulfschneider.io/img/3DY144ABbE-200.webp" alt="" loading="lazy" decoding="async" width="1200" height="900" srcset="https://ulfschneider.io/img/3DY144ABbE-200.webp 200w, https://ulfschneider.io/img/3DY144ABbE-1200.webp 1200w" sizes="100vw"> </figure>

Tuesday evening appeared on ulfschneider.io.

Reply via email

 Tools for Designers 2025-08-26T06:06:03Z https://ulfschneider.io/2025-08-26-tools-for-designers/ <p><a href="https://www.learnui.design/tools/"><cite>Tools for Designers</cite></a> provides great (and free) tools to help with colors and web typography:</p> <ul> <li><a href="https://www.learnui.design/tools/gradient-generator.html">Gradient Generator</a></li> <li><a href="https://www.learnui.design/tools/mesh-gradient-generator.html">Mesh Gradient Generator</a></li> <li><a href="https://www.learnui.design/tools/data-color-picker.html">Data Visualization Color Picker</a></li> <li><a href="https://www.learnui.design/tools/accessible-color-generator.html">Accessible Color Generator</a></li> <li><a href="https://www.learnui.design/tools/typography-tutorial.html">Interactive Typography Tutorial</a></li> </ul>

Tools for Designers appeared on ulfschneider.io.

Reply via email

 An official logo for CSS 2025-08-28T05:03:32Z https://ulfschneider.io/2025-08-26-css-logo/ <p>CSS, the <em>awesome</em> language that controls how HTML looks in the browser, <a href="https://github.com/CSS-Next/logo.css">has a new logo</a> . The background is <code>rebeccapurple</code>, which I find a <a href="https://meyerweb.com/eric/thoughts/2014/06/19/rebeccapurple/">beautiful color choice</a>.</p> <p>At some point there was the idea by Amit Sheen to spill the CSS text <a href="https://www.ondrejkonecny.com/blog/kind-of-rebeccapurple/">slightly out of the framing container</a>, which, as a nod to <a href="https://css-tricks.com/css-is-awesome/">CSS is Awesome</a>, I liked even more. It seems the participants of the discussion disliked the association of CSS with something unpredictable and chaotic, so they refrained from going into that direction. Unfortunately. Here is the <a href="https://github.com/CSS-Next/css-next/issues/105">discussion thread</a>.</p> <figure class="max-w-sm"> <picture><source type="image/webp" srcset="https://ulfschneider.io/img/q5hl2Gyv4G-200.webp 200w, https://ulfschneider.io/img/q5hl2Gyv4G-1000.webp 1000w" sizes="100vw"><img alt="" loading="lazy" decoding="async" src="https://ulfschneider.io/img/q5hl2Gyv4G-1000.svg" width="1000" height="1000"></picture> <figcaption>The official CSS logo</figcaption> </figure>

An official logo for CSS appeared on ulfschneider.io.

Reply via email

 Color Lisa 2025-08-26T06:11:27Z https://ulfschneider.io/2025-08-26-color-lisa/ <blockquote> <p><a href="https://colorlisa.com"><cite>colorlisa.com</cite></a> is a curated list of color palettes based on masterpieces of the worlds greatest artists. Each palette was painstakingly created by color obsessed designers, artists, museum curators, and masters of color theory. Palettes are constantly being added to help keep your designs colorful and fresh.</p> <footer><a href="https://www.mcguiremade.com">Ryan McGuire</a>, community artist and creator of Color Lisa</footer></blockquote>

Color Lisa appeared on ulfschneider.io.

Reply via email

 Lidl Deutschland Tour – Course Festival in Borchen 2025-08-22T05:11:35Z https://ulfschneider.io/2025-08-22-deutschland-tour-borchen/ <figure> <img src="https://ulfschneider.io/img/ZYxgkZCIg8-200.webp" alt="" loading="lazy" decoding="async" width="1754" height="2480" srcset="https://ulfschneider.io/img/ZYxgkZCIg8-200.webp 200w, https://ulfschneider.io/img/ZYxgkZCIg8-1754.webp 1754w" sizes="100vw"> <figcaption>The Lidl Deutschland Tour passes through Borchen today. On this occasion, the Rad-Treff Borchen is hosting a course festival with delicious food and drinks at the parish hall in Borchen, right next to the route. Come, have a good time and see the racers passing by. More information on the <a href="https://rad-treff-borchen.de/deutschland-tour-streckenfest/">Rad-Treff Borchen</a> website and on <a href="https://www.deutschland-tour.com/">deutschland-tour.com</a> </figcaption> </figure>

Lidl Deutschland Tour – Course Festival in Borchen appeared on ulfschneider.io.

Reply via email

 Text-to-Chart 2025-09-04T06:08:08Z https://ulfschneider.io/2025-08-16-text-to-chart/ <p><em>Text-to-chart</em> is the process of describing a diagram in text form, and letting software render the actual output. I´ve been investigating the topic by examining <a href="https://mermaid.js.org">Mermaid</a>, a free software library created in 2014 by Knut Sveidqvist with a focus on <em>development related charts</em>, and <a href="https://echarts.apache.org/">ECharts</a>, a flexible general-purpose diagramming solution that follows the <em>code-to-chart</em> approach. Unlike Mermaid, which uses a domain-specific language, ECharts is relying on JavaScript to describe the diagrams it renders.</p> <p>Along the way I couldn´t resist to write two markdown-it plugins, allowing to integrate the charting solutions into your <a href="https://daringfireball.net/projects/markdown/syntax">Markdown</a> writing:</p> <ul> <li><a href="https://www.npmjs.com/package/markdown-it-mermaid-server">markdown-it-mermaid-server</a>, and</li> <li><a href="https://www.npmjs.com/package/markdown-it-responsive-echarts">markdown-it-responsive-echarts</a>.</li> </ul> <p>This document is my current state of learning the topic. All example charts are rendered by the mentioned plugins.</p> <div class="table-of-contents"><ol><li><a href="https://ulfschneider.io/2025-08-16-text-to-chart/#text-to-chart%2C-what-is-it-good-for%3F">Text-to-chart, what is it good for?</a></li><li><a href="https://ulfschneider.io/2025-08-16-text-to-chart/#could-there-be-problems%3F">Could there be problems?</a></li><li><a href="https://ulfschneider.io/2025-08-16-text-to-chart/#mermaid">Mermaid</a><ol><li><a href="https://ulfschneider.io/2025-08-16-text-to-chart/#mermaid-flowchart">Mermaid Flowchart</a></li><li><a href="https://ulfschneider.io/2025-08-16-text-to-chart/#mermaid-radar-chart">Mermaid Radar Chart</a></li><li><a href="https://ulfschneider.io/2025-08-16-text-to-chart/#mermaid-sankey-chart">Mermaid Sankey Chart</a></li><li><a href="https://ulfschneider.io/2025-08-16-text-to-chart/#mermaid-pie-chart">Mermaid Pie Chart</a></li><li><a href="https://ulfschneider.io/2025-08-16-text-to-chart/#mermaid-xy-chart">Mermaid XY Chart</a></li><li><a href="https://ulfschneider.io/2025-08-16-text-to-chart/#mermaid-chart-appearance">Mermaid Chart Appearance</a></li></ol></li><li><a href="https://ulfschneider.io/2025-08-16-text-to-chart/#echarts">ECharts</a><ol><li><a href="https://ulfschneider.io/2025-08-16-text-to-chart/#echarts-pie-chart">ECharts Pie Chart</a></li><li><a href="https://ulfschneider.io/2025-08-16-text-to-chart/#echarts-xy-chart">ECharts XY Chart</a></li><li><a href="https://ulfschneider.io/2025-08-16-text-to-chart/#echarts-radar-chart">ECharts Radar Chart</a></li><li><a href="https://ulfschneider.io/2025-08-16-text-to-chart/#echarts-sankey-chart">ECharts Sankey Chart</a></li><li><a href="https://ulfschneider.io/2025-08-16-text-to-chart/#echarts-large-area-chart">ECharts Large Area Chart</a></li></ol></li><li><a href="https://ulfschneider.io/2025-08-16-text-to-chart/#conclusion">Conclusion</a></li></ol></div> <h2 id="text-to-chart%2C-what-is-it-good-for%3F" tabindex="-1">Text-to-chart, what is it good for?</h2> <p>The idea of creating charts from text is appealing to me since I got aware of Mermaid several years ago. When creating output for the web by writing Markdown, text-to-chart has similar advantages as <a href="https://daringfireball.net/projects/markdown/syntax">Markdown</a>.</p> <ul> <li><strong>Use your environment</strong>: Write chart definitions with any text editor, which means, you can stay in your familiar writing environment without installing additional software to create the charts.</li> <li><strong>Quick</strong>: Save time because your focus is on data, content and writing, and not on formatting. It´s important to mention, the time-saving aspect is only achieved if the text-to-chart software suits your context in terms of syntax and available diagram types!</li> <li><strong>Ideal web output</strong>: The charts can be created in a web-friendly output format – in the case of Mermaid it can be SVG, PNG or PDF. SVG, I believe, is a good starting point for charts on the web, because it is lightweight and scales well up and down.</li> <li><strong>Standardized output</strong>: The resulting charts have a standardized appearance and can be themed to a certain look, which means you can fit the charts into your design language. This again might help to improve shared understanding in collaborative contexts, because even with multiple people creating charts, the charts are rendered by the same rules and thus create a kind of a shared language.</li> <li><strong>Up-to-date charts</strong>: The possibility of quick text-based changes leading to optimal output rendering helps to avoid what the Mermaid creator Knut Sveidqvist calls <em>doc-rot,</em> the gap between a current development state and the outdated diagram documentation aiming to describe that state. This gives a hint that Mermaid has a tendency to provide diagrams that fit well into the software development domain, like flowcharts or sequence diagrams. Other text-to-chart software can have a different focus and produce different diagram types with the same general advantages for your workflow. The benefit of always having up-to-date charts published in the correct standardized look on even a large website is huge, in my view.</li> <li><strong>Version control</strong>: The chart definitions are made of text and as such can be versioned in an excellent way by Git.</li> <li><strong>Fast and lightweight delivery</strong>: Sometimes the charts can be rendered as part of the build process of a static website on the server, which means users get the charts as quick and as lean as possible delivered to their web browsers, without the need to run JavaScript on the browser. This can be done with Mermaid and it makes sense in that case, because Mermaid charts do not offer options for interactive changes.</li> <li><strong>Interaction</strong>: When the charts are rendered by JavaScript on the browser client, as opposed to the server, you can have other advantages, like interactive charts, allowing to filter out certain visualization aspects to analyze the data. ECharts delivers charts this way.</li> </ul> <h2 id="could-there-be-problems%3F" tabindex="-1">Could there be problems?</h2> <p>There can be downsides.</p> <ul> <li><strong>Syntax</strong>: The syntax of text-to-chart, in this case the Mermaid-syntax, as simple as the maintainers are aiming to keep it, takes time to learn. I sometimes have to visit the Mermaid website to understand how to achieve certain results. Same comes true with code-to-chart in ECharts. There are certain building blocks which appear repeatedly, which helps a lot getting into the concepts, but the resulting charts can cover such a wide range of visualization variants that it´s natural the code handling requires learning.</li> <li><strong>Feedback loop</strong>: When rendering the charts within the build process of a static website, the feedback cycle to see what chart is getting produced by processing your textual definition is slowed down, because every change of the chart definition requires a build step to get the chart results. To overcome this problem, Mermaid has a free online editor <a href="https://mermaid.live/">mermaid.live</a> which you can use to set up diagrams and see immediately how your chart does look like. Once you have your desired result, you can copy your chart definition and paste it into the final location. ECharts is the same. Their online editor is <a href="https://echarts.apache.org/examples/editor.html">echarts.apache.org/examples/editor.html</a>.</li> <li><strong>Software complexity</strong>: Generating charts at build time or at run time is more complex than creating an image once and referencing that image in your website. You can be sure a web browser is able to visualize a .png image or a .jpg image 20 years into the future without the need for you to ever touch it. Generating charts on the other hand will touch your chart definition with every build or with every page view and will carry out computational tasks to translate your text into a graphic. Sure there are chances something might break and your users will end up seeing no chart at all. You have to have your software stack under control to keep this in a working state.</li> </ul> <h2 id="mermaid" tabindex="-1">Mermaid</h2> <p>Mermaid has its roots in creating <em>development charts</em> from text, like flowcharts, sequence diagrams, and state diagrams. The mind map chart can as well be seen to be in this domain. A strength of Mermaid is the lean syntax for describing the charts, and Sveidqvist´s intent to fight doc-rot is well addressed in my view. There are good ideas in Mermaid, but the actual execution could be more standardized. The different chart types sometimes appear to me as not generated by the same software but by different software stacks.</p> <p>Mermaid supports class diagrams, but generating them directly from your code base with a different software might be more effective.</p> <h3 id="mermaid-flowchart" tabindex="-1">Mermaid Flowchart</h3> <p>You can create a flowchart by adding a few lines of text to your Markdown document, like below:</p> <pre class="language-markdown" data-language="Markdown"><code class="language-markdown"><span class="token code"><span class="token punctuation">```</span><span class="token code-language">mermaid</span> <span class="token code-block language-mermaid language-mermaid language-mermaid">flowchart LR start --> decision decision --> optionA &amp; optionB start(["Start"]) decision{"Decision"} optionA["Option A"] optionB["Option B"]</span> <span class="token punctuation">```</span></span></code></pre> <p>The above chart definition will produce the following diagram, and the simplicity of the creation is a source of joy to me.</p> <figure class="mermaid"><html><head></head><body><svg id="mermaid-hwlewqnilcww" width="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="flowchart" style="max-width: 431.4174499511719px;" viewBox="0.0000019073486328125 0 431.4174499511719 174" role="graphics-document document" aria-roledescription="flowchart-v2" aria-label="A flowchart starting at a node &amp;quot;Start&amp;quot;, flowing to a decision point &amp;quot;Decision&amp;quot;, from where the flow can go further to either node &amp;quot;Option A&amp;quot; or &amp;quot;Option B&amp;quot;"><style>#mermaid-hwlewqnilcww{font-family:arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-hwlewqnilcww .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-hwlewqnilcww .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-hwlewqnilcww .error-icon{fill:#552222;}#mermaid-hwlewqnilcww .error-text{fill:#552222;stroke:#552222;}#mermaid-hwlewqnilcww .edge-thickness-normal{stroke-width:1px;}#mermaid-hwlewqnilcww .edge-thickness-thick{stroke-width:3.5px;}#mermaid-hwlewqnilcww .edge-pattern-solid{stroke-dasharray:0;}#mermaid-hwlewqnilcww .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-hwlewqnilcww .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-hwlewqnilcww .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-hwlewqnilcww .marker{fill:#333333;stroke:#333333;}#mermaid-hwlewqnilcww .marker.cross{stroke:#333333;}#mermaid-hwlewqnilcww svg{font-family:arial,sans-serif;font-size:16px;}#mermaid-hwlewqnilcww p{margin:0;}#mermaid-hwlewqnilcww .label{font-family:arial,sans-serif;color:#333;}#mermaid-hwlewqnilcww .cluster-label text{fill:#333;}#mermaid-hwlewqnilcww .cluster-label span{color:#333;}#mermaid-hwlewqnilcww .cluster-label span p{background-color:transparent;}#mermaid-hwlewqnilcww .label text,#mermaid-hwlewqnilcww span{fill:#333;color:#333;}#mermaid-hwlewqnilcww .node rect,#mermaid-hwlewqnilcww .node circle,#mermaid-hwlewqnilcww .node ellipse,#mermaid-hwlewqnilcww .node polygon,#mermaid-hwlewqnilcww .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-hwlewqnilcww .rough-node .label text,#mermaid-hwlewqnilcww .node .label text,#mermaid-hwlewqnilcww .image-shape .label,#mermaid-hwlewqnilcww .icon-shape .label{text-anchor:middle;}#mermaid-hwlewqnilcww .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-hwlewqnilcww .rough-node .label,#mermaid-hwlewqnilcww .node .label,#mermaid-hwlewqnilcww .image-shape .label,#mermaid-hwlewqnilcww .icon-shape .label{text-align:center;}#mermaid-hwlewqnilcww .node.clickable{cursor:pointer;}#mermaid-hwlewqnilcww .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-hwlewqnilcww .arrowheadPath{fill:#333333;}#mermaid-hwlewqnilcww .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-hwlewqnilcww .flowchart-link{stroke:#333333;fill:none;}#mermaid-hwlewqnilcww .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-hwlewqnilcww .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-hwlewqnilcww .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-hwlewqnilcww .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-hwlewqnilcww .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-hwlewqnilcww .cluster text{fill:#333;}#mermaid-hwlewqnilcww .cluster span{color:#333;}#mermaid-hwlewqnilcww div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-hwlewqnilcww .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-hwlewqnilcww rect.text{fill:none;stroke-width:0;}#mermaid-hwlewqnilcww .icon-shape,#mermaid-hwlewqnilcww .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-hwlewqnilcww .icon-shape p,#mermaid-hwlewqnilcww .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-hwlewqnilcww .icon-shape .label rect,#mermaid-hwlewqnilcww .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-hwlewqnilcww .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-hwlewqnilcww .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-hwlewqnilcww :root{--mermaid-font-family:arial,sans-serif;}</style><g><marker id="mermaid-hwlewqnilcww_flowchart-v2-pointEnd" class="marker flowchart-v2" viewBox="0 0 10 10" refX="5" refY="5" markerUnits="userSpaceOnUse" markerWidth="8" markerHeight="8" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker><marker id="mermaid-hwlewqnilcww_flowchart-v2-pointStart" class="marker flowchart-v2" viewBox="0 0 10 10" refX="4.5" refY="5" markerUnits="userSpaceOnUse" markerWidth="8" markerHeight="8" orient="auto"><path d="M 0 5 L 10 10 L 10 0 z" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker><marker id="mermaid-hwlewqnilcww_flowchart-v2-circleEnd" class="marker flowchart-v2" viewBox="0 0 10 10" refX="11" refY="5" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><circle cx="5" cy="5" r="5" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></circle></marker><marker id="mermaid-hwlewqnilcww_flowchart-v2-circleStart" class="marker flowchart-v2" viewBox="0 0 10 10" refX="-1" refY="5" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><circle cx="5" cy="5" r="5" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></circle></marker><marker id="mermaid-hwlewqnilcww_flowchart-v2-crossEnd" class="marker cross flowchart-v2" viewBox="0 0 11 11" refX="12" refY="5.2" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><path d="M 1,1 l 9,9 M 10,1 l -9,9" class="arrowMarkerPath" style="stroke-width: 2; stroke-dasharray: 1, 0;"></path></marker><marker id="mermaid-hwlewqnilcww_flowchart-v2-crossStart" class="marker cross flowchart-v2" viewBox="0 0 11 11" refX="-1" refY="5.2" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><path d="M 1,1 l 9,9 M 10,1 l -9,9" class="arrowMarkerPath" style="stroke-width: 2; stroke-dasharray: 1, 0;"></path></marker><g class="root"><g class="clusters"></g><g class="edgePaths"><path d="M72.324,87.5L76.407,87.417C80.49,87.333,88.657,87.167,96.24,87.083C103.824,87,110.824,87,114.324,87L117.824,87" id="L_start_decision_0" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style=";" data-edge="true" data-et="edge" data-id="L_start_decision_0" data-points="W3sieCI6NzIuMzIzNzEyNDMxODI2NzksInkiOjg3LjV9LHsieCI6OTYuODIzNzExMzk1MjYzNjcsInkiOjg3fSx7IngiOjEyMS44MjM3MTEzOTUyNjM2NywieSI6ODd9XQ==" marker-end="url(#mermaid-hwlewqnilcww_flowchart-v2-pointEnd)"></path><path d="M220.95,64.001L228.95,59.168C236.95,54.334,252.949,44.667,264.452,39.834C275.954,35,282.959,35,286.462,35L289.964,35" id="L_decision_optionA_0" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style=";" data-edge="true" data-et="edge" data-id="L_decision_optionA_0" data-points="W3sieCI6MjIwLjk1MDA2OTQ3NTg0MzEyLCJ5Ijo2NC4wMDEzNTgwODA1Nzk0NX0seyJ4IjoyNjguOTQ4NzExMzk1MjYzNywieSI6MzV9LHsieCI6MjkzLjk2NDMzNjM5NTI2MzcsInkiOjM1fV0=" marker-end="url(#mermaid-hwlewqnilcww_flowchart-v2-pointEnd)"></path><path d="M220.95,109.999L228.95,114.832C236.95,119.666,252.949,129.333,264.449,134.166C275.949,139,282.949,139,286.449,139L289.949,139" id="L_decision_optionB_0" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style=";" data-edge="true" data-et="edge" data-id="L_decision_optionB_0" data-points="W3sieCI6MjIwLjk1MDA2OTQ3NTg0MzEyLCJ5IjoxMDkuOTk4NjQxOTE5NDIwNTV9LHsieCI6MjY4Ljk0ODcxMTM5NTI2MzcsInkiOjEzOX0seyJ4IjoyOTMuOTQ4NzExMzk1MjYzNywieSI6MTM5fV0=" marker-end="url(#mermaid-hwlewqnilcww_flowchart-v2-pointEnd)"></path></g><g class="edgeLabels"><g class="edgeLabel"><g class="label" data-id="L_start_decision_0" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" data-id="L_decision_optionA_0" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" data-id="L_decision_optionB_0" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel"></span></div></foreignObject></g></g></g><g class="nodes"><g class="node default" id="flowchart-start-0" transform="translate(39.911855697631836, 87)"><g class="basic label-container outer-path"><path d="M-12.421875 -19.5 C-5.1821702323154035 -19.5, 2.057534535369193 -19.5, 12.421875 -19.5 C12.421875 -19.5, 12.421874999999998 -19.5, 12.421874999999998 -19.5 C12.71749665736574 -19.49051998884093, 13.01311831473148 -19.48103997768186, 13.6712442896239 -19.45993515863156 C14.126342413710677 -19.41603238993648, 14.581440537797455 -19.3721296212414, 14.915479652847864 -19.3399052695533 C15.39431795281403 -19.262490406661247, 15.873156252780193 -19.185075543769194, 16.14946825967676 -19.140403561325776 C16.59046760500258 -19.03974833854483, 17.0314669503284 -18.93909311576388, 17.36813938623539 -18.862249829261074 C17.79670786501894 -18.73505295435997, 18.225276343802495 -18.607856079458863, 18.566485251460602 -18.50658706670804 C18.936960450693967 -18.370248768754962, 19.307435649927328 -18.233910470801884, 19.739581595147794 -18.074876768247425 C19.979058088162024 -17.968867628607793, 20.218534581176254 -17.862858488968158, 20.88260791279238 -17.568892924097174 C21.12559155778321 -17.44212851214391, 21.36857520277404 -17.31536410019065, 21.990867264076783 -16.990714730406097 C22.398568021651606 -16.743564135248644, 22.806268779226425 -16.496413540091194, 23.059805573605697 -16.342718045390892 C23.46533227673864 -16.059840172253395, 23.87085897987158 -15.776962299115896, 24.085030344578712 -15.627565626425154 C24.368923152543722 -15.401168666777954, 24.652815960508736 -15.174771707130754, 25.06232870850187 -14.848196188198123 C25.357861122375326 -14.579801469277434, 25.653393536248778 -14.311406750356747, 25.987684736767985 -14.007812326905688 C26.24951698099417 -13.737449037915114, 26.511349225220354 -13.467085748924541, 26.857295942968648 -13.10986736009568 C27.07311384172692 -12.856355375827892, 27.288931740485186 -12.602843391560102, 27.667588908126582 -12.158051136245305 C27.872307336433096 -11.883747092547067, 28.07702576473961 -11.609443048848826, 28.415233964640635 -11.156274872382312 C28.647101449471904 -10.800064150543864, 28.878968934303174 -10.443853428705419, 29.097158878604247 -10.108655082055241 C29.31190660708917 -9.727348744564743, 29.526654335574094 -9.346042407074243, 29.7105614742735 -9.019496659696287 C29.83610070736827 -8.758811756065715, 29.96163994046304 -8.498126852435142, 30.25292114880834 -7.893275190886684 C30.41463820553663 -7.49383093418122, 30.57635526226492 -7.094386677475757, 30.722009229970325 -6.734618561215508 C30.86987772100847 -6.289262225853201, 31.017746212046614 -5.843905890490894, 31.11589813421488 -5.548287939305138 C31.234528675752543 -5.0958982696201, 31.353159217290205 -4.6435085999350605, 31.43296928754556 -4.339158212148133 C31.508505697268486 -3.951294712846753, 31.584042106991415 -3.5634312135453734, 31.671919776581777 -3.1121979531509023 C31.713182711362244 -2.7921707792817037, 31.754445646142713 -2.472143605412505, 31.831767702509367 -1.872449005199798 C31.85809748729041 -1.4623413542152517, 31.88442727207146 -1.0522337032307054, 31.911856215913414 -0.6250057626472757 C31.911856215913414 -0.21843516336106528, 31.911856215913414 0.18813543592514514, 31.911856215913414 0.625005762647271 C31.88365238792751 1.0643031492479453, 31.855448559941603 1.5036005358486195, 31.831767702509367 1.8724490051997846 C31.79572772716687 2.1519679370580933, 31.75968775182437 2.4314868689164024, 31.671919776581777 3.1121979531508885 C31.62110268893017 3.373132958046616, 31.570285601278563 3.634067962942343, 31.43296928754556 4.339158212148129 C31.313514237721723 4.794692089272514, 31.19405918789788 5.2502259663969, 31.115898134214884 5.548287939305125 C31.027973249418036 5.8131036833852905, 30.940048364621187 6.0779194274654555, 30.72200922997033 6.734618561215495 C30.539195695785452 7.186171525111379, 30.356382161600575 7.637724489007264, 30.252921148808344 7.893275190886679 C30.142271266799174 8.123042038406926, 30.031621384790004 8.352808885927171, 29.710561474273504 9.019496659696284 C29.582546066149664 9.246800979785892, 29.45453065802582 9.4741052998755, 29.09715887860425 10.108655082055236 C28.953556473061486 10.32926693961409, 28.80995406751872 10.549878797172946, 28.41523396464064 11.156274872382301 C28.215452219652082 11.423964210175582, 28.015670474663526 11.691653547968862, 27.667588908126582 12.158051136245302 C27.452647786717748 12.4105332079484, 27.237706665308917 12.663015279651498, 26.85729594296866 13.10986736009567 C26.590002631667094 13.385869649203519, 26.32270932036553 13.661871938311366, 25.98768473676799 14.007812326905684 C25.642247587760707 14.321529205867979, 25.296810438753425 14.635246084830275, 25.062328708501887 14.848196188198111 C24.708149464717323 15.130644710010795, 24.35397022093276 15.41309323182348, 24.085030344578715 15.627565626425152 C23.740301537844545 15.868033518933384, 23.395572731110377 16.108501411441615, 23.059805573605708 16.34271804539089 C22.67210072097918 16.577747005459702, 22.284395868352654 16.812775965528516, 21.990867264076787 16.990714730406093 C21.57680864210189 17.20672884827319, 21.162750020127 17.422742966140287, 20.882607912792388 17.56889292409717 C20.610264077519282 17.68945146117974, 20.337920242246177 17.81000999826231, 19.739581595147804 18.07487676824742 C19.36347037390921 18.21328917439724, 18.987359152670614 18.351701580547058, 18.566485251460616 18.506587066708033 C18.23911000739069 18.603750320720266, 17.911734763320766 18.700913574732496, 17.368139386235413 18.86224982926107 C16.9546626586031 18.956623194155338, 16.54118593097079 19.050996559049604, 16.149468259676766 19.140403561325773 C15.718614199150911 19.21006070450845, 15.287760138625055 19.27971784769113, 14.915479652847878 19.3399052695533 C14.536261471834381 19.37648799139908, 14.157043290820884 19.413070713244863, 13.6712442896239 19.45993515863156 C13.33465783605184 19.470728831071828, 12.998071382479777 19.481522503512096, 12.421875000000004 19.5 C12.421875000000002 19.5, 12.421875000000002 19.5, 12.421875 19.5 C3.761055505043691 19.5, -4.899763989912618 19.5, -12.421874999999996 19.5 C-12.899495320300133 19.48468364595953, -13.377115640600271 19.469367291919063, -13.671244289623893 19.45993515863156 C-13.963436481302775 19.43174772931282, -14.255628672981656 19.403560299994083, -14.915479652847871 19.3399052695533 C-15.171651094450446 19.298489457514194, -15.427822536053021 19.25707364547509, -16.14946825967676 19.140403561325773 C-16.49310848612022 19.0619699221021, -16.83674871256368 18.983536282878426, -17.368139386235388 18.862249829261074 C-17.661111331069204 18.775297293875518, -17.954083275903024 18.68834475848996, -18.56648525146059 18.506587066708043 C-18.83785711431045 18.406719712645295, -19.109228977160306 18.306852358582546, -19.739581595147797 18.074876768247425 C-20.15293318807917 17.891898279696054, -20.566284781010545 17.70891979114468, -20.88260791279238 17.568892924097174 C-21.16845588597241 17.41976621958352, -21.454303859152436 17.270639515069863, -21.99086726407678 16.990714730406097 C-22.313964633596914 16.794851206272092, -22.637062003117048 16.598987682138088, -23.059805573605686 16.3427180453909 C-23.407274188848035 16.100338981071765, -23.754742804090384 15.857959916752627, -24.085030344578712 15.627565626425156 C-24.42569379734436 15.355895588279754, -24.766357250110005 15.084225550134352, -25.06232870850187 14.848196188198125 C-25.377077039073416 14.562350082157526, -25.69182536964496 14.276503976116926, -25.987684736767974 14.007812326905697 C-26.20635925583292 13.782012932459237, -26.425033774897862 13.556213538012779, -26.857295942968655 13.109867360095677 C-27.155632763691667 12.759423954628424, -27.45396958441468 12.40898054916117, -27.66758890812658 12.158051136245307 C-27.921097438511854 11.818372800631266, -28.174605968897133 11.478694465017226, -28.415233964640635 11.156274872382316 C-28.607178145468865 10.861397066400729, -28.799122326297095 10.566519260419142, -29.097158878604244 10.108655082055249 C-29.2510494131905 9.835406854790946, -29.40493994777676 9.562158627526646, -29.7105614742735 9.019496659696289 C-29.884656735407887 8.65798412490889, -30.058751996542274 8.296471590121488, -30.25292114880834 7.893275190886686 C-30.34885391857404 7.656319394831479, -30.444786688339743 7.419363598776273, -30.722009229970325 6.73461856121551 C-30.831479249583484 6.404912303819666, -30.940949269196647 6.075206046423823, -31.11589813421488 5.5482879393051325 C-31.191995393926618 5.258096107263293, -31.268092653638355 4.967904275221453, -31.432969287545557 4.339158212148136 C-31.52134337651446 3.8853759431631585, -31.609717465483357 3.431593674178181, -31.671919776581777 3.112197953150904 C-31.72975610470723 2.663630813284675, -31.787592432832685 2.215063673418446, -31.831767702509364 1.872449005199809 C-31.86361724397658 1.3763666883607426, -31.8954667854438 0.880284371521676, -31.911856215913414 0.6250057626472781 C-31.911856215913414 0.25641294892686384, -31.911856215913414 -0.11217986479355047, -31.911856215913414 -0.6250057626472687 C-31.8945091106931 -0.8952009287849407, -31.87716200547279 -1.1653960949226128, -31.831767702509367 -1.8724490051997822 C-31.79698990347429 -2.1421787468626445, -31.76221210443921 -2.4119084885255067, -31.671919776581777 -3.112197953150895 C-31.580337981115296 -3.582451117051949, -31.488756185648814 -4.0527042809530025, -31.43296928754556 -4.339158212148126 C-31.358711111642062 -4.6223368205651845, -31.284452935738564 -4.905515428982242, -31.115898134214884 -5.548287939305123 C-30.963846803738083 -6.006242320611705, -30.81179547326128 -6.464196701918286, -30.722009229970332 -6.734618561215485 C-30.585504124016513 -7.071788812068101, -30.448999018062697 -7.408959062920717, -30.252921148808344 -7.893275190886676 C-30.065542411285925 -8.282371148614695, -29.878163673763503 -8.671467106342714, -29.710561474273504 -9.019496659696282 C-29.503765287821146 -9.38668422912702, -29.296969101368788 -9.75387179855776, -29.097158878604247 -10.108655082055243 C-28.907242433401958 -10.400417741592133, -28.717325988199665 -10.69218040112902, -28.41523396464064 -11.156274872382308 C-28.24768082271103 -11.380780818162739, -28.08012768078142 -11.60528676394317, -27.667588908126586 -12.158051136245302 C-27.39434106749864 -12.479023598089478, -27.1210932268707 -12.799996059933656, -26.857295942968662 -13.10986736009567 C-26.656916595589443 -13.31677548771509, -26.45653724821022 -13.523683615334509, -25.987684736767996 -14.007812326905677 C-25.69185738817118 -14.276474897738577, -25.396030039574363 -14.545137468571479, -25.062328708501887 -14.848196188198107 C-24.806831323732162 -15.051948553481012, -24.55133393896244 -15.255700918763916, -24.08503034457872 -15.627565626425149 C-23.765312899974866 -15.850586675435688, -23.445595455371013 -16.073607724446227, -23.05980557360571 -16.342718045390885 C-22.73883521356447 -16.53729216387909, -22.417864853523227 -16.731866282367296, -21.99086726407679 -16.99071473040609 C-21.674148264238084 -17.15594682975374, -21.357429264399382 -17.321178929101393, -20.882607912792388 -17.56889292409717 C-20.622566093556696 -17.684005723606315, -20.362524274321007 -17.799118523115464, -19.739581595147804 -18.07487676824742 C-19.33231105994641 -18.22475608996909, -18.925040524745018 -18.37463541169076, -18.56648525146062 -18.506587066708033 C-18.32247790809004 -18.579007165399737, -18.078470564719463 -18.651427264091446, -17.368139386235413 -18.862249829261067 C-16.96582321601935 -18.954075869754522, -16.563507045803288 -19.045901910247974, -16.149468259676766 -19.140403561325773 C-15.689731985943109 -19.21473015675498, -15.229995712209451 -19.289056752184187, -14.91547965284788 -19.3399052695533 C-14.662102569659318 -19.364348252037974, -14.408725486470757 -19.388791234522646, -13.671244289623903 -19.45993515863156 C-13.17210969891356 -19.475941433449098, -12.67297510820322 -19.491947708266633, -12.421875000000005 -19.5 C-12.421875000000004 -19.5, -12.421875000000002 -19.5, -12.421875 -19.5" stroke="none" stroke-width="0" fill="#ECECFF" style=""></path><path d="M-12.421875 -19.5 C-2.6193626193586024 -19.5, 7.183149761282795 -19.5, 12.421875 -19.5 M-12.421875 -19.5 C-5.868859607229818 -19.5, 0.6841557855403639 -19.5, 12.421875 -19.5 M12.421875 -19.5 C12.421875 -19.5, 12.421875 -19.5, 12.421874999999998 -19.5 M12.421875 -19.5 C12.421875 -19.5, 12.421874999999998 -19.5, 12.421874999999998 -19.5 M12.421874999999998 -19.5 C12.764879115952773 -19.489000525618405, 13.107883231905546 -19.47800105123681, 13.6712442896239 -19.45993515863156 M12.421874999999998 -19.5 C12.701575787463645 -19.491030540150597, 12.98127657492729 -19.482061080301193, 13.6712442896239 -19.45993515863156 M13.6712442896239 -19.45993515863156 C14.108777509594562 -19.417726855111674, 14.546310729565226 -19.37551855159179, 14.915479652847864 -19.3399052695533 M13.6712442896239 -19.45993515863156 C13.999194125054409 -19.42829823242496, 14.32714396048492 -19.39666130621836, 14.915479652847864 -19.3399052695533 M14.915479652847864 -19.3399052695533 C15.24559911208486 -19.286534115498505, 15.575718571321858 -19.233162961443707, 16.14946825967676 -19.140403561325776 M14.915479652847864 -19.3399052695533 C15.384814621863578 -19.264026831509884, 15.854149590879292 -19.18814839346647, 16.14946825967676 -19.140403561325776 M16.14946825967676 -19.140403561325776 C16.432421238742336 -19.075821390294806, 16.715374217807913 -19.011239219263835, 17.36813938623539 -18.862249829261074 M16.14946825967676 -19.140403561325776 C16.572464400835603 -19.043857452414056, 16.995460541994447 -18.947311343502335, 17.36813938623539 -18.862249829261074 M17.36813938623539 -18.862249829261074 C17.755289492032965 -18.74734571005273, 18.14243959783054 -18.632441590844383, 18.566485251460602 -18.50658706670804 M17.36813938623539 -18.862249829261074 C17.784025468974107 -18.738817022934818, 18.199911551712823 -18.615384216608565, 18.566485251460602 -18.50658706670804 M18.566485251460602 -18.50658706670804 C18.85151018976411 -18.401695254670702, 19.136535128067614 -18.296803442633365, 19.739581595147794 -18.074876768247425 M18.566485251460602 -18.50658706670804 C18.837159075753043 -18.406976597287017, 19.107832900045484 -18.307366127865997, 19.739581595147794 -18.074876768247425 M19.739581595147794 -18.074876768247425 C20.119003384178647 -17.90691799739094, 20.4984251732095 -17.73895922653446, 20.88260791279238 -17.568892924097174 M19.739581595147794 -18.074876768247425 C20.145857990773557 -17.895030259664978, 20.552134386399317 -17.715183751082527, 20.88260791279238 -17.568892924097174 M20.88260791279238 -17.568892924097174 C21.111808166122746 -17.44931929874449, 21.341008419453107 -17.329745673391812, 21.990867264076783 -16.990714730406097 M20.88260791279238 -17.568892924097174 C21.17599004028667 -17.415835656103624, 21.46937216778096 -17.262778388110075, 21.990867264076783 -16.990714730406097 M21.990867264076783 -16.990714730406097 C22.235068362543334 -16.842678589430726, 22.479269461009885 -16.694642448455358, 23.059805573605697 -16.342718045390892 M21.990867264076783 -16.990714730406097 C22.33521958397635 -16.781966330444128, 22.679571903875914 -16.573217930482155, 23.059805573605697 -16.342718045390892 M23.059805573605697 -16.342718045390892 C23.397608558690926 -16.107081306250976, 23.735411543776156 -15.871444567111059, 24.085030344578712 -15.627565626425154 M23.059805573605697 -16.342718045390892 C23.39711723429686 -16.107424032879187, 23.734428894988024 -15.87213002036748, 24.085030344578712 -15.627565626425154 M24.085030344578712 -15.627565626425154 C24.306709857515415 -15.450782113997722, 24.528389370452114 -15.27399860157029, 25.06232870850187 -14.848196188198123 M24.085030344578712 -15.627565626425154 C24.335177548633645 -15.428079887888007, 24.58532475268858 -15.22859414935086, 25.06232870850187 -14.848196188198123 M25.06232870850187 -14.848196188198123 C25.279953433621277 -14.650555170879374, 25.497578158740684 -14.452914153560624, 25.987684736767985 -14.007812326905688 M25.06232870850187 -14.848196188198123 C25.412057587859813 -14.53058167328432, 25.761786467217757 -14.21296715837052, 25.987684736767985 -14.007812326905688 M25.987684736767985 -14.007812326905688 C26.19318396431596 -13.795617502662047, 26.398683191863938 -13.583422678418408, 26.857295942968648 -13.10986736009568 M25.987684736767985 -14.007812326905688 C26.29129083758027 -13.694314101292555, 26.59489693839256 -13.380815875679422, 26.857295942968648 -13.10986736009568 M26.857295942968648 -13.10986736009568 C27.11675143575036 -12.805096174838514, 27.376206928532074 -12.500324989581348, 27.667588908126582 -12.158051136245305 M26.857295942968648 -13.10986736009568 C27.17044377996352 -12.7420260921448, 27.483591616958396 -12.37418482419392, 27.667588908126582 -12.158051136245305 M27.667588908126582 -12.158051136245305 C27.954694147441646 -11.773356271388494, 28.241799386756714 -11.388661406531682, 28.415233964640635 -11.156274872382312 M27.667588908126582 -12.158051136245305 C27.948019682966866 -11.782299445728478, 28.228450457807153 -11.40654775521165, 28.415233964640635 -11.156274872382312 M28.415233964640635 -11.156274872382312 C28.58793187514104 -10.890964505971482, 28.76062978564145 -10.62565413956065, 29.097158878604247 -10.108655082055241 M28.415233964640635 -11.156274872382312 C28.643980640229703 -10.804858551594506, 28.87272731581877 -10.4534422308067, 29.097158878604247 -10.108655082055241 M29.097158878604247 -10.108655082055241 C29.26686611140999 -9.807322705487875, 29.436573344215734 -9.50599032892051, 29.7105614742735 -9.019496659696287 M29.097158878604247 -10.108655082055241 C29.28693680063094 -9.771685164398416, 29.47671472265763 -9.434715246741591, 29.7105614742735 -9.019496659696287 M29.7105614742735 -9.019496659696287 C29.878667238057226 -8.670421444312243, 30.046773001840954 -8.321346228928201, 30.25292114880834 -7.893275190886684 M29.7105614742735 -9.019496659696287 C29.874790456119857 -8.678471664955035, 30.039019437966218 -8.337446670213783, 30.25292114880834 -7.893275190886684 M30.25292114880834 -7.893275190886684 C30.403060904909154 -7.5224270905629655, 30.553200661009967 -7.151578990239248, 30.722009229970325 -6.734618561215508 M30.25292114880834 -7.893275190886684 C30.3595457682149 -7.629910319505707, 30.46617038762146 -7.36654544812473, 30.722009229970325 -6.734618561215508 M30.722009229970325 -6.734618561215508 C30.811757906679894 -6.464309846476006, 30.901506583389466 -6.1940011317365045, 31.11589813421488 -5.548287939305138 M30.722009229970325 -6.734618561215508 C30.854954598131297 -6.334208294282511, 30.987899966292268 -5.933798027349513, 31.11589813421488 -5.548287939305138 M31.11589813421488 -5.548287939305138 C31.235464782858113 -5.092328487515174, 31.355031431501345 -4.6363690357252105, 31.43296928754556 -4.339158212148133 M31.11589813421488 -5.548287939305138 C31.181617596838517 -5.297671145325943, 31.24733705946215 -5.0470543513467465, 31.43296928754556 -4.339158212148133 M31.43296928754556 -4.339158212148133 C31.487676135287533 -4.058250111289478, 31.5423829830295 -3.7773420104308224, 31.671919776581777 -3.1121979531509023 M31.43296928754556 -4.339158212148133 C31.49567251218786 -4.017190405941155, 31.558375736830158 -3.6952225997341763, 31.671919776581777 -3.1121979531509023 M31.671919776581777 -3.1121979531509023 C31.72574876760026 -2.694710928548152, 31.77957775861874 -2.2772239039454014, 31.831767702509367 -1.872449005199798 M31.671919776581777 -3.1121979531509023 C31.71172920725187 -2.803443870134906, 31.751538637921968 -2.4946897871189098, 31.831767702509367 -1.872449005199798 M31.831767702509367 -1.872449005199798 C31.860303393924806 -1.4279825778088235, 31.88883908534024 -0.983516150417849, 31.911856215913414 -0.6250057626472757 M31.831767702509367 -1.872449005199798 C31.8582645922194 -1.4597385600616466, 31.884761481929427 -1.0470281149234955, 31.911856215913414 -0.6250057626472757 M31.911856215913414 -0.6250057626472757 C31.911856215913414 -0.3174507164662356, 31.911856215913414 -0.009895670285195557, 31.911856215913414 0.625005762647271 M31.911856215913414 -0.6250057626472757 C31.911856215913414 -0.13091883401554377, 31.911856215913414 0.36316809461618815, 31.911856215913414 0.625005762647271 M31.911856215913414 0.625005762647271 C31.89005060310661 0.964645783287096, 31.868244990299807 1.3042858039269212, 31.831767702509367 1.8724490051997846 M31.911856215913414 0.625005762647271 C31.883667383479278 1.0640695814249341, 31.855478551045145 1.5031334002025973, 31.831767702509367 1.8724490051997846 M31.831767702509367 1.8724490051997846 C31.795754663500624 2.1517590241726685, 31.75974162449188 2.431069043145553, 31.671919776581777 3.1121979531508885 M31.831767702509367 1.8724490051997846 C31.77414273057008 2.3193769082230977, 31.716517758630793 2.7663048112464104, 31.671919776581777 3.1121979531508885 M31.671919776581777 3.1121979531508885 C31.592872078152435 3.5180911778485906, 31.51382437972309 3.9239844025462927, 31.43296928754556 4.339158212148129 M31.671919776581777 3.1121979531508885 C31.61331232845263 3.413134812605517, 31.55470488032348 3.714071672060145, 31.43296928754556 4.339158212148129 M31.43296928754556 4.339158212148129 C31.353417053910626 4.642525357154286, 31.273864820275694 4.945892502160443, 31.115898134214884 5.548287939305125 M31.43296928754556 4.339158212148129 C31.331622464633725 4.725637571901862, 31.23027564172189 5.112116931655596, 31.115898134214884 5.548287939305125 M31.115898134214884 5.548287939305125 C31.033508704666055 5.796431774133282, 30.95111927511722 6.044575608961439, 30.72200922997033 6.734618561215495 M31.115898134214884 5.548287939305125 C30.996888910209552 5.906724760464369, 30.87787968620422 6.265161581623612, 30.72200922997033 6.734618561215495 M30.72200922997033 6.734618561215495 C30.612861287395507 7.004216089607214, 30.50371334482069 7.2738136179989334, 30.252921148808344 7.893275190886679 M30.72200922997033 6.734618561215495 C30.54591885008841 7.169565203999732, 30.369828470206485 7.60451184678397, 30.252921148808344 7.893275190886679 M30.252921148808344 7.893275190886679 C30.048634450861968 8.31748089020744, 29.844347752915592 8.741686589528202, 29.710561474273504 9.019496659696284 M30.252921148808344 7.893275190886679 C30.11463768207147 8.180423768357993, 29.9763542153346 8.467572345829307, 29.710561474273504 9.019496659696284 M29.710561474273504 9.019496659696284 C29.47158831404945 9.44381770433058, 29.23261515382539 9.86813874896488, 29.09715887860425 10.108655082055236 M29.710561474273504 9.019496659696284 C29.528763289737114 9.342297745403041, 29.34696510520072 9.665098831109798, 29.09715887860425 10.108655082055236 M29.09715887860425 10.108655082055236 C28.936392371287933 10.355635609144944, 28.775625863971616 10.602616136234651, 28.41523396464064 11.156274872382301 M29.09715887860425 10.108655082055236 C28.859706618812602 10.473445517954886, 28.622254359020953 10.838235953854534, 28.41523396464064 11.156274872382301 M28.41523396464064 11.156274872382301 C28.153689070172604 11.506721203739412, 27.89214417570457 11.857167535096524, 27.667588908126582 12.158051136245302 M28.41523396464064 11.156274872382301 C28.159038111580173 11.499553975560968, 27.902842258519705 11.842833078739634, 27.667588908126582 12.158051136245302 M27.667588908126582 12.158051136245302 C27.482787710896833 12.375129137997376, 27.297986513667087 12.592207139749451, 26.85729594296866 13.10986736009567 M27.667588908126582 12.158051136245302 C27.504217485329317 12.349956505560273, 27.34084606253205 12.541861874875245, 26.85729594296866 13.10986736009567 M26.85729594296866 13.10986736009567 C26.51057072244668 13.467889616954627, 26.1638455019247 13.825911873813585, 25.98768473676799 14.007812326905684 M26.85729594296866 13.10986736009567 C26.63855131565656 13.335739147063311, 26.41980668834446 13.561610934030954, 25.98768473676799 14.007812326905684 M25.98768473676799 14.007812326905684 C25.666818949813887 14.299214144973893, 25.34595316285979 14.590615963042103, 25.062328708501887 14.848196188198111 M25.98768473676799 14.007812326905684 C25.62864017193486 14.333887100888518, 25.26959560710174 14.65996187487135, 25.062328708501887 14.848196188198111 M25.062328708501887 14.848196188198111 C24.769235761042488 15.081930014266092, 24.47614281358309 15.315663840334071, 24.085030344578715 15.627565626425152 M25.062328708501887 14.848196188198111 C24.83303039039472 15.031055495004072, 24.603732072287546 15.213914801810033, 24.085030344578715 15.627565626425152 M24.085030344578715 15.627565626425152 C23.85841189070657 15.785644849691606, 23.631793436834425 15.943724072958059, 23.059805573605708 16.34271804539089 M24.085030344578715 15.627565626425152 C23.846579844313176 15.793898373054605, 23.608129344047633 15.960231119684057, 23.059805573605708 16.34271804539089 M23.059805573605708 16.34271804539089 C22.837338213442404 16.477579066485205, 22.6148708532791 16.612440087579525, 21.990867264076787 16.990714730406093 M23.059805573605708 16.34271804539089 C22.789341986190585 16.506674661502398, 22.51887839877546 16.67063127761391, 21.990867264076787 16.990714730406093 M21.990867264076787 16.990714730406093 C21.592544844070424 17.198519281785725, 21.194222424064062 17.40632383316536, 20.882607912792388 17.56889292409717 M21.990867264076787 16.990714730406093 C21.747346000619338 17.117759617569032, 21.50382473716189 17.244804504731967, 20.882607912792388 17.56889292409717 M20.882607912792388 17.56889292409717 C20.498139173166237 17.739085830269723, 20.113670433540083 17.909278736442275, 19.739581595147804 18.07487676824742 M20.882607912792388 17.56889292409717 C20.53319766209623 17.723566477193536, 20.18378741140008 17.878240030289902, 19.739581595147804 18.07487676824742 M19.739581595147804 18.07487676824742 C19.470419246362848 18.17393100070976, 19.201256897577892 18.272985233172104, 18.566485251460616 18.506587066708033 M19.739581595147804 18.07487676824742 C19.357411520535756 18.2155188884461, 18.97524144592371 18.356161008644772, 18.566485251460616 18.506587066708033 M18.566485251460616 18.506587066708033 C18.30292523439406 18.584810296318626, 18.039365217327504 18.663033525929222, 17.368139386235413 18.86224982926107 M18.566485251460616 18.506587066708033 C18.261974807482282 18.596964168072866, 17.957464363503952 18.687341269437695, 17.368139386235413 18.86224982926107 M17.368139386235413 18.86224982926107 C17.03916601433934 18.937335854644473, 16.71019264244327 19.012421880027873, 16.149468259676766 19.140403561325773 M17.368139386235413 18.86224982926107 C16.924186069077173 18.9635792768363, 16.480232751918933 19.064908724411527, 16.149468259676766 19.140403561325773 M16.149468259676766 19.140403561325773 C15.781586215979276 19.199879877182926, 15.413704172281786 19.259356193040077, 14.915479652847878 19.3399052695533 M16.149468259676766 19.140403561325773 C15.858635422874151 19.187423158937683, 15.567802586071538 19.234442756549598, 14.915479652847878 19.3399052695533 M14.915479652847878 19.3399052695533 C14.465098463097807 19.38335300126586, 14.014717273347735 19.42680073297842, 13.6712442896239 19.45993515863156 M14.915479652847878 19.3399052695533 C14.464064130340116 19.383452782103028, 14.012648607832352 19.427000294652753, 13.6712442896239 19.45993515863156 M13.6712442896239 19.45993515863156 C13.268023812713107 19.472865654505043, 12.864803335802314 19.485796150378526, 12.421875000000004 19.5 M13.6712442896239 19.45993515863156 C13.194704157178457 19.475216873149986, 12.718164024733014 19.490498587668412, 12.421875000000004 19.5 M12.421875000000004 19.5 C12.421875000000002 19.5, 12.421875000000002 19.5, 12.421875 19.5 M12.421875000000004 19.5 C12.421875000000002 19.5, 12.421875000000002 19.5, 12.421875 19.5 M12.421875 19.5 C4.156026093101708 19.5, -4.109822813796583 19.5, -12.421874999999996 19.5 M12.421875 19.5 C6.4799134362363136 19.5, 0.5379518724726271 19.5, -12.421874999999996 19.5 M-12.421874999999996 19.5 C-12.896137024608915 19.484791339965824, -13.370399049217832 19.469582679931644, -13.671244289623893 19.45993515863156 M-12.421874999999996 19.5 C-12.81931620612421 19.487254834091974, -13.216757412248423 19.47450966818395, -13.671244289623893 19.45993515863156 M-13.671244289623893 19.45993515863156 C-14.084247110648215 19.420093273195906, -14.497249931672537 19.380251387760254, -14.915479652847871 19.3399052695533 M-13.671244289623893 19.45993515863156 C-13.989151884444627 19.429266995299024, -14.30705947926536 19.39859883196649, -14.915479652847871 19.3399052695533 M-14.915479652847871 19.3399052695533 C-15.34158451110654 19.271015940562567, -15.76768936936521 19.20212661157183, -16.14946825967676 19.140403561325773 M-14.915479652847871 19.3399052695533 C-15.233190748217217 19.288540203540325, -15.550901843586564 19.237175137527352, -16.14946825967676 19.140403561325773 M-16.14946825967676 19.140403561325773 C-16.453467095040445 19.071017810931806, -16.75746593040413 19.00163206053784, -17.368139386235388 18.862249829261074 M-16.14946825967676 19.140403561325773 C-16.533909918687463 19.052657261372858, -16.918351577698168 18.96491096141994, -17.368139386235388 18.862249829261074 M-17.368139386235388 18.862249829261074 C-17.66265680625446 18.7748386049529, -17.95717422627353 18.687427380644724, -18.56648525146059 18.506587066708043 M-17.368139386235388 18.862249829261074 C-17.79854905070169 18.73450650011391, -18.22895871516799 18.606763170966744, -18.56648525146059 18.506587066708043 M-18.56648525146059 18.506587066708043 C-19.03217387870457 18.335209347103778, -19.49786250594855 18.163831627499516, -19.739581595147797 18.074876768247425 M-18.56648525146059 18.506587066708043 C-18.877867664375078 18.39199546036804, -19.18925007728956 18.277403854028037, -19.739581595147797 18.074876768247425 M-19.739581595147797 18.074876768247425 C-20.12852522538005 17.902702960746467, -20.5174688556123 17.730529153245506, -20.88260791279238 17.568892924097174 M-19.739581595147797 18.074876768247425 C-20.159237325486284 17.889107625071514, -20.578893055824775 17.703338481895607, -20.88260791279238 17.568892924097174 M-20.88260791279238 17.568892924097174 C-21.22783578436327 17.388787764627647, -21.573063655934153 17.20868260515812, -21.99086726407678 16.990714730406097 M-20.88260791279238 17.568892924097174 C-21.297239032958515 17.35258013429041, -21.711870153124654 17.13626734448364, -21.99086726407678 16.990714730406097 M-21.99086726407678 16.990714730406097 C-22.389727738185385 16.748923167037137, -22.78858821229399 16.507131603668178, -23.059805573605686 16.3427180453909 M-21.99086726407678 16.990714730406097 C-22.363089464742185 16.76507144494228, -22.735311665407586 16.539428159478458, -23.059805573605686 16.3427180453909 M-23.059805573605686 16.3427180453909 C-23.368966900882103 16.127060486861026, -23.678128228158524 15.911402928331155, -24.085030344578712 15.627565626425156 M-23.059805573605686 16.3427180453909 C-23.400281463954943 16.105216803247004, -23.7407573543042 15.867715561103104, -24.085030344578712 15.627565626425156 M-24.085030344578712 15.627565626425156 C-24.286136138675896 15.467189107282588, -24.48724193277308 15.30681258814002, -25.06232870850187 14.848196188198125 M-24.085030344578712 15.627565626425156 C-24.294390107242045 15.460606786998413, -24.503749869905374 15.29364794757167, -25.06232870850187 14.848196188198125 M-25.06232870850187 14.848196188198125 C-25.38391132584911 14.55614336373316, -25.70549394319635 14.264090539268196, -25.987684736767974 14.007812326905697 M-25.06232870850187 14.848196188198125 C-25.269889156938806 14.659695280676225, -25.477449605375746 14.471194373154326, -25.987684736767974 14.007812326905697 M-25.987684736767974 14.007812326905697 C-26.28386349080086 13.701983446638806, -26.58004224483375 13.396154566371916, -26.857295942968655 13.109867360095677 M-25.987684736767974 14.007812326905697 C-26.228411691554168 13.759241982038402, -26.469138646340365 13.510671637171107, -26.857295942968655 13.109867360095677 M-26.857295942968655 13.109867360095677 C-27.157774590002745 12.756908043570059, -27.45825323703684 12.40394872704444, -27.66758890812658 12.158051136245307 M-26.857295942968655 13.109867360095677 C-27.1485543697297 12.767738638948178, -27.43981279649074 12.425609917800678, -27.66758890812658 12.158051136245307 M-27.66758890812658 12.158051136245307 C-27.940684221696127 11.792128295556997, -28.213779535265676 11.426205454868688, -28.415233964640635 11.156274872382316 M-27.66758890812658 12.158051136245307 C-27.908032008652693 11.835879286357397, -28.148475109178808 11.513707436469488, -28.415233964640635 11.156274872382316 M-28.415233964640635 11.156274872382316 C-28.59012958990677 10.887588225922281, -28.765025215172905 10.618901579462246, -29.097158878604244 10.108655082055249 M-28.415233964640635 11.156274872382316 C-28.595374651468124 10.879530402867804, -28.775515338295612 10.602785933353292, -29.097158878604244 10.108655082055249 M-29.097158878604244 10.108655082055249 C-29.31063127563972 9.729613224694551, -29.524103672675203 9.350571367333854, -29.7105614742735 9.019496659696289 M-29.097158878604244 10.108655082055249 C-29.338118423230227 9.680807010772098, -29.57907796785621 9.252958939488947, -29.7105614742735 9.019496659696289 M-29.7105614742735 9.019496659696289 C-29.8676433014017 8.693312884651904, -30.0247251285299 8.36712910960752, -30.25292114880834 7.893275190886686 M-29.7105614742735 9.019496659696289 C-29.833020003034814 8.76520890453065, -29.95547853179613 8.510921149365013, -30.25292114880834 7.893275190886686 M-30.25292114880834 7.893275190886686 C-30.377723142187005 7.585011854358987, -30.502525135565673 7.2767485178312885, -30.722009229970325 6.73461856121551 M-30.25292114880834 7.893275190886686 C-30.358205201601116 7.633221544959844, -30.46348925439389 7.373167899033003, -30.722009229970325 6.73461856121551 M-30.722009229970325 6.73461856121551 C-30.83736197926109 6.387194459316418, -30.95271472855185 6.039770357417326, -31.11589813421488 5.5482879393051325 M-30.722009229970325 6.73461856121551 C-30.80991667372754 6.4698553467678686, -30.897824117484753 6.205092132320226, -31.11589813421488 5.5482879393051325 M-31.11589813421488 5.5482879393051325 C-31.21374386915586 5.175159745365404, -31.311589604096838 4.802031551425674, -31.432969287545557 4.339158212148136 M-31.11589813421488 5.5482879393051325 C-31.221765090305134 5.144571352703981, -31.32763204639539 4.74085476610283, -31.432969287545557 4.339158212148136 M-31.432969287545557 4.339158212148136 C-31.485362876296993 4.07012820729842, -31.537756465048428 3.8010982024487037, -31.671919776581777 3.112197953150904 M-31.432969287545557 4.339158212148136 C-31.48165277751043 4.089178780437767, -31.530336267475302 3.839199348727399, -31.671919776581777 3.112197953150904 M-31.671919776581777 3.112197953150904 C-31.705902525635196 2.848634462145404, -31.739885274688618 2.585070971139904, -31.831767702509364 1.872449005199809 M-31.671919776581777 3.112197953150904 C-31.724072935408078 2.7077083521001932, -31.776226094234378 2.3032187510494824, -31.831767702509364 1.872449005199809 M-31.831767702509364 1.872449005199809 C-31.85077984575929 1.5763195277563642, -31.86979198900922 1.2801900503129193, -31.911856215913414 0.6250057626472781 M-31.831767702509364 1.872449005199809 C-31.85257798529042 1.5483120531269587, -31.873388268071473 1.2241751010541084, -31.911856215913414 0.6250057626472781 M-31.911856215913414 0.6250057626472781 C-31.911856215913414 0.21462258277356455, -31.911856215913414 -0.19576059710014904, -31.911856215913414 -0.6250057626472687 M-31.911856215913414 0.6250057626472781 C-31.911856215913414 0.29404143349656864, -31.911856215913414 -0.036922895654140864, -31.911856215913414 -0.6250057626472687 M-31.911856215913414 -0.6250057626472687 C-31.88094695277382 -1.1064424855546122, -31.850037689634224 -1.5878792084619557, -31.831767702509367 -1.8724490051997822 M-31.911856215913414 -0.6250057626472687 C-31.88778848892882 -0.9998800375518867, -31.863720761944226 -1.3747543124565047, -31.831767702509367 -1.8724490051997822 M-31.831767702509367 -1.8724490051997822 C-31.79815493540695 -2.1331429892545093, -31.76454216830453 -2.393836973309236, -31.671919776581777 -3.112197953150895 M-31.831767702509367 -1.8724490051997822 C-31.78670765652475 -2.2219258237439496, -31.741647610540134 -2.5714026422881173, -31.671919776581777 -3.112197953150895 M-31.671919776581777 -3.112197953150895 C-31.62075464542044 -3.374920087910056, -31.569589514259103 -3.637642222669217, -31.43296928754556 -4.339158212148126 M-31.671919776581777 -3.112197953150895 C-31.62096539580274 -3.373837929239059, -31.570011015023702 -3.6354779053272233, -31.43296928754556 -4.339158212148126 M-31.43296928754556 -4.339158212148126 C-31.306652988669747 -4.8208570055918365, -31.180336689793936 -5.302555799035547, -31.115898134214884 -5.548287939305123 M-31.43296928754556 -4.339158212148126 C-31.33438215708514 -4.7151136685263335, -31.23579502662472 -5.091069124904541, -31.115898134214884 -5.548287939305123 M-31.115898134214884 -5.548287939305123 C-30.992749154821798 -5.919193044111835, -30.86960017542871 -6.290098148918548, -30.722009229970332 -6.734618561215485 M-31.115898134214884 -5.548287939305123 C-30.9610833488996 -6.0145654062884795, -30.806268563584318 -6.480842873271836, -30.722009229970332 -6.734618561215485 M-30.722009229970332 -6.734618561215485 C-30.61460498609334 -6.999909120111445, -30.507200742216348 -7.265199679007406, -30.252921148808344 -7.893275190886676 M-30.722009229970332 -6.734618561215485 C-30.611807127681864 -7.006819884480708, -30.501605025393395 -7.279021207745932, -30.252921148808344 -7.893275190886676 M-30.252921148808344 -7.893275190886676 C-30.088056804051494 -8.235619530306158, -29.92319245929464 -8.57796386972564, -29.710561474273504 -9.019496659696282 M-30.252921148808344 -7.893275190886676 C-30.043128502712833 -8.328914109347533, -29.83333585661732 -8.764553027808391, -29.710561474273504 -9.019496659696282 M-29.710561474273504 -9.019496659696282 C-29.53225430399251 -9.336099096089056, -29.353947133711518 -9.652701532481828, -29.097158878604247 -10.108655082055243 M-29.710561474273504 -9.019496659696282 C-29.5488785448904 -9.306581072987921, -29.387195615507295 -9.593665486279562, -29.097158878604247 -10.108655082055243 M-29.097158878604247 -10.108655082055243 C-28.84883965688034 -10.490140089670705, -28.600520435156437 -10.871625097286165, -28.41523396464064 -11.156274872382308 M-29.097158878604247 -10.108655082055243 C-28.919769795185967 -10.38117234982424, -28.742380711767687 -10.653689617593235, -28.41523396464064 -11.156274872382308 M-28.41523396464064 -11.156274872382308 C-28.209200985791842 -11.432340294049192, -28.003168006943042 -11.708405715716076, -27.667588908126586 -12.158051136245302 M-28.41523396464064 -11.156274872382308 C-28.161823329332176 -11.495822037511847, -27.908412694023713 -11.835369202641386, -27.667588908126586 -12.158051136245302 M-27.667588908126586 -12.158051136245302 C-27.435400355957466 -12.430793021526044, -27.203211803788346 -12.703534906806787, -26.857295942968662 -13.10986736009567 M-27.667588908126586 -12.158051136245302 C-27.420913314519506 -12.447810324735084, -27.174237720912426 -12.737569513224866, -26.857295942968662 -13.10986736009567 M-26.857295942968662 -13.10986736009567 C-26.63728937238427 -13.337042207099422, -26.417282801799878 -13.564217054103175, -25.987684736767996 -14.007812326905677 M-26.857295942968662 -13.10986736009567 C-26.5319292039242 -13.445835231265146, -26.20656246487974 -13.781803102434623, -25.987684736767996 -14.007812326905677 M-25.987684736767996 -14.007812326905677 C-25.63025396030973 -14.332421500984964, -25.27282318385146 -14.657030675064249, -25.062328708501887 -14.848196188198107 M-25.987684736767996 -14.007812326905677 C-25.752844598349316 -14.22108792708795, -25.518004459930637 -14.434363527270222, -25.062328708501887 -14.848196188198107 M-25.062328708501887 -14.848196188198107 C-24.804543465145642 -15.053773059821287, -24.5467582217894 -15.259349931444467, -24.08503034457872 -15.627565626425149 M-25.062328708501887 -14.848196188198107 C-24.807283108589207 -15.051588267080021, -24.552237508676523 -15.254980345961933, -24.08503034457872 -15.627565626425149 M-24.08503034457872 -15.627565626425149 C-23.695364621759754 -15.899379566306386, -23.305698898940793 -16.171193506187624, -23.05980557360571 -16.342718045390885 M-24.08503034457872 -15.627565626425149 C-23.779948756887592 -15.840377335229405, -23.47486716919646 -16.05318904403366, -23.05980557360571 -16.342718045390885 M-23.05980557360571 -16.342718045390885 C-22.726552240836075 -16.5447381741298, -22.39329890806644 -16.74675830286872, -21.99086726407679 -16.99071473040609 M-23.05980557360571 -16.342718045390885 C-22.74132720985021 -16.535781501086078, -22.422848846094706 -16.728844956781273, -21.99086726407679 -16.99071473040609 M-21.99086726407679 -16.99071473040609 C-21.710997859016796 -17.13672241976098, -21.431128453956802 -17.28273010911587, -20.882607912792388 -17.56889292409717 M-21.99086726407679 -16.99071473040609 C-21.637228455324657 -17.175207870415612, -21.283589646572523 -17.35970101042513, -20.882607912792388 -17.56889292409717 M-20.882607912792388 -17.56889292409717 C-20.503914664789935 -17.736529191451783, -20.125221416787483 -17.904165458806396, -19.739581595147804 -18.07487676824742 M-20.882607912792388 -17.56889292409717 C-20.528017162896457 -17.72585973051523, -20.173426413000527 -17.882826536933287, -19.739581595147804 -18.07487676824742 M-19.739581595147804 -18.07487676824742 C-19.496039556208945 -18.16450248985485, -19.25249751727009 -18.254128211462277, -18.56648525146062 -18.506587066708033 M-19.739581595147804 -18.07487676824742 C-19.46014447364661 -18.177712212048295, -19.180707352145415 -18.28054765584917, -18.56648525146062 -18.506587066708033 M-18.56648525146062 -18.506587066708033 C-18.25806794373193 -18.598123704726422, -17.949650636003245 -18.689660342744812, -17.368139386235413 -18.862249829261067 M-18.56648525146062 -18.506587066708033 C-18.325448668955044 -18.57812545916885, -18.08441208644947 -18.64966385162966, -17.368139386235413 -18.862249829261067 M-17.368139386235413 -18.862249829261067 C-16.94699781566498 -18.958372644538187, -16.525856245094545 -19.05449545981531, -16.149468259676766 -19.140403561325773 M-17.368139386235413 -18.862249829261067 C-17.088746535532685 -18.926019424225228, -16.809353684829954 -18.989789019189388, -16.149468259676766 -19.140403561325773 M-16.149468259676766 -19.140403561325773 C-15.840625519892933 -19.190334860382805, -15.531782780109102 -19.240266159439837, -14.91547965284788 -19.3399052695533 M-16.149468259676766 -19.140403561325773 C-15.826519503172824 -19.19261541177232, -15.503570746668881 -19.244827262218866, -14.91547965284788 -19.3399052695533 M-14.91547965284788 -19.3399052695533 C-14.656021125546603 -19.36493492163752, -14.396562598245326 -19.38996457372174, -13.671244289623903 -19.45993515863156 M-14.91547965284788 -19.3399052695533 C-14.561400652922762 -19.374062844833773, -14.207321652997644 -19.40822042011425, -13.671244289623903 -19.45993515863156 M-13.671244289623903 -19.45993515863156 C-13.274454009407613 -19.472659450612667, -12.877663729191324 -19.485383742593775, -12.421875000000005 -19.5 M-13.671244289623903 -19.45993515863156 C-13.319302633527212 -19.471221242529705, -12.967360977430518 -19.482507326427847, -12.421875000000005 -19.5 M-12.421875000000005 -19.5 C-12.421875000000004 -19.5, -12.421875000000002 -19.5, -12.421875 -19.5 M-12.421875000000005 -19.5 C-12.421875000000004 -19.5, -12.421875000000002 -19.5, -12.421875 -19.5" stroke="#9370DB" stroke-width="1.3" fill="none" stroke-dasharray="0 0" style=""></path></g><g class="label" style="" transform="translate(-19.546875, -12)"><rect></rect><foreignObject width="39.09375" height="24"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="nodeLabel"><p>Start</p></span></div></foreignObject></g></g><g class="node default" id="flowchart-decision-1" transform="translate(182.88621139526367, 87)"><polygon points="61.0625,0 122.125,-61.0625 61.0625,-122.125 0,-61.0625" class="label-container" transform="translate(-60.5625, 61.0625)"></polygon><g class="label" style="" transform="translate(-34.0625, -12)"><rect></rect><foreignObject width="68.125" height="24"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="nodeLabel"><p>Decision</p></span></div></foreignObject></g></g><g class="node default" id="flowchart-optionA-3" transform="translate(358.6830863952637, 35)"><rect class="basic label-container" style="" x="-64.71875" y="-27" width="129.4375" height="54"></rect><g class="label" style="" transform="translate(-34.71875, -12)"><rect></rect><foreignObject width="69.4375" height="24"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="nodeLabel"><p>Option A</p></span></div></foreignObject></g></g><g class="node default" id="flowchart-optionB-4" transform="translate(358.6830863952637, 139)"><rect class="basic label-container" style="" x="-64.734375" y="-27" width="129.46875" height="54"></rect><g class="label" style="" transform="translate(-34.734375, -12)"><rect></rect><foreignObject width="69.46875" height="24"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="nodeLabel"><p>Option B</p></span></div></foreignObject></g></g></g></g></g></svg></body></html><figcaption>A basic Mermaid-generated flowchart. I usually start with describing the flows between the nodes and then add a second block to describe how the nodes should be shaped.</figcaption></figure><p>The flowchart syntax is powerful and simple. It´s basically nodes and edges to connect nodes, which, as a general concept, can be applied in many communication situations. You get the complete syntax on the Mermaid site at <a href="https://mermaid.js.org/syntax/flowchart.html">Flowcharts – basic syntax</a>. Visit the <a href="https://mermaid.js.org/intro/">Mermaid docs</a> to get an overview of all available diagram types.</p> <h3 id="mermaid-radar-chart" tabindex="-1">Mermaid Radar Chart</h3> <p>Mermaid does also have more <em>exotic</em> chart types, like the radar or the Sankey.</p> <figure class="mermaid"><html><head></head><body><svg id="mermaid-eidkvgvxrrhr" width="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="max-width: 700px;" viewBox="0 0 700 700" role="graphics-document document" aria-roledescription="radar"><style>#mermaid-eidkvgvxrrhr{font-family:arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-eidkvgvxrrhr .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-eidkvgvxrrhr .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-eidkvgvxrrhr .error-icon{fill:#552222;}#mermaid-eidkvgvxrrhr .error-text{fill:#552222;stroke:#552222;}#mermaid-eidkvgvxrrhr .edge-thickness-normal{stroke-width:1px;}#mermaid-eidkvgvxrrhr .edge-thickness-thick{stroke-width:3.5px;}#mermaid-eidkvgvxrrhr .edge-pattern-solid{stroke-dasharray:0;}#mermaid-eidkvgvxrrhr .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-eidkvgvxrrhr .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-eidkvgvxrrhr .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-eidkvgvxrrhr .marker{fill:#333333;stroke:#333333;}#mermaid-eidkvgvxrrhr .marker.cross{stroke:#333333;}#mermaid-eidkvgvxrrhr svg{font-family:arial,sans-serif;font-size:16px;}#mermaid-eidkvgvxrrhr p{margin:0;}#mermaid-eidkvgvxrrhr .radarTitle{font-size:16px;color:#333;dominant-baseline:hanging;text-anchor:middle;}#mermaid-eidkvgvxrrhr .radarAxisLine{stroke:#333333;stroke-width:2;}#mermaid-eidkvgvxrrhr .radarAxisLabel{dominant-baseline:middle;text-anchor:middle;font-size:12px;color:#333333;}#mermaid-eidkvgvxrrhr .radarGraticule{fill:#DEDEDE;fill-opacity:0.3;stroke:#DEDEDE;stroke-width:1;}#mermaid-eidkvgvxrrhr .radarLegendText{text-anchor:start;font-size:12px;dominant-baseline:hanging;}#mermaid-eidkvgvxrrhr .radarCurve-0{color:hsl(240, 100%, 76.2745098039%);fill:hsl(240, 100%, 76.2745098039%);fill-opacity:0.5;stroke:hsl(240, 100%, 76.2745098039%);stroke-width:2;}#mermaid-eidkvgvxrrhr .radarLegendBox-0{fill:hsl(240, 100%, 76.2745098039%);fill-opacity:0.5;stroke:hsl(240, 100%, 76.2745098039%);}#mermaid-eidkvgvxrrhr .radarCurve-1{color:hsl(60, 100%, 73.5294117647%);fill:hsl(60, 100%, 73.5294117647%);fill-opacity:0.5;stroke:hsl(60, 100%, 73.5294117647%);stroke-width:2;}#mermaid-eidkvgvxrrhr .radarLegendBox-1{fill:hsl(60, 100%, 73.5294117647%);fill-opacity:0.5;stroke:hsl(60, 100%, 73.5294117647%);}#mermaid-eidkvgvxrrhr .radarCurve-2{color:hsl(80, 100%, 76.2745098039%);fill:hsl(80, 100%, 76.2745098039%);fill-opacity:0.5;stroke:hsl(80, 100%, 76.2745098039%);stroke-width:2;}#mermaid-eidkvgvxrrhr .radarLegendBox-2{fill:hsl(80, 100%, 76.2745098039%);fill-opacity:0.5;stroke:hsl(80, 100%, 76.2745098039%);}#mermaid-eidkvgvxrrhr .radarCurve-3{color:hsl(270, 100%, 76.2745098039%);fill:hsl(270, 100%, 76.2745098039%);fill-opacity:0.5;stroke:hsl(270, 100%, 76.2745098039%);stroke-width:2;}#mermaid-eidkvgvxrrhr .radarLegendBox-3{fill:hsl(270, 100%, 76.2745098039%);fill-opacity:0.5;stroke:hsl(270, 100%, 76.2745098039%);}#mermaid-eidkvgvxrrhr .radarCurve-4{color:hsl(300, 100%, 76.2745098039%);fill:hsl(300, 100%, 76.2745098039%);fill-opacity:0.5;stroke:hsl(300, 100%, 76.2745098039%);stroke-width:2;}#mermaid-eidkvgvxrrhr .radarLegendBox-4{fill:hsl(300, 100%, 76.2745098039%);fill-opacity:0.5;stroke:hsl(300, 100%, 76.2745098039%);}#mermaid-eidkvgvxrrhr .radarCurve-5{color:hsl(330, 100%, 76.2745098039%);fill:hsl(330, 100%, 76.2745098039%);fill-opacity:0.5;stroke:hsl(330, 100%, 76.2745098039%);stroke-width:2;}#mermaid-eidkvgvxrrhr .radarLegendBox-5{fill:hsl(330, 100%, 76.2745098039%);fill-opacity:0.5;stroke:hsl(330, 100%, 76.2745098039%);}#mermaid-eidkvgvxrrhr .radarCurve-6{color:hsl(0, 100%, 76.2745098039%);fill:hsl(0, 100%, 76.2745098039%);fill-opacity:0.5;stroke:hsl(0, 100%, 76.2745098039%);stroke-width:2;}#mermaid-eidkvgvxrrhr .radarLegendBox-6{fill:hsl(0, 100%, 76.2745098039%);fill-opacity:0.5;stroke:hsl(0, 100%, 76.2745098039%);}#mermaid-eidkvgvxrrhr .radarCurve-7{color:hsl(30, 100%, 76.2745098039%);fill:hsl(30, 100%, 76.2745098039%);fill-opacity:0.5;stroke:hsl(30, 100%, 76.2745098039%);stroke-width:2;}#mermaid-eidkvgvxrrhr .radarLegendBox-7{fill:hsl(30, 100%, 76.2745098039%);fill-opacity:0.5;stroke:hsl(30, 100%, 76.2745098039%);}#mermaid-eidkvgvxrrhr .radarCurve-8{color:hsl(90, 100%, 76.2745098039%);fill:hsl(90, 100%, 76.2745098039%);fill-opacity:0.5;stroke:hsl(90, 100%, 76.2745098039%);stroke-width:2;}#mermaid-eidkvgvxrrhr .radarLegendBox-8{fill:hsl(90, 100%, 76.2745098039%);fill-opacity:0.5;stroke:hsl(90, 100%, 76.2745098039%);}#mermaid-eidkvgvxrrhr .radarCurve-9{color:hsl(150, 100%, 76.2745098039%);fill:hsl(150, 100%, 76.2745098039%);fill-opacity:0.5;stroke:hsl(150, 100%, 76.2745098039%);stroke-width:2;}#mermaid-eidkvgvxrrhr .radarLegendBox-9{fill:hsl(150, 100%, 76.2745098039%);fill-opacity:0.5;stroke:hsl(150, 100%, 76.2745098039%);}#mermaid-eidkvgvxrrhr .radarCurve-10{color:hsl(180, 100%, 76.2745098039%);fill:hsl(180, 100%, 76.2745098039%);fill-opacity:0.5;stroke:hsl(180, 100%, 76.2745098039%);stroke-width:2;}#mermaid-eidkvgvxrrhr .radarLegendBox-10{fill:hsl(180, 100%, 76.2745098039%);fill-opacity:0.5;stroke:hsl(180, 100%, 76.2745098039%);}#mermaid-eidkvgvxrrhr .radarCurve-11{color:hsl(210, 100%, 76.2745098039%);fill:hsl(210, 100%, 76.2745098039%);fill-opacity:0.5;stroke:hsl(210, 100%, 76.2745098039%);stroke-width:2;}#mermaid-eidkvgvxrrhr .radarLegendBox-11{fill:hsl(210, 100%, 76.2745098039%);fill-opacity:0.5;stroke:hsl(210, 100%, 76.2745098039%);}#mermaid-eidkvgvxrrhr :root{--mermaid-font-family:arial,sans-serif;}</style><g></g><g transform="translate(350, 350)"><circle r="60" class="radarGraticule"></circle><circle r="120" class="radarGraticule"></circle><circle r="180" class="radarGraticule"></circle><circle r="240" class="radarGraticule"></circle><circle r="300" class="radarGraticule"></circle><line x1="0" y1="0" x2="1.8369701987210297e-14" y2="-300" class="radarAxisLine"></line><text x="1.9288187086570814e-14" y="-315" class="radarAxisLabel">Math</text><line x1="0" y1="0" x2="259.8076211353316" y2="-150" class="radarAxisLine"></line><text x="272.7980021920982" y="-157.5" class="radarAxisLabel">Science</text><line x1="0" y1="0" x2="259.8076211353316" y2="149.99999999999994" class="radarAxisLine"></line><text x="272.7980021920982" y="157.49999999999994" class="radarAxisLabel">English</text><line x1="0" y1="0" x2="1.8369701987210297e-14" y2="300" class="radarAxisLine"></line><text x="1.9288187086570814e-14" y="315" class="radarAxisLabel">History</text><line x1="0" y1="0" x2="-259.80762113533154" y2="150.0000000000001" class="radarAxisLine"></line><text x="-272.7980021920981" y="157.5000000000001" class="radarAxisLabel">Geography</text><line x1="0" y1="0" x2="-259.8076211353316" y2="-150.00000000000003" class="radarAxisLine"></line><text x="-272.7980021920982" y="-157.50000000000003" class="radarAxisLabel">Art</text><path d="M1.5614246689128753e-14,-255 C79.50113206741148,-255 198.4930225473933,-198.75 233.8268590217984,-135 C269.1606954962035,-71.25 247.596662941971,61.34999999999995 207.84609690826528,119.99999999999996 C168.09553087455956,178.64999999999998 68.45930816915988,211.27499999999998 1.2858791391047208e-14,210 C-68.45930816915985,208.72500000000002 -155.10514981779295,171.1500000000001 -194.85571585149867,112.50000000000007 C-234.6062818852044,53.850000000000065 -266.9523307165532,-72.525 -233.8268590217984,-135.00000000000003 C-200.70138732704362,-197.47500000000005 -79.50113206741145,-255 1.5614246689128753e-14,-255 Z" class="radarCurve-0"></path><path d="M1.2858791391047208e-14,-210 C70.6676729488102,-207.45 157.31351459744326,-169.875 194.85571585149867,-112.5 C232.3979171055541,-55.12500000000001 253.96194965978663,67.57499999999996 220.83647796503186,127.49999999999996 C187.7110062702771,187.42499999999995 77.29276728776117,238.72499999999997 1.469576158976824e-14,240 C-77.29276728776114,241.27500000000003 -196.28465776774297,197.47500000000008 -233.82685902179838,135.00000000000009 C-271.3690602758538,72.52500000000009 -260.58704399873756,-68.85 -220.83647796503183,-127.50000000000003 C-181.0859119313261,-186.15000000000006 -70.66767294881018,-212.55 1.2858791391047208e-14,-210 Z" class="radarCurve-1"></path><g transform="translate(262.5, -262.5)"><rect width="12" height="12" class="radarLegendBox-0"></rect><text x="16" y="0" class="radarLegendText">Alice</text></g><g transform="translate(262.5, -242.5)"><rect width="12" height="12" class="radarLegendBox-1"></rect><text x="16" y="0" class="radarLegendText">Bob</text></g><text class="radarTitle" x="0" y="-350"></text></g></svg></body></html><figcaption>A Mermaid-generated radar chart, made with a few lines of text</figcaption></figure><details> <summary><span class="details-marker"></span>How to embed into Markdown</summary><pre class="language-markdown" data-language="Markdown"><code class="language-markdown"><span class="token code"><span class="token punctuation">```</span><span class="token code-language">mermaid</span> <span class="token code-block language-mermaid language-mermaid language-mermaid">radar-beta axis m["Math"], s["Science"], e["English"], h["History"], g["Geography"], a["Art"] curve a["Alice"]{85, 90, 80, 70, 75, 90} curve b["Bob"]{70, 75, 85, 80, 90, 85} max 100 min 0</span> <span class="token punctuation">```</span></span></code></pre> </details> <h3 id="mermaid-sankey-chart" tabindex="-1">Mermaid Sankey Chart</h3> <figure class="mermaid"><html><head></head><body><svg id="mermaid-eyqfqqlrjqui" width="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="max-width: 600px;" viewBox="0 0 600 403.91900634765625" role="graphics-document document" aria-roledescription="sankey"><style>#mermaid-eyqfqqlrjqui{font-family:arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-eyqfqqlrjqui .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-eyqfqqlrjqui .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-eyqfqqlrjqui .error-icon{fill:#552222;}#mermaid-eyqfqqlrjqui .error-text{fill:#552222;stroke:#552222;}#mermaid-eyqfqqlrjqui .edge-thickness-normal{stroke-width:1px;}#mermaid-eyqfqqlrjqui .edge-thickness-thick{stroke-width:3.5px;}#mermaid-eyqfqqlrjqui .edge-pattern-solid{stroke-dasharray:0;}#mermaid-eyqfqqlrjqui .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-eyqfqqlrjqui .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-eyqfqqlrjqui .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-eyqfqqlrjqui .marker{fill:#333333;stroke:#333333;}#mermaid-eyqfqqlrjqui .marker.cross{stroke:#333333;}#mermaid-eyqfqqlrjqui svg{font-family:arial,sans-serif;font-size:16px;}#mermaid-eyqfqqlrjqui p{margin:0;}#mermaid-eyqfqqlrjqui .label{font-family:arial,sans-serif;}#mermaid-eyqfqqlrjqui :root{--mermaid-font-family:arial,sans-serif;}</style><g></g><g class="nodes"><g class="node" id="node-1" transform="translate(0,72.09567842889594)" x="0" y="72.09567842889594"><rect height="9.220636581860191" width="10" fill="#4e79a7"></rect></g><g class="node" id="node-2" transform="translate(84.28571428571429,88.20528658319179)" x="84.28571428571429" y="88.20528658319179"><rect height="28.751421743138962" width="10" fill="#f28e2c"></rect></g><g class="node" id="node-3" transform="translate(168.57142857142858,332.97985250039255)" x="168.57142857142858" y="332.97985250039255"><rect height="47.8731039464526" width="10" fill="#e15759"></rect></g><g class="node" id="node-4" transform="translate(590,0.18272916807304762)" x="590" y="0.18272916807304762"><rect height="64.93049431777976" width="10" fill="#76b7b2"></rect></g><g class="node" id="node-5" transform="translate(168.57142857142858,95.13615275845761)" x="168.57142857142858" y="95.13615275845761"><rect height="33.08012136432423" width="10" fill="#59a14f"></rect></g><g class="node" id="node-6" transform="translate(168.57142857142858,138.21627412278184)" x="168.57142857142858" y="138.21627412278184"><rect height="15.08794477986612" width="10" fill="#edc949"></rect></g><g class="node" id="node-7" transform="translate(0,332.17102949516357)" x="0" y="332.17102949516357"><rect height="2.587387699453302" width="10" fill="#af7aa1"></rect></g><g class="node" id="node-8" transform="translate(0,125.0948937639732)" x="0" y="125.0948937639732"><rect height="2.5873876994532594" width="10" fill="#ff9da7"></rect></g><g class="node" id="node-9" transform="translate(0,137.68228146342648)" x="0" y="137.68228146342648"><rect height="0.8579777611386987" width="10" fill="#9c755f"></rect></g><g class="node" id="node-10" transform="translate(84.28571428571429,158.44588836836448)" x="84.28571428571429" y="158.44588836836448"><rect height="5.586613595296626" width="10" fill="#bab0ab"></rect></g><g class="node" id="node-11" transform="translate(0,168.47560621437722)" x="0" y="168.47560621437722"><rect height="4.728635834157956" width="10" fill="#4e79a7"></rect></g><g class="node" id="node-12" transform="translate(337.14285714285717,63.864261550154154)" x="337.14285714285717" y="63.864261550154154"><rect height="5.86442510885513" width="10" fill="#f28e2c"></rect></g><g class="node" id="node-13" transform="translate(590,96.60216340475654)" x="590" y="96.60216340475654"><rect height="42.05813490533856" width="10" fill="#e15759"></rect></g><g class="node" id="node-14" transform="translate(590,186.1752444343467)" x="590" y="186.1752444343467"><rect height="9.91812238026995" width="10" fill="#76b7b2"></rect></g><g class="node" id="node-15" transform="translate(590,148.6602983100951)" x="590" y="148.6602983100951"><rect height="27.514946124251594" width="10" fill="#59a14f"></rect></g><g class="node" id="node-16" transform="translate(337.14285714285717,197.4656550581489)" x="337.14285714285717" y="197.4656550581489"><rect height="67.90835578376198" width="10" fill="#edc949"></rect></g><g class="node" id="node-17" transform="translate(590,78.88043747987103)" x="590" y="78.88043747987103"><rect height="7.721725924885504" width="10" fill="#af7aa1"></rect></g><g class="node" id="node-18" transform="translate(421.42857142857144,242.73268021576226)" x="421.42857142857144" y="242.73268021576226"><rect height="2.006334347518873" width="10" fill="#ff9da7"></rect></g><g class="node" id="node-19" transform="translate(590,298.3074464040654)" x="590" y="298.3074464040654"><rect height="14.380626908198394" width="10" fill="#9c755f"></rect></g><g class="node" id="node-20" transform="translate(590,233.9039735188384)" x="590" y="233.9039735188384"><rect height="0.8153967521419645" width="10" fill="#bab0ab"></rect></g><g class="node" id="node-21" transform="translate(590,322.6880733122638)" x="590" y="322.6880733122638"><rect height="0.9075077542424879" width="10" fill="#4e79a7"></rect></g><g class="node" id="node-22" transform="translate(590,217.2500994601987)" x="590" y="217.2500994601987"><rect height="6.653874058639701" width="10" fill="#f28e2c"></rect></g><g class="node" id="node-23" transform="translate(590,244.71937027098036)" x="590" y="244.71937027098036"><rect height="6.911577873505337" width="10" fill="#e15759"></rect></g><g class="node" id="node-24" transform="translate(0,183.20424204853518)" x="0" y="183.20424204853518"><rect height="3.010166849543907" width="10" fill="#76b7b2"></rect></g><g class="node" id="node-25" transform="translate(84.28571428571429,184.7650080756903)" x="84.28571428571429" y="184.7650080756903"><rect height="9.089271212090779" width="10" fill="#59a14f"></rect></g><g class="node" id="node-26" transform="translate(0,196.21440889807909)" x="0" y="196.21440889807909"><rect height="6.079104362546872" width="10" fill="#edc949"></rect></g><g class="node" id="node-27" transform="translate(252.8571428571429,4.1019553082988605)" x="252.8571428571429" y="4.1019553082988605"><rect height="102.9032918964073" width="10" fill="#af7aa1"></rect></g><g class="node" id="node-28" transform="translate(0,212.29351326062596)" x="0" y="212.29351326062596"><rect height="0.5184385696075822" width="10" fill="#ff9da7"></rect></g><g class="node" id="node-29" transform="translate(505.7142857142858,247.55307040930583)" x="505.7142857142858" y="247.55307040930583"><rect height="1.5448183072992947" width="10" fill="#9c755f"></rect></g><g class="node" id="node-30" transform="translate(0,268.15814958480337)" x="0" y="268.15814958480337"><rect height="0.5171079130764156" width="10" fill="#bab0ab"></rect></g><g class="node" id="node-31" transform="translate(590,333.59558106650627)" x="590" y="333.59558106650627"><rect height="9.513454944075534" width="10" fill="#4e79a7"></rect></g><g class="node" id="node-32" transform="translate(590,353.1090360105818)" x="590" y="353.1090360105818"><rect height="1.0688128959627647" width="10" fill="#f28e2c"></rect></g><g class="node" id="node-33" transform="translate(590,364.17784890654457)" x="590" y="364.17784890654457"><rect height="15.248362817232191" width="10" fill="#e15759"></rect></g><g class="node" id="node-34" transform="translate(590,389.42621172377676)" x="590" y="389.42621172377676"><rect height="2.4556527028696564" width="10" fill="#76b7b2"></rect></g><g class="node" id="node-35" transform="translate(0,91.31631501075613)" x="0" y="91.31631501075613"><rect height="0.32342346243166276" width="10" fill="#59a14f"></rect></g><g class="node" id="node-36" transform="translate(0,0)" x="0" y="0"><rect height="62.09567842889594" width="10" fill="#edc949"></rect></g><g class="node" id="node-37" transform="translate(0,344.75841719461687)" x="0" y="344.75841719461687"><rect height="37.279599451262754" width="10" fill="#af7aa1"></rect></g><g class="node" id="node-38" transform="translate(84.28571428571429,341.6162789921701)" x="84.28571428571429" y="341.6162789921701"><rect height="45.241582805382905" width="10" fill="#ff9da7"></rect></g><g class="node" id="node-39" transform="translate(0,392.0380166458796)" x="0" y="392.0380166458796"><rect height="7.961983354120434" width="10" fill="#9c755f"></rect></g><g class="node" id="node-40" transform="translate(0,148.54025922456518)" x="0" y="148.54025922456518"><rect height="9.935346989812047" width="10" fill="#bab0ab"></rect></g><g class="node" id="node-41" transform="translate(0,222.81195183023354)" x="0" y="222.81195183023354"><rect height="19.493970330583636" width="10" fill="#4e79a7"></rect></g><g class="node" id="node-42" transform="translate(84.28571428571429,242.0714175626971)" x="84.28571428571429" y="242.0714175626971"><rect height="4.428203159569989" width="10" fill="#f28e2c"></rect></g><g class="node" id="node-43" transform="translate(84.28571428571429,256.4996207222671)" x="84.28571428571429" y="256.4996207222671"><rect height="1.424024264416289" width="10" fill="#e15759"></rect></g><g class="node" id="node-44" transform="translate(0,252.30592216081718)" x="0" y="252.30592216081718"><rect height="5.852227423986193" width="10" fill="#76b7b2"></rect></g><g class="node" id="node-45" transform="translate(0,278.6752574978798)" x="0" y="278.6752574978798"><rect height="0.6987425295780554" width="10" fill="#59a14f"></rect></g><g class="node" id="node-46" transform="translate(0,101.63973847318779)" x="0" y="101.63973847318779"><rect height="13.455155290785413" width="10" fill="#edc949"></rect></g><g class="node" id="node-47" transform="translate(0,289.37400002745784)" x="0" y="289.37400002745784"><rect height="1.405542923705866" width="10" fill="#af7aa1"></rect></g><g class="node" id="node-48" transform="translate(0,300.7795429511637)" x="0" y="300.7795429511637"><rect height="21.39148654399986" width="10" fill="#ff9da7"></rect></g></g><g class="node-labels" font-size="14"><text x="16" y="76.70599671982603" dy="0.35em" text-anchor="start">Agricultural waste</text><text x="100.28571428571429" y="102.58099745476127" dy="0.35em" text-anchor="start">Bio-conversion</text><text x="184.57142857142858" y="356.91640447361885" dy="0.35em" text-anchor="start">Liquid</text><text x="584" y="32.64797632696293" dy="0.35em" text-anchor="end">Losses</text><text x="184.57142857142858" y="111.67621344061973" dy="0.35em" text-anchor="start">Solid</text><text x="184.57142857142858" y="145.7602465127149" dy="0.35em" text-anchor="start">Gas</text><text x="16" y="333.4647233448902" dy="0.35em" text-anchor="start">Biofuel imports</text><text x="16" y="126.38858761369983" dy="0.35em" text-anchor="start">Biomass imports</text><text x="16" y="138.11127034399584" dy="0.35em" text-anchor="start">Coal imports</text><text x="100.28571428571429" y="161.2391951660128" dy="0.35em" text-anchor="start">Coal</text><text x="16" y="170.8399241314562" dy="0.35em" text-anchor="start">Coal reserves</text><text x="331.14285714285717" y="66.79647410458172" dy="0.35em" text-anchor="end">District heating</text><text x="584" y="117.63123085742582" dy="0.35em" text-anchor="end">Industry</text><text x="584" y="191.13430562448167" dy="0.35em" text-anchor="end">Heating and cooling - commercial</text><text x="584" y="162.4177713722209" dy="0.35em" text-anchor="end">Heating and cooling - homes</text><text x="331.14285714285717" y="231.4198329500299" dy="0.35em" text-anchor="end">Electricity grid</text><text x="584" y="82.74130044231379" dy="0.35em" text-anchor="end">Over generation / exports</text><text x="415.42857142857144" y="243.7358473895217" dy="0.35em" text-anchor="end">H2 conversion</text><text x="584" y="305.4977598581646" dy="0.35em" text-anchor="end">Road transport</text><text x="584" y="234.31167189490938" dy="0.35em" text-anchor="end">Agriculture</text><text x="584" y="323.141827189385" dy="0.35em" text-anchor="end">Rail transport</text><text x="584" y="220.57703648951855" dy="0.35em" text-anchor="end">Lighting &amp; appliances - commercial</text><text x="584" y="248.17515920773303" dy="0.35em" text-anchor="end">Lighting &amp; appliances - homes</text><text x="16" y="184.70932547330713" dy="0.35em" text-anchor="start">Gas imports</text><text x="100.28571428571429" y="189.30964368173568" dy="0.35em" text-anchor="start">NGas</text><text x="16" y="199.2539610793525" dy="0.35em" text-anchor="start">Gas reserves</text><text x="268.8571428571429" y="55.5536012565025" dy="0.35em" text-anchor="start">Thermal generation</text><text x="16" y="212.55273254542976" dy="0.35em" text-anchor="start">Geothermal</text><text x="499.7142857142858" y="248.32547956295548" dy="0.35em" text-anchor="end">H2</text><text x="16" y="268.4167035413416" dy="0.35em" text-anchor="start">Hydro</text><text x="584" y="338.35230853854404" dy="0.35em" text-anchor="end">International shipping</text><text x="584" y="353.6434424585632" dy="0.35em" text-anchor="end">Domestic aviation</text><text x="584" y="371.80203031516066" dy="0.35em" text-anchor="end">International aviation</text><text x="584" y="390.6540380752116" dy="0.35em" text-anchor="end">National navigation</text><text x="16" y="91.47802674197196" dy="0.35em" text-anchor="start">Marine algae</text><text x="16" y="31.04783921444797" dy="0.35em" text-anchor="start">Nuclear</text><text x="16" y="363.3982169202483" dy="0.35em" text-anchor="start">Oil imports</text><text x="100.28571428571429" y="364.2370703948616" dy="0.35em" text-anchor="start">Oil</text><text x="16" y="396.01900832293984" dy="0.35em" text-anchor="start">Oil reserves</text><text x="16" y="153.5079327194712" dy="0.35em" text-anchor="start">Other waste</text><text x="16" y="232.55893699552536" dy="0.35em" text-anchor="start">Pumped heat</text><text x="100.28571428571429" y="244.2855191424821" dy="0.35em" text-anchor="start">Solar PV</text><text x="100.28571428571429" y="257.2116328544752" dy="0.35em" text-anchor="start">Solar Thermal</text><text x="16" y="255.2320358728103" dy="0.35em" text-anchor="start">Solar</text><text x="16" y="279.02462876266884" dy="0.35em" text-anchor="start">Tidal</text><text x="16" y="108.3673161185805" dy="0.35em" text-anchor="start">UK land based bioenergy</text><text x="16" y="290.0767714893108" dy="0.35em" text-anchor="start">Wave</text><text x="16" y="311.4752862231636" dy="0.35em" text-anchor="start">Wind</text></g><g class="links" fill="none" stroke-opacity="0.5"><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-49" gradientUnits="userSpaceOnUse" x1="10" x2="84.28571428571429"><stop offset="0%" stop-color="#4e79a7"></stop><stop offset="100%" stop-color="#f28e2c"></stop></linearGradient><path d="M10,76.70599671982603C47.142857142857146,76.70599671982603,47.142857142857146,92.81560487412189,84.28571428571429,92.81560487412189" stroke="url(#linearGradient-49)" stroke-width="9.220636581860193"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-50" gradientUnits="userSpaceOnUse" x1="94.28571428571429" x2="168.57142857142858"><stop offset="0%" stop-color="#f28e2c"></stop><stop offset="100%" stop-color="#e15759"></stop></linearGradient><path d="M94.28571428571429,116.93464160552253C131.42857142857144,116.93464160552253,131.42857142857144,333.00191922120075,168.57142857142858,333.00191922120075" stroke="url(#linearGradient-50)" stroke-width="1"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-51" gradientUnits="userSpaceOnUse" x1="94.28571428571429" x2="590"><stop offset="0%" stop-color="#f28e2c"></stop><stop offset="100%" stop-color="#76b7b2"></stop></linearGradient><path d="M94.28571428571429,89.19817813151627C342.14285714285717,89.19817813151627,342.14285714285717,59.36441764448186,590,59.36441764448186" stroke="url(#linearGradient-51)" stroke-width="1.9857830966489627"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-52" gradientUnits="userSpaceOnUse" x1="94.28571428571429" x2="168.57142857142858"><stop offset="0%" stop-color="#f28e2c"></stop><stop offset="100%" stop-color="#59a14f"></stop></linearGradient><path d="M94.28571428571429,100.5525224610713C131.42857142857144,100.5525224610713,131.42857142857144,105.49760553968817,168.57142857142858,105.49760553968817" stroke="url(#linearGradient-52)" stroke-width="20.72290556246112"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-53" gradientUnits="userSpaceOnUse" x1="94.28571428571429" x2="168.57142857142858"><stop offset="0%" stop-color="#f28e2c"></stop><stop offset="100%" stop-color="#edc949"></stop></linearGradient><path d="M94.28571428571429,113.91327506350811C131.42857142857144,113.91327506350811,131.42857142857144,141.21557394398806,168.57142857142858,141.21557394398806" stroke="url(#linearGradient-53)" stroke-width="5.998599642412458"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-54" gradientUnits="userSpaceOnUse" x1="10" x2="168.57142857142858"><stop offset="0%" stop-color="#af7aa1"></stop><stop offset="100%" stop-color="#e15759"></stop></linearGradient><path d="M10,333.4647233448902C89.28571428571429,333.4647233448902,89.28571428571429,334.3176797917356,168.57142857142858,334.3176797917356" stroke="url(#linearGradient-54)" stroke-width="2.5873876994532683"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-55" gradientUnits="userSpaceOnUse" x1="10" x2="168.57142857142858"><stop offset="0%" stop-color="#ff9da7"></stop><stop offset="100%" stop-color="#59a14f"></stop></linearGradient><path d="M10,126.38858761369984C89.28571428571429,126.38858761369984,89.28571428571429,117.15275217064537,168.57142857142858,117.15275217064537" stroke="url(#linearGradient-55)" stroke-width="2.5873876994532683"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-56" gradientUnits="userSpaceOnUse" x1="10" x2="84.28571428571429"><stop offset="0%" stop-color="#9c755f"></stop><stop offset="100%" stop-color="#bab0ab"></stop></linearGradient><path d="M10,138.11127034399584C47.142857142857146,138.11127034399584,47.142857142857146,158.87487724893384,84.28571428571429,158.87487724893384" stroke="url(#linearGradient-56)" stroke-width="1"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-57" gradientUnits="userSpaceOnUse" x1="10" x2="84.28571428571429"><stop offset="0%" stop-color="#4e79a7"></stop><stop offset="100%" stop-color="#bab0ab"></stop></linearGradient><path d="M10,170.8399241314562C47.142857142857146,170.8399241314562,47.142857142857146,161.66818404658216,84.28571428571429,161.66818404658216" stroke="url(#linearGradient-57)" stroke-width="4.728635834157952"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-58" gradientUnits="userSpaceOnUse" x1="94.28571428571429" x2="168.57142857142858"><stop offset="0%" stop-color="#bab0ab"></stop><stop offset="100%" stop-color="#59a14f"></stop></linearGradient><path d="M94.28571428571429,161.23919516601282C131.42857142857144,161.23919516601282,131.42857142857144,125.42296732513354,168.57142857142858,125.42296732513354" stroke="url(#linearGradient-58)" stroke-width="5.586613595296655"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-59" gradientUnits="userSpaceOnUse" x1="347.14285714285717" x2="590"><stop offset="0%" stop-color="#f28e2c"></stop><stop offset="100%" stop-color="#e15759"></stop></linearGradient><path d="M347.14285714285717,64.25750751778963C468.57142857142856,64.25750751778963,468.57142857142856,96.99540937239202,590,96.99540937239202" stroke="url(#linearGradient-59)" stroke-width="1"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-60" gradientUnits="userSpaceOnUse" x1="347.14285714285717" x2="590"><stop offset="0%" stop-color="#f28e2c"></stop><stop offset="100%" stop-color="#76b7b2"></stop></linearGradient><path d="M347.14285714285717,68.89676758827218C468.57142857142856,68.89676758827218,468.57142857142856,187.0070895797209,590,187.0070895797209" stroke="url(#linearGradient-60)" stroke-width="1.6636902907484517"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-61" gradientUnits="userSpaceOnUse" x1="347.14285714285717" x2="590"><stop offset="0%" stop-color="#f28e2c"></stop><stop offset="100%" stop-color="#59a14f"></stop></linearGradient><path d="M347.14285714285717,66.35783796416152C468.57142857142856,66.35783796416152,468.57142857142856,150.36738278883152,590,150.36738278883152" stroke="url(#linearGradient-61)" stroke-width="3.41416895747285"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-62" gradientUnits="userSpaceOnUse" x1="347.14285714285717" x2="590"><stop offset="0%" stop-color="#edc949"></stop><stop offset="100%" stop-color="#af7aa1"></stop></linearGradient><path d="M347.14285714285717,205.5174207654404C468.57142857142856,205.5174207654404,468.57142857142856,82.74130044231379,590,82.74130044231379" stroke="url(#linearGradient-62)" stroke-width="7.721725924885494"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-63" gradientUnits="userSpaceOnUse" x1="347.14285714285717" x2="590"><stop offset="0%" stop-color="#edc949"></stop><stop offset="100%" stop-color="#59a14f"></stop></linearGradient><path d="M347.14285714285717,238.87657341180997C468.57142857142856,238.87657341180997,468.57142857142856,156.2780851748254,590,156.2780851748254" stroke="url(#linearGradient-63)" stroke-width="8.407235814514927"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-64" gradientUnits="userSpaceOnUse" x1="347.14285714285717" x2="421.42857142857144"><stop offset="0%" stop-color="#edc949"></stop><stop offset="100%" stop-color="#ff9da7"></stop></linearGradient><path d="M347.14285714285717,247.1038009678058C384.28571428571433,247.1038009678058,384.28571428571433,243.73584738952172,421.42857142857144,243.73584738952172" stroke="url(#linearGradient-64)" stroke-width="2.006334347518906"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-65" gradientUnits="userSpaceOnUse" x1="347.14285714285717" x2="590"><stop offset="0%" stop-color="#edc949"></stop><stop offset="100%" stop-color="#e15759"></stop></linearGradient><path d="M347.14285714285717,222.02561961621782C468.57142857142856,222.02561961621782,468.57142857142856,117.06311444398872,590,117.06311444398872" stroke="url(#linearGradient-65)" stroke-width="25.29467177666936"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-66" gradientUnits="userSpaceOnUse" x1="347.14285714285717" x2="590"><stop offset="0%" stop-color="#edc949"></stop><stop offset="100%" stop-color="#9c755f"></stop></linearGradient><path d="M347.14285714285717,263.39565724422755C468.57142857142856,263.39565724422755,468.57142857142856,299.7045248737259,590,299.7045248737259" stroke="url(#linearGradient-66)" stroke-width="2.794156939321005"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-67" gradientUnits="userSpaceOnUse" x1="347.14285714285717" x2="590"><stop offset="0%" stop-color="#edc949"></stop><stop offset="100%" stop-color="#bab0ab"></stop></linearGradient><path d="M347.14285714285717,254.92392155063334C468.57142857142856,254.92392155063334,468.57142857142856,234.28720259980886,590,234.28720259980886" stroke="url(#linearGradient-67)" stroke-width="1"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-68" gradientUnits="userSpaceOnUse" x1="347.14285714285717" x2="590"><stop offset="0%" stop-color="#edc949"></stop><stop offset="100%" stop-color="#76b7b2"></stop></linearGradient><path d="M347.14285714285717,244.59041255655688C468.57142857142856,244.59041255655688,468.57142857142856,189.35869233439115,590,189.35869233439115" stroke="url(#linearGradient-68)" stroke-width="3.020442474978904"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-69" gradientUnits="userSpaceOnUse" x1="347.14285714285717" x2="590"><stop offset="0%" stop-color="#edc949"></stop><stop offset="100%" stop-color="#76b7b2"></stop></linearGradient><path d="M347.14285714285717,199.56110643057326C468.57142857142856,199.56110643057326,468.57142857142856,62.556329998571684,590,62.556329998571684" stroke="url(#linearGradient-69)" stroke-width="4.190902744848722"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-70" gradientUnits="userSpaceOnUse" x1="347.14285714285717" x2="590"><stop offset="0%" stop-color="#edc949"></stop><stop offset="100%" stop-color="#4e79a7"></stop></linearGradient><path d="M347.14285714285717,265.08337327789945C468.57142857142856,265.08337327789945,468.57142857142856,322.9787108762752,590,322.9787108762752" stroke="url(#linearGradient-70)" stroke-width="1"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-71" gradientUnits="userSpaceOnUse" x1="347.14285714285717" x2="590"><stop offset="0%" stop-color="#edc949"></stop><stop offset="100%" stop-color="#f28e2c"></stop></linearGradient><path d="M347.14285714285717,251.43390517088508C468.57142857142856,251.43390517088508,468.57142857142856,220.57703648951855,590,220.57703648951855" stroke="url(#linearGradient-71)" stroke-width="6.653874058639708"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-72" gradientUnits="userSpaceOnUse" x1="347.14285714285717" x2="590"><stop offset="0%" stop-color="#edc949"></stop><stop offset="100%" stop-color="#e15759"></stop></linearGradient><path d="M347.14285714285717,258.5427898378144C468.57142857142856,258.5427898378144,468.57142857142856,248.175159207733,590,248.175159207733" stroke="url(#linearGradient-72)" stroke-width="6.911577873505254"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-73" gradientUnits="userSpaceOnUse" x1="10" x2="84.28571428571429"><stop offset="0%" stop-color="#76b7b2"></stop><stop offset="100%" stop-color="#59a14f"></stop></linearGradient><path d="M10,184.70932547330713C47.142857142857146,184.70932547330713,47.142857142857146,186.27009150046226,84.28571428571429,186.27009150046226" stroke="url(#linearGradient-73)" stroke-width="3.010166849543933"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-74" gradientUnits="userSpaceOnUse" x1="10" x2="84.28571428571429"><stop offset="0%" stop-color="#edc949"></stop><stop offset="100%" stop-color="#59a14f"></stop></linearGradient><path d="M10,199.25396107935254C47.142857142857146,199.25396107935254,47.142857142857146,190.8147271065077,84.28571428571429,190.8147271065077" stroke="url(#linearGradient-74)" stroke-width="6.079104362546875"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-75" gradientUnits="userSpaceOnUse" x1="178.57142857142858" x2="590"><stop offset="0%" stop-color="#edc949"></stop><stop offset="100%" stop-color="#76b7b2"></stop></linearGradient><path d="M178.57142857142858,153.14450315622886C384.2857142857143,153.14450315622886,384.2857142857143,187.84370291099845,590,187.84370291099845" stroke="url(#linearGradient-75)" stroke-width="1"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-76" gradientUnits="userSpaceOnUse" x1="178.57142857142858" x2="590"><stop offset="0%" stop-color="#edc949"></stop><stop offset="100%" stop-color="#76b7b2"></stop></linearGradient><path d="M178.57142857142858,138.26805883945232C384.2857142857143,138.26805883945232,384.2857142857143,60.40909390947684,590,60.40909390947684" stroke="url(#linearGradient-76)" stroke-width="1"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-77" gradientUnits="userSpaceOnUse" x1="178.57142857142858" x2="252.8571428571429"><stop offset="0%" stop-color="#edc949"></stop><stop offset="100%" stop-color="#af7aa1"></stop></linearGradient><path d="M178.57142857142858,143.9341421998036C215.71428571428572,143.9341421998036,215.71428571428572,101.39094856102537,252.8571428571429,101.39094856102537" stroke="url(#linearGradient-77)" stroke-width="11.22859728736161"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-78" gradientUnits="userSpaceOnUse" x1="178.57142857142858" x2="590"><stop offset="0%" stop-color="#edc949"></stop><stop offset="100%" stop-color="#bab0ab"></stop></linearGradient><path d="M178.57142857142858,153.22674512239004C384.2857142857143,153.22674512239004,384.2857142857143,234.04664946912254,590,234.04664946912254" stroke="url(#linearGradient-78)" stroke-width="1"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-79" gradientUnits="userSpaceOnUse" x1="178.57142857142858" x2="590"><stop offset="0%" stop-color="#edc949"></stop><stop offset="100%" stop-color="#e15759"></stop></linearGradient><path d="M178.57142857142858,151.344087906905C384.2857142857143,151.344087906905,384.2857142857143,102.62013149223348,590,102.62013149223348" stroke="url(#linearGradient-79)" stroke-width="3.5912941268411367"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-80" gradientUnits="userSpaceOnUse" x1="10" x2="337.14285714285717"><stop offset="0%" stop-color="#ff9da7"></stop><stop offset="100%" stop-color="#edc949"></stop></linearGradient><path d="M10,212.55273254542976C173.57142857142858,212.55273254542976,173.57142857142858,236.5749442024206,337.14285714285717,236.5749442024206" stroke="url(#linearGradient-80)" stroke-width="1"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-81" gradientUnits="userSpaceOnUse" x1="431.42857142857144" x2="505.7142857142858"><stop offset="0%" stop-color="#ff9da7"></stop><stop offset="100%" stop-color="#9c755f"></stop></linearGradient><path d="M431.42857142857144,243.9665314842687C468.5714285714286,243.9665314842687,468.5714285714286,248.32547956295548,505.7142857142858,248.32547956295548" stroke="url(#linearGradient-81)" stroke-width="1.5448183072992843"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-82" gradientUnits="userSpaceOnUse" x1="431.42857142857144" x2="590"><stop offset="0%" stop-color="#ff9da7"></stop><stop offset="100%" stop-color="#76b7b2"></stop></linearGradient><path d="M431.42857142857144,242.96340127319064C510.7142857142857,242.96340127319064,510.7142857142857,64.88250242842444,590,64.88250242842444" stroke="url(#linearGradient-82)" stroke-width="1"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-83" gradientUnits="userSpaceOnUse" x1="515.7142857142858" x2="590"><stop offset="0%" stop-color="#9c755f"></stop><stop offset="100%" stop-color="#9c755f"></stop></linearGradient><path d="M515.7142857142858,248.32547956295548C552.8571428571429,248.32547956295548,552.8571428571429,301.874012497036,590,301.874012497036" stroke="url(#linearGradient-83)" stroke-width="1.5448183072992843"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-84" gradientUnits="userSpaceOnUse" x1="10" x2="337.14285714285717"><stop offset="0%" stop-color="#bab0ab"></stop><stop offset="100%" stop-color="#edc949"></stop></linearGradient><path d="M10,268.4167035413416C173.57142857142858,268.4167035413416,173.57142857142858,241.52092060333263,337.14285714285717,241.52092060333263" stroke="url(#linearGradient-84)" stroke-width="1"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-85" gradientUnits="userSpaceOnUse" x1="178.57142857142858" x2="590"><stop offset="0%" stop-color="#e15759"></stop><stop offset="100%" stop-color="#e15759"></stop></linearGradient><path d="M178.57142857142858,337.4547764892784C384.2857142857143,337.4547764892784,384.2857142857143,134.18537432120925,590,134.18537432120925" stroke="url(#linearGradient-85)" stroke-width="8.949847977771698"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-86" gradientUnits="userSpaceOnUse" x1="178.57142857142858" x2="590"><stop offset="0%" stop-color="#e15759"></stop><stop offset="100%" stop-color="#4e79a7"></stop></linearGradient><path d="M178.57142857142858,357.3234005587429C384.2857142857143,357.3234005587429,384.2857142857143,338.352308538544,590,338.352308538544" stroke="url(#linearGradient-86)" stroke-width="9.51345494407546"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-87" gradientUnits="userSpaceOnUse" x1="178.57142857142858" x2="590"><stop offset="0%" stop-color="#e15759"></stop><stop offset="100%" stop-color="#9c755f"></stop></linearGradient><path d="M178.57142857142858,347.2196146296965C384.2857142857143,347.2196146296965,384.2857142857143,307.66724748147476,590,307.66724748147476" stroke="url(#linearGradient-87)" stroke-width="10.041651661578136"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-88" gradientUnits="userSpaceOnUse" x1="178.57142857142858" x2="590"><stop offset="0%" stop-color="#e15759"></stop><stop offset="100%" stop-color="#f28e2c"></stop></linearGradient><path d="M178.57142857142858,362.61453447876204C384.2857142857143,362.61453447876204,384.2857142857143,353.6434424585632,590,353.6434424585632" stroke="url(#linearGradient-88)" stroke-width="1.0688128959627246"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-89" gradientUnits="userSpaceOnUse" x1="178.57142857142858" x2="590"><stop offset="0%" stop-color="#e15759"></stop><stop offset="100%" stop-color="#e15759"></stop></linearGradient><path d="M178.57142857142858,370.77312233535946C384.2857142857143,370.77312233535946,384.2857142857143,371.80203031516066,590,371.80203031516066" stroke="url(#linearGradient-89)" stroke-width="15.24836281723221"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-90" gradientUnits="userSpaceOnUse" x1="178.57142857142858" x2="590"><stop offset="0%" stop-color="#e15759"></stop><stop offset="100%" stop-color="#bab0ab"></stop></linearGradient><path d="M178.57142857142858,342.0642446385358C384.2857142857143,342.0642446385358,384.2857142857143,234.58482611060884,590,234.58482611060884" stroke="url(#linearGradient-90)" stroke-width="1"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-91" gradientUnits="userSpaceOnUse" x1="178.57142857142858" x2="590"><stop offset="0%" stop-color="#e15759"></stop><stop offset="100%" stop-color="#76b7b2"></stop></linearGradient><path d="M178.57142857142858,379.6251300954104C384.2857142857143,379.6251300954104,384.2857142857143,390.6540380752116,590,390.6540380752116" stroke="url(#linearGradient-91)" stroke-width="2.455652702869677"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-92" gradientUnits="userSpaceOnUse" x1="178.57142857142858" x2="590"><stop offset="0%" stop-color="#e15759"></stop><stop offset="100%" stop-color="#4e79a7"></stop></linearGradient><path d="M178.57142857142858,352.40355677359537C384.2857142857143,352.40355677359537,384.2857142857143,323.43246475339646,590,323.43246475339646" stroke="url(#linearGradient-92)" stroke-width="1"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-93" gradientUnits="userSpaceOnUse" x1="10" x2="84.28571428571429"><stop offset="0%" stop-color="#59a14f"></stop><stop offset="100%" stop-color="#f28e2c"></stop></linearGradient><path d="M10,91.47802674197196C47.142857142857146,91.47802674197196,47.142857142857146,97.58763489626782,84.28571428571429,97.58763489626782" stroke="url(#linearGradient-93)" stroke-width="1"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-94" gradientUnits="userSpaceOnUse" x1="94.28571428571429" x2="168.57142857142858"><stop offset="0%" stop-color="#59a14f"></stop><stop offset="100%" stop-color="#edc949"></stop></linearGradient><path d="M94.28571428571429,189.3096436817357C131.42857142857144,189.3096436817357,131.42857142857144,148.7595093712397,168.57142857142858,148.7595093712397" stroke="url(#linearGradient-94)" stroke-width="9.089271212090807"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-95" gradientUnits="userSpaceOnUse" x1="10" x2="252.8571428571429"><stop offset="0%" stop-color="#edc949"></stop><stop offset="100%" stop-color="#af7aa1"></stop></linearGradient><path d="M10,31.047839214447965C131.42857142857144,31.047839214447965,131.42857142857144,35.149794522746824,252.8571428571429,35.149794522746824" stroke="url(#linearGradient-95)" stroke-width="62.09567842889593"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-96" gradientUnits="userSpaceOnUse" x1="10" x2="84.28571428571429"><stop offset="0%" stop-color="#af7aa1"></stop><stop offset="100%" stop-color="#ff9da7"></stop></linearGradient><path d="M10,363.39821692024816C47.142857142857146,363.39821692024816,47.142857142857146,360.2560787178014,84.28571428571429,360.2560787178014" stroke="url(#linearGradient-96)" stroke-width="37.279599451262584"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-97" gradientUnits="userSpaceOnUse" x1="10" x2="84.28571428571429"><stop offset="0%" stop-color="#9c755f"></stop><stop offset="100%" stop-color="#ff9da7"></stop></linearGradient><path d="M10,396.01900832293984C47.142857142857146,396.01900832293984,47.142857142857146,382.8768701204929,84.28571428571429,382.8768701204929" stroke="url(#linearGradient-97)" stroke-width="7.96198335412044"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-98" gradientUnits="userSpaceOnUse" x1="94.28571428571429" x2="168.57142857142858"><stop offset="0%" stop-color="#ff9da7"></stop><stop offset="100%" stop-color="#e15759"></stop></linearGradient><path d="M94.28571428571429,364.23707039486163C131.42857142857144,364.23707039486163,131.42857142857144,358.2321650441537,168.57142857142858,358.2321650441537" stroke="url(#linearGradient-98)" stroke-width="45.241582805383025"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-99" gradientUnits="userSpaceOnUse" x1="10" x2="168.57142857142858"><stop offset="0%" stop-color="#bab0ab"></stop><stop offset="100%" stop-color="#59a14f"></stop></linearGradient><path d="M10,156.38399896082058C89.28571428571429,156.38399896082058,89.28571428571429,120.53805327392861,168.57142857142858,120.53805327392861" stroke="url(#linearGradient-99)" stroke-width="4.183214507113203"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-100" gradientUnits="userSpaceOnUse" x1="10" x2="84.28571428571429"><stop offset="0%" stop-color="#bab0ab"></stop><stop offset="100%" stop-color="#f28e2c"></stop></linearGradient><path d="M10,151.41632546591458C47.142857142857146,151.41632546591458,47.142857142857146,114.08056815961847,84.28571428571429,114.08056815961847" stroke="url(#linearGradient-100)" stroke-width="5.752132482698824"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-101" gradientUnits="userSpaceOnUse" x1="10" x2="590"><stop offset="0%" stop-color="#4e79a7"></stop><stop offset="100%" stop-color="#59a14f"></stop></linearGradient><path d="M10,229.94671037415736C300,229.94671037415736,300,167.6164616260067,590,167.6164616260067" stroke="url(#linearGradient-101)" stroke-width="14.269517087847618"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-102" gradientUnits="userSpaceOnUse" x1="10" x2="590"><stop offset="0%" stop-color="#4e79a7"></stop><stop offset="100%" stop-color="#76b7b2"></stop></linearGradient><path d="M10,239.69369553944918C300,239.69369553944918,300,193.48114019324862,590,193.48114019324862" stroke="url(#linearGradient-102)" stroke-width="5.22445324273604"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-103" gradientUnits="userSpaceOnUse" x1="94.28571428571429" x2="337.14285714285717"><stop offset="0%" stop-color="#f28e2c"></stop><stop offset="100%" stop-color="#edc949"></stop></linearGradient><path d="M94.28571428571429,244.2855191424821C215.71428571428572,244.2855191424821,215.71428571428572,239.04826506700937,337.14285714285717,239.04826506700937" stroke="url(#linearGradient-103)" stroke-width="4.428203159570007"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-104" gradientUnits="userSpaceOnUse" x1="94.28571428571429" x2="590"><stop offset="0%" stop-color="#e15759"></stop><stop offset="100%" stop-color="#59a14f"></stop></linearGradient><path d="M94.28571428571429,257.2116328544752C342.14285714285717,257.2116328544752,342.14285714285717,175.4632323021386,590,175.4632323021386" stroke="url(#linearGradient-104)" stroke-width="1.4240242644162375"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-105" gradientUnits="userSpaceOnUse" x1="10" x2="84.28571428571429"><stop offset="0%" stop-color="#76b7b2"></stop><stop offset="100%" stop-color="#e15759"></stop></linearGradient><path d="M10,257.44613745259534C47.142857142857146,257.44613745259534,47.142857142857146,257.2116328544752,84.28571428571429,257.2116328544752" stroke="url(#linearGradient-105)" stroke-width="1.4240242644162375"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-106" gradientUnits="userSpaceOnUse" x1="10" x2="84.28571428571429"><stop offset="0%" stop-color="#76b7b2"></stop><stop offset="100%" stop-color="#f28e2c"></stop></linearGradient><path d="M10,254.52002374060217C47.142857142857146,254.52002374060217,47.142857142857146,244.2855191424821,84.28571428571429,244.2855191424821" stroke="url(#linearGradient-106)" stroke-width="4.428203159570007"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-107" gradientUnits="userSpaceOnUse" x1="178.57142857142858" x2="590"><stop offset="0%" stop-color="#59a14f"></stop><stop offset="100%" stop-color="#bab0ab"></stop></linearGradient><path d="M178.57142857142858,128.18359911240591C384.2857142857143,128.18359911240591,384.2857142857143,233.9365746038515,590,233.9365746038515" stroke="url(#linearGradient-107)" stroke-width="1"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-108" gradientUnits="userSpaceOnUse" x1="178.57142857142858" x2="252.8571428571429"><stop offset="0%" stop-color="#59a14f"></stop><stop offset="100%" stop-color="#af7aa1"></stop></linearGradient><path d="M178.57142857142858,109.92566084853249C215.71428571428572,109.92566084853249,215.71428571428572,80.98714182726968,252.8571428571429,80.98714182726968" stroke="url(#linearGradient-108)" stroke-width="29.579016180149765"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-109" gradientUnits="userSpaceOnUse" x1="178.57142857142858" x2="590"><stop offset="0%" stop-color="#59a14f"></stop><stop offset="100%" stop-color="#e15759"></stop></linearGradient><path d="M178.57142857142858,126.43308348300009C384.2857142857143,126.43308348300009,384.2857142857143,99.10656988442021,590,99.10656988442021" stroke="url(#linearGradient-109)" stroke-width="3.435829088785416"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-110" gradientUnits="userSpaceOnUse" x1="262.8571428571429" x2="337.14285714285717"><stop offset="0%" stop-color="#af7aa1"></stop><stop offset="100%" stop-color="#edc949"></stop></linearGradient><path d="M262.8571428571429,87.58021227497223C300,87.58021227497223,300,216.89068998788284,337.14285714285717,216.89068998788284" stroke="url(#linearGradient-110)" stroke-width="38.85006985946787"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-111" gradientUnits="userSpaceOnUse" x1="262.8571428571429" x2="590"><stop offset="0%" stop-color="#af7aa1"></stop><stop offset="100%" stop-color="#76b7b2"></stop></linearGradient><path d="M262.8571428571429,33.19635377234103C426.42857142857144,33.19635377234103,426.42857142857144,29.277127632115217,590,29.277127632115217" stroke="url(#linearGradient-111)" stroke-width="58.18879692808434"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-112" gradientUnits="userSpaceOnUse" x1="262.8571428571429" x2="337.14285714285717"><stop offset="0%" stop-color="#af7aa1"></stop><stop offset="100%" stop-color="#f28e2c"></stop></linearGradient><path d="M262.8571428571429,65.22296479081075C300,65.22296479081075,300,66.7964741045817,337.14285714285717,66.7964741045817" stroke="url(#linearGradient-112)" stroke-width="5.8644251088550945"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-113" gradientUnits="userSpaceOnUse" x1="10" x2="337.14285714285717"><stop offset="0%" stop-color="#59a14f"></stop><stop offset="100%" stop-color="#edc949"></stop></linearGradient><path d="M10,279.02462876266884C173.57142857142858,279.02462876266884,173.57142857142858,242.12884582465986,337.14285714285717,242.12884582465986" stroke="url(#linearGradient-113)" stroke-width="1"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-114" gradientUnits="userSpaceOnUse" x1="10" x2="84.28571428571429"><stop offset="0%" stop-color="#edc949"></stop><stop offset="100%" stop-color="#f28e2c"></stop></linearGradient><path d="M10,108.36731611858049C47.142857142857146,108.36731611858049,47.142857142857146,104.47692427287635,84.28571428571429,104.47692427287635" stroke="url(#linearGradient-114)" stroke-width="13.455155290785411"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-115" gradientUnits="userSpaceOnUse" x1="10" x2="337.14285714285717"><stop offset="0%" stop-color="#af7aa1"></stop><stop offset="100%" stop-color="#edc949"></stop></linearGradient><path d="M10,290.0767714893108C173.57142857142858,290.0767714893108,173.57142857142858,243.18098855130182,337.14285714285717,243.18098855130182" stroke="url(#linearGradient-115)" stroke-width="1.4055429237058572"></path></g><g class="link" style="mix-blend-mode: multiply;"><linearGradient id="linearGradient-116" gradientUnits="userSpaceOnUse" x1="10" x2="337.14285714285717"><stop offset="0%" stop-color="#ff9da7"></stop><stop offset="100%" stop-color="#edc949"></stop></linearGradient><path d="M10,311.4752862231636C173.57142857142858,311.4752862231636,173.57142857142858,254.5795032851547,337.14285714285717,254.5795032851547" stroke="url(#linearGradient-116)" stroke-width="21.391486543999843"></path></g></g></svg></body></html><figcaption>A Sankey chart generated by Mermaid</figcaption></figure><details> <summary><span class="details-marker"></span>How to embed into Markdown</summary><pre class="language-markdown" data-language="Markdown"><code class="language-markdown"><span class="token code"><span class="token punctuation">```</span><span class="token code-language">mermaid</span> <span class="token code-block language-mermaid language-mermaid language-mermaid">--- config: sankey: showValues: false --- sankey-beta Agricultural 'waste',Bio-conversion,124.729 Bio-conversion,Liquid,0.597 Bio-conversion,Losses,26.862 Bio-conversion,Solid,280.322 Bio-conversion,Gas,81.144 Biofuel imports,Liquid,35 Biomass imports,Solid,35 Coal imports,Coal,11.606 Coal reserves,Coal,63.965 Coal,Solid,75.571 District heating,Industry,10.639 District heating,Heating and cooling - commercial,22.505 District heating,Heating and cooling - homes,46.184 Electricity grid,Over generation / exports,104.453 Electricity grid,Heating and cooling - homes,113.726 Electricity grid,H2 conversion,27.14 Electricity grid,Industry,342.165 Electricity grid,Road transport,37.797 Electricity grid,Agriculture,4.412 Electricity grid,Heating and cooling - commercial,40.858 Electricity grid,Losses,56.691 Electricity grid,Rail transport,7.863 Electricity grid,Lighting &amp; appliances - commercial,90.008 Electricity grid,Lighting &amp; appliances - homes,93.494 Gas imports,NGas,40.719 Gas reserves,NGas,82.233 Gas,Heating and cooling - commercial,0.129 Gas,Losses,1.401 Gas,Thermal generation,151.891 Gas,Agriculture,2.096 Gas,Industry,48.58 Geothermal,Electricity grid,7.013 H2 conversion,H2,20.897 H2 conversion,Losses,6.242 H2,Road transport,20.897 Hydro,Electricity grid,6.995 Liquid,Industry,121.066 Liquid,International shipping,128.69 Liquid,Road transport,135.835 Liquid,Domestic aviation,14.458 Liquid,International aviation,206.267 Liquid,Agriculture,3.64 Liquid,National navigation,33.218 Liquid,Rail transport,4.413 Marine algae,Bio-conversion,4.375 NGas,Gas,122.952 Nuclear,Thermal generation,839.978 Oil imports,Oil,504.287 Oil reserves,Oil,107.703 Oil,Liquid,611.99 Other waste,Solid,56.587 Other waste,Bio-conversion,77.81 Pumped heat,Heating and cooling - homes,193.026 Pumped heat,Heating and cooling - commercial,70.672 Solar PV,Electricity grid,59.901 Solar Thermal,Heating and cooling - homes,19.263 Solar,Solar Thermal,19.263 Solar,Solar PV,59.901 Solid,Agriculture,0.882 Solid,Thermal generation,400.12 Solid,Industry,46.477 Thermal generation,Electricity grid,525.531 Thermal generation,Losses,787.129 Thermal generation,District heating,79.329 Tidal,Electricity grid,9.452 UK land based bioenergy,Bio-conversion,182.01 Wave,Electricity grid,19.013 Wind,Electricity grid,289.366</span> <span class="token punctuation">```</span></span></code></pre> </details> <h3 id="mermaid-pie-chart" tabindex="-1">Mermaid Pie Chart</h3> <p>Other examples are the xy chart or the pie chart. Those charts can be useful, but they are fairly simple and some might find they are not polished enough. The syntax isn´t consistent either. The xy chart requires a title to be in double quotes to avoid having all spaces removed from the title text, while for the pie chart double quotes are supported, but the title would be better without quotes because the quotes are rendered into the diagram. Also, the titles of the two diagram types are rendered in different font sizes. Generally, font sizes vary across the different Mermaid chart types. At the beginning of this document I mentioned standardized output creation from text definitions is a benefit of text-to-chart, but it is not to 100% achieved in this case. It is a probably a minor complaint, depending on your context, but I expect these things to be aligned when using a charting software.</p> <figure class="mermaid"><html><head></head><body><svg id="mermaid-sfrxgynezsux" width="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 573.2783203125 450" style="max-width: 573.2783203125px;" role="graphics-document document" aria-roledescription="pie"><style>#mermaid-sfrxgynezsux{font-family:arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-sfrxgynezsux .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-sfrxgynezsux .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-sfrxgynezsux .error-icon{fill:#552222;}#mermaid-sfrxgynezsux .error-text{fill:#552222;stroke:#552222;}#mermaid-sfrxgynezsux .edge-thickness-normal{stroke-width:1px;}#mermaid-sfrxgynezsux .edge-thickness-thick{stroke-width:3.5px;}#mermaid-sfrxgynezsux .edge-pattern-solid{stroke-dasharray:0;}#mermaid-sfrxgynezsux .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-sfrxgynezsux .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-sfrxgynezsux .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-sfrxgynezsux .marker{fill:#333333;stroke:#333333;}#mermaid-sfrxgynezsux .marker.cross{stroke:#333333;}#mermaid-sfrxgynezsux svg{font-family:arial,sans-serif;font-size:16px;}#mermaid-sfrxgynezsux p{margin:0;}#mermaid-sfrxgynezsux .pieCircle{stroke:black;stroke-width:2px;opacity:0.7;}#mermaid-sfrxgynezsux .pieOuterCircle{stroke:black;stroke-width:2px;fill:none;}#mermaid-sfrxgynezsux .pieTitleText{text-anchor:middle;font-size:25px;fill:black;font-family:arial,sans-serif;}#mermaid-sfrxgynezsux .slice{font-family:arial,sans-serif;fill:#333;font-size:17px;}#mermaid-sfrxgynezsux .legend text{fill:black;font-family:arial,sans-serif;font-size:17px;}#mermaid-sfrxgynezsux :root{--mermaid-font-family:arial,sans-serif;}</style><g></g><g transform="translate(225,225)"><circle cx="0" cy="0" r="186" class="pieOuterCircle"></circle><path d="M0,-185A185,185,0,1,1,-108.74,-149.668L0,0Z" fill="#ECECFF" class="pieCircle"></path><path d="M-108.74,-149.668A185,185,0,0,1,-46.008,-179.188L0,0Z" fill="#ffffde" class="pieCircle"></path><path d="M-46.008,-179.188A185,185,0,0,1,0,-185L0,0Z" fill="hsl(80, 100%, 56.2745098039%)" class="pieCircle"></path><text transform="translate(42.87610796952391,131.95909163595257)" class="slice" style="text-anchor: middle;">90%</text><text transform="translate(-59.07687670465376,-125.54475352966024)" class="slice" style="text-anchor: middle;">6%</text><text transform="translate(-17.389986157047144,-137.6559148073838)" class="slice" style="text-anchor: middle;">4%</text><text x="0" y="-200" class="pieTitleText">What Voldemort doesn't have?</text><g class="legend" transform="translate(216,-33)"><rect width="18" height="18" style="fill: rgb(181, 255, 32); stroke: rgb(181, 255, 32);"></rect><text x="22" y="14">Friends</text></g><g class="legend" transform="translate(216,-11)"><rect width="18" height="18" style="fill: rgb(255, 255, 222); stroke: rgb(255, 255, 222);"></rect><text x="22" y="14">Family</text></g><g class="legend" transform="translate(216,11)"><rect width="18" height="18" style="fill: rgb(236, 236, 255); stroke: rgb(236, 236, 255);"></rect><text x="22" y="14">Nose</text></g></g></svg></body></html><figcaption>A simple pie chart generated by Mermaid</figcaption></figure><details> <summary><span class="details-marker"></span>How to embed into Markdown</summary><pre class="language-markdown" data-language="Markdown"><code class="language-markdown"><span class="token code"><span class="token punctuation">```</span><span class="token code-language">mermaid</span> <span class="token code-block language-mermaid language-mermaid language-mermaid">pie title What Voldemort doesn't have? "Friends" : 2 "Family" : 3 "Nose" : 45</span> <span class="token punctuation">```</span></span></code></pre> </details> <h3 id="mermaid-xy-chart" tabindex="-1">Mermaid XY Chart</h3> <figure class="mermaid"><html><head></head><body><svg id="mermaid-utiljgzwbahj" width="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="max-width: 700px;" viewBox="0 0 700 500" role="graphics-document document" aria-roledescription="xychart"><style>#mermaid-utiljgzwbahj{font-family:arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-utiljgzwbahj .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-utiljgzwbahj .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-utiljgzwbahj .error-icon{fill:#552222;}#mermaid-utiljgzwbahj .error-text{fill:#552222;stroke:#552222;}#mermaid-utiljgzwbahj .edge-thickness-normal{stroke-width:1px;}#mermaid-utiljgzwbahj .edge-thickness-thick{stroke-width:3.5px;}#mermaid-utiljgzwbahj .edge-pattern-solid{stroke-dasharray:0;}#mermaid-utiljgzwbahj .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-utiljgzwbahj .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-utiljgzwbahj .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-utiljgzwbahj .marker{fill:#333333;stroke:#333333;}#mermaid-utiljgzwbahj .marker.cross{stroke:#333333;}#mermaid-utiljgzwbahj svg{font-family:arial,sans-serif;font-size:16px;}#mermaid-utiljgzwbahj p{margin:0;}#mermaid-utiljgzwbahj :root{--mermaid-font-family:arial,sans-serif;}</style><g></g><g class="main"><rect width="700" height="500" class="background" fill="white"></rect><g class="chart-title"><text x="0" y="0" fill="#131300" font-size="20" dominant-baseline="middle" text-anchor="middle" transform="translate(350, 22) rotate(0)">The week in data</text></g><g class="plot"><g class="bar-plot-0"><rect x="74.18437690734864" y="396.12263977302695" width="55.099999999999994" height="41.87735831962442" fill="#ECECFF" stroke="#ECECFF" stroke-width="0"></rect><rect x="169.06198075612383" y="413.95282836230297" width="55.099999999999994" height="24.0471697303484" fill="#ECECFF" stroke="#ECECFF" stroke-width="0"></rect><rect x="263.93958460489904" y="429.99999809265137" width="55.099999999999994" height="8" fill="#ECECFF" stroke="#ECECFF" stroke-width="0"></rect><rect x="358.8171884536743" y="413.95282836230297" width="55.099999999999994" height="24.0471697303484" fill="#ECECFF" stroke="#ECECFF" stroke-width="0"></rect><rect x="453.6947923024495" y="406.82075292659255" width="55.099999999999994" height="31.17924516605882" fill="#ECECFF" stroke="#ECECFF" stroke-width="0"></rect><rect x="548.5723961512248" y="396.12263977302695" width="55.099999999999994" height="41.87735831962442" fill="#ECECFF" stroke="#ECECFF" stroke-width="0"></rect><rect x="643.45" y="399.6886774908821" width="55.099999999999994" height="38.31132060176924" fill="#ECECFF" stroke="#ECECFF" stroke-width="0"></rect></g><g class="line-plot-1"><path d="M101.734,396.123L196.612,342.632L291.49,305.189L386.367,251.698L481.245,191.075L576.122,119.755L671,52" fill="none" stroke="#8493A6" stroke-width="2"></path></g></g><g class="bottom-axis"><g class="axis-line"><path d="M 72.73437690734863,438.99999809265137 L 700,438.99999809265137" fill="none" stroke="#131300" stroke-width="2"></path></g><g class="label"><text x="0" y="0" fill="#131300" font-size="14" dominant-baseline="text-before-edge" text-anchor="middle" transform="translate(101.73437690734863, 449.99999809265137) rotate(0)">Mon</text><text x="0" y="0" fill="#131300" font-size="14" dominant-baseline="text-before-edge" text-anchor="middle" transform="translate(196.61198075612384, 449.99999809265137) rotate(0)">Tue</text><text x="0" y="0" fill="#131300" font-size="14" dominant-baseline="text-before-edge" text-anchor="middle" transform="translate(291.48958460489905, 449.99999809265137) rotate(0)">Wed</text><text x="0" y="0" fill="#131300" font-size="14" dominant-baseline="text-before-edge" text-anchor="middle" transform="translate(386.3671884536743, 449.99999809265137) rotate(0)">Thu</text><text x="0" y="0" fill="#131300" font-size="14" dominant-baseline="text-before-edge" text-anchor="middle" transform="translate(481.2447923024495, 449.99999809265137) rotate(0)">Fri</text><text x="0" y="0" fill="#131300" font-size="14" dominant-baseline="text-before-edge" text-anchor="middle" transform="translate(576.1223961512247, 449.99999809265137) rotate(0)">Sat</text><text x="0" y="0" fill="#131300" font-size="14" dominant-baseline="text-before-edge" text-anchor="middle" transform="translate(671, 449.99999809265137) rotate(0)">Sun</text></g><g class="ticks"><path d="M 101.73437690734863,439.99999809265137 L 101.73437690734863,444.99999809265137" fill="none" stroke="#131300" stroke-width="2"></path><path d="M 196.61198075612384,439.99999809265137 L 196.61198075612384,444.99999809265137" fill="none" stroke="#131300" stroke-width="2"></path><path d="M 291.48958460489905,439.99999809265137 L 291.48958460489905,444.99999809265137" fill="none" stroke="#131300" stroke-width="2"></path><path d="M 386.3671884536743,439.99999809265137 L 386.3671884536743,444.99999809265137" fill="none" stroke="#131300" stroke-width="2"></path><path d="M 481.2447923024495,439.99999809265137 L 481.2447923024495,444.99999809265137" fill="none" stroke="#131300" stroke-width="2"></path><path d="M 576.1223961512247,439.99999809265137 L 576.1223961512247,444.99999809265137" fill="none" stroke="#131300" stroke-width="2"></path><path d="M 671,439.99999809265137 L 671,444.99999809265137" fill="none" stroke="#131300" stroke-width="2"></path></g><g class="title"><text x="0" y="0" fill="#131300" font-size="16" dominant-baseline="text-before-edge" text-anchor="middle" transform="translate(386.3671884536743, 475.99999809265137) rotate(0)">Days of the week</text></g></g><g class="left-axis"><g class="axisl-line"><path d="M 71.73437690734863,44 L 71.73437690734863,437.99999809265137" fill="none" stroke="#131300" stroke-width="2"></path></g><g class="label"><text x="0" y="0" fill="#131300" font-size="14" dominant-baseline="middle" text-anchor="end" transform="translate(60.73437690734863, 75.17924516605882) rotate(0)">220</text><text x="0" y="0" fill="#131300" font-size="14" dominant-baseline="middle" text-anchor="end" transform="translate(60.73437690734863, 110.83962234461083) rotate(0)">200</text><text x="0" y="0" fill="#131300" font-size="14" dominant-baseline="middle" text-anchor="end" transform="translate(60.73437690734863, 146.49999952316284) rotate(0)">180</text><text x="0" y="0" fill="#131300" font-size="14" dominant-baseline="middle" text-anchor="end" transform="translate(60.73437690734863, 182.16037670171485) rotate(0)">160</text><text x="0" y="0" fill="#131300" font-size="14" dominant-baseline="middle" text-anchor="end" transform="translate(60.73437690734863, 217.82075388026686) rotate(0)">140</text><text x="0" y="0" fill="#131300" font-size="14" dominant-baseline="middle" text-anchor="end" transform="translate(60.73437690734863, 253.48113105881887) rotate(0)">120</text><text x="0" y="0" fill="#131300" font-size="14" dominant-baseline="middle" text-anchor="end" transform="translate(60.73437690734863, 289.14150823737094) rotate(0)">100</text><text x="0" y="0" fill="#131300" font-size="14" dominant-baseline="middle" text-anchor="end" transform="translate(60.73437690734863, 324.8018854159229) rotate(0)">80</text><text x="0" y="0" fill="#131300" font-size="14" dominant-baseline="middle" text-anchor="end" transform="translate(60.73437690734863, 360.46226259447496) rotate(0)">60</text><text x="0" y="0" fill="#131300" font-size="14" dominant-baseline="middle" text-anchor="end" transform="translate(60.73437690734863, 396.12263977302695) rotate(0)">40</text></g><g class="ticks"><path d="M 70.73437690734863,75.17924516605882 L 65.73437690734863,75.17924516605882" fill="none" stroke="#131300" stroke-width="2"></path><path d="M 70.73437690734863,110.83962234461083 L 65.73437690734863,110.83962234461083" fill="none" stroke="#131300" stroke-width="2"></path><path d="M 70.73437690734863,146.49999952316284 L 65.73437690734863,146.49999952316284" fill="none" stroke="#131300" stroke-width="2"></path><path d="M 70.73437690734863,182.16037670171485 L 65.73437690734863,182.16037670171485" fill="none" stroke="#131300" stroke-width="2"></path><path d="M 70.73437690734863,217.82075388026686 L 65.73437690734863,217.82075388026686" fill="none" stroke="#131300" stroke-width="2"></path><path d="M 70.73437690734863,253.48113105881887 L 65.73437690734863,253.48113105881887" fill="none" stroke="#131300" stroke-width="2"></path><path d="M 70.73437690734863,289.14150823737094 L 65.73437690734863,289.14150823737094" fill="none" stroke="#131300" stroke-width="2"></path><path d="M 70.73437690734863,324.8018854159229 L 65.73437690734863,324.8018854159229" fill="none" stroke="#131300" stroke-width="2"></path><path d="M 70.73437690734863,360.46226259447496 L 65.73437690734863,360.46226259447496" fill="none" stroke="#131300" stroke-width="2"></path><path d="M 70.73437690734863,396.12263977302695 L 65.73437690734863,396.12263977302695" fill="none" stroke="#131300" stroke-width="2"></path></g><g class="title"><text x="0" y="0" fill="#131300" font-size="16" dominant-baseline="text-before-edge" text-anchor="middle" transform="translate(5, 240.99999904632568) rotate(270)">Data</text></g></g></g><g class="mermaid-tmp-group"></g></svg></body></html><figcaption>A simple xy chart generated by Mermaid. The bars represent data points for each day of the week. The line represents the cumulated data points from day to day. This visualization is clear as long as you have a single data series to visualize (like only bars, or only the line). When having more than one data series, I´m missing an automatically generated legend to explain the data within the chart. The explanation can only be given in addition to what Mermaid does, for example by putting your own description as some sort of legend into a <code>figcaption</code>, which is not ideal in my view. A legend should really be part of any information graphic.</figcaption></figure><details> <summary><span class="details-marker"></span>How to embed into Markdown</summary><pre class="language-markdown" data-language="Markdown"><code class="language-markdown"><span class="token code"><span class="token punctuation">```</span><span class="token code-language">mermaid</span> <span class="token code-block language-mermaid language-mermaid language-mermaid">xychart-beta title "The week in data" x-axis "Days of the week" [Mon, Tue, Wed, Thu, Fri, Sat, Sun] y-axis "Data" bar "Per day" [40, 30, 21, 30, 34, 40, 38] line "Cumulated over days" [40, 70, 91, 121, 155, 195, 233]</span> <span class="token punctuation">```</span></span></code></pre> </details> <h3 id="mermaid-chart-appearance" tabindex="-1">Mermaid Chart Appearance</h3> <p>The appearance of each Mermaid chart can be configured through a frontmatter configuration within the chart definition, see <a href="https://mermaid.js.org/config/configuration.html#frontmatter-config"><cite>Frontmatter config</cite></a> in the Mermaid documentation. In addition, a software developer can apply a custom styling to all diagrams by using a Mermaid config object and a theme CSS.</p> <p>The application of styles to the diagrams is inconsistent, not well documented, and I didn´t find it straight forward. For example, you can set the colors of the bars and lines for the xy chart in the Mermaid config object (which is JSON), but the background of the xy chart needs to be set via the theme CSS. At some point I refrained from doing my own styling and now I just use the default. Unfortunately that means I do not have a dark mode switch, because Mermaid is not supporting an automatic switch by reacting to system settings out of the box, and the font size of the data series legends is too tiny, but I have to accept that.</p> <p>In the end, the limitations of Mermaid´s general purpose charts made me watch out for other solutions and I came to ECharts.</p> <h2 id="echarts" tabindex="-1">ECharts</h2> <p>ECharts is a free and capable charting software under the Apache License 2.0. It covers general purpose charts in various flavours and can be used for specific charts that go well beyond of what I would expect to get from a charting software. The charts are rendered on the client and can be interactive in the sense that users are able to filter out certain data series to shift focus on other data series to better analyze the data.</p> <p>I´m impressed by the <a href="https://echarts.apache.org/examples/index.html">ECharts demo page</a>.</p> <p>Other than Mermaid, ECharts does not rely on text to describe a chart. Instead the chart has to be defined with JavaScript. It´s a steeper learning curve, but the concepts are well thought through, pretty flexible, and the resulting charts can be tailored to certain needs much better than with Mermaid. To directly jump in, let´s pick up some chart types we rendered previously with Mermaid and do the same with ECharts.</p> <h3 id="echarts-pie-chart" tabindex="-1">ECharts Pie Chart</h3> <figure id="echarts-dmgcekbleatf" class="echarts"> <div id="echarts-vlyoyfepipzm" class="echarts-container"> </div> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> <script type="module"> function debounce(func, delay) { let timeoutId; return function(...args) { const context = this; clearTimeout(timeoutId); timeoutId = setTimeout(() => func.apply(context, args), delay); } } function deepMerge(target, ...sources) { for (const source of sources) { for (const k in source) { let vs = source[k], vt = target[k] if (Object(vs) == vs && Object(vt) === vt) { target[k] = deepMerge(vt, vs) continue } target[k] = source[k] } } return target } function applyDefaults(defaults, config) { const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches; let adjustedConfig; if (isDarkMode && defaults.darkModeConfig) { defaults = deepMerge({}, defaults, defaults.darkModeConfig); adjustedConfig = deepMerge({}, config, config.darkModeConfig); } else { defaults = deepMerge({}, defaults); adjustedConfig = deepMerge({}, config); } delete defaults.darkModeConfig; delete adjustedConfig.darkModeConfig; if (defaults.series && adjustedConfig.series) { for (const def in defaults.series) { for (const conf of adjustedConfig.series) { conf[def] = deepMerge({}, defaults.series[def], conf[def]); } } } delete defaults.series; adjustedConfig = deepMerge(defaults, adjustedConfig); return adjustedConfig; } function getDefaults() { return {"color":["#007affa0","#ffa500a0","#008000a0","#9370DBa0","#FFD700a0","#ff0000a0"],"renderOptions":{"renderer":"svg"},"aria":{"show":true},"toolbox":{"feature":{"restore":{},"saveAsImage":{},"dataView":{}}},"title":{"textStyle":{"fontFamily":"'iA Writer Quattro', system-ui, sans-serif","fontSize":18,"color":"#262626"}},"legend":{"textStyle":{"fontFamily":"'iA Writer Quattro', system-ui, sans-serif","fontSize":16,"color":"#262626"}},"textStyle":{"fontFamily":"'iA Writer Quattro', system-ui, sans-serif","fontSize":18,"color":"#262626"},"grid":{"left":0,"containLabel":true},"radar":{"name":{"textStyle":{"color":"#262626"}},"splitLine":{"show":false},"splitArea":{"show":false}},"series":{"label":{"textStyle":{"fontFamily":"'iA Writer Quattro', system-ui, sans-serif","fontSize":16,"color":"#262626"}},"markPoint":{"label":{"textStyle":{"fontFamily":"'iA Writer Quattro', system-ui, sans-serif","fontSize":16,"color":"#262626"}}}},"darkModeConfig":{"title":{"textStyle":{"color":"#c3c3c3"}},"radar":{"name":{"textStyle":{"color":"#c3c3c3"}}},"textStyle":{"color":"#c3c3c3"},"legend":{"textStyle":{"color":"#c3c3c3"}},"series":{"name":{"textStyle":{"color":"#c3c3c3"}},"label":{"textStyle":{"color":"#c3c3c3"}},"markLine":{"lineStyle":{"color":"#888"}},"splitLine":{"lineStyle":{"color":"#888"}},"markPoint":{"label":{"textStyle":{"color":"#c3c3c3"}}}}}}; } function adjustConfig() { const defaults = getDefaults(); const container = document.querySelector("#echarts-vlyoyfepipzm"); //might be used by chart config const containerWidth = ctx.clientWidth; //might be used by chart config const containerHeight = ctx.clientHeight; //might be used by chart config const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches; //might be used by chart config const config = { title: { text: 'What Voldemort doesn´t have', }, figcaption: `A simple pie chart rendered by ECharts. You will probably notice it´s more interactive, more polished, and much closer to the styling of the hosting website than the corresponding Mermaid chart.`, tooltip: { trigger: 'item' }, series: [ { type: 'pie', radius: containerWidth > 600 ? '70%' : '50%', data: [ { value: 2, name: 'Friends' }, { value: 3, name: 'Family' }, { value: 45, name: 'Nose' } ], label: { show: true, formatter: containerWidth > 600 ? '{b}: {c} ≈ {d}%' : '{b} {c}' // {b} = data name // {c} = raw value // {d} = percentage } } ] }; return applyDefaults(defaults, config); } //create chart instance const ctx = document.querySelector("#echarts-vlyoyfepipzm"); let config = adjustConfig() let chart; if (config.renderOptions?.renderer) { chart = echarts.init(ctx, null, { renderer: config.renderOptions.renderer }); } else { chart = echarts.init(ctx); } function renderChart() { try { const config = adjustConfig(); ctx.setAttribute('class','echarts-container'); for(const data of config.series) { ctx.classList.add(data.type); } if (config.figcaption) { const figure = document.querySelector("#echarts-dmgcekbleatf"); let figcaption = figure.querySelector('figcaption'); if (!figcaption) { figcaption = document.createElement('figcaption'); figure.appendChild(figcaption); } figcaption.innerHTML = config.figcaption; } const renderOptions = config?.renderOptions delete config?.figcaption; delete config?.renderOptions; chart.setOption(config, renderOptions); } catch (err) { console.error(err); } } renderChart(); const debouncedRender = debounce(() => { chart.resize(); renderChart(); }, config.renderOptions?.debounceMillis || 16); const resizeObserver = new ResizeObserver(() => { requestAnimationFrame(() => { debouncedRender(); }); }); resizeObserver.observe(ctx); const darkModeQuery = window.matchMedia('(prefers-color-scheme: dark)'); darkModeQuery.addEventListener('change', debouncedRender); </script> </figure><details> <summary><span class="details-marker"></span>How to embed into Markdown</summary><pre class="language-markdown" data-language="Markdown"><code class="language-markdown"><span class="token code"><span class="token punctuation">```</span><span class="token code-language">echarts</span> <span class="token code-block language-echarts language-echarts language-echarts">const config = { title: { text: 'What Voldemort doesn´t have', }, tooltip: { trigger: 'item' }, series: [ { type: 'pie', radius: containerWidth > 600 ? '70%' : '50%', data: [ { value: 2, name: 'Friends' }, { value: 3, name: 'Family' }, { value: 45, name: 'Nose' } ], label: { show: true, formatter: containerWidth > 600 ? '{b}: {c} ≈ {d}%' : '{b} {c}' // {b} = data name // {c} = raw value // {d} = percentage } } ] };</span> <span class="token punctuation">```</span></span></code></pre> </details> <h3 id="echarts-xy-chart" tabindex="-1">ECharts XY Chart</h3> <figure id="echarts-rnrqelupomxp" class="echarts"> <div id="echarts-sxlvavapdmxr" class="echarts-container"> </div> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> <script type="module"> function debounce(func, delay) { let timeoutId; return function(...args) { const context = this; clearTimeout(timeoutId); timeoutId = setTimeout(() => func.apply(context, args), delay); } } function deepMerge(target, ...sources) { for (const source of sources) { for (const k in source) { let vs = source[k], vt = target[k] if (Object(vs) == vs && Object(vt) === vt) { target[k] = deepMerge(vt, vs) continue } target[k] = source[k] } } return target } function applyDefaults(defaults, config) { const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches; let adjustedConfig; if (isDarkMode && defaults.darkModeConfig) { defaults = deepMerge({}, defaults, defaults.darkModeConfig); adjustedConfig = deepMerge({}, config, config.darkModeConfig); } else { defaults = deepMerge({}, defaults); adjustedConfig = deepMerge({}, config); } delete defaults.darkModeConfig; delete adjustedConfig.darkModeConfig; if (defaults.series && adjustedConfig.series) { for (const def in defaults.series) { for (const conf of adjustedConfig.series) { conf[def] = deepMerge({}, defaults.series[def], conf[def]); } } } delete defaults.series; adjustedConfig = deepMerge(defaults, adjustedConfig); return adjustedConfig; } function getDefaults() { return {"color":["#007affa0","#ffa500a0","#008000a0","#9370DBa0","#FFD700a0","#ff0000a0"],"renderOptions":{"renderer":"svg"},"aria":{"show":true},"toolbox":{"feature":{"restore":{},"saveAsImage":{},"dataView":{}}},"title":{"textStyle":{"fontFamily":"'iA Writer Quattro', system-ui, sans-serif","fontSize":18,"color":"#262626"}},"legend":{"textStyle":{"fontFamily":"'iA Writer Quattro', system-ui, sans-serif","fontSize":16,"color":"#262626"}},"textStyle":{"fontFamily":"'iA Writer Quattro', system-ui, sans-serif","fontSize":18,"color":"#262626"},"grid":{"left":0,"containLabel":true},"radar":{"name":{"textStyle":{"color":"#262626"}},"splitLine":{"show":false},"splitArea":{"show":false}},"series":{"label":{"textStyle":{"fontFamily":"'iA Writer Quattro', system-ui, sans-serif","fontSize":16,"color":"#262626"}},"markPoint":{"label":{"textStyle":{"fontFamily":"'iA Writer Quattro', system-ui, sans-serif","fontSize":16,"color":"#262626"}}}},"darkModeConfig":{"title":{"textStyle":{"color":"#c3c3c3"}},"radar":{"name":{"textStyle":{"color":"#c3c3c3"}}},"textStyle":{"color":"#c3c3c3"},"legend":{"textStyle":{"color":"#c3c3c3"}},"series":{"name":{"textStyle":{"color":"#c3c3c3"}},"label":{"textStyle":{"color":"#c3c3c3"}},"markLine":{"lineStyle":{"color":"#888"}},"splitLine":{"lineStyle":{"color":"#888"}},"markPoint":{"label":{"textStyle":{"color":"#c3c3c3"}}}}}}; } function adjustConfig() { const defaults = getDefaults(); const container = document.querySelector("#echarts-sxlvavapdmxr"); //might be used by chart config const containerWidth = ctx.clientWidth; //might be used by chart config const containerHeight = ctx.clientHeight; //might be used by chart config const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches; //might be used by chart config const config = { title: { text: 'The week in data', }, figcaption: `The ECharts version of the xy chart, which is named a combined line/bar chart in ECharts. It´s easy to have a proper legend for the visualized data, and again, the chart is interactive.`, xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], name: containerWidth > 600 ? 'Days of the week': '' }, yAxis: { type: 'value', name: containerWidth > 600 ? 'Data' : '' }, legend: { data: ['Per day', 'Cumulated over days'] }, series: [ { name: 'Per day', data: [40, 30, 21, 30, 34, 40, 38], type: 'bar' }, { name: 'Cumulated over days', data: [40, 70, 91, 121, 155, 195, 233], type: 'line' } ] }; return applyDefaults(defaults, config); } //create chart instance const ctx = document.querySelector("#echarts-sxlvavapdmxr"); let config = adjustConfig() let chart; if (config.renderOptions?.renderer) { chart = echarts.init(ctx, null, { renderer: config.renderOptions.renderer }); } else { chart = echarts.init(ctx); } function renderChart() { try { const config = adjustConfig(); ctx.setAttribute('class','echarts-container'); for(const data of config.series) { ctx.classList.add(data.type); } if (config.figcaption) { const figure = document.querySelector("#echarts-rnrqelupomxp"); let figcaption = figure.querySelector('figcaption'); if (!figcaption) { figcaption = document.createElement('figcaption'); figure.appendChild(figcaption); } figcaption.innerHTML = config.figcaption; } const renderOptions = config?.renderOptions delete config?.figcaption; delete config?.renderOptions; chart.setOption(config, renderOptions); } catch (err) { console.error(err); } } renderChart(); const debouncedRender = debounce(() => { chart.resize(); renderChart(); }, config.renderOptions?.debounceMillis || 16); const resizeObserver = new ResizeObserver(() => { requestAnimationFrame(() => { debouncedRender(); }); }); resizeObserver.observe(ctx); const darkModeQuery = window.matchMedia('(prefers-color-scheme: dark)'); darkModeQuery.addEventListener('change', debouncedRender); </script> </figure><details> <summary><span class="details-marker"></span>How to embed into Markdown</summary><pre class="language-markdown" data-language="Markdown"><code class="language-markdown"><span class="token code"><span class="token punctuation">```</span><span class="token code-language">echarts</span> <span class="token code-block language-echarts language-echarts language-echarts">const config = { title: { text: 'The week in data', }, xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], name: containerWidth > 600 ? 'Days of the week' : '' }, yAxis: { type: 'value', name: containerWidth > 600 ? 'Data' : '' }, legend: { data: ['Per day', 'Cumulated over days'] }, series: [ { name: 'Per day', data: [40, 30, 21, 30, 34, 40, 38], type: 'bar' }, { name: 'Cumulated over days', data: [40, 70, 91, 121, 155, 195, 233], type: 'line' } ] };</span> <span class="token punctuation">```</span></span></code></pre> </details> <h3 id="echarts-radar-chart" tabindex="-1">ECharts Radar Chart</h3> <figure id="echarts-nikmkxtoqeiy" class="echarts"> <div id="echarts-lvjgqtmodile" class="echarts-container"> </div> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> <script type="module"> function debounce(func, delay) { let timeoutId; return function(...args) { const context = this; clearTimeout(timeoutId); timeoutId = setTimeout(() => func.apply(context, args), delay); } } function deepMerge(target, ...sources) { for (const source of sources) { for (const k in source) { let vs = source[k], vt = target[k] if (Object(vs) == vs && Object(vt) === vt) { target[k] = deepMerge(vt, vs) continue } target[k] = source[k] } } return target } function applyDefaults(defaults, config) { const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches; let adjustedConfig; if (isDarkMode && defaults.darkModeConfig) { defaults = deepMerge({}, defaults, defaults.darkModeConfig); adjustedConfig = deepMerge({}, config, config.darkModeConfig); } else { defaults = deepMerge({}, defaults); adjustedConfig = deepMerge({}, config); } delete defaults.darkModeConfig; delete adjustedConfig.darkModeConfig; if (defaults.series && adjustedConfig.series) { for (const def in defaults.series) { for (const conf of adjustedConfig.series) { conf[def] = deepMerge({}, defaults.series[def], conf[def]); } } } delete defaults.series; adjustedConfig = deepMerge(defaults, adjustedConfig); return adjustedConfig; } function getDefaults() { return {"color":["#007affa0","#ffa500a0","#008000a0","#9370DBa0","#FFD700a0","#ff0000a0"],"renderOptions":{"renderer":"svg"},"aria":{"show":true},"toolbox":{"feature":{"restore":{},"saveAsImage":{},"dataView":{}}},"title":{"textStyle":{"fontFamily":"'iA Writer Quattro', system-ui, sans-serif","fontSize":18,"color":"#262626"}},"legend":{"textStyle":{"fontFamily":"'iA Writer Quattro', system-ui, sans-serif","fontSize":16,"color":"#262626"}},"textStyle":{"fontFamily":"'iA Writer Quattro', system-ui, sans-serif","fontSize":18,"color":"#262626"},"grid":{"left":0,"containLabel":true},"radar":{"name":{"textStyle":{"color":"#262626"}},"splitLine":{"show":false},"splitArea":{"show":false}},"series":{"label":{"textStyle":{"fontFamily":"'iA Writer Quattro', system-ui, sans-serif","fontSize":16,"color":"#262626"}},"markPoint":{"label":{"textStyle":{"fontFamily":"'iA Writer Quattro', system-ui, sans-serif","fontSize":16,"color":"#262626"}}}},"darkModeConfig":{"title":{"textStyle":{"color":"#c3c3c3"}},"radar":{"name":{"textStyle":{"color":"#c3c3c3"}}},"textStyle":{"color":"#c3c3c3"},"legend":{"textStyle":{"color":"#c3c3c3"}},"series":{"name":{"textStyle":{"color":"#c3c3c3"}},"label":{"textStyle":{"color":"#c3c3c3"}},"markLine":{"lineStyle":{"color":"#888"}},"splitLine":{"lineStyle":{"color":"#888"}},"markPoint":{"label":{"textStyle":{"color":"#c3c3c3"}}}}}}; } function adjustConfig() { const defaults = getDefaults(); const container = document.querySelector("#echarts-lvjgqtmodile"); //might be used by chart config const containerWidth = ctx.clientWidth; //might be used by chart config const containerHeight = ctx.clientHeight; //might be used by chart config const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches; //might be used by chart config const config = { figcaption: 'The radar chart, generated by ECharts', legend: { data: ['Alice', 'Bob'] }, radar: { splitLine: { show: false }, splitArea: { show: false }, indicator: [ { name: 'Math', max: 100 }, { name: 'Science', max: 100 }, { name: 'English', max: 100 }, { name: 'History', max: 100 }, { name: 'Geography', max: 100 }, { name: 'Art', max: 100 } ] }, series: [ { type: 'radar', data: [ { value: [85, 90, 80, 70, 75, 90], name: 'Alice' }, { value: [70, 75, 85, 80, 90, 85], name: 'Bob' } ] } ] }; return applyDefaults(defaults, config); } //create chart instance const ctx = document.querySelector("#echarts-lvjgqtmodile"); let config = adjustConfig() let chart; if (config.renderOptions?.renderer) { chart = echarts.init(ctx, null, { renderer: config.renderOptions.renderer }); } else { chart = echarts.init(ctx); } function renderChart() { try { const config = adjustConfig(); ctx.setAttribute('class','echarts-container'); for(const data of config.series) { ctx.classList.add(data.type); } if (config.figcaption) { const figure = document.querySelector("#echarts-nikmkxtoqeiy"); let figcaption = figure.querySelector('figcaption'); if (!figcaption) { figcaption = document.createElement('figcaption'); figure.appendChild(figcaption); } figcaption.innerHTML = config.figcaption; } const renderOptions = config?.renderOptions delete config?.figcaption; delete config?.renderOptions; chart.setOption(config, renderOptions); } catch (err) { console.error(err); } } renderChart(); const debouncedRender = debounce(() => { chart.resize(); renderChart(); }, config.renderOptions?.debounceMillis || 16); const resizeObserver = new ResizeObserver(() => { requestAnimationFrame(() => { debouncedRender(); }); }); resizeObserver.observe(ctx); const darkModeQuery = window.matchMedia('(prefers-color-scheme: dark)'); darkModeQuery.addEventListener('change', debouncedRender); </script> </figure><details> <summary><span class="details-marker"></span>How to embed into Markdown</summary><pre class="language-markdown" data-language="Markdown"><code class="language-markdown"><span class="token code"><span class="token punctuation">```</span><span class="token code-language">echarts</span> <span class="token code-block language-echarts language-echarts language-echarts">const config = { legend: { data: ['Alice', 'Bob'] }, radar: { splitLine: { show: false }, splitArea: { show: false }, indicator: [ { name: 'Math', max: 100 }, { name: 'Science', max: 100 }, { name: 'English', max: 100 }, { name: 'History', max: 100 }, { name: 'Geography', max: 100 }, { name: 'Art', max: 100 } ] }, series: [ { type: 'radar', data: [ { value: [85, 90, 80, 70, 75, 90], name: 'Alice' }, { value: [70, 75, 85, 80, 90, 85], name: 'Bob' } ] } ] };</span> <span class="token punctuation">```</span></span></code></pre> </details> <h3 id="echarts-sankey-chart" tabindex="-1">ECharts Sankey Chart</h3> <figure id="echarts-ouvxkvbrgjnc" class="echarts"> <div id="echarts-tyczfchhgdgf" class="echarts-container"> </div> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> <script type="module"> function debounce(func, delay) { let timeoutId; return function(...args) { const context = this; clearTimeout(timeoutId); timeoutId = setTimeout(() => func.apply(context, args), delay); } } function deepMerge(target, ...sources) { for (const source of sources) { for (const k in source) { let vs = source[k], vt = target[k] if (Object(vs) == vs && Object(vt) === vt) { target[k] = deepMerge(vt, vs) continue } target[k] = source[k] } } return target } function applyDefaults(defaults, config) { const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches; let adjustedConfig; if (isDarkMode && defaults.darkModeConfig) { defaults = deepMerge({}, defaults, defaults.darkModeConfig); adjustedConfig = deepMerge({}, config, config.darkModeConfig); } else { defaults = deepMerge({}, defaults); adjustedConfig = deepMerge({}, config); } delete defaults.darkModeConfig; delete adjustedConfig.darkModeConfig; if (defaults.series && adjustedConfig.series) { for (const def in defaults.series) { for (const conf of adjustedConfig.series) { conf[def] = deepMerge({}, defaults.series[def], conf[def]); } } } delete defaults.series; adjustedConfig = deepMerge(defaults, adjustedConfig); return adjustedConfig; } function getDefaults() { return {"color":["#007affa0","#ffa500a0","#008000a0","#9370DBa0","#FFD700a0","#ff0000a0"],"renderOptions":{"renderer":"svg"},"aria":{"show":true},"toolbox":{"feature":{"restore":{},"saveAsImage":{},"dataView":{}}},"title":{"textStyle":{"fontFamily":"'iA Writer Quattro', system-ui, sans-serif","fontSize":18,"color":"#262626"}},"legend":{"textStyle":{"fontFamily":"'iA Writer Quattro', system-ui, sans-serif","fontSize":16,"color":"#262626"}},"textStyle":{"fontFamily":"'iA Writer Quattro', system-ui, sans-serif","fontSize":18,"color":"#262626"},"grid":{"left":0,"containLabel":true},"radar":{"name":{"textStyle":{"color":"#262626"}},"splitLine":{"show":false},"splitArea":{"show":false}},"series":{"label":{"textStyle":{"fontFamily":"'iA Writer Quattro', system-ui, sans-serif","fontSize":16,"color":"#262626"}},"markPoint":{"label":{"textStyle":{"fontFamily":"'iA Writer Quattro', system-ui, sans-serif","fontSize":16,"color":"#262626"}}}},"darkModeConfig":{"title":{"textStyle":{"color":"#c3c3c3"}},"radar":{"name":{"textStyle":{"color":"#c3c3c3"}}},"textStyle":{"color":"#c3c3c3"},"legend":{"textStyle":{"color":"#c3c3c3"}},"series":{"name":{"textStyle":{"color":"#c3c3c3"}},"label":{"textStyle":{"color":"#c3c3c3"}},"markLine":{"lineStyle":{"color":"#888"}},"splitLine":{"lineStyle":{"color":"#888"}},"markPoint":{"label":{"textStyle":{"color":"#c3c3c3"}}}}}}; } function adjustConfig() { const defaults = getDefaults(); const container = document.querySelector("#echarts-tyczfchhgdgf"); //might be used by chart config const containerWidth = ctx.clientWidth; //might be used by chart config const containerHeight = ctx.clientHeight; //might be used by chart config const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches; //might be used by chart config const config = { figcaption: 'The Sankey chart, generated by ECharts', tooltip: { trigger: "item", triggerOn: "mousemove", }, animation: true, series: [ { type: "sankey", bottom: "10%", emphasis: { focus: "adjacency", }, data: [ { name: "Agricultural 'waste'", }, { name: "Bio-conversion" }, { name: "Biofuel imports" }, { name: "Biomass imports" }, { name: "Coal imports" }, { name: "Coal reserves" }, { name: "Coal" }, { name: "District heating", }, { name: "Electricity grid", }, { name: "Gas imports" }, { name: "Gas reserves" }, { name: "Gas", }, { name: "Geothermal" }, { name: "H2 conversion" }, { name: "H2" }, { name: "Hydro" }, { name: "Liquid" }, { name: "Marine algae" }, { name: "NGas" }, { name: "Nuclear" }, { name: "Oil imports" }, { name: "Oil reserves" }, { name: "Oil" }, { name: "Other waste" }, { name: "Pumped heat", }, { name: "Solar PV" }, { name: "Solar Thermal", }, { name: "Solar" }, { name: "Thermal generation", }, { name: "Tidal" }, { name: "UK land based bioenergy", }, { name: "Wave" }, { name: "Wind" }, ], links: [ { source: "Agricultural 'waste'", target: "Bio-conversion", value: 124.729, }, { source: "Bio-conversion", target: "Liquid", value: 0.597 }, { source: "Bio-conversion", target: "Losses", value: 26.862 }, { source: "Bio-conversion", target: "Solid", value: 280.322 }, { source: "Bio-conversion", target: "Gas", value: 81.144 }, { source: "Biofuel imports", target: "Liquid", value: 35 }, { source: "Biomass imports", target: "Solid", value: 35 }, { source: "Coal imports", target: "Coal", value: 11.606 }, { source: "Coal reserves", target: "Coal", value: 63.965 }, { source: "Coal", target: "Solid", value: 75.571 }, { source: "District heating", target: "Industry", value: 10.639 }, { source: "District heating", target: "Heating and cooling - commercial", value: 22.505, }, { source: "District heating", target: "Heating and cooling - homes", value: 46.184, }, { source: "Electricity grid", target: "Over generation / exports", value: 104.453, }, { source: "Electricity grid", target: "Heating and cooling - homes", value: 113.726, }, { source: "Electricity grid", target: "H2 conversion", value: 27.14 }, { source: "Electricity grid", target: "Industry", value: 342.165 }, { source: "Electricity grid", target: "Road transport", value: 37.797 }, { source: "Electricity grid", target: "Agriculture", value: 4.412 }, { source: "Electricity grid", target: "Heating and cooling - commercial", value: 40.858, }, { source: "Electricity grid", target: "Losses", value: 56.691 }, { source: "Electricity grid", target: "Rail transport", value: 7.863 }, { source: "Electricity grid", target: "Lighting & appliances - commercial", value: 90.008, }, { source: "Electricity grid", target: "Lighting & appliances - homes", value: 93.494, }, { source: "Gas imports", target: "NGas", value: 40.719 }, { source: "Gas reserves", target: "NGas", value: 82.233 }, { source: "Gas", target: "Heating and cooling - commercial", value: 0.129, }, { source: "Gas", target: "Losses", value: 1.401 }, { source: "Gas", target: "Thermal generation", value: 151.891 }, { source: "Gas", target: "Agriculture", value: 2.096 }, { source: "Gas", target: "Industry", value: 48.58 }, { source: "Geothermal", target: "Electricity grid", value: 7.013 }, { source: "H2 conversion", target: "H2", value: 20.897 }, { source: "H2 conversion", target: "Losses", value: 6.242 }, { source: "H2", target: "Road transport", value: 20.897 }, { source: "Hydro", target: "Electricity grid", value: 6.995 }, { source: "Liquid", target: "Industry", value: 121.066 }, { source: "Liquid", target: "International shipping", value: 128.69 }, { source: "Liquid", target: "Road transport", value: 135.835 }, { source: "Liquid", target: "Domestic aviation", value: 14.458 }, { source: "Liquid", target: "International aviation", value: 206.267 }, { source: "Liquid", target: "Agriculture", value: 3.64 }, { source: "Liquid", target: "National navigation", value: 33.218 }, { source: "Liquid", target: "Rail transport", value: 4.413 }, { source: "Marine algae", target: "Bio-conversion", value: 4.375 }, { source: "NGas", target: "Gas", value: 122.952 }, { source: "Nuclear", target: "Thermal generation", value: 839.978 }, { source: "Oil imports", target: "Oil", value: 504.287 }, { source: "Oil reserves", target: "Oil", value: 107.703 }, { source: "Oil", target: "Liquid", value: 611.99 }, { source: "Other waste", target: "Solid", value: 56.587 }, { source: "Other waste", target: "Bio-conversion", value: 77.81 }, { source: "Pumped heat", target: "Heating and cooling - homes", value: 193.026, }, { source: "Pumped heat", target: "Heating and cooling - commercial", value: 70.672, }, { source: "Solar PV", target: "Electricity grid", value: 59.901 }, { source: "Solar Thermal", target: "Heating and cooling - homes", value: 19.263, }, { source: "Solar", target: "Solar Thermal", value: 19.263 }, { source: "Solar", target: "Solar PV", value: 59.901 }, { source: "Solid", target: "Agriculture", value: 0.882 }, { source: "Solid", target: "Thermal generation", value: 400.12 }, { source: "Solid", target: "Industry", value: 46.477 }, { source: "Thermal generation", target: "Electricity grid", value: 525.531, }, { source: "Thermal generation", target: "Losses", value: 787.129 }, { source: "Thermal generation", target: "District heating", value: 79.329, }, { source: "Tidal", target: "Electricity grid", value: 9.452 }, { source: "UK land based bioenergy", target: "Bio-conversion", value: 182.01, }, { source: "Wave", target: "Electricity grid", value: 19.013 }, { source: "Wind", target: "Electricity grid", value: 289.366 }, ], label: { position: "top", fontSize: 10, lineHeight: 12, align: 'left' }, nodeGap: 20, lineStyle: { color: "source", curveness: 0.5, }, }, ], }; return applyDefaults(defaults, config); } //create chart instance const ctx = document.querySelector("#echarts-tyczfchhgdgf"); let config = adjustConfig() let chart; if (config.renderOptions?.renderer) { chart = echarts.init(ctx, null, { renderer: config.renderOptions.renderer }); } else { chart = echarts.init(ctx); } function renderChart() { try { const config = adjustConfig(); ctx.setAttribute('class','echarts-container'); for(const data of config.series) { ctx.classList.add(data.type); } if (config.figcaption) { const figure = document.querySelector("#echarts-ouvxkvbrgjnc"); let figcaption = figure.querySelector('figcaption'); if (!figcaption) { figcaption = document.createElement('figcaption'); figure.appendChild(figcaption); } figcaption.innerHTML = config.figcaption; } const renderOptions = config?.renderOptions delete config?.figcaption; delete config?.renderOptions; chart.setOption(config, renderOptions); } catch (err) { console.error(err); } } renderChart(); const debouncedRender = debounce(() => { chart.resize(); renderChart(); }, config.renderOptions?.debounceMillis || 16); const resizeObserver = new ResizeObserver(() => { requestAnimationFrame(() => { debouncedRender(); }); }); resizeObserver.observe(ctx); const darkModeQuery = window.matchMedia('(prefers-color-scheme: dark)'); darkModeQuery.addEventListener('change', debouncedRender); </script> </figure><details> <summary><span class="details-marker"></span>How to embed into Markdown</summary><pre class="language-markdown" data-language="Markdown"><code class="language-markdown"><span class="token code"><span class="token punctuation">```</span><span class="token code-language">charts</span> <span class="token code-block language-charts language-charts language-charts">const config = { tooltip: { trigger: "item", triggerOn: "mousemove", }, animation: true, series: [ { type: "sankey", bottom: "10%", emphasis: { focus: "adjacency", }, data: [ { name: "Agricultural 'waste'", }, { name: "Bio-conversion" }, { name: "Biofuel imports" }, { name: "Biomass imports" }, { name: "Coal imports" }, { name: "Coal reserves" }, { name: "Coal" }, { name: "District heating", }, { name: "Electricity grid", }, { name: "Gas imports" }, { name: "Gas reserves" }, { name: "Gas", }, { name: "Geothermal" }, { name: "H2 conversion" }, { name: "H2" }, { name: "Hydro" }, { name: "Liquid" }, { name: "Marine algae" }, { name: "NGas" }, { name: "Nuclear" }, { name: "Oil imports" }, { name: "Oil reserves" }, { name: "Oil" }, { name: "Other waste" }, { name: "Pumped heat", }, { name: "Solar PV" }, { name: "Solar Thermal", }, { name: "Solar" }, { name: "Thermal generation", }, { name: "Tidal" }, { name: "UK land based bioenergy", }, { name: "Wave" }, { name: "Wind" }, ], links: [ { source: "Agricultural 'waste'", target: "Bio-conversion", value: 124.729, }, { source: "Bio-conversion", target: "Liquid", value: 0.597 }, { source: "Bio-conversion", target: "Losses", value: 26.862 }, { source: "Bio-conversion", target: "Solid", value: 280.322 }, { source: "Bio-conversion", target: "Gas", value: 81.144 }, { source: "Biofuel imports", target: "Liquid", value: 35 }, { source: "Biomass imports", target: "Solid", value: 35 }, { source: "Coal imports", target: "Coal", value: 11.606 }, { source: "Coal reserves", target: "Coal", value: 63.965 }, { source: "Coal", target: "Solid", value: 75.571 }, { source: "District heating", target: "Industry", value: 10.639 }, { source: "District heating", target: "Heating and cooling - commercial", value: 22.505, }, { source: "District heating", target: "Heating and cooling - homes", value: 46.184, }, { source: "Electricity grid", target: "Over generation / exports", value: 104.453, }, { source: "Electricity grid", target: "Heating and cooling - homes", value: 113.726, }, { source: "Electricity grid", target: "H2 conversion", value: 27.14 }, { source: "Electricity grid", target: "Industry", value: 342.165 }, { source: "Electricity grid", target: "Road transport", value: 37.797 }, { source: "Electricity grid", target: "Agriculture", value: 4.412 }, { source: "Electricity grid", target: "Heating and cooling - commercial", value: 40.858, }, { source: "Electricity grid", target: "Losses", value: 56.691 }, { source: "Electricity grid", target: "Rail transport", value: 7.863 }, { source: "Electricity grid", target: "Lighting &amp; appliances - commercial", value: 90.008, }, { source: "Electricity grid", target: "Lighting &amp; appliances - homes", value: 93.494, }, { source: "Gas imports", target: "NGas", value: 40.719 }, { source: "Gas reserves", target: "NGas", value: 82.233 }, { source: "Gas", target: "Heating and cooling - commercial", value: 0.129, }, { source: "Gas", target: "Losses", value: 1.401 }, { source: "Gas", target: "Thermal generation", value: 151.891 }, { source: "Gas", target: "Agriculture", value: 2.096 }, { source: "Gas", target: "Industry", value: 48.58 }, { source: "Geothermal", target: "Electricity grid", value: 7.013 }, { source: "H2 conversion", target: "H2", value: 20.897 }, { source: "H2 conversion", target: "Losses", value: 6.242 }, { source: "H2", target: "Road transport", value: 20.897 }, { source: "Hydro", target: "Electricity grid", value: 6.995 }, { source: "Liquid", target: "Industry", value: 121.066 }, { source: "Liquid", target: "International shipping", value: 128.69 }, { source: "Liquid", target: "Road transport", value: 135.835 }, { source: "Liquid", target: "Domestic aviation", value: 14.458 }, { source: "Liquid", target: "International aviation", value: 206.267 }, { source: "Liquid", target: "Agriculture", value: 3.64 }, { source: "Liquid", target: "National navigation", value: 33.218 }, { source: "Liquid", target: "Rail transport", value: 4.413 }, { source: "Marine algae", target: "Bio-conversion", value: 4.375 }, { source: "NGas", target: "Gas", value: 122.952 }, { source: "Nuclear", target: "Thermal generation", value: 839.978 }, { source: "Oil imports", target: "Oil", value: 504.287 }, { source: "Oil reserves", target: "Oil", value: 107.703 }, { source: "Oil", target: "Liquid", value: 611.99 }, { source: "Other waste", target: "Solid", value: 56.587 }, { source: "Other waste", target: "Bio-conversion", value: 77.81 }, { source: "Pumped heat", target: "Heating and cooling - homes", value: 193.026, }, { source: "Pumped heat", target: "Heating and cooling - commercial", value: 70.672, }, { source: "Solar PV", target: "Electricity grid", value: 59.901 }, { source: "Solar Thermal", target: "Heating and cooling - homes", value: 19.263, }, { source: "Solar", target: "Solar Thermal", value: 19.263 }, { source: "Solar", target: "Solar PV", value: 59.901 }, { source: "Solid", target: "Agriculture", value: 0.882 }, { source: "Solid", target: "Thermal generation", value: 400.12 }, { source: "Solid", target: "Industry", value: 46.477 }, { source: "Thermal generation", target: "Electricity grid", value: 525.531, }, { source: "Thermal generation", target: "Losses", value: 787.129 }, { source: "Thermal generation", target: "District heating", value: 79.329, }, { source: "Tidal", target: "Electricity grid", value: 9.452 }, { source: "UK land based bioenergy", target: "Bio-conversion", value: 182.01, }, { source: "Wave", target: "Electricity grid", value: 19.013 }, { source: "Wind", target: "Electricity grid", value: 289.366 }, ], label: { position: "top", fontSize: 10, lineHeight: 12, align: 'left' }, nodeGap: 20, lineStyle: { color: "source", curveness: 0.5, }, }, ], };</span> <span class="token punctuation">```</span></span></code></pre> </details> <h3 id="echarts-large-area-chart" tabindex="-1">ECharts Large Area Chart</h3> <p>The large area chart, with its level of interaction, is a case where ECharts shines. I add it here to highlight what ECharts can do.</p> <figure id="echarts-villnsgaolhj" class="echarts"> <div id="echarts-wrzsemmrrpcf" class="echarts-container"> </div> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> <script type="module"> function debounce(func, delay) { let timeoutId; return function(...args) { const context = this; clearTimeout(timeoutId); timeoutId = setTimeout(() => func.apply(context, args), delay); } } function deepMerge(target, ...sources) { for (const source of sources) { for (const k in source) { let vs = source[k], vt = target[k] if (Object(vs) == vs && Object(vt) === vt) { target[k] = deepMerge(vt, vs) continue } target[k] = source[k] } } return target } function applyDefaults(defaults, config) { const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches; let adjustedConfig; if (isDarkMode && defaults.darkModeConfig) { defaults = deepMerge({}, defaults, defaults.darkModeConfig); adjustedConfig = deepMerge({}, config, config.darkModeConfig); } else { defaults = deepMerge({}, defaults); adjustedConfig = deepMerge({}, config); } delete defaults.darkModeConfig; delete adjustedConfig.darkModeConfig; if (defaults.series && adjustedConfig.series) { for (const def in defaults.series) { for (const conf of adjustedConfig.series) { conf[def] = deepMerge({}, defaults.series[def], conf[def]); } } } delete defaults.series; adjustedConfig = deepMerge(defaults, adjustedConfig); return adjustedConfig; } function getDefaults() { return {"color":["#007affa0","#ffa500a0","#008000a0","#9370DBa0","#FFD700a0","#ff0000a0"],"renderOptions":{"renderer":"svg"},"aria":{"show":true},"toolbox":{"feature":{"restore":{},"saveAsImage":{},"dataView":{}}},"title":{"textStyle":{"fontFamily":"'iA Writer Quattro', system-ui, sans-serif","fontSize":18,"color":"#262626"}},"legend":{"textStyle":{"fontFamily":"'iA Writer Quattro', system-ui, sans-serif","fontSize":16,"color":"#262626"}},"textStyle":{"fontFamily":"'iA Writer Quattro', system-ui, sans-serif","fontSize":18,"color":"#262626"},"grid":{"left":0,"containLabel":true},"radar":{"name":{"textStyle":{"color":"#262626"}},"splitLine":{"show":false},"splitArea":{"show":false}},"series":{"label":{"textStyle":{"fontFamily":"'iA Writer Quattro', system-ui, sans-serif","fontSize":16,"color":"#262626"}},"markPoint":{"label":{"textStyle":{"fontFamily":"'iA Writer Quattro', system-ui, sans-serif","fontSize":16,"color":"#262626"}}}},"darkModeConfig":{"title":{"textStyle":{"color":"#c3c3c3"}},"radar":{"name":{"textStyle":{"color":"#c3c3c3"}}},"textStyle":{"color":"#c3c3c3"},"legend":{"textStyle":{"color":"#c3c3c3"}},"series":{"name":{"textStyle":{"color":"#c3c3c3"}},"label":{"textStyle":{"color":"#c3c3c3"}},"markLine":{"lineStyle":{"color":"#888"}},"splitLine":{"lineStyle":{"color":"#888"}},"markPoint":{"label":{"textStyle":{"color":"#c3c3c3"}}}}}}; } function adjustConfig() { const defaults = getDefaults(); const container = document.querySelector("#echarts-wrzsemmrrpcf"); //might be used by chart config const containerWidth = ctx.clientWidth; //might be used by chart config const containerHeight = ctx.clientHeight; //might be used by chart config const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches; //might be used by chart config let base = +new Date(1968, 9, 3); let oneDay = 24 * 3600 * 1000; let date = []; let data = [Math.random() * 300]; for (let i = 1; i < 20000; i++) { var now = new Date((base += oneDay)); date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/')); data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1])); } const config = { figcaption: 'A large area chart, generated by ECharts', tooltip: { trigger: 'axis', position: function (pt) { return [pt[0], '10%']; } }, title: { left: 'center', text: 'Large Area Chart' }, toolbox: { feature: { dataZoom: { yAxisIndex: 'none' }, restore: {}, saveAsImage: {} } }, xAxis: { type: 'category', boundaryGap: false, data: date }, yAxis: { type: 'value', boundaryGap: [0, '100%'] }, dataZoom: [ { type: 'inside', start: 0, end: 10 }, { start: 0, end: 10 } ], series: [ { name: 'Fake Data', type: 'line', symbol: 'none', sampling: 'lttb', itemStyle: { color: 'rgb(255, 70, 131)' }, areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: 'rgb(255, 158, 68)' }, { offset: 1, color: 'rgb(255, 70, 131)' } ]) }, data: data } ] }; return applyDefaults(defaults, config); } //create chart instance const ctx = document.querySelector("#echarts-wrzsemmrrpcf"); let config = adjustConfig() let chart; if (config.renderOptions?.renderer) { chart = echarts.init(ctx, null, { renderer: config.renderOptions.renderer }); } else { chart = echarts.init(ctx); } function renderChart() { try { const config = adjustConfig(); ctx.setAttribute('class','echarts-container'); for(const data of config.series) { ctx.classList.add(data.type); } if (config.figcaption) { const figure = document.querySelector("#echarts-villnsgaolhj"); let figcaption = figure.querySelector('figcaption'); if (!figcaption) { figcaption = document.createElement('figcaption'); figure.appendChild(figcaption); } figcaption.innerHTML = config.figcaption; } const renderOptions = config?.renderOptions delete config?.figcaption; delete config?.renderOptions; chart.setOption(config, renderOptions); } catch (err) { console.error(err); } } renderChart(); const debouncedRender = debounce(() => { chart.resize(); renderChart(); }, config.renderOptions?.debounceMillis || 16); const resizeObserver = new ResizeObserver(() => { requestAnimationFrame(() => { debouncedRender(); }); }); resizeObserver.observe(ctx); const darkModeQuery = window.matchMedia('(prefers-color-scheme: dark)'); darkModeQuery.addEventListener('change', debouncedRender); </script> </figure><details> <summary><span class="details-marker"></span>How to embed into Markdown</summary><pre class="language-markdown" data-language="Markdown"><code class="language-markdown"><span class="token code"><span class="token punctuation">```</span><span class="token code-language">echarts</span> <span class="token code-block language-echarts language-echarts language-echarts">let base = +new Date(1968, 9, 3); let oneDay = 24 * 3600 * 1000; let date = []; let data = [Math.random() * 300]; for (let i = 1; i &lt; 20000; i++) { var now = new Date((base += oneDay)); date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/')); data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1])); } const config = { tooltip: { trigger: 'axis', position: function (pt) { return [pt[0], '10%']; } }, title: { left: 'center', text: 'Large Area Chart' }, toolbox: { feature: { dataZoom: { yAxisIndex: 'none' }, restore: {}, saveAsImage: {} } }, xAxis: { type: 'category', boundaryGap: false, data: date }, yAxis: { type: 'value', boundaryGap: [0, '100%'] }, dataZoom: [ { type: 'inside', start: 0, end: 10 }, { start: 0, end: 10 } ], series: [ { name: 'Fake Data', type: 'line', symbol: 'none', sampling: 'lttb', itemStyle: { color: 'rgb(255, 70, 131)' }, areaStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: 'rgb(255, 158, 68)' }, { offset: 1, color: 'rgb(255, 70, 131)' } ]) }, data: data } ] };</span> <span class="token punctuation">```</span></span></code></pre> </details> <h2 id="conclusion" tabindex="-1">Conclusion</h2> <p>Mermaid works well and allows to be quick with charts that fit into the software development domain. Though it is possible to influence the styling of the diagrams, it´s not straight-forward enough in my view so that I refrain from doing any custom styling and instead use the default Mermaid styles. I enjoy getting a proper flowchart from a few lines of text and being able to change the chart with ease. This is a good example for the power of text-to-chart when the chart syntax fits its context.</p> <p>ECharts is my go-to choice for general purpose charts. The concepts are powerful yet simple enough, the results are beautiful, interactive, and can be styled to a certain look, including a dark-mode switch. The ECharts approach of enhancing accessibility by the automatic generation of aria-labels from the data shown is a smart move and a big plus on the feature list. I´m impressed of what is doable with this charting library.</p>

Text-to-Chart appeared on ulfschneider.io.

Reply via email

 Mermaid online editor 2025-08-16T07:49:45Z https://ulfschneider.io/2025-08-16-mermaid-online-editor/ <p><a href="https://mermaid.live"><cite>mermaid.live</cite></a> is the online editor for Mermaid charts.</p>

Mermaid online editor appeared on ulfschneider.io.

Reply via email

 ECharts online editor 2025-08-16T07:49:45Z https://ulfschneider.io/2025-08-16-echarts-online-editor/ <p><a href="https://echarts.apache.org/examples/editor.html"><cite>echarts.apache.org/examples/editor.html</cite></a> is the online editor for ECharts.</p>

ECharts online editor appeared on ulfschneider.io.

Reply via email

 mermaid-cli-batch 2025-08-10T15:11:38Z https://ulfschneider.io/tools/mermaid-cli-batch/ <p>A command line tool to process multiple diagrams in one pass into SVG images.</p> <p><a href="https://www.npmjs.com/package/mermaid-cli-batch"><cite>mermaid-cli-batch</cite></a> is a npm/node based command-line tool to process <a href="https://mermaid.js.org">Mermaid</a> diagram definition files in batches. For instance, to convert all <code>.mmd</code> files to SVG images, run the command:</p> <pre class="language-sh" data-language="Shell"><code class="language-sh">npx mermaid-cli-batch <span class="token parameter variable">--input</span> *.mmd</code></pre> <p>List possible tool settings by issuing the command:</p> <pre class="language-sh" data-language="Shell"><code class="language-sh">npx mermaid-cli-batch <span class="token parameter variable">-h</span></code></pre> <p>mermaid-cli-batch has a peer dependency to Playwright that you have to install by yourself prior of using the package:</p> <pre class="language-sh" data-language="Shell"><code class="language-sh"><span class="token function">npm</span> i playwright npx playwright <span class="token function">install</span> chromium</code></pre> <p>This allows you to update playwright independently of mermaid-cli-batch!</p>

mermaid-cli-batch appeared on ulfschneider.io.

Reply via email

 markdown-it-responsive-echarts 2025-08-10T12:45:00Z https://ulfschneider.io/tools/markdown-it-responsive-echarts/ <p>A plugin to render <a href="https://echarts.apache.org/">ECharts</a> with markdown-it.</p> <p><a href="https://www.npmjs.com/package/markdown-it-responsive-echarts"><cite>markdown-it-responsive-echarts</cite></a> enhances your Markdown capabilities by instantiating interactive and responsive <a href="https://echarts.apache.org/">ECharts</a> that can react to light mode and dark mode.</p> <p>Install the plugin with</p> <pre class="language-sh" data-language="Shell"><code class="language-sh"><span class="token function">npm</span> <span class="token function">install</span> markdown-it-responsive-echarts</code></pre> <p>and add it to your markdown-it setup</p> <pre class="language-js" data-language="JavaScript"><code class="language-js"><span class="token keyword">import</span> markdownItECharts <span class="token keyword">from</span> <span class="token string">'markdown-it-responsive-echarts'</span> <span class="token keyword">import</span> markdownIt <span class="token keyword">from</span> <span class="token string">'markdown-it'</span> <span class="token keyword">const</span> md <span class="token operator">=</span> <span class="token function">markdownIt</span><span class="token punctuation">(</span><span class="token punctuation">)</span> md<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>markdownItECharts<span class="token punctuation">)</span></code></pre> <p>to render charts like the one below.</p> <p>Visit the <a href="https://www.npmjs.com/package/markdown-it-responsive-echarts">plugin page</a> to learn about the configuration options.</p> <figure id="echarts-rxhuomruxzci" class="echarts"> <div id="echarts-xhbpaccurvay" class="echarts-container"> </div> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> <script type="module"> function debounce(func, delay) { let timeoutId; return function(...args) { const context = this; clearTimeout(timeoutId); timeoutId = setTimeout(() => func.apply(context, args), delay); } } function deepMerge(target, ...sources) { for (const source of sources) { for (const k in source) { let vs = source[k], vt = target[k] if (Object(vs) == vs && Object(vt) === vt) { target[k] = deepMerge(vt, vs) continue } target[k] = source[k] } } return target } function applyDefaults(defaults, config) { const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches; let adjustedConfig; if (isDarkMode && defaults.darkModeConfig) { defaults = deepMerge({}, defaults, defaults.darkModeConfig); adjustedConfig = deepMerge({}, config, config.darkModeConfig); } else { defaults = deepMerge({}, defaults); adjustedConfig = deepMerge({}, config); } delete defaults.darkModeConfig; delete adjustedConfig.darkModeConfig; if (defaults.series && adjustedConfig.series) { for (const def in defaults.series) { for (const conf of adjustedConfig.series) { conf[def] = deepMerge({}, defaults.series[def], conf[def]); } } } delete defaults.series; adjustedConfig = deepMerge(defaults, adjustedConfig); return adjustedConfig; } function getDefaults() { return {"color":["#007affa0","#ffa500a0","#008000a0","#9370DBa0","#FFD700a0","#ff0000a0"],"renderOptions":{"renderer":"svg"},"aria":{"show":true},"toolbox":{"feature":{"restore":{},"saveAsImage":{},"dataView":{}}},"title":{"textStyle":{"fontFamily":"'iA Writer Quattro', system-ui, sans-serif","fontSize":18,"color":"#262626"}},"legend":{"textStyle":{"fontFamily":"'iA Writer Quattro', system-ui, sans-serif","fontSize":16,"color":"#262626"}},"textStyle":{"fontFamily":"'iA Writer Quattro', system-ui, sans-serif","fontSize":18,"color":"#262626"},"grid":{"left":0,"containLabel":true},"radar":{"name":{"textStyle":{"color":"#262626"}},"splitLine":{"show":false},"splitArea":{"show":false}},"series":{"label":{"textStyle":{"fontFamily":"'iA Writer Quattro', system-ui, sans-serif","fontSize":16,"color":"#262626"}},"markPoint":{"label":{"textStyle":{"fontFamily":"'iA Writer Quattro', system-ui, sans-serif","fontSize":16,"color":"#262626"}}}},"darkModeConfig":{"title":{"textStyle":{"color":"#c3c3c3"}},"radar":{"name":{"textStyle":{"color":"#c3c3c3"}}},"textStyle":{"color":"#c3c3c3"},"legend":{"textStyle":{"color":"#c3c3c3"}},"series":{"name":{"textStyle":{"color":"#c3c3c3"}},"label":{"textStyle":{"color":"#c3c3c3"}},"markLine":{"lineStyle":{"color":"#888"}},"splitLine":{"lineStyle":{"color":"#888"}},"markPoint":{"label":{"textStyle":{"color":"#c3c3c3"}}}}}}; } function adjustConfig() { const defaults = getDefaults(); const container = document.querySelector("#echarts-xhbpaccurvay"); //might be used by chart config const containerWidth = ctx.clientWidth; //might be used by chart config const containerHeight = ctx.clientHeight; //might be used by chart config const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches; //might be used by chart config var xAxisData = []; var data1 = []; var data2 = []; for (var i = 0; i < 100; i++) { xAxisData.push('A' + i); data1.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5); data2.push((Math.cos(i / 5) * (i / 5 - 10) + i / 6) * 5); } const config = { figcaption: "An EChart rendered with markdown-it-interactive-echarts. The chart definition is taken from the ECharts example titled <a href='https://echarts.apache.org/examples/en/editor.html?c=bar-animation-delay'><cite>Bar Animation Delay</cite></a>.", title: { text: 'Bar Animation Delay' }, legend: { data: ['bar', 'bar2'] }, toolbox: { // y: 'bottom', feature: { magicType: { type: ['stack'] }, dataView: {}, saveAsImage: { pixelRatio: 2 } } }, tooltip: {}, xAxis: { data: xAxisData, splitLine: { show: false } }, yAxis: {}, series: [ { name: 'bar', type: 'bar', data: data1, emphasis: { focus: 'series' }, animationDelay: function (idx) { return idx * 10; } }, { name: 'bar2', type: 'bar', data: data2, emphasis: { focus: 'series' }, animationDelay: function (idx) { return idx * 10 + 100; } } ], animationEasing: 'elasticOut', animationDelayUpdate: function (idx) { return idx * 5; } }; return applyDefaults(defaults, config); } //create chart instance const ctx = document.querySelector("#echarts-xhbpaccurvay"); let config = adjustConfig() let chart; if (config.renderOptions?.renderer) { chart = echarts.init(ctx, null, { renderer: config.renderOptions.renderer }); } else { chart = echarts.init(ctx); } function renderChart() { try { const config = adjustConfig(); ctx.setAttribute('class','echarts-container'); for(const data of config.series) { ctx.classList.add(data.type); } if (config.figcaption) { const figure = document.querySelector("#echarts-rxhuomruxzci"); let figcaption = figure.querySelector('figcaption'); if (!figcaption) { figcaption = document.createElement('figcaption'); figure.appendChild(figcaption); } figcaption.innerHTML = config.figcaption; } const renderOptions = config?.renderOptions delete config?.figcaption; delete config?.renderOptions; chart.setOption(config, renderOptions); } catch (err) { console.error(err); } } renderChart(); const debouncedRender = debounce(() => { chart.resize(); renderChart(); }, config.renderOptions?.debounceMillis || 16); const resizeObserver = new ResizeObserver(() => { requestAnimationFrame(() => { debouncedRender(); }); }); resizeObserver.observe(ctx); const darkModeQuery = window.matchMedia('(prefers-color-scheme: dark)'); darkModeQuery.addEventListener('change', debouncedRender); </script> </figure><p>The above chart is generated by putting the below chart definition into a fenced code block inside of your Markdown text. The fenced code block must be introduced by the identifier <code>echarts</code>.</p> <blockquote class="markdown-alert markdown-alert-note"><p class="markdown-alert-title" style="display: flex; align-items: center;"><svg class="octicon octicon-info" fill="currentColor" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"></path></svg>&nbsp;Note</p><p>It is mandatory to create an object named <code>config</code> that holds your chart definition. You cannot choose a different name!</p> </blockquote> <pre class="language-markdown" data-language="Markdown"><code class="language-markdown"><span class="token code"><span class="token punctuation">```</span><span class="token code-language">echarts</span> <span class="token code-block language-echarts language-echarts language-echarts">var xAxisData = []; var data1 = []; var data2 = []; for (var i = 0; i &lt; 100; i++) { xAxisData.push('A' + i); data1.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5); data2.push((Math.cos(i / 5) * (i / 5 - 10) + i / 6) * 5); } //your chart definition must be stored in an object named config //you cannot choose a different name const config = { figcaption: "An EChart rendered with markdown-it-interactive-echarts. The chart definition is taken from the ECharts example titled &lt;a href='https://echarts.apache.org/examples/en/editor.html?c=bar-animation-delay'>&lt;cite>Bar Animation Delay&lt;/cite>&lt;/a>.", title: { text: 'Bar Animation Delay' }, legend: { data: ['bar', 'bar2'] }, toolbox: { // y: 'bottom', feature: { magicType: { type: ['stack'] }, dataView: {}, saveAsImage: { pixelRatio: 2 } } }, tooltip: {}, xAxis: { data: xAxisData, splitLine: { show: false } }, yAxis: {}, series: [ { name: 'bar', type: 'bar', data: data1, emphasis: { focus: 'series' }, animationDelay: function (idx) { return idx * 10; } }, { name: 'bar2', type: 'bar', data: data2, emphasis: { focus: 'series' }, animationDelay: function (idx) { return idx * 10 + 100; } } ], animationEasing: 'elasticOut', animationDelayUpdate: function (idx) { return idx * 5; } };</span> <span class="token punctuation">```</span></span></code></pre>

markdown-it-responsive-echarts appeared on ulfschneider.io.

Reply via email

 Tosbot 2025-08-16T07:49:35Z https://ulfschneider.io/2025-07-28-tosbot/ <p>Wie Emil Deutsch lernte.</p> <blockquote class="markdown-alert markdown-alert-note"><p class="markdown-alert-title" style="display: flex; align-items: center;"><svg class="octicon octicon-info" fill="currentColor" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"></path></svg>&nbsp;Note</p><p>The following text is in German language, because it relies heavily on the sound and the understanding of the German language.</p> </blockquote> <p>Während Emil, als er noch ganz jung war, die Deutsche Sprache erlernte, hat er die Worte zunächst auf seine eigene Art benutzt. Diese wunderbaren Wortschöpfungen habe ich damals notiert, und heute, Jahre später, sind sie mir wieder in die Hände gefallen.</p> <p>Ein Tosbot war ein Toastbrot, ein Sinebot ein Rosinenbrötchen, ein Meeresriegel ein Fischstäbchen, und Pustewaff war Hustensaft. Viele dieser ersten Worte hatten verständlicherweise mit Essen zu tun.</p> <ul> <li>Abtöpfen = Abschöpfen</li> <li>Aschemädchen = Aschenputtel</li> <li>Aussaedata = Ausserirdischer</li> <li>Bate = Banane</li> <li>Beihuckter Hitter = Verrückter Ritter</li> <li>Beta = Tablette</li> <li>Bissen = Bisschen</li> <li>Bock = Bockwurst</li> <li>Botsen = Brötchen</li> <li>Bruder Japuk = Bruder Jakob</li> <li>Butuliert = Tätowiert</li> <li>Das butzelt = Das brutzelt</li> <li>Dinsaur = Dinosaurier</li> <li>Duß = Tschüss</li> <li>Emiauch = Emil auch</li> <li>Erbsefrau = Prinzessin auf der Erbse</li> <li>Fak = Quark</li> <li>Fanz = Schwanz</li> <li>Fetzelat = Fenchelsalat</li> <li>Fodo Oma = Frodo Oma</li> <li>Fuchelich = Fürchterlich</li> <li>Gepi = Spaghetti</li> <li>Habedi = Habe ich dich</li> <li>Handluh = Handschuh</li> <li>Haussas = Hausschuhe</li> <li>Hefe = Helfen</li> <li>Hersieren = Rasieren</li> <li>Hobbelbot = Roggenbrot</li> <li>Hubkesine = Hubschrauber</li> <li>Kaba Kaus = Cowboy Klaus</li> <li>Kabakau = Kakao</li> <li>Kabbel Kabbe = Krabbel Krabbe</li> <li>Käfersoff = Hefezopf</li> <li>Kafta = Kaspar</li> <li>Kak = Kalt</li> <li>Kanastik = Gymnastik</li> <li>Kappekau = Kakao</li> <li>Kavenzlender = Adventskalender</li> <li>Kefezopf = Hefezopf</li> <li>Keinbem = Kein Problem</li> <li>Kenne = Körner</li> <li>Konnfexe = Cornflakes</li> <li>Kotlik = Kotelett</li> <li>Kummel = Krümmel</li> <li>Lake = Schokolade</li> <li>Lamsas = Langsam</li> <li>Lat = Salat</li> <li>Lätta = Latz</li> <li>Lol = Schnuller</li> <li>Ludel = Nudeln</li> <li>Lufbon = Luftballon</li> <li>Luh = Schuh</li> <li>Lukelaus = Nikolaus</li> <li>Mani, Lami = Salami</li> <li>Marinekäfer = Marienkäfer</li> <li>Mate = Tomate</li> <li>Maukenbad = Mountainbike</li> <li>Meeresriegel = Fischstäbchen</li> <li>Meni Oma = Pelmeni Oma</li> <li>Morgig = Guten Morgen</li> <li>Muksen = Muskeln</li> <li>Muna = Müde</li> <li>Muze = Mütze</li> <li>Nasetupfer = Nasenstupser</li> <li>Nogges = Neues</li> <li>Nusskaka = Nussknacker</li> <li>Oga = Olga (Emil´s Tagesmutter)</li> <li>Opposon = Operation</li> <li>Pakaka = Paprika</li> <li>Patz = Spatz</li> <li>Pielen = Spielen</li> <li>Pietzlat = Spielplatz</li> <li>Pipi Strumpfhose = Pipi Langstrumpf</li> <li>Pohelli mit Sene und Fanz = Forelle mit Zähnen und Schwanz</li> <li>Pott = Sport</li> <li>Pustewaff = Hustensaft</li> <li>Putz = Pups</li> <li>Sabatee = Salbeitee</li> <li>Sapp un mude = Schlapp und müde</li> <li>Sappefilik = Zappelfillip</li> <li>Sassa = Wasser</li> <li>Sinebots = Rosinenbrötchen</li> <li>Tam = Tannenzapfen</li> <li>Tampfer = Stampfer</li> <li>Tassekesine = Straßenkehrmaschine</li> <li>Tosbot = Toastbrot</li> <li>Waff = Saft</li> <li>Wickemode = Wickelkommode</li> <li>Woff = Wurst</li> </ul>

Tosbot appeared on ulfschneider.io.

Reply via email

 The four-legged octopus 2025-07-22T08:58:33Z https://ulfschneider.io/2025-07-22-four-legged-octopus/ <figure><img src="https://ulfschneider.io/img/ux8O6G0K9l-200.webp" alt="" loading="lazy" decoding="async" width="900" height="1200" srcset="https://ulfschneider.io/img/ux8O6G0K9l-200.webp 200w, https://ulfschneider.io/img/ux8O6G0K9l-900.webp 900w" sizes="100vw"></figure>

The four-legged octopus appeared on ulfschneider.io.

Reply via email

 A friendly introduction to SVG 2025-08-15T05:38:40Z https://ulfschneider.io/2025-07-22-friendly-instruction-to-svg/ <p><a href="https://www.joshwcomeau.com/svg/friendly-introduction-to-svg/?from=newsletter"><cite>A friendly introduction to SVG</cite></a> by Josh Comeau.</p> <blockquote> <p>This post is intended to be completely beginner-friendly, no previous SVG experience required (though it does assume that you’re familiar with the basics of HTML/CSS/JS).</p> <footer>Josh Comeau</footer> </blockquote>

A friendly introduction to SVG appeared on ulfschneider.io.

Reply via email

 Safety Notice – Fairlight carbon forks with Ortlieb QLS Fork Pack Mounting System 2025-07-19T19:42:20Z https://ulfschneider.io/2025-07-19-fairlight-ortlieb-safety-notice/ <p>Fit parts G and H!</p> <p>Fairlight recently issued a <a href="https://fairlightcycles.com/product-safety-notices/?v=5f02f0889301">safety notice</a> regarding the Ortlieb QLS Fork Pack Mounting System attached to Fairlight Secan carbon forks. The Ortlieb system can damage your Fairlight carbon fork if you do not mount it by following the <a href="https://downloads.ortlieb.com/instructions/fork_pack.pdf">Ortlieb installation instruction</a>. Specifically, <strong><mark>you have to fit the parts G and H!</mark></strong> If parts G and H are not fitted, the fork rack system will sit against the body of the fork (rather than against the attachment bosses) and <mark>potentially affect the fork’s integrity, which can lead to compromised rider safety</mark>. If you have ever fitted the QLS Fork Pack Mounting System without parts G and H, <mark>stop riding the affected fork and contact Fairlight immediately</mark>.</p>

Safety Notice – Fairlight carbon forks with Ortlieb QLS Fork Pack Mounting System appeared on ulfschneider.io.

Reply via email

 markdown-it-mermaid-server 2025-08-09T07:16:07Z https://ulfschneider.io/tools/markdown-it-mermaid-server/ <p>A <a href="https://www.npmjs.com/package/markdown-it-mermaid-server">markdown-it plugin</a> to render <a href="https://mermaid.js.org">Mermaid</a> charts on the server.</p> <p><a href="https://www.npmjs.com/package/markdown-it-mermaid-server"><cite>markdown-it-mermaid-server</cite></a> is a markdown-it plugin that generates Mermaid diagrams on the server and references them as inline SVG images in the Markdown-rendered HTML documents. The approach eliminates the need for Mermaid code on the browser client.</p> <p>Enclose the Mermaid chart definition in a fenced code block, introduced by the <code>mermaid</code> keyword, like this:</p> <pre class="language-markdown" data-language="Markdown"><code class="language-markdown"><span class="token code"><span class="token punctuation">```</span><span class="token code-language">mermaid</span> <span class="token code-block language-mermaid language-mermaid language-mermaid">flowchart LR A(["Start"]) --> B{"Decision"} B --> C["Option A"] &amp; D["Option B"]</span> <span class="token punctuation">```</span></span></code></pre> <p>and get the resulting chart:</p> <figure class="mermaid"><html><head></head><body><svg id="mermaid-vyzeopieanlz" width="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="flowchart" style="max-width: 431.4174499511719px;" viewBox="0.0000019073486328125 0 431.4174499511719 174" role="graphics-document document" aria-roledescription="flowchart-v2"><style>#mermaid-vyzeopieanlz{font-family:arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-vyzeopieanlz .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-vyzeopieanlz .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-vyzeopieanlz .error-icon{fill:#552222;}#mermaid-vyzeopieanlz .error-text{fill:#552222;stroke:#552222;}#mermaid-vyzeopieanlz .edge-thickness-normal{stroke-width:1px;}#mermaid-vyzeopieanlz .edge-thickness-thick{stroke-width:3.5px;}#mermaid-vyzeopieanlz .edge-pattern-solid{stroke-dasharray:0;}#mermaid-vyzeopieanlz .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-vyzeopieanlz .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-vyzeopieanlz .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-vyzeopieanlz .marker{fill:#333333;stroke:#333333;}#mermaid-vyzeopieanlz .marker.cross{stroke:#333333;}#mermaid-vyzeopieanlz svg{font-family:arial,sans-serif;font-size:16px;}#mermaid-vyzeopieanlz p{margin:0;}#mermaid-vyzeopieanlz .label{font-family:arial,sans-serif;color:#333;}#mermaid-vyzeopieanlz .cluster-label text{fill:#333;}#mermaid-vyzeopieanlz .cluster-label span{color:#333;}#mermaid-vyzeopieanlz .cluster-label span p{background-color:transparent;}#mermaid-vyzeopieanlz .label text,#mermaid-vyzeopieanlz span{fill:#333;color:#333;}#mermaid-vyzeopieanlz .node rect,#mermaid-vyzeopieanlz .node circle,#mermaid-vyzeopieanlz .node ellipse,#mermaid-vyzeopieanlz .node polygon,#mermaid-vyzeopieanlz .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-vyzeopieanlz .rough-node .label text,#mermaid-vyzeopieanlz .node .label text,#mermaid-vyzeopieanlz .image-shape .label,#mermaid-vyzeopieanlz .icon-shape .label{text-anchor:middle;}#mermaid-vyzeopieanlz .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-vyzeopieanlz .rough-node .label,#mermaid-vyzeopieanlz .node .label,#mermaid-vyzeopieanlz .image-shape .label,#mermaid-vyzeopieanlz .icon-shape .label{text-align:center;}#mermaid-vyzeopieanlz .node.clickable{cursor:pointer;}#mermaid-vyzeopieanlz .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-vyzeopieanlz .arrowheadPath{fill:#333333;}#mermaid-vyzeopieanlz .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-vyzeopieanlz .flowchart-link{stroke:#333333;fill:none;}#mermaid-vyzeopieanlz .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-vyzeopieanlz .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-vyzeopieanlz .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-vyzeopieanlz .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-vyzeopieanlz .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-vyzeopieanlz .cluster text{fill:#333;}#mermaid-vyzeopieanlz .cluster span{color:#333;}#mermaid-vyzeopieanlz div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-vyzeopieanlz .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-vyzeopieanlz rect.text{fill:none;stroke-width:0;}#mermaid-vyzeopieanlz .icon-shape,#mermaid-vyzeopieanlz .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-vyzeopieanlz .icon-shape p,#mermaid-vyzeopieanlz .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-vyzeopieanlz .icon-shape .label rect,#mermaid-vyzeopieanlz .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-vyzeopieanlz .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-vyzeopieanlz .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-vyzeopieanlz :root{--mermaid-font-family:arial,sans-serif;}</style><g><marker id="mermaid-vyzeopieanlz_flowchart-v2-pointEnd" class="marker flowchart-v2" viewBox="0 0 10 10" refX="5" refY="5" markerUnits="userSpaceOnUse" markerWidth="8" markerHeight="8" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker><marker id="mermaid-vyzeopieanlz_flowchart-v2-pointStart" class="marker flowchart-v2" viewBox="0 0 10 10" refX="4.5" refY="5" markerUnits="userSpaceOnUse" markerWidth="8" markerHeight="8" orient="auto"><path d="M 0 5 L 10 10 L 10 0 z" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></path></marker><marker id="mermaid-vyzeopieanlz_flowchart-v2-circleEnd" class="marker flowchart-v2" viewBox="0 0 10 10" refX="11" refY="5" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><circle cx="5" cy="5" r="5" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></circle></marker><marker id="mermaid-vyzeopieanlz_flowchart-v2-circleStart" class="marker flowchart-v2" viewBox="0 0 10 10" refX="-1" refY="5" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><circle cx="5" cy="5" r="5" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"></circle></marker><marker id="mermaid-vyzeopieanlz_flowchart-v2-crossEnd" class="marker cross flowchart-v2" viewBox="0 0 11 11" refX="12" refY="5.2" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><path d="M 1,1 l 9,9 M 10,1 l -9,9" class="arrowMarkerPath" style="stroke-width: 2; stroke-dasharray: 1, 0;"></path></marker><marker id="mermaid-vyzeopieanlz_flowchart-v2-crossStart" class="marker cross flowchart-v2" viewBox="0 0 11 11" refX="-1" refY="5.2" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><path d="M 1,1 l 9,9 M 10,1 l -9,9" class="arrowMarkerPath" style="stroke-width: 2; stroke-dasharray: 1, 0;"></path></marker><g class="root"><g class="clusters"></g><g class="edgePaths"><path d="M72.324,87.5L76.407,87.417C80.49,87.333,88.657,87.167,96.24,87.083C103.824,87,110.824,87,114.324,87L117.824,87" id="L_A_B_0" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style=";" data-edge="true" data-et="edge" data-id="L_A_B_0" data-points="W3sieCI6NzIuMzIzNzEyNDMxODI2NzksInkiOjg3LjV9LHsieCI6OTYuODIzNzExMzk1MjYzNjcsInkiOjg3fSx7IngiOjEyMS44MjM3MTEzOTUyNjM2NywieSI6ODd9XQ==" marker-end="url(#mermaid-vyzeopieanlz_flowchart-v2-pointEnd)"></path><path d="M220.95,64.001L228.95,59.168C236.95,54.334,252.949,44.667,264.452,39.834C275.954,35,282.959,35,286.462,35L289.964,35" id="L_B_C_0" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style=";" data-edge="true" data-et="edge" data-id="L_B_C_0" data-points="W3sieCI6MjIwLjk1MDA2OTQ3NTg0MzEyLCJ5Ijo2NC4wMDEzNTgwODA1Nzk0NX0seyJ4IjoyNjguOTQ4NzExMzk1MjYzNywieSI6MzV9LHsieCI6MjkzLjk2NDMzNjM5NTI2MzcsInkiOjM1fV0=" marker-end="url(#mermaid-vyzeopieanlz_flowchart-v2-pointEnd)"></path><path d="M220.95,109.999L228.95,114.832C236.95,119.666,252.949,129.333,264.449,134.166C275.949,139,282.949,139,286.449,139L289.949,139" id="L_B_D_0" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style=";" data-edge="true" data-et="edge" data-id="L_B_D_0" data-points="W3sieCI6MjIwLjk1MDA2OTQ3NTg0MzEyLCJ5IjoxMDkuOTk4NjQxOTE5NDIwNTV9LHsieCI6MjY4Ljk0ODcxMTM5NTI2MzcsInkiOjEzOX0seyJ4IjoyOTMuOTQ4NzExMzk1MjYzNywieSI6MTM5fV0=" marker-end="url(#mermaid-vyzeopieanlz_flowchart-v2-pointEnd)"></path></g><g class="edgeLabels"><g class="edgeLabel"><g class="label" data-id="L_A_B_0" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" data-id="L_B_C_0" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" data-id="L_B_D_0" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel"></span></div></foreignObject></g></g></g><g class="nodes"><g class="node default" id="flowchart-A-0" transform="translate(39.911855697631836, 87)"><g class="basic label-container outer-path"><path d="M-12.421875 -19.5 C-6.587955540724722 -19.5, -0.7540360814494438 -19.5, 12.421875 -19.5 C12.421875 -19.5, 12.421874999999998 -19.5, 12.421874999999998 -19.5 C12.76989617903164 -19.488839638170585, 13.117917358063284 -19.47767927634117, 13.6712442896239 -19.45993515863156 C14.034824167769864 -19.424861045055597, 14.398404045915827 -19.389786931479634, 14.915479652847864 -19.3399052695533 C15.24441552817502 -19.286725468166217, 15.573351403502176 -19.233545666779133, 16.14946825967676 -19.140403561325776 C16.53802044126303 -19.051719061418652, 16.926572622849303 -18.963034561511527, 17.36813938623539 -18.862249829261074 C17.68510209088374 -18.76817696229263, 18.002064795532085 -18.674104095324193, 18.566485251460602 -18.50658706670804 C18.898318729084174 -18.384469279507524, 19.230152206707743 -18.26235149230701, 19.739581595147794 -18.074876768247425 C20.052418744337672 -17.936393042285378, 20.365255893527554 -17.79790931632333, 20.88260791279238 -17.568892924097174 C21.132697053001646 -17.43842157983974, 21.38278619321091 -17.307950235582304, 21.990867264076783 -16.990714730406097 C22.24089667592694 -16.839145431606614, 22.490926087777098 -16.68757613280713, 23.059805573605697 -16.342718045390892 C23.434632918653797 -16.081254715499586, 23.8094602637019 -15.819791385608283, 24.085030344578712 -15.627565626425154 C24.47377102524637 -15.317555278416663, 24.86251170591403 -15.007544930408171, 25.06232870850187 -14.848196188198123 C25.30633781937896 -14.626593569826838, 25.550346930256055 -14.404990951455552, 25.987684736767985 -14.007812326905688 C26.27778829153392 -13.70825658866506, 26.567891846299855 -13.408700850424434, 26.857295942968648 -13.10986736009568 C27.037392711951732 -12.898315447451687, 27.21748948093482 -12.686763534807694, 27.667588908126582 -12.158051136245305 C27.827064756262253 -11.944368028292152, 27.986540604397923 -11.730684920339, 28.415233964640635 -11.156274872382312 C28.670047736482722 -10.764812491754432, 28.92486150832481 -10.373350111126552, 29.097158878604247 -10.108655082055241 C29.30318074790479 -9.742842391135664, 29.509202617205336 -9.377029700216086, 29.7105614742735 -9.019496659696287 C29.822214321014812 -8.787647134449742, 29.933867167756123 -8.555797609203195, 30.25292114880834 -7.893275190886684 C30.351941012617033 -7.6486942128603825, 30.450960876425725 -7.404113234834082, 30.722009229970325 -6.734618561215508 C30.832347395175443 -6.402297587616911, 30.94268556038056 -6.069976614018313, 31.11589813421488 -5.548287939305138 C31.184489777316898 -5.2867182763509755, 31.253081420418916 -5.025148613396813, 31.43296928754556 -4.339158212148133 C31.510033938646117 -3.9434475163665477, 31.587098589746677 -3.5477368205849626, 31.671919776581777 -3.1121979531509023 C31.718726838135744 -2.749171626838105, 31.76553389968971 -2.3861453005253077, 31.831767702509367 -1.872449005199798 C31.85336367814481 -1.5360742527200115, 31.874959653780248 -1.199699500240225, 31.911856215913414 -0.6250057626472757 C31.911856215913414 -0.14601668107933846, 31.911856215913414 0.3329724004885988, 31.911856215913414 0.625005762647271 C31.895575704928195 0.8785878626339723, 31.87929519394298 1.1321699626206736, 31.831767702509367 1.8724490051997846 C31.79152988049142 2.184525606914276, 31.751292058473474 2.496602208628767, 31.671919776581777 3.1121979531508885 C31.613792356365327 3.4106699707277497, 31.555664936148876 3.7091419883046113, 31.43296928754556 4.339158212148129 C31.349421128254406 4.657763553526596, 31.265872968963247 4.976368894905063, 31.115898134214884 5.548287939305125 C31.006705635774516 5.877158347145507, 30.89751313733415 6.206028754985888, 30.72200922997033 6.734618561215495 C30.609619040582416 7.012224501920135, 30.4972288511945 7.2898304426247735, 30.252921148808344 7.893275190886679 C30.043301822133444 8.328554207862195, 29.833682495458543 8.763833224837711, 29.710561474273504 9.019496659696284 C29.533169198872177 9.334474607587056, 29.35577692347085 9.649452555477831, 29.09715887860425 10.108655082055236 C28.876062246889145 10.448318881128225, 28.65496561517404 10.787982680201214, 28.41523396464064 11.156274872382301 C28.150775253487126 11.510625452643795, 27.886316542333606 11.864976032905291, 27.667588908126582 12.158051136245302 C27.452725438264583 12.410441994022992, 27.23786196840258 12.662832851800683, 26.85729594296866 13.10986736009567 C26.536477945306643 13.441138282329161, 26.215659947644625 13.772409204562653, 25.98768473676799 14.007812326905684 C25.768277447623653 14.207072221707815, 25.548870158479318 14.406332116509946, 25.062328708501887 14.848196188198111 C24.70793175654663 15.130818326483466, 24.35353480459137 15.41344046476882, 24.085030344578715 15.627565626425152 C23.866229911028185 15.78019133715189, 23.647429477477658 15.932817047878629, 23.059805573605708 16.34271804539089 C22.845466576852083 16.472651604818694, 22.631127580098454 16.602585164246502, 21.990867264076787 16.990714730406093 C21.65938637841015 17.163648096134736, 21.32790549274352 17.33658146186338, 20.882607912792388 17.56889292409717 C20.461445900133747 17.755328853773932, 20.040283887475105 17.941764783450697, 19.739581595147804 18.07487676824742 C19.400485406030867 18.199667300413264, 19.06138921691393 18.324457832579107, 18.566485251460616 18.506587066708033 C18.282127768241434 18.590982875104597, 17.997770285022252 18.675378683501165, 17.368139386235413 18.86224982926107 C16.99686530130307 18.94699071635705, 16.62559121637073 19.031731603453032, 16.149468259676766 19.140403561325773 C15.671119378785585 19.217739298737285, 15.192770497894404 19.295075036148795, 14.915479652847878 19.3399052695533 C14.454644250820937 19.38436150655118, 13.993808848793995 19.42881774354906, 13.6712442896239 19.45993515863156 C13.396367979922715 19.468749906869398, 13.12149167022153 19.477564655107233, 12.421875000000004 19.5 C12.421875000000002 19.5, 12.421875000000002 19.5, 12.421875 19.5 C3.9672567381803976 19.5, -4.487361523639205 19.5, -12.421874999999996 19.5 C-12.903529067431634 19.484554291540235, -13.385183134863272 19.469108583080473, -13.671244289623893 19.45993515863156 C-13.982404315309683 19.429917925178334, -14.293564340995474 19.399900691725108, -14.915479652847871 19.3399052695533 C-15.318773718206995 19.274703812658224, -15.722067783566118 19.209502355763146, -16.14946825967676 19.140403561325773 C-16.41412005614142 19.079998515797083, -16.678771852606083 19.019593470268394, -17.368139386235388 18.862249829261074 C-17.80350144126247 18.733036656591096, -18.23886349628955 18.603823483921122, -18.56648525146059 18.506587066708043 C-18.871354916085913 18.39439221194164, -19.176224580711235 18.282197357175235, -19.739581595147797 18.074876768247425 C-20.143724098394973 17.895974870521307, -20.54786660164215 17.71707297279519, -20.88260791279238 17.568892924097174 C-21.10462210562103 17.453068261905344, -21.326636298449678 17.337243599713517, -21.99086726407678 16.990714730406097 C-22.22890314314122 16.846415981663135, -22.466939022205665 16.702117232920177, -23.059805573605686 16.3427180453909 C-23.407122005534006 16.100445137563717, -23.75443843746233 15.858172229736539, -24.085030344578712 15.627565626425156 C-24.3530843698274 15.413799674506516, -24.621138395076084 15.200033722587877, -25.06232870850187 14.848196188198125 C-25.2694432991771 14.660100196898656, -25.476557889852334 14.472004205599188, -25.987684736767974 14.007812326905697 C-26.23792925768976 13.749414313596692, -26.488173778611547 13.491016300287686, -26.857295942968655 13.109867360095677 C-27.10695310415522 12.81660585267103, -27.356610265341786 12.523344345246382, -27.66758890812658 12.158051136245307 C-27.903768735990123 11.84159168333311, -28.139948563853668 11.525132230420915, -28.415233964640635 11.156274872382316 C-28.640969636440417 10.80948426198258, -28.8667053082402 10.462693651582844, -29.097158878604244 10.108655082055249 C-29.289224477979 9.767623161614479, -29.481290077353762 9.426591241173707, -29.7105614742735 9.019496659696289 C-29.926633285915365 8.57081891962581, -30.14270509755723 8.122141179555332, -30.25292114880834 7.893275190886686 C-30.43363335075662 7.446912558241697, -30.614345552704897 7.000549925596708, -30.722009229970325 6.73461856121551 C-30.853264840958545 6.339297573660592, -30.984520451946768 5.943976586105674, -31.11589813421488 5.5482879393051325 C-31.20652654974233 5.2026825122952225, -31.297154965269776 4.857077085285312, -31.432969287545557 4.339158212148136 C-31.5117190195624 3.934794982003422, -31.590468751579238 3.530431751858708, -31.671919776581777 3.112197953150904 C-31.71835673420716 2.752042079822911, -31.764793691832544 2.3918862064949176, -31.831767702509364 1.872449005199809 C-31.854118948992777 1.5243102996192244, -31.876470195476188 1.1761715940386397, -31.911856215913414 0.6250057626472781 C-31.911856215913414 0.2660028286480535, -31.911856215913414 -0.09300010535117109, -31.911856215913414 -0.6250057626472687 C-31.887887711370368 -0.9983345679338351, -31.863919206827326 -1.3716633732204015, -31.831767702509367 -1.8724490051997822 C-31.790052588852863 -2.195983189138698, -31.74833747519636 -2.5195173730776137, -31.671919776581777 -3.112197953150895 C-31.623736217967654 -3.3596103430357003, -31.57555265935353 -3.607022732920506, -31.43296928754556 -4.339158212148126 C-31.31126554467292 -4.803267330457321, -31.18956180180028 -5.267376448766517, -31.115898134214884 -5.548287939305123 C-30.983700118391255 -5.946447300072476, -30.851502102567622 -6.34460666083983, -30.722009229970332 -6.734618561215485 C-30.59021056283786 -7.060163817186575, -30.458411895705385 -7.385709073157664, -30.252921148808344 -7.893275190886676 C-30.07480240209559 -8.263142579566365, -29.89668365538283 -8.633009968246053, -29.710561474273504 -9.019496659696282 C-29.543653387403616 -9.31585886921028, -29.376745300533724 -9.612221078724277, -29.097158878604247 -10.108655082055243 C-28.884374988539562 -10.435548277669506, -28.671591098474874 -10.762441473283769, -28.41523396464064 -11.156274872382308 C-28.136551879455823 -11.529683478069716, -27.857869794271004 -11.903092083757121, -27.667588908126586 -12.158051136245302 C-27.45462172793843 -12.408214504270155, -27.241654547750272 -12.65837787229501, -26.857295942968662 -13.10986736009567 C-26.61462316851174 -13.360446923527753, -26.371950394054824 -13.611026486959839, -25.987684736767996 -14.007812326905677 C-25.660096983225685 -14.305318857175807, -25.332509229683378 -14.602825387445938, -25.062328708501887 -14.848196188198107 C-24.733181016499813 -15.110682713581824, -24.40403332449774 -15.373169238965541, -24.08503034457872 -15.627565626425149 C-23.681183997575594 -15.909271355867931, -23.27733765057247 -16.190977085310713, -23.05980557360571 -16.342718045390885 C-22.7430488458799 -16.534737835207423, -22.42629211815409 -16.72675762502396, -21.99086726407679 -16.99071473040609 C-21.651750076169396 -17.167631950122452, -21.312632888262 -17.344549169838814, -20.882607912792388 -17.56889292409717 C-20.518828577982838 -17.7299272444868, -20.15504924317329 -17.89096156487643, -19.739581595147804 -18.07487676824742 C-19.32117288670431 -18.22885504068233, -18.902764178260814 -18.38283331311724, -18.56648525146062 -18.506587066708033 C-18.20675384392186 -18.613353460196844, -17.847022436383103 -18.72011985368566, -17.368139386235413 -18.862249829261067 C-16.891559128956807 -18.971026163008087, -16.414978871678205 -19.079802496755107, -16.149468259676766 -19.140403561325773 C-15.879849512503762 -19.18399342944409, -15.610230765330758 -19.22758329756241, -14.91547965284788 -19.3399052695533 C-14.648434917028395 -19.36566675404952, -14.381390181208907 -19.391428238545743, -13.671244289623903 -19.45993515863156 C-13.372565745611931 -19.469513198195504, -13.073887201599959 -19.47909123775945, -12.421875000000005 -19.5 C-12.421875000000004 -19.5, -12.421875000000002 -19.5, -12.421875 -19.5" stroke="none" stroke-width="0" fill="#ECECFF" style=""></path><path d="M-12.421875 -19.5 C-2.723107711024486 -19.5, 6.975659577951028 -19.5, 12.421875 -19.5 M-12.421875 -19.5 C-5.474200601162598 -19.5, 1.4734737976748047 -19.5, 12.421875 -19.5 M12.421875 -19.5 C12.421875 -19.5, 12.421875 -19.5, 12.421874999999998 -19.5 M12.421875 -19.5 C12.421875 -19.5, 12.421874999999998 -19.5, 12.421874999999998 -19.5 M12.421874999999998 -19.5 C12.762371487004987 -19.489080940397958, 13.102867974009975 -19.478161880795913, 13.6712442896239 -19.45993515863156 M12.421874999999998 -19.5 C12.744701129450204 -19.489647594371473, 13.067527258900409 -19.47929518874295, 13.6712442896239 -19.45993515863156 M13.6712442896239 -19.45993515863156 C13.95905855614135 -19.43217006248792, 14.246872822658801 -19.404404966344277, 14.915479652847864 -19.3399052695533 M13.6712442896239 -19.45993515863156 C14.001095118579403 -19.42811484586588, 14.330945947534907 -19.396294533100207, 14.915479652847864 -19.3399052695533 M14.915479652847864 -19.3399052695533 C15.355578068943043 -19.26875357065322, 15.795676485038221 -19.197601871753143, 16.14946825967676 -19.140403561325776 M14.915479652847864 -19.3399052695533 C15.192101793578642 -19.29518314707669, 15.468723934309418 -19.250461024600078, 16.14946825967676 -19.140403561325776 M16.14946825967676 -19.140403561325776 C16.395137901053076 -19.084331068825865, 16.640807542429393 -19.02825857632595, 17.36813938623539 -18.862249829261074 M16.14946825967676 -19.140403561325776 C16.54306350461898 -19.05056801511672, 16.936658749561207 -18.960732468907665, 17.36813938623539 -18.862249829261074 M17.36813938623539 -18.862249829261074 C17.709470392693238 -18.760944578227402, 18.05080139915108 -18.659639327193727, 18.566485251460602 -18.50658706670804 M17.36813938623539 -18.862249829261074 C17.64552737698937 -18.77992252964457, 17.92291536774335 -18.697595230028064, 18.566485251460602 -18.50658706670804 M18.566485251460602 -18.50658706670804 C18.900950263526763 -18.383500850507012, 19.235415275592928 -18.260414634305985, 19.739581595147794 -18.074876768247425 M18.566485251460602 -18.50658706670804 C18.874011909037325 -18.393414413974547, 19.181538566614048 -18.28024176124105, 19.739581595147794 -18.074876768247425 M19.739581595147794 -18.074876768247425 C20.11840579086676 -17.90718253422314, 20.49722998658573 -17.73948830019885, 20.88260791279238 -17.568892924097174 M19.739581595147794 -18.074876768247425 C20.142905832300144 -17.896337092648487, 20.546230069452495 -17.71779741704955, 20.88260791279238 -17.568892924097174 M20.88260791279238 -17.568892924097174 C21.266788609666953 -17.36846610061719, 21.65096930654153 -17.168039277137204, 21.990867264076783 -16.990714730406097 M20.88260791279238 -17.568892924097174 C21.212490806830257 -17.396793229577693, 21.542373700868136 -17.22469353505821, 21.990867264076783 -16.990714730406097 M21.990867264076783 -16.990714730406097 C22.32136757362091 -16.790363500525043, 22.651867883165036 -16.59001227064399, 23.059805573605697 -16.342718045390892 M21.990867264076783 -16.990714730406097 C22.223226976111143 -16.84985690747363, 22.455586688145505 -16.708999084541166, 23.059805573605697 -16.342718045390892 M23.059805573605697 -16.342718045390892 C23.311439787133377 -16.16718891110352, 23.56307400066106 -15.99165977681615, 24.085030344578712 -15.627565626425154 M23.059805573605697 -16.342718045390892 C23.372933220862564 -16.12429375374188, 23.686060868119434 -15.905869462092872, 24.085030344578712 -15.627565626425154 M24.085030344578712 -15.627565626425154 C24.31952859927055 -15.440559508569043, 24.55402685396239 -15.253553390712934, 25.06232870850187 -14.848196188198123 M24.085030344578712 -15.627565626425154 C24.348825101465607 -15.417196327681152, 24.612619858352502 -15.20682702893715, 25.06232870850187 -14.848196188198123 M25.06232870850187 -14.848196188198123 C25.4295834957663 -14.514665107433764, 25.796838283030727 -14.181134026669405, 25.987684736767985 -14.007812326905688 M25.06232870850187 -14.848196188198123 C25.324563984502756 -14.610041048899312, 25.586799260503643 -14.3718859096005, 25.987684736767985 -14.007812326905688 M25.987684736767985 -14.007812326905688 C26.299233117973255 -13.68611304471345, 26.61078149917853 -13.364413762521211, 26.857295942968648 -13.10986736009568 M25.987684736767985 -14.007812326905688 C26.176252684725426 -13.813100438923179, 26.36482063268287 -13.618388550940672, 26.857295942968648 -13.10986736009568 M26.857295942968648 -13.10986736009568 C27.101283218055464 -12.823266023509458, 27.345270493142284 -12.536664686923235, 27.667588908126582 -12.158051136245305 M26.857295942968648 -13.10986736009568 C27.174028968738444 -12.737814725406754, 27.490761994508244 -12.365762090717826, 27.667588908126582 -12.158051136245305 M27.667588908126582 -12.158051136245305 C27.933996227943766 -11.801089597896397, 28.20040354776095 -11.44412805954749, 28.415233964640635 -11.156274872382312 M27.667588908126582 -12.158051136245305 C27.951416433897883 -11.77774810893129, 28.235243959669187 -11.397445081617272, 28.415233964640635 -11.156274872382312 M28.415233964640635 -11.156274872382312 C28.668029493104353 -10.76791305555784, 28.92082502156807 -10.379551238733367, 29.097158878604247 -10.108655082055241 M28.415233964640635 -11.156274872382312 C28.59547588781906 -10.879374876646997, 28.775717810997484 -10.60247488091168, 29.097158878604247 -10.108655082055241 M29.097158878604247 -10.108655082055241 C29.224032030215287 -9.883378954070126, 29.350905181826327 -9.65810282608501, 29.7105614742735 -9.019496659696287 M29.097158878604247 -10.108655082055241 C29.259335470336904 -9.820694121273238, 29.42151206206956 -9.532733160491235, 29.7105614742735 -9.019496659696287 M29.7105614742735 -9.019496659696287 C29.883980050436822 -8.659389275730042, 30.057398626600143 -8.2992818917638, 30.25292114880834 -7.893275190886684 M29.7105614742735 -9.019496659696287 C29.829256005839135 -8.773024925244119, 29.94795053740477 -8.526553190791951, 30.25292114880834 -7.893275190886684 M30.25292114880834 -7.893275190886684 C30.384909568159813 -7.56726124326606, 30.516897987511285 -7.241247295645436, 30.722009229970325 -6.734618561215508 M30.25292114880834 -7.893275190886684 C30.363744394313432 -7.619539631867421, 30.47456763981852 -7.345804072848158, 30.722009229970325 -6.734618561215508 M30.722009229970325 -6.734618561215508 C30.80553517847924 -6.483051712359288, 30.88906112698815 -6.231484863503068, 31.11589813421488 -5.548287939305138 M30.722009229970325 -6.734618561215508 C30.85820896163733 -6.3244066699147465, 30.994408693304337 -5.914194778613986, 31.11589813421488 -5.548287939305138 M31.11589813421488 -5.548287939305138 C31.226204113276374 -5.127643434229922, 31.33651009233787 -4.706998929154707, 31.43296928754556 -4.339158212148133 M31.11589813421488 -5.548287939305138 C31.222538729829317 -5.141621129900787, 31.329179325443757 -4.734954320496436, 31.43296928754556 -4.339158212148133 M31.43296928754556 -4.339158212148133 C31.52440106747022 -3.8696753463485387, 31.61583284739488 -3.4001924805489443, 31.671919776581777 -3.1121979531509023 M31.43296928754556 -4.339158212148133 C31.49638266865499 -4.013543902574049, 31.559796049764422 -3.687929592999965, 31.671919776581777 -3.1121979531509023 M31.671919776581777 -3.1121979531509023 C31.73287635950175 -2.639430733262407, 31.79383294242172 -2.1666635133739125, 31.831767702509367 -1.872449005199798 M31.671919776581777 -3.1121979531509023 C31.725220157617493 -2.698810723188638, 31.778520538653204 -2.2854234932263733, 31.831767702509367 -1.872449005199798 M31.831767702509367 -1.872449005199798 C31.854294622253875 -1.5215740467767667, 31.87682154199838 -1.1706990883537354, 31.911856215913414 -0.6250057626472757 M31.831767702509367 -1.872449005199798 C31.861466119528046 -1.4098721880031022, 31.891164536546725 -0.9472953708064064, 31.911856215913414 -0.6250057626472757 M31.911856215913414 -0.6250057626472757 C31.911856215913414 -0.1941126290564964, 31.911856215913414 0.2367805045342829, 31.911856215913414 0.625005762647271 M31.911856215913414 -0.6250057626472757 C31.911856215913414 -0.1923487510211242, 31.911856215913414 0.2403082606050273, 31.911856215913414 0.625005762647271 M31.911856215913414 0.625005762647271 C31.881882818242662 1.0918656254603627, 31.85190942057191 1.5587254882734545, 31.831767702509367 1.8724490051997846 M31.911856215913414 0.625005762647271 C31.880610952470565 1.111675961492335, 31.84936568902772 1.5983461603373987, 31.831767702509367 1.8724490051997846 M31.831767702509367 1.8724490051997846 C31.791187292081524 2.1871826549696998, 31.750606881653685 2.501916304739615, 31.671919776581777 3.1121979531508885 M31.831767702509367 1.8724490051997846 C31.77791197320745 2.290143406648811, 31.72405624390553 2.707837808097838, 31.671919776581777 3.1121979531508885 M31.671919776581777 3.1121979531508885 C31.5867371454828 3.549592760488677, 31.501554514383823 3.986987567826465, 31.43296928754556 4.339158212148129 M31.671919776581777 3.1121979531508885 C31.596826876215 3.497784125644175, 31.521733975848225 3.8833702981374607, 31.43296928754556 4.339158212148129 M31.43296928754556 4.339158212148129 C31.33066347910357 4.729294599355291, 31.22835767066158 5.119430986562454, 31.115898134214884 5.548287939305125 M31.43296928754556 4.339158212148129 C31.325288416476184 4.7497920427204, 31.217607545406807 5.16042587329267, 31.115898134214884 5.548287939305125 M31.115898134214884 5.548287939305125 C31.022027191806277 5.8310122615362845, 30.92815624939767 6.1137365837674436, 30.72200922997033 6.734618561215495 M31.115898134214884 5.548287939305125 C31.025475361731477 5.82062692311285, 30.93505258924807 6.092965906920575, 30.72200922997033 6.734618561215495 M30.72200922997033 6.734618561215495 C30.582629133315233 7.078890094684431, 30.443249036660138 7.423161628153367, 30.252921148808344 7.893275190886679 M30.72200922997033 6.734618561215495 C30.586951868229754 7.0682128558711685, 30.45189450648918 7.401807150526842, 30.252921148808344 7.893275190886679 M30.252921148808344 7.893275190886679 C30.083203879777944 8.245696731396126, 29.913486610747547 8.598118271905573, 29.710561474273504 9.019496659696284 M30.252921148808344 7.893275190886679 C30.118417141113106 8.172575640790571, 29.983913133417868 8.451876090694462, 29.710561474273504 9.019496659696284 M29.710561474273504 9.019496659696284 C29.572967674708128 9.263808383707643, 29.435373875142755 9.508120107719002, 29.09715887860425 10.108655082055236 M29.710561474273504 9.019496659696284 C29.542618160864176 9.317697018759103, 29.374674847454852 9.615897377821923, 29.09715887860425 10.108655082055236 M29.09715887860425 10.108655082055236 C28.950145815305103 10.33450662581774, 28.803132752005954 10.560358169580246, 28.41523396464064 11.156274872382301 M29.09715887860425 10.108655082055236 C28.946636311187575 10.33989816657607, 28.7961137437709 10.571141251096904, 28.41523396464064 11.156274872382301 M28.41523396464064 11.156274872382301 C28.19290221525733 11.45417916171689, 27.970570465874015 11.75208345105148, 27.667588908126582 12.158051136245302 M28.41523396464064 11.156274872382301 C28.12848920154213 11.54048673194899, 27.841744438443616 11.924698591515678, 27.667588908126582 12.158051136245302 M27.667588908126582 12.158051136245302 C27.44380263720054 12.420923223874578, 27.2200163662745 12.683795311503854, 26.85729594296866 13.10986736009567 M27.667588908126582 12.158051136245302 C27.427507036834765 12.44006496331015, 27.187425165542944 12.722078790374995, 26.85729594296866 13.10986736009567 M26.85729594296866 13.10986736009567 C26.52278554298959 13.455276811888655, 26.18827514301052 13.80068626368164, 25.98768473676799 14.007812326905684 M26.85729594296866 13.10986736009567 C26.67941704671441 13.293541924607167, 26.501538150460156 13.477216489118664, 25.98768473676799 14.007812326905684 M25.98768473676799 14.007812326905684 C25.62266003934392 14.339318099081973, 25.25763534191985 14.670823871258264, 25.062328708501887 14.848196188198111 M25.98768473676799 14.007812326905684 C25.756216261336373 14.218025871972422, 25.524747785904754 14.428239417039158, 25.062328708501887 14.848196188198111 M25.062328708501887 14.848196188198111 C24.679592398608992 15.153418210296744, 24.296856088716098 15.458640232395378, 24.085030344578715 15.627565626425152 M25.062328708501887 14.848196188198111 C24.81471297158054 15.04566314906139, 24.567097234659194 15.243130109924671, 24.085030344578715 15.627565626425152 M24.085030344578715 15.627565626425152 C23.771254584954583 15.846442013205236, 23.45747882533045 16.06531839998532, 23.059805573605708 16.34271804539089 M24.085030344578715 15.627565626425152 C23.714826970239056 15.885803474518715, 23.3446235958994 16.144041322612278, 23.059805573605708 16.34271804539089 M23.059805573605708 16.34271804539089 C22.809480497428492 16.49446657764295, 22.559155421251276 16.646215109895014, 21.990867264076787 16.990714730406093 M23.059805573605708 16.34271804539089 C22.83155042689819 16.481087656701117, 22.60329528019067 16.61945726801135, 21.990867264076787 16.990714730406093 M21.990867264076787 16.990714730406093 C21.717237589430546 17.133467156400865, 21.443607914784305 17.27621958239564, 20.882607912792388 17.56889292409717 M21.990867264076787 16.990714730406093 C21.619912490210908 17.18424159832405, 21.248957716345025 17.377768466242006, 20.882607912792388 17.56889292409717 M20.882607912792388 17.56889292409717 C20.573577407052163 17.705691561924123, 20.264546901311938 17.842490199751072, 19.739581595147804 18.07487676824742 M20.882607912792388 17.56889292409717 C20.501667272779745 17.737524045228177, 20.120726632767102 17.906155166359188, 19.739581595147804 18.07487676824742 M19.739581595147804 18.07487676824742 C19.466821990206196 18.17525482422808, 19.194062385264587 18.275632880208743, 18.566485251460616 18.506587066708033 M19.739581595147804 18.07487676824742 C19.432559944782867 18.187863573658742, 19.12553829441793 18.300850379070063, 18.566485251460616 18.506587066708033 M18.566485251460616 18.506587066708033 C18.127516618995866 18.6368706526302, 17.688547986531113 18.76715423855237, 17.368139386235413 18.86224982926107 M18.566485251460616 18.506587066708033 C18.118896974892298 18.639428917754703, 17.67130869832398 18.772270768801377, 17.368139386235413 18.86224982926107 M17.368139386235413 18.86224982926107 C17.020232186017996 18.94165737740404, 16.672324985800582 19.021064925547016, 16.149468259676766 19.140403561325773 M17.368139386235413 18.86224982926107 C16.933813671573645 18.961381839392455, 16.499487956911878 19.060513849523844, 16.149468259676766 19.140403561325773 M16.149468259676766 19.140403561325773 C15.822742517081052 19.193226045592674, 15.496016774485337 19.24604852985957, 14.915479652847878 19.3399052695533 M16.149468259676766 19.140403561325773 C15.841922790347502 19.190125127756193, 15.534377321018237 19.239846694186614, 14.915479652847878 19.3399052695533 M14.915479652847878 19.3399052695533 C14.517639545711308 19.37828442621603, 14.119799438574738 19.416663582878765, 13.6712442896239 19.45993515863156 M14.915479652847878 19.3399052695533 C14.47944892437253 19.38196862952564, 14.043418195897184 19.424031989497983, 13.6712442896239 19.45993515863156 M13.6712442896239 19.45993515863156 C13.264805663384863 19.47296885429025, 12.858367037145827 19.486002549948942, 12.421875000000004 19.5 M13.6712442896239 19.45993515863156 C13.19253217829002 19.475286524285437, 12.713820066956139 19.49063788993932, 12.421875000000004 19.5 M12.421875000000004 19.5 C12.421875000000002 19.5, 12.421875 19.5, 12.421875 19.5 M12.421875000000004 19.5 C12.421875000000002 19.5, 12.421875000000002 19.5, 12.421875 19.5 M12.421875 19.5 C4.040814558540392 19.5, -4.340245882919216 19.5, -12.421874999999996 19.5 M12.421875 19.5 C3.707155917809631 19.5, -5.007563164380738 19.5, -12.421874999999996 19.5 M-12.421874999999996 19.5 C-12.747036307291916 19.489572709763237, -13.072197614583835 19.479145419526475, -13.671244289623893 19.45993515863156 M-12.421874999999996 19.5 C-12.818156828884357 19.487292013063467, -13.214438657768717 19.47458402612693, -13.671244289623893 19.45993515863156 M-13.671244289623893 19.45993515863156 C-14.043521481847078 19.424022025626616, -14.415798674070261 19.388108892621673, -14.915479652847871 19.3399052695533 M-13.671244289623893 19.45993515863156 C-14.145714545856357 19.414163583646783, -14.620184802088822 19.368392008662006, -14.915479652847871 19.3399052695533 M-14.915479652847871 19.3399052695533 C-15.37998184324533 19.264808157678125, -15.84448403364279 19.189711045802948, -16.14946825967676 19.140403561325773 M-14.915479652847871 19.3399052695533 C-15.208445742817169 19.292540784113022, -15.501411832786465 19.245176298672746, -16.14946825967676 19.140403561325773 M-16.14946825967676 19.140403561325773 C-16.410647694316125 19.08079105972443, -16.671827128955496 19.021178558123083, -17.368139386235388 18.862249829261074 M-16.14946825967676 19.140403561325773 C-16.611089192272047 19.035041595819003, -17.072710124867335 18.929679630312233, -17.368139386235388 18.862249829261074 M-17.368139386235388 18.862249829261074 C-17.66877905826174 18.773021552693496, -17.969418730288094 18.683793276125915, -18.56648525146059 18.506587066708043 M-17.368139386235388 18.862249829261074 C-17.706124453777644 18.761937635334355, -18.0441095213199 18.661625441407637, -18.56648525146059 18.506587066708043 M-18.56648525146059 18.506587066708043 C-18.838351135493173 18.40653790828337, -19.11021701952576 18.306488749858698, -19.739581595147797 18.074876768247425 M-18.56648525146059 18.506587066708043 C-18.84536072493183 18.40395831457401, -19.124236198403068 18.301329562439978, -19.739581595147797 18.074876768247425 M-19.739581595147797 18.074876768247425 C-20.020653179476565 17.950454715557388, -20.301724763805332 17.826032662867355, -20.88260791279238 17.568892924097174 M-19.739581595147797 18.074876768247425 C-20.040032146807455 17.941876221576646, -20.340482698467113 17.808875674905867, -20.88260791279238 17.568892924097174 M-20.88260791279238 17.568892924097174 C-21.17483759005966 17.416436888648875, -21.467067267326943 17.263980853200575, -21.99086726407678 16.990714730406097 M-20.88260791279238 17.568892924097174 C-21.157299075569398 17.42558672042449, -21.431990238346415 17.282280516751808, -21.99086726407678 16.990714730406097 M-21.99086726407678 16.990714730406097 C-22.30473526141542 16.800446105926326, -22.61860325875406 16.610177481446552, -23.059805573605686 16.3427180453909 M-21.99086726407678 16.990714730406097 C-22.278642329972005 16.81626379430641, -22.566417395867234 16.64181285820672, -23.059805573605686 16.3427180453909 M-23.059805573605686 16.3427180453909 C-23.344768783603733 16.143940045954807, -23.629731993601776 15.945162046518712, -24.085030344578712 15.627565626425156 M-23.059805573605686 16.3427180453909 C-23.36608848633734 16.1290683442429, -23.672371399068993 15.915418643094895, -24.085030344578712 15.627565626425156 M-24.085030344578712 15.627565626425156 C-24.35785044098377 15.40999885958979, -24.63067053738883 15.192432092754423, -25.06232870850187 14.848196188198125 M-24.085030344578712 15.627565626425156 C-24.31734287072075 15.44230256892283, -24.549655396862793 15.257039511420505, -25.06232870850187 14.848196188198125 M-25.06232870850187 14.848196188198125 C-25.42495360211955 14.518869854343468, -25.787578495737232 14.189543520488808, -25.987684736767974 14.007812326905697 M-25.06232870850187 14.848196188198125 C-25.364789535276287 14.573509267996542, -25.667250362050705 14.29882234779496, -25.987684736767974 14.007812326905697 M-25.987684736767974 14.007812326905697 C-26.18092304057912 13.808277913060895, -26.374161344390266 13.608743499216093, -26.857295942968655 13.109867360095677 M-25.987684736767974 14.007812326905697 C-26.186980231209418 13.802023366430515, -26.386275725650858 13.596234405955332, -26.857295942968655 13.109867360095677 M-26.857295942968655 13.109867360095677 C-27.05954645410817 12.872292401331103, -27.26179696524768 12.63471744256653, -27.66758890812658 12.158051136245307 M-26.857295942968655 13.109867360095677 C-27.100616164369224 12.82404958272575, -27.34393638576979 12.538231805355824, -27.66758890812658 12.158051136245307 M-27.66758890812658 12.158051136245307 C-27.94415876881824 11.78747271895112, -28.220728629509903 11.416894301656935, -28.415233964640635 11.156274872382316 M-27.66758890812658 12.158051136245307 C-27.950490966854662 11.778988150457424, -28.233393025582746 11.399925164669542, -28.415233964640635 11.156274872382316 M-28.415233964640635 11.156274872382316 C-28.60196250966608 10.869409683588119, -28.78869105469153 10.582544494793922, -29.097158878604244 10.108655082055249 M-28.415233964640635 11.156274872382316 C-28.632110843019053 10.823093747596907, -28.84898772139747 10.489912622811499, -29.097158878604244 10.108655082055249 M-29.097158878604244 10.108655082055249 C-29.24572198697085 9.84486623950434, -29.394285095337455 9.581077396953432, -29.7105614742735 9.019496659696289 M-29.097158878604244 10.108655082055249 C-29.293888553275305 9.759341623637058, -29.490618227946364 9.410028165218865, -29.7105614742735 9.019496659696289 M-29.7105614742735 9.019496659696289 C-29.84896416733671 8.732100506207297, -29.987366860399923 8.444704352718306, -30.25292114880834 7.893275190886686 M-29.7105614742735 9.019496659696289 C-29.872411087807198 8.683412474166605, -30.034260701340894 8.347328288636922, -30.25292114880834 7.893275190886686 M-30.25292114880834 7.893275190886686 C-30.423957504574467 7.470812085381371, -30.594993860340594 7.048348979876056, -30.722009229970325 6.73461856121551 M-30.25292114880834 7.893275190886686 C-30.433640030726306 7.446896058587428, -30.614358912644267 7.00051692628817, -30.722009229970325 6.73461856121551 M-30.722009229970325 6.73461856121551 C-30.854435736718894 6.335771022187327, -30.986862243467463 5.936923483159143, -31.11589813421488 5.5482879393051325 M-30.722009229970325 6.73461856121551 C-30.870802864112928 6.286475842224105, -31.01959649825553 5.838333123232701, -31.11589813421488 5.5482879393051325 M-31.11589813421488 5.5482879393051325 C-31.185907763441676 5.281310880698124, -31.25591739266847 5.014333822091114, -31.432969287545557 4.339158212148136 M-31.11589813421488 5.5482879393051325 C-31.22331245074806 5.138670596704852, -31.330726767281238 4.729053254104571, -31.432969287545557 4.339158212148136 M-31.432969287545557 4.339158212148136 C-31.520269464072488 3.8908902565812045, -31.607569640599415 3.4426223010142736, -31.671919776581777 3.112197953150904 M-31.432969287545557 4.339158212148136 C-31.48159951545384 4.089452269841421, -31.53022974336212 3.839746327534706, -31.671919776581777 3.112197953150904 M-31.671919776581777 3.112197953150904 C-31.7189880941968 2.7471453764194145, -31.766056411811817 2.382092799687925, -31.831767702509364 1.872449005199809 M-31.671919776581777 3.112197953150904 C-31.72391961263655 2.708897493239176, -31.77591944869132 2.305597033327448, -31.831767702509364 1.872449005199809 M-31.831767702509364 1.872449005199809 C-31.85184805179059 1.5596813565785321, -31.871928401071813 1.2469137079572552, -31.911856215913414 0.6250057626472781 M-31.831767702509364 1.872449005199809 C-31.853514296866397 1.5337282445539824, -31.875260891223434 1.1950074839081555, -31.911856215913414 0.6250057626472781 M-31.911856215913414 0.6250057626472781 C-31.911856215913414 0.2990023429808357, -31.911856215913414 -0.027001076685606695, -31.911856215913414 -0.6250057626472687 M-31.911856215913414 0.6250057626472781 C-31.911856215913414 0.21042313645080546, -31.911856215913414 -0.20415948974566722, -31.911856215913414 -0.6250057626472687 M-31.911856215913414 -0.6250057626472687 C-31.88247000489991 -1.0827197193051505, -31.853083793886412 -1.5404336759630324, -31.831767702509367 -1.8724490051997822 M-31.911856215913414 -0.6250057626472687 C-31.886592972916482 -1.018501164447209, -31.86132972991955 -1.4119965662471494, -31.831767702509367 -1.8724490051997822 M-31.831767702509367 -1.8724490051997822 C-31.77213538719694 -2.334945467030399, -31.71250307188451 -2.797441928861016, -31.671919776581777 -3.112197953150895 M-31.831767702509367 -1.8724490051997822 C-31.790623356250062 -2.191556429916801, -31.749479009990758 -2.5106638546338202, -31.671919776581777 -3.112197953150895 M-31.671919776581777 -3.112197953150895 C-31.594544436246853 -3.509503972486754, -31.51716909591193 -3.9068099918226125, -31.43296928754556 -4.339158212148126 M-31.671919776581777 -3.112197953150895 C-31.601699432405145 -3.4727645794229156, -31.531479088228508 -3.833331205694936, -31.43296928754556 -4.339158212148126 M-31.43296928754556 -4.339158212148126 C-31.312012551247392 -4.800418670634166, -31.191055814949223 -5.261679129120205, -31.115898134214884 -5.548287939305123 M-31.43296928754556 -4.339158212148126 C-31.325959009189972 -4.7472347820659975, -31.218948730834384 -5.155311351983868, -31.115898134214884 -5.548287939305123 M-31.115898134214884 -5.548287939305123 C-31.002567734445385 -5.889621046663807, -30.889237334675887 -6.230954154022492, -30.722009229970332 -6.734618561215485 M-31.115898134214884 -5.548287939305123 C-30.99141706850995 -5.923205075843986, -30.86693600280502 -6.2981222123828475, -30.722009229970332 -6.734618561215485 M-30.722009229970332 -6.734618561215485 C-30.62034701258622 -6.985726203659507, -30.518684795202105 -7.236833846103528, -30.252921148808344 -7.893275190886676 M-30.722009229970332 -6.734618561215485 C-30.591947878056377 -7.055872615008127, -30.461886526142425 -7.377126668800768, -30.252921148808344 -7.893275190886676 M-30.252921148808344 -7.893275190886676 C-30.110194802995597 -8.189649501821425, -29.967468457182854 -8.486023812756175, -29.710561474273504 -9.019496659696282 M-30.252921148808344 -7.893275190886676 C-30.13689358812757 -8.134208903232398, -30.020866027446797 -8.37514261557812, -29.710561474273504 -9.019496659696282 M-29.710561474273504 -9.019496659696282 C-29.483607011631396 -9.422477289748729, -29.25665254898929 -9.825457919801176, -29.097158878604247 -10.108655082055243 M-29.710561474273504 -9.019496659696282 C-29.533359930306617 -9.334135944611559, -29.356158386339725 -9.648775229526834, -29.097158878604247 -10.108655082055243 M-29.097158878604247 -10.108655082055243 C-28.862889438448043 -10.468555852288107, -28.62861999829184 -10.82845662252097, -28.41523396464064 -11.156274872382308 M-29.097158878604247 -10.108655082055243 C-28.884954829936124 -10.434657485575169, -28.672750781268 -10.760659889095093, -28.41523396464064 -11.156274872382308 M-28.41523396464064 -11.156274872382308 C-28.158254192800445 -11.500604355309338, -27.901274420960252 -11.844933838236368, -27.667588908126586 -12.158051136245302 M-28.41523396464064 -11.156274872382308 C-28.138599243325984 -11.526940197002386, -27.861964522011327 -11.897605521622463, -27.667588908126586 -12.158051136245302 M-27.667588908126586 -12.158051136245302 C-27.46886109763419 -12.391488130382427, -27.270133287141793 -12.624925124519551, -26.857295942968662 -13.10986736009567 M-27.667588908126586 -12.158051136245302 C-27.43562101620736 -12.430533821440596, -27.203653124288135 -12.70301650663589, -26.857295942968662 -13.10986736009567 M-26.857295942968662 -13.10986736009567 C-26.557919162321163 -13.418998465405014, -26.258542381673664 -13.72812957071436, -25.987684736767996 -14.007812326905677 M-26.857295942968662 -13.10986736009567 C-26.569716595359186 -13.406816647205993, -26.282137247749706 -13.703765934316316, -25.987684736767996 -14.007812326905677 M-25.987684736767996 -14.007812326905677 C-25.789273213576735 -14.18800442258675, -25.590861690385474 -14.368196518267823, -25.062328708501887 -14.848196188198107 M-25.987684736767996 -14.007812326905677 C-25.669074973350124 -14.297165284089395, -25.350465209932253 -14.586518241273112, -25.062328708501887 -14.848196188198107 M-25.062328708501887 -14.848196188198107 C-24.8071844342924 -15.051666957205889, -24.552040160082914 -15.25513772621367, -24.08503034457872 -15.627565626425149 M-25.062328708501887 -14.848196188198107 C-24.78840189615744 -15.066645531544191, -24.514475083812986 -15.285094874890275, -24.08503034457872 -15.627565626425149 M-24.08503034457872 -15.627565626425149 C-23.756384933133653 -15.856814438618661, -23.42773952168859 -16.086063250812174, -23.05980557360571 -16.342718045390885 M-24.08503034457872 -15.627565626425149 C-23.70797648771256 -15.890582074576589, -23.330922630846402 -16.15359852272803, -23.05980557360571 -16.342718045390885 M-23.05980557360571 -16.342718045390885 C-22.676785458212596 -16.574907090218232, -22.29376534281948 -16.807096135045583, -21.99086726407679 -16.99071473040609 M-23.05980557360571 -16.342718045390885 C-22.68199220181711 -16.571750731646954, -22.304178830028512 -16.800783417903023, -21.99086726407679 -16.99071473040609 M-21.99086726407679 -16.99071473040609 C-21.57486911560037 -17.207740698006706, -21.158870967123953 -17.424766665607326, -20.882607912792388 -17.56889292409717 M-21.99086726407679 -16.99071473040609 C-21.582665802391432 -17.203673171501826, -21.17446434070607 -17.416631612597566, -20.882607912792388 -17.56889292409717 M-20.882607912792388 -17.56889292409717 C-20.495512248039358 -17.740248692098426, -20.10841658328633 -17.91160446009968, -19.739581595147804 -18.07487676824742 M-20.882607912792388 -17.56889292409717 C-20.52819925840536 -17.72577912223511, -20.173790604018325 -17.88266532037305, -19.739581595147804 -18.07487676824742 M-19.739581595147804 -18.07487676824742 C-19.327931006120878 -18.22636799026566, -18.91628041709395 -18.3778592122839, -18.56648525146062 -18.506587066708033 M-19.739581595147804 -18.07487676824742 C-19.500374664532995 -18.1629071299183, -19.26116773391819 -18.250937491589173, -18.56648525146062 -18.506587066708033 M-18.56648525146062 -18.506587066708033 C-18.2005491158449 -18.615194990920806, -17.834612980229178 -18.72380291513358, -17.368139386235413 -18.862249829261067 M-18.56648525146062 -18.506587066708033 C-18.162625364915723 -18.626450561130756, -17.758765478370822 -18.746314055553476, -17.368139386235413 -18.862249829261067 M-17.368139386235413 -18.862249829261067 C-16.980696473366702 -18.950681145822063, -16.593253560497992 -19.039112462383056, -16.149468259676766 -19.140403561325773 M-17.368139386235413 -18.862249829261067 C-17.025706268115737 -18.940407953886954, -16.683273149996058 -19.018566078512844, -16.149468259676766 -19.140403561325773 M-16.149468259676766 -19.140403561325773 C-15.75361625513806 -19.204401843541447, -15.35776425059935 -19.268400125757122, -14.91547965284788 -19.3399052695533 M-16.149468259676766 -19.140403561325773 C-15.850817155500946 -19.188687155775018, -15.552166051325125 -19.23697075022426, -14.91547965284788 -19.3399052695533 M-14.91547965284788 -19.3399052695533 C-14.426292357518216 -19.38709657959995, -13.937105062188552 -19.43428788964661, -13.671244289623903 -19.45993515863156 M-14.91547965284788 -19.3399052695533 C-14.51282357595874 -19.37874901702601, -14.110167499069599 -19.417592764498725, -13.671244289623903 -19.45993515863156 M-13.671244289623903 -19.45993515863156 C-13.255402468230603 -19.473270396456638, -12.839560646837302 -19.48660563428172, -12.421875000000005 -19.5 M-13.671244289623903 -19.45993515863156 C-13.392175489924833 -19.46888435186344, -13.113106690225763 -19.477833545095326, -12.421875000000005 -19.5 M-12.421875000000005 -19.5 C-12.421875000000004 -19.5, -12.421875000000002 -19.5, -12.421875 -19.5 M-12.421875000000005 -19.5 C-12.421875000000004 -19.5, -12.421875000000002 -19.5, -12.421875 -19.5" stroke="#9370DB" stroke-width="1.3" fill="none" stroke-dasharray="0 0" style=""></path></g><g class="label" style="" transform="translate(-19.546875, -12)"><rect></rect><foreignObject width="39.09375" height="24"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="nodeLabel"><p>Start</p></span></div></foreignObject></g></g><g class="node default" id="flowchart-B-1" transform="translate(182.88621139526367, 87)"><polygon points="61.0625,0 122.125,-61.0625 61.0625,-122.125 0,-61.0625" class="label-container" transform="translate(-60.5625, 61.0625)"></polygon><g class="label" style="" transform="translate(-34.0625, -12)"><rect></rect><foreignObject width="68.125" height="24"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="nodeLabel"><p>Decision</p></span></div></foreignObject></g></g><g class="node default" id="flowchart-C-3" transform="translate(358.6830863952637, 35)"><rect class="basic label-container" style="" x="-64.71875" y="-27" width="129.4375" height="54"></rect><g class="label" style="" transform="translate(-34.71875, -12)"><rect></rect><foreignObject width="69.4375" height="24"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="nodeLabel"><p>Option A</p></span></div></foreignObject></g></g><g class="node default" id="flowchart-D-4" transform="translate(358.6830863952637, 139)"><rect class="basic label-container" style="" x="-64.734375" y="-27" width="129.46875" height="54"></rect><g class="label" style="" transform="translate(-34.734375, -12)"><rect></rect><foreignObject width="69.46875" height="24"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="nodeLabel"><p>Option B</p></span></div></foreignObject></g></g></g></g></g></svg></body></html></figure>

markdown-it-mermaid-server appeared on ulfschneider.io.

Reply via email

 Nano ID Collision Calculator 2025-07-18T19:12:55Z https://ulfschneider.io/2025-07-18-nanoid-collision-likelihood/ <p>Use the <a href="https://zelark.github.io/nano-id-cc/"><cite>Nano ID Collision Calculator</cite></a> to understand the collision-likelihood of your current Nano ID alphabet and id-length.</p>

Nano ID Collision Calculator appeared on ulfschneider.io.

Reply via email

 Pixel man 2025-06-30T07:03:56Z https://ulfschneider.io/2025-06-30-pixel-man/ <figure> <img src="https://ulfschneider.io/img/foaWE4fHqk-200.webp" alt="" loading="lazy" decoding="async" width="900" height="1200" srcset="https://ulfschneider.io/img/foaWE4fHqk-200.webp 200w, https://ulfschneider.io/img/foaWE4fHqk-900.webp 900w" sizes="100vw"> </figure>

Pixel man appeared on ulfschneider.io.

Reply via email

 Haikei 2025-06-30T07:04:21Z https://ulfschneider.io/2025-06-30-haikei/ <p><a href="https://app.haikei.app"><cite>Haikei</cite></a> is a shape generator for <a href="https://ulfschneider.io/2025-06-30-blobs/">blobs</a>, waves, and gradients. Output formats are SVG and PNG.</p>

Haikei appeared on ulfschneider.io.

Reply via email

 Fancy-Border-Radius 2025-06-30T07:04:31Z https://ulfschneider.io/2025-06-30-fancy-border-radius/ <p><a href="https://9elements.github.io/fancy-border-radius/"><cite>Fancy-Border-Radius</cite></a> is a tool written by Nils Binder, that allows to create and play with blobs by setting the horizontal and vertical radii with the CSS property <code>border-radius</code>.</p>

Fancy-Border-Radius appeared on ulfschneider.io.

Reply via email

 Blobs 2025-07-19T10:09:40Z https://ulfschneider.io/2025-06-30-blobs/ <figure><div style="border-radius: 30% 70% 70% 30% / 30% 26% 74% 70%; width:5rem; height:5rem; background:linear-gradient(47deg, #639 0%, 72%, #0ff 100%);"></div><figcaption>A blob</figcaption></figure> <p>I enjoyed Juan Diego Rodriguez´ <a href="https://css-tricks.com/css-blob-recipes"><cite>CSS Blob Recipes</cite></a> on CSS Tricks. I learned, each <code>border-radius</code> corner can be addressed with a vertical and horizontal radius! Like:</p> <pre class="language-css" data-language="CSS"><code class="language-css"><span class="token selector">.blob</span> <span class="token punctuation">{</span> /* set the horizontal radius to 25% and the vertical to 50% <span class="token property">border-top-left-radius</span><span class="token punctuation">:</span> 25% 50%<span class="token punctuation">;</span> <span class="token punctuation">}</span></code></pre> <p>To address each corner with the two radii, the syntax is:</p> <pre class="language-css" data-language="CSS"><code class="language-css"><span class="token selector">.blob</span> <span class="token punctuation">{</span> <span class="token property">border-radius</span><span class="token punctuation">:</span> <span class="token comment">/* separate horizontal radii from vertical radii with a forward slash */</span> <span class="token comment">/* horizontal */</span> 30% 70% 70% 30% / <span class="token comment">/* vertical */</span> 30% 26% 74% 70%<span class="token punctuation">;</span> <span class="token comment">/* set width, height, and background */</span> <span class="token property">width</span><span class="token punctuation">:</span> 15rem<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 15rem<span class="token punctuation">;</span> <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">linear-gradient</span><span class="token punctuation">(</span>47deg<span class="token punctuation">,</span> #639 0%<span class="token punctuation">,</span> 72%<span class="token punctuation">,</span> #0ff 100%<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span></code></pre> <p>which would create the following shape:</p> <figure> <div style="border-radius: 30% 70% 70% 30% / 30% 26% 74% 70%; width:15rem; height:15rem; background:linear-gradient(47deg, #639 0%, 72%, #0ff 100%);"></div> <figcaption>A blob</figcaption> </figure> <p>Nils Binder made a tool named <a href="https://9elements.github.io/fancy-border-radius/"><cite>Fancy-Border-Radius</cite></a>, to easily create such blobs. Nils not only wrote the tool, but also a great article, titled <a href="https://9elements.com/blog/css-border-radius-can-do-that/"><cite>CSS Border-Radius Can Do That?</cite></a>. From that text I learned it is important for the radii percentage values to add up to 100% for each of the four sides of the shape, to produce an organic looking blob with no straight lines! Due to the nature of the radius property, the shape is limited to be convex, and never concave, but it can have a border and a shadow.</p> <p>More complex geometric shapes, which include concave appearances, can be produced with the CSS <code>shape()</code> function. <code>shape()</code> is in June 2025 not supported by Firefox, and, according to <a href="https://caniuse.com/?search=shape()">caniuse.com</a>, is globaly available to only 76.21 % of users, which means you likely cannot use it in production.</p> <p>As Juan points it out, <code>shape()</code> uses a verbal version of SVG´s <code>path</code> syntax alongside the <code>clip-path</code> property to cut elements into any shape we want. While the geometric shapes can draw any shape an SVG can draw, they are limited to not have a border nor a shadow, but they do support gradient coloration! It is even possible to generate CSS shapes out of SVG´s. Temani Afif has written a <a href="https://css-generators.com/svg-to-css/"><cite>SVG to CSS Shape Converter</cite></a> to do this.</p> <p>Juan mentions the following <code>shape()</code> resources in his article: <a href="https://css-tricks.com/almanac/functions/s/shape/"><cite>CSS Almanac shape()</cite></a>, by John Rea, <a href="https://css-tricks.com/better-css-shapes-using-shape-part-1-lines-and-arcs/"><cite> Better CSS Shapes Using shape()</cite></a>, by Temani Afif, and <a href="https://frontendmasters.com/blog/creating-blob-shapes-using-clip-path-shape/"><cite>Creating Blob Shapes using clip-path: shape()</cite></a>, also by Temani Afif.</p>

Blobs appeared on ulfschneider.io.

Reply via email

 A hole dug in the ground, a spider, a bug, and a snail 2025-06-27T05:59:11Z https://ulfschneider.io/2025-06-27-spider-bug-snail/ <figure> <img src="https://ulfschneider.io/img/11B3ekHc52-200.webp" alt="" loading="lazy" decoding="async" width="675" height="1200" srcset="https://ulfschneider.io/img/11B3ekHc52-200.webp 200w, https://ulfschneider.io/img/11B3ekHc52-675.webp 675w" sizes="100vw"> </figure>

A hole dug in the ground, a spider, a bug, and a snail appeared on ulfschneider.io.

Reply via email

 Sea animals 2025-06-27T05:58:12Z https://ulfschneider.io/2025-06-27-sea-animlas/ <figure> <img src="https://ulfschneider.io/img/PUqK5vBXti-200.webp" alt="" loading="lazy" decoding="async" width="1200" height="900" srcset="https://ulfschneider.io/img/PUqK5vBXti-200.webp 200w, https://ulfschneider.io/img/PUqK5vBXti-1200.webp 1200w" sizes="100vw"> </figure>

Sea animals appeared on ulfschneider.io.

Reply via email

 Global DNS propagation checker 2025-06-17T04:53:16Z https://ulfschneider.io/2025-06-17-whatsmydns/ <p><a href="https://whatsmydns.net"><cite>whatsmydns.net</cite></a> allows to check global DNS record propagation.</p>

Global DNS propagation checker appeared on ulfschneider.io.

Reply via email

 That was bad luck 2025-06-15T11:28:55Z https://ulfschneider.io/2025-06-16-poor-weather/ <figure> <img src="https://ulfschneider.io/img/ZyLLZ4N1yE-200.webp" alt="" loading="lazy" decoding="async" width="1200" height="900" srcset="https://ulfschneider.io/img/ZyLLZ4N1yE-200.webp 200w, https://ulfschneider.io/img/ZyLLZ4N1yE-1200.webp 1200w" sizes="100vw"> <figcaption>Today I planned to ride the 150 km route at the Elbracht Cup in Herzebrock. I went there and registered for the event, but the weather was so bad that I couldn´t bring myself to start into the ride. I made a tough decision and headed back home. :-(</figcaption> </figure>

That was bad luck appeared on ulfschneider.io.

Reply via email

 Riding from Paderborn to Zingst 2025-09-14T07:50:43Z https://ulfschneider.io/2025-06-09-paderborn-zingst/ <p>From 9th to 12th of May I took a solo ride from Paderborn to Zingst. This is a photo essay of the ride.</p> <div class="table-of-contents"><ol><li><a href="https://ulfschneider.io/2025-06-09-paderborn-zingst/#the-route">The route</a></li><li><a href="https://ulfschneider.io/2025-06-09-paderborn-zingst/#day-1%2C-paderborn-to-landesbergen">Day 1, Paderborn to Landesbergen</a></li><li><a href="https://ulfschneider.io/2025-06-09-paderborn-zingst/#day-2%2C-landesbergen-to-bad-bevensen">Day 2, Landesbergen to Bad Bevensen</a></li><li><a href="https://ulfschneider.io/2025-06-09-paderborn-zingst/#day-3%2C-bad-bevensen-to-wismar">Day 3, Bad Bevensen to Wismar</a></li><li><a href="https://ulfschneider.io/2025-06-09-paderborn-zingst/#day-4%2C-wismar-to-zingst">Day 4, Wismar to Zingst</a></li><li><a href="https://ulfschneider.io/2025-06-09-paderborn-zingst/#equipment">Equipment</a></li><li><a href="https://ulfschneider.io/2025-06-09-paderborn-zingst/#packing-list">Packing list</a><ol><li><a href="https://ulfschneider.io/2025-06-09-paderborn-zingst/#route">Route</a></li><li><a href="https://ulfschneider.io/2025-06-09-paderborn-zingst/#packing-system">Packing system</a></li><li><a href="https://ulfschneider.io/2025-06-09-paderborn-zingst/#charging">Charging</a></li><li><a href="https://ulfschneider.io/2025-06-09-paderborn-zingst/#bike-tech">Bike tech</a></li><li><a href="https://ulfschneider.io/2025-06-09-paderborn-zingst/#eating-and-drinking">Eating and drinking</a></li><li><a href="https://ulfschneider.io/2025-06-09-paderborn-zingst/#clothing">Clothing</a></li><li><a href="https://ulfschneider.io/2025-06-09-paderborn-zingst/#personal">Personal</a></li><li><a href="https://ulfschneider.io/2025-06-09-paderborn-zingst/#id-and-money">ID and money</a></li></ol></li></ol></div> <h2 id="the-route" tabindex="-1">The route</h2> <figure> <img src="https://ulfschneider.io/img/ZzVXVVLb_C-200.webp" alt="" loading="lazy" decoding="async" width="1600" height="1400" srcset="https://ulfschneider.io/img/ZzVXVVLb_C-200.webp 200w, https://ulfschneider.io/img/ZzVXVVLb_C-1600.webp 1600w" sizes="100vw"> <figcaption>My route from Paderborn to Zingst, which I planned with komoot collections. My collection is named <a href="https://www.komoot.com/de-de/collection/3434196/-paderborn-zingst">Paderborn – Zingst</a>, of course. I divided the route into the four following stages. The figures represent my measured Garmin data. <ol> <li>Paderborn to Landesbergen, 127 km, 876 m up</li> <li>Landesbergen to Bad Bevensen, 150 km, 546 m up</li> <li>Bad Bevensen to Wismar, 155 km, 804 m up</li> <li>Wismar to Zingst, 132 km, 537 m up</li> </ol> </figcaption> </figure> <h2 id="day-1%2C-paderborn-to-landesbergen" tabindex="-1">Day 1, Paderborn to Landesbergen</h2> <p>The route starts in Paderborn and goes through Detmold, Lemgo, and Minden, ending in Landesbergen. My initial plan is to ride 10 km further to Nienburg, but the Mühlengasthof Landesbergen looks inviting to stay for the night, therefore I cut off the route at 127 km for the day.</p> <figure> <figcaption>The ride kicks off</figcaption> <figure class="md:split"> <img src="https://ulfschneider.io/img/erZ11ix36b-200.webp" alt="" loading="lazy" decoding="async" width="1200" height="900" srcset="https://ulfschneider.io/img/erZ11ix36b-200.webp 200w, https://ulfschneider.io/img/erZ11ix36b-1200.webp 1200w" sizes="100vw"> <img src="https://ulfschneider.io/img/CiGoGUuPpP-200.webp" alt="" loading="lazy" decoding="async" width="1200" height="900" srcset="https://ulfschneider.io/img/CiGoGUuPpP-200.webp 200w, https://ulfschneider.io/img/CiGoGUuPpP-1200.webp 1200w" sizes="100vw"> </figure> </figure> <figure> <img src="https://ulfschneider.io/img/ndfMRZgUjC-200.webp" alt="" loading="lazy" decoding="async" width="900" height="1200" srcset="https://ulfschneider.io/img/ndfMRZgUjC-200.webp 200w, https://ulfschneider.io/img/ndfMRZgUjC-900.webp 900w" sizes="100vw"> <figcaption>A boulevard in Detmold</figcaption> </figure> <figure> <figcaption>Impressions of Detmold</figcaption> <img src="https://ulfschneider.io/img/NLMNia-8wV-200.webp" alt="" loading="lazy" decoding="async" width="1200" height="900" srcset="https://ulfschneider.io/img/NLMNia-8wV-200.webp 200w, https://ulfschneider.io/img/NLMNia-8wV-1200.webp 1200w" sizes="100vw"> <img src="https://ulfschneider.io/img/zejxKeyNBT-200.webp" alt="" loading="lazy" decoding="async" width="1200" height="675" srcset="https://ulfschneider.io/img/zejxKeyNBT-200.webp 200w, https://ulfschneider.io/img/zejxKeyNBT-1200.webp 1200w" sizes="100vw"> </figure> <figure> <figcaption>The first break of the day happens to be in Kirchheide</figcaption> <figure class="md:split"> <img src="https://ulfschneider.io/img/Z0uib-44Hx-200.webp" alt="" loading="lazy" decoding="async" width="1200" height="900" srcset="https://ulfschneider.io/img/Z0uib-44Hx-200.webp 200w, https://ulfschneider.io/img/Z0uib-44Hx-1200.webp 1200w" sizes="100vw"> <img src="https://ulfschneider.io/img/r0Za3UwMFL-200.webp" alt="" loading="lazy" decoding="async" width="1200" height="900" srcset="https://ulfschneider.io/img/r0Za3UwMFL-200.webp 200w, https://ulfschneider.io/img/r0Za3UwMFL-1200.webp 1200w" sizes="100vw"> </figure> </figure> <figure> <figcaption>In Vlotho I ride through an underpass, it´s concrete walls sprayed with graffitis. Unexpectedly a cycling path reveals itself, allowing me to ride along the Weser river.</figcaption> <figure class="md:split"> <img src="https://ulfschneider.io/img/boJs1INEYF-200.webp" alt="" loading="lazy" decoding="async" width="900" height="1200" srcset="https://ulfschneider.io/img/boJs1INEYF-200.webp 200w, https://ulfschneider.io/img/boJs1INEYF-900.webp 900w" sizes="100vw"> <img src="https://ulfschneider.io/img/vpxvM8OFO1-200.webp" alt="" loading="lazy" decoding="async" width="675" height="1200" srcset="https://ulfschneider.io/img/vpxvM8OFO1-200.webp 200w, https://ulfschneider.io/img/vpxvM8OFO1-675.webp 675w" sizes="100vw"> </figure> </figure> <figure> <img src="https://ulfschneider.io/img/BaswcMIr4G-200.webp" alt="" loading="lazy" decoding="async" width="1200" height="675" srcset="https://ulfschneider.io/img/BaswcMIr4G-200.webp 200w, https://ulfschneider.io/img/BaswcMIr4G-1200.webp 1200w" sizes="100vw"> <figcaption>The Weser river</figcaption> </figure> <figure> <figcaption>Arrival at the Mühlengasthof Landesbergen, my destination for the first day of the journey. I recommend the Mühlengasthof for a stay. The rooms are comfortable, the food is good, and the location is calm and friendly. I enjoy having a lively conversation with one of the two owners. During the breakfast of the next day I meet two other cyclists and we talk about bike riding, how the bike must conform to the rider and how the rider has to adapt to the demands of a multi-day bike journey.</figcaption> <figure class="md:split"> <img src="https://ulfschneider.io/img/Bv0TsjN-C7-200.webp" alt="" loading="lazy" decoding="async" width="1200" height="900" srcset="https://ulfschneider.io/img/Bv0TsjN-C7-200.webp 200w, https://ulfschneider.io/img/Bv0TsjN-C7-1200.webp 1200w" sizes="100vw"> <img src="https://ulfschneider.io/img/UOJw0SzcI9-200.webp" alt="" loading="lazy" decoding="async" width="1200" height="900" srcset="https://ulfschneider.io/img/UOJw0SzcI9-200.webp 200w, https://ulfschneider.io/img/UOJw0SzcI9-1200.webp 1200w" sizes="100vw"> </figure> </figure> <h2 id="day-2%2C-landesbergen-to-bad-bevensen" tabindex="-1">Day 2, Landesbergen to Bad Bevensen</h2> <p>The second day takes me eastward across long stretches of the Southern Heath, below of the Lüneburger Heath. I enjoy riding over the sandy soil through the rather remote landscape. Destination for the day is Bad Bevensen.</p> <figure> <img src="https://ulfschneider.io/img/G0QZ43jGUi-200.webp" alt="" loading="lazy" decoding="async" width="1200" height="675" srcset="https://ulfschneider.io/img/G0QZ43jGUi-200.webp 200w, https://ulfschneider.io/img/G0QZ43jGUi-1200.webp 1200w" sizes="100vw"> <figcaption>Crossing highway A7. I´m glad I´m not stuck in one of those cars.</figcaption> </figure> <figure> <img src="https://ulfschneider.io/img/G4YVHPT2jf-200.webp" alt="" loading="lazy" decoding="async" width="900" height="1200" srcset="https://ulfschneider.io/img/G4YVHPT2jf-200.webp 200w, https://ulfschneider.io/img/G4YVHPT2jf-900.webp 900w" sizes="100vw"> <figcaption>The sandy pathways of the Southern Heath</figcaption> </figure> <figure> <figcaption>Impressions</figcaption> <img src="https://ulfschneider.io/img/t84gGRVH2D-200.webp" alt="" loading="lazy" decoding="async" width="1200" height="900" srcset="https://ulfschneider.io/img/t84gGRVH2D-200.webp 200w, https://ulfschneider.io/img/t84gGRVH2D-1200.webp 1200w" sizes="100vw"> <img src="https://ulfschneider.io/img/siL8gqm_pq-200.webp" alt="" loading="lazy" decoding="async" width="1200" height="900" srcset="https://ulfschneider.io/img/siL8gqm_pq-200.webp 200w, https://ulfschneider.io/img/siL8gqm_pq-1200.webp 1200w" sizes="100vw"> <img src="https://ulfschneider.io/img/M6xh8W7L6D-200.webp" alt="" loading="lazy" decoding="async" width="1200" height="675" srcset="https://ulfschneider.io/img/M6xh8W7L6D-200.webp 200w, https://ulfschneider.io/img/M6xh8W7L6D-1200.webp 1200w" sizes="100vw"> </figure> <figure> <img src="https://ulfschneider.io/img/fGHd5JTKgz-200.webp" alt="" loading="lazy" decoding="async" width="1200" height="900" srcset="https://ulfschneider.io/img/fGHd5JTKgz-200.webp 200w, https://ulfschneider.io/img/fGHd5JTKgz-1200.webp 1200w" sizes="100vw"> <figcaption>The gate is intended for wildlife protection, and you are allowed to open it to follow your route. Do not forget to close it behind you.</figcaption> </figure> <figure> <figcaption>The area is so remote that it is (or has been) used as a military training ground</figcaption> <figure class="md:split"> <img src="https://ulfschneider.io/img/k8rauQA6Kn-200.webp" alt="" loading="lazy" decoding="async" width="900" height="1200" srcset="https://ulfschneider.io/img/k8rauQA6Kn-200.webp 200w, https://ulfschneider.io/img/k8rauQA6Kn-900.webp 900w" sizes="100vw"> <img src="https://ulfschneider.io/img/-tlDuOdJTP-200.webp" alt="" loading="lazy" decoding="async" width="900" height="1200" srcset="https://ulfschneider.io/img/-tlDuOdJTP-200.webp 200w, https://ulfschneider.io/img/-tlDuOdJTP-900.webp 900w" sizes="100vw"> </figure> </figure> <figure> <img src="https://ulfschneider.io/img/wj2vyVtiER-200.webp" alt="" loading="lazy" decoding="async" width="900" height="1200" srcset="https://ulfschneider.io/img/wj2vyVtiER-200.webp 200w, https://ulfschneider.io/img/wj2vyVtiER-900.webp 900w" sizes="100vw"> <figcaption>The fine dust of sand settles on everything – for the water bottles it means I always have to spit out the first sip.</figcaption> </figure> <figure class="md:split"> <figure> <img src="https://ulfschneider.io/img/gkj4KACEi5-200.webp" alt="" loading="lazy" decoding="async" width="1200" height="900" srcset="https://ulfschneider.io/img/gkj4KACEi5-200.webp 200w, https://ulfschneider.io/img/gkj4KACEi5-1200.webp 1200w" sizes="100vw"> <figcaption>One last break on the second day</figcaption> </figure> <figure> <img src="https://ulfschneider.io/img/gPgNmrSoPc-200.webp" alt="" loading="lazy" decoding="async" width="1200" height="900" srcset="https://ulfschneider.io/img/gPgNmrSoPc-200.webp 200w, https://ulfschneider.io/img/gPgNmrSoPc-1200.webp 1200w" sizes="100vw"> <figcaption>I even manage to escape Darth Vader</figcaption> </figure> </figure> <figure> <img src="https://ulfschneider.io/img/GSG9Kaac5b-200.webp" alt="" loading="lazy" decoding="async" width="1200" height="900" srcset="https://ulfschneider.io/img/GSG9Kaac5b-200.webp 200w, https://ulfschneider.io/img/GSG9Kaac5b-1200.webp 1200w" sizes="100vw"> <figcaption>My guesthouse for the night in Bad Bevensen is the <em>Pension Elfi</em>. The breakfast is good, but the bike has to stand overnight in the backyard. Unfortunately there is nothing solid to which I could fasten it with the lock I carried with me.</figcaption> </figure> <h2 id="day-3%2C-bad-bevensen-to-wismar" tabindex="-1">Day 3, Bad Bevensen to Wismar</h2> <p>The third day brings me north, through Naturpark Wendland, Dannenberg, Ludwigslust, then Schwerin, ending in Wismar. I feel the route is long and not varied, with the exception of the part from Schwerin to Wismar, which goes along Lake Schwerin and is beautiful.</p> <figure> <img src="https://ulfschneider.io/img/cXl_-HxBVH-200.webp" alt="" loading="lazy" decoding="async" width="900" height="1200" srcset="https://ulfschneider.io/img/cXl_-HxBVH-200.webp 200w, https://ulfschneider.io/img/cXl_-HxBVH-900.webp 900w" sizes="100vw"> <figcaption>Every day of the ride: Start with a breakfast and eat as much as possible.</figcaption> </figure> <figure> <figcaption>Traces of human life along the way. It moves me to see how people shape their surroundings by creating buildings that will change and decay over time. Whoever built the Schwerin Castle is not alive anymore. The people who created the bus shelter to make life easier for their fellow human beings, they had families, raised children, built houses themselves, and it could be they are no longer with us. Still, someone who will never know the builder, can make use of what that person created.</figcaption> <figure class="md:split"> <figure> <img src="https://ulfschneider.io/img/9h9WmGTK56-200.webp" alt="" loading="lazy" decoding="async" width="1200" height="900" srcset="https://ulfschneider.io/img/9h9WmGTK56-200.webp 200w, https://ulfschneider.io/img/9h9WmGTK56-1200.webp 1200w" sizes="100vw"> <figcaption>Bus shelter</figcaption> </figure> <figure> <img src="https://ulfschneider.io/img/wuJN2mlKV7-200.webp" alt="" loading="lazy" decoding="async" width="1200" height="900" srcset="https://ulfschneider.io/img/wuJN2mlKV7-200.webp 200w, https://ulfschneider.io/img/wuJN2mlKV7-1200.webp 1200w" sizes="100vw"> <figcaption>Abandoned house</figcaption> </figure> </figure> <figure> <img src="https://ulfschneider.io/img/i2rVFbu_Yu-200.webp" alt="" loading="lazy" decoding="async" width="1200" height="900" srcset="https://ulfschneider.io/img/i2rVFbu_Yu-200.webp 200w, https://ulfschneider.io/img/i2rVFbu_Yu-1200.webp 1200w" sizes="100vw"> <figcaption>Wall painting on a production facility</figcaption> </figure> <figure class="md:split"> <figure> <img src="https://ulfschneider.io/img/bVfRzTNZYU-200.webp" alt="" loading="lazy" decoding="async" width="1200" height="900" srcset="https://ulfschneider.io/img/bVfRzTNZYU-200.webp 200w, https://ulfschneider.io/img/bVfRzTNZYU-1200.webp 1200w" sizes="100vw"> <figcaption>Church in Ludwigslust. The imposing presence makes me feel uneasy. The words of Otl Aicher come to my mind, who said when buildings become so monumental that a door becomes a portal, it doesn´t serve the human, because a portal is difficult to use (it is hard to open and close). It makes the individual feel small and insignificant. It serves the ones in power.</figcaption> </figure> <figure> <img src="https://ulfschneider.io/img/Fy-7X2SVNP-200.webp" alt="" loading="lazy" decoding="async" width="1200" height="900" srcset="https://ulfschneider.io/img/Fy-7X2SVNP-200.webp 200w, https://ulfschneider.io/img/Fy-7X2SVNP-1200.webp 1200w" sizes="100vw"> <figcaption>House in Ludwigslust</figcaption> </figure> </figure> <figure> <img src="https://ulfschneider.io/img/8zaFKXdzUK-200.webp" alt="" loading="lazy" decoding="async" width="1200" height="900" srcset="https://ulfschneider.io/img/8zaFKXdzUK-200.webp 200w, https://ulfschneider.io/img/8zaFKXdzUK-1200.webp 1200w" sizes="100vw"> <figcaption>Industrial building in Ludwigslust</figcaption> </figure> </figure> <figure> <img src="https://ulfschneider.io/img/_BbUqiIuiY-200.webp" alt="" loading="lazy" decoding="async" width="900" height="1200" srcset="https://ulfschneider.io/img/_BbUqiIuiY-200.webp 200w, https://ulfschneider.io/img/_BbUqiIuiY-900.webp 900w" sizes="100vw"> <figcaption>Overpass above the railway tracks. The elevator to take me up was working fine, but the one on the other side was out of order. It´s not an unusual situation when you’re using the facilities of the Deutsche Bahn. </figcaption> </figure> <figure> <img src="https://ulfschneider.io/img/TRiqZ6ksYx-200.webp" alt="" loading="lazy" decoding="async" width="1200" height="900" srcset="https://ulfschneider.io/img/TRiqZ6ksYx-200.webp 200w, https://ulfschneider.io/img/TRiqZ6ksYx-1200.webp 1200w" sizes="100vw"> <figcaption>Schwerin Castle</figcaption> </figure> <figure> <img src="https://ulfschneider.io/img/lmlLn9QpjW-200.webp" alt="" loading="lazy" decoding="async" width="1200" height="900" srcset="https://ulfschneider.io/img/lmlLn9QpjW-200.webp 200w, https://ulfschneider.io/img/lmlLn9QpjW-1200.webp 1200w" sizes="100vw"> <figcaption>The people living in Schwerin are protesting for safer bicycle lanes</figcaption> </figure> <figure> <img src="https://ulfschneider.io/img/Ag7H3W0Ylg-200.webp" alt="" loading="lazy" decoding="async" width="1200" height="900" srcset="https://ulfschneider.io/img/Ag7H3W0Ylg-200.webp 200w, https://ulfschneider.io/img/Ag7H3W0Ylg-1200.webp 1200w" sizes="100vw"> <figcaption>Having a break at the Lake Schwerin</figcaption> </figure> <figure> <figcaption>Arriving in Wismar, I stay in Fründts hotel, which I can recommend. It´s well organized, they have a lockable bike shed and the breakfast is excellent.</figcaption> <figure class="md:split"> <figure> <img src="https://ulfschneider.io/img/trTpcN5FxV-200.webp" alt="" loading="lazy" decoding="async" width="900" height="1200" srcset="https://ulfschneider.io/img/trTpcN5FxV-200.webp 200w, https://ulfschneider.io/img/trTpcN5FxV-900.webp 900w" sizes="100vw"> <figcaption>The staircase inside of the hotel</figcaption> </figure> <figure> <img src="https://ulfschneider.io/img/L4OMuufV4i-200.webp" alt="" loading="lazy" decoding="async" width="1200" height="900" srcset="https://ulfschneider.io/img/L4OMuufV4i-200.webp 200w, https://ulfschneider.io/img/L4OMuufV4i-1200.webp 1200w" sizes="100vw"> <figcaption>The way to the bike shed at the backyard of the hotel</figcaption> </figure> </figure> </figure> <figure> <img src="https://ulfschneider.io/img/yOOo-ugvjp-200.webp" alt="" loading="lazy" decoding="async" width="900" height="1200" srcset="https://ulfschneider.io/img/yOOo-ugvjp-200.webp 200w, https://ulfschneider.io/img/yOOo-ugvjp-900.webp 900w" sizes="100vw"> <figcaption>I had dinner at the tavern <em>Nikolaiblick</em>, which has its name from the Nikolai church that is near by. I found it to be a good place for ending the day.</figcaption> </figure> <figure> <figcaption>The beautiful streets of Wismar. Try to ignore the cars. Though Wismar was bombed during world war 2 because of its Dornier aircraft factory and the naval infrastructure, large parts of the historic old town were spared from destruction. During the time prisoners of war and women and men from countries occupied by Germany were forced to perform armaments-related labor in the railcar and wagon factory and the Dornier aircraft works.</figcaption> <img src="https://ulfschneider.io/img/wmLYX7N4Ew-200.webp" alt="" loading="lazy" decoding="async" width="1200" height="900" srcset="https://ulfschneider.io/img/wmLYX7N4Ew-200.webp 200w, https://ulfschneider.io/img/wmLYX7N4Ew-1200.webp 1200w" sizes="100vw"> <img src="https://ulfschneider.io/img/IJzyfHKpmD-200.webp" alt="" loading="lazy" decoding="async" width="1200" height="900" srcset="https://ulfschneider.io/img/IJzyfHKpmD-200.webp 200w, https://ulfschneider.io/img/IJzyfHKpmD-1200.webp 1200w" sizes="100vw"> <img src="https://ulfschneider.io/img/cU6Tij9THB-200.webp" alt="" loading="lazy" decoding="async" width="1200" height="900" srcset="https://ulfschneider.io/img/cU6Tij9THB-200.webp 200w, https://ulfschneider.io/img/cU6Tij9THB-1200.webp 1200w" sizes="100vw"> </figure> <h2 id="day-4%2C-wismar-to-zingst" tabindex="-1">Day 4, Wismar to Zingst</h2> <p>The last day of this journey starts on a chilly but sunny morning in Wismar. From there I ride in eastern direction along the coast of the baltic sea, passing through Kühlungsborn, Heiligendamm, Warnemünde (where I make a quick ferry crossing), then riding further through the Ribnitzer Moor, and finally arriving in Zingst.</p> <figure> <img src="https://ulfschneider.io/img/-CM5kvlZuP-200.webp" alt="" loading="lazy" decoding="async" width="900" height="1200" srcset="https://ulfschneider.io/img/-CM5kvlZuP-200.webp 200w, https://ulfschneider.io/img/-CM5kvlZuP-900.webp 900w" sizes="100vw"> <figcaption>Because of the varying road surface quality it really makes sense to do these kind of trips with a gravel bike</figcaption> </figure> <figure> <img src="https://ulfschneider.io/img/3of3FYbMXP-200.webp" alt="" loading="lazy" decoding="async" width="1200" height="675" srcset="https://ulfschneider.io/img/3of3FYbMXP-200.webp 200w, https://ulfschneider.io/img/3of3FYbMXP-1200.webp 1200w" sizes="100vw"> <figcaption>Yellow makes happy</figcaption> </figure> <figure> <img src="https://ulfschneider.io/img/WJV6F2-ut7-200.webp" alt="" loading="lazy" decoding="async" width="1200" height="675" srcset="https://ulfschneider.io/img/WJV6F2-ut7-200.webp 200w, https://ulfschneider.io/img/WJV6F2-ut7-1200.webp 1200w" sizes="100vw"> <figcaption>Kühlungsborn</figcaption> </figure> <figure> <img src="https://ulfschneider.io/img/IDwVw1ZYHc-200.webp" alt="" loading="lazy" decoding="async" width="1200" height="900" srcset="https://ulfschneider.io/img/IDwVw1ZYHc-200.webp 200w, https://ulfschneider.io/img/IDwVw1ZYHc-1200.webp 1200w" sizes="100vw"> <figcaption>The coastline</figcaption> </figure> <figure class="md:split"> <figure> <img src="https://ulfschneider.io/img/GzllAec5hx-200.webp" alt="" loading="lazy" decoding="async" width="1200" height="900" srcset="https://ulfschneider.io/img/GzllAec5hx-200.webp 200w, https://ulfschneider.io/img/GzllAec5hx-1200.webp 1200w" sizes="100vw"> <figcaption>Warnemünde</figcaption> </figure> <figure> <img src="https://ulfschneider.io/img/_Hp8v8hHKA-200.webp" alt="" loading="lazy" decoding="async" width="900" height="1200" srcset="https://ulfschneider.io/img/_Hp8v8hHKA-200.webp 200w, https://ulfschneider.io/img/_Hp8v8hHKA-900.webp 900w" sizes="100vw"> <figcaption>The ferry. A cruise liner in the background.</figcaption> </figure> </figure> <figure> <figcaption>Near Ahrenshoop</figcaption> <img src="https://ulfschneider.io/img/4HOubxosgz-200.webp" alt="" loading="lazy" decoding="async" width="1200" height="900" srcset="https://ulfschneider.io/img/4HOubxosgz-200.webp 200w, https://ulfschneider.io/img/4HOubxosgz-1200.webp 1200w" sizes="100vw"> <img src="https://ulfschneider.io/img/j5vYc6jYZO-200.webp" alt="" loading="lazy" decoding="async" width="1200" height="675" srcset="https://ulfschneider.io/img/j5vYc6jYZO-200.webp 200w, https://ulfschneider.io/img/j5vYc6jYZO-1200.webp 1200w" sizes="100vw"> </figure> <figure> <img src="https://ulfschneider.io/img/1kWEJEOS7w-200.webp" alt="" loading="lazy" decoding="async" width="1200" height="900" srcset="https://ulfschneider.io/img/1kWEJEOS7w-200.webp 200w, https://ulfschneider.io/img/1kWEJEOS7w-1200.webp 1200w" sizes="100vw"> <figcaption>The baltic sea in Zingst. I´m sorry I didn´t take a photo of the actual arrival – I forgot it because my son Emil was already waiting there and welcoming me, asking about the journey and picking me up to show me the facilities. Therefore the journey ends with this image.</figcaption> </figure> <figure> <figcaption>P.S. June 14th: Actually there is a picture of my arrival. It´s together with Emil and my wife took it. ❤️</figcaption> <img src="https://ulfschneider.io/img/EtEn6l_sDp-200.webp" alt="" loading="lazy" decoding="async" width="900" height="1200" srcset="https://ulfschneider.io/img/EtEn6l_sDp-200.webp 200w, https://ulfschneider.io/img/EtEn6l_sDp-900.webp 900w" sizes="100vw"> </figure> <h2 id="equipment" tabindex="-1">Equipment</h2> <p>A list of selected pieces of equipment that worked pretty well during the ride.</p> <ul> <li><strong>Fairlight Secan 3.0:</strong> You might have spotted the bike in the pictures. It’s a steel frame gravel bike that I’ve been riding since the start of this year and I find it super efficient as well as practical. I´m a Fairlight fan for several years and this is my second Secan (with a 56 R frame). The bike is especially great for these kinds of rides because it’s sturdy and has mounting points to attach mud guards or packs. I ride a mechanical Shimano GRX 820 group – no charging required, flawless functionality, always prepared.</li> <li><strong>Specialized Phenom Expert saddle:</strong> A great saddle. No seating issues whatsoever. It´s claimed to be a mountain bike saddle, but you can as well ride it on gravel and road race bikes, it´s so versatile.</li> <li><strong>Ortlieb Fork-Packs:</strong> Whenever I have to pack something on this bike, it starts with the Ortlieb Fork-Packs. I like their minimal impact on the bike handling, which is because they are so deep on the front and because the storage capacity is limited to 5.8 l and 3 kg, each. They have a quick release mechanism for attaching them to the bike as well as detaching, which is overly practical when arriving somewhere to stay for the night. Because it´s Ortlieb you know they keep your items dry when it´s raining.</li> <li><strong>Tailfin Pannier Rack <span id="cookware-1" class="cooklang-cookware"></span> Tailfin Aero Pack Cargo:</strong> For the current trip I had to pack more than what fits into the Fork-Packs. I ended up to solve this with the most expensive solution, a Tailfin Pannier Rack with an Aero Pack Cargo. I can assure you, when you are willing to pay the money you get an excellent rear packing system that is designed through and through. The rack is light and strong (I used the aluminium version), and it holds the attached pack without swaying by any means. The rack stands on a special thru axle so that it does not use the bike frame for taking the load. It is attached with a quick release system but I did not use that during the journey. The rolltop pack, similar to the Ortlieb Fork-Packs, can be attached and detached to the rack with another quick release system, which I used every day when arriving and when starting to ride. The rolltop closing mechanism of the pack itself is flexible and can be used with gloves. The expandable outer pockets allow to carry small or compressible items you want to have in short reach. The closing-straps are replaceable, as well as some parts of the rack. I cannot say anything about the waterproofness, because it did not rain during my journey, but I expect the pack is fine in this area too. I found this system to be very practical.<figure> <figure><img src="https://ulfschneider.io/img/f05UsERk_L-200.webp" alt="" loading="lazy" decoding="async" width="900" height="1200" srcset="https://ulfschneider.io/img/f05UsERk_L-200.webp 200w, https://ulfschneider.io/img/f05UsERk_L-900.webp 900w" sizes="100vw"><figcaption>The Tailfin Rack stands on the thru axle and is attached with a quick release mechanism</figcaption></figure> <figure><img src="https://ulfschneider.io/img/9b6Z41z5TZ-200.webp" alt="" loading="lazy" decoding="async" width="900" height="1200" srcset="https://ulfschneider.io/img/9b6Z41z5TZ-200.webp 200w, https://ulfschneider.io/img/9b6Z41z5TZ-900.webp 900w" sizes="100vw"><figcaption>The rolltop closure of the Aero Pack Cargo at first doesn´t look fancy, but it works exceptionally well. You can adjust the volume of the pack and fixate gear under the crossing strap.</figcaption></figure> </figure> </li> <li><strong>aerycs GCX Terra 40 wheels:</strong> They are hand-built near Hamburg. I have them with the DT-Swiss 350 hubs, which I think are excellent and reliable work horse hubs. The wheels are well built and I found they ride lovely.</li> </ul> <h2 id="packing-list" tabindex="-1">Packing list</h2> <h3 id="route" tabindex="-1">Route</h3> <ul> <li>The routes for each day, downloaded to the Garmin Edge bike computer</li> <li>I did bookings for the first two nights in advance and the booking for the third night during the ride via booking.com.</li> </ul> <h3 id="packing-system" tabindex="-1">Packing system</h3> <ul> <li>Tailfin Pannier Rack</li> <li>Tailfin Aero Pack Cargo (18 l, plus 3 l pockets)</li> <li>Ortlieb Fork-Packs (5.8 l each)</li> <li>Foldable mini backpack for shopping food, if required. Did not use it.</li> </ul> <h3 id="charging" tabindex="-1">Charging</h3> <ul> <li>Garmin 530 Edge bike computer (Micro USB)</li> <li>Anker charging device with an USB-A and USB-C slot</li> <li>POLAR Plus Verity Sense heart rate sensor (USB-A adapter)</li> <li>Mobile phone (USB-C)</li> <li>Front light Lupine SL Mono (USB-C)</li> <li>Rear light Lupine Redlight (Micro USB)</li> <li>Charging cables: <ul> <li>USB-C to USB-C for the phone and the front light</li> <li>USB-A to Micro USB for Garmin Edge and rear light</li> <li>Polar USB-A loading adapter for the Verity Sense heart rate sensor</li> </ul> </li> </ul> <h3 id="bike-tech" tabindex="-1">Bike tech</h3> <ul> <li>2 spare inner tubes, butyl</li> <li>A spare shifting cable</li> <li>A pair of nitrile gloves</li> <li>Cable ties</li> <li>Chain oil (Oil of Rohloff)</li> <li>Chain lock</li> <li>2 sets of Shimano brakepads</li> <li>Tire puncture repair kit with valve core and valve core removal tool</li> <li>Tire levers</li> <li>Minitool (Topeak Mini 18+)</li> <li>Air pump (Topeak Racerocket)</li> <li>Bike lock with key (<a href="https://tex-lock.com/product/tex-lock-eyelet/">Texlock eyelet, size M</a>)</li> </ul> <h3 id="eating-and-drinking" tabindex="-1">Eating and drinking</h3> <ul> <li>2 steel water bottles (Klean Kanteen)</li> <li>Small pocket knife (Leatherman Skeletool KB)</li> <li>Mountain mug (Berghaferl)</li> <li>Spork (Göffel)</li> <li>Muesli bars</li> <li>Chocolate bars</li> </ul> <h3 id="clothing" tabindex="-1">Clothing</h3> <h4 id="on-the-bike" tabindex="-1">On the bike</h4> <ul> <li>Bike shoes</li> <li>Helmet</li> <li>2 bike shorts</li> <li>Legwarmers</li> <li>2 jerseys</li> <li>Armwarmers</li> <li>2 base layer shirts</li> <li>Gilet</li> <li>Neck gaiter</li> <li>Lightweight wool beanie</li> <li>2 pairs of wool socks</li> <li>Rain protection trousers</li> <li>Rain protection jacket</li> <li>Rain shoe covers</li> </ul> <h4 id="off-the-bike" tabindex="-1">Off the bike</h4> <ul> <li>2 pairs of underpants</li> <li>Long-sleeved wool shirt (can be used on the bike, if required)</li> <li>Short-sleeved wool shirt (can be used on the bike, if required)</li> <li>Trousers with belt</li> <li>Shorts (can also be used for swimming)</li> <li>Thin isolating jacket (can be used on the bike, if required)</li> <li>Minimalist shoes</li> </ul> <h3 id="personal" tabindex="-1">Personal</h3> <ul> <li>Tooth brush</li> <li><a href="https://denttabs.de/">Denttabs</a> instead of toothpaste</li> <li>Dental floss</li> <li>Glasses with case</li> <li>Sun glasses</li> <li>Shaving soap</li> <li>Razor blades</li> <li>Shaving razor</li> <li>A piece of soap (I use the same piece for my hair, the body, and the laundry) with <a href="https://ichbinpur.de/collections/shop/products/seifentasche-mit-reissverschluss">transport packaging</a></li> <li>Foldable washing bowl</li> <li>Clothespins</li> <li>Thin cord, e.g. to be used as clothesline</li> <li>3 packs of paper tissues</li> <li>Nail scissors, nail clipper</li> <li>Sun protection</li> <li>Emergency blanket</li> <li>Band-aid</li> <li>Tick removal card</li> </ul> <h3 id="id-and-money" tabindex="-1">ID and money</h3> <ul> <li>ID card</li> <li>Health insurance card</li> <li>Debit/credit card</li> <li>Cash</li> <li>House key, bike lock key</li> </ul>

Riding from Paderborn to Zingst appeared on ulfschneider.io.

Reply via email