nrw.social ist einer von vielen unabhängigen Mastodon-Servern, mit dem du dich im Fediverse beteiligen kannst.
Wir sind eine freundliche Mastodon Instanz aus Nordrhein-Westfalen. Ob NRW'ler oder NRW-Sympathifanten, jeder ist hier willkommen.

Serverstatistik:

2,8 Tsd.
aktive Profile

#svg

12 Beiträge11 Beteiligte2 Beiträge heute
Beecraftr*Beach Honker Summer Vibes SVG*<br> <br> Shop Now 80% OFF<br> <br> Download here: <a href="https://www.creativefabrica.com/product/beach-honker-summer-vibes-svg/" rel="nofollow noopener noreferrer" target="_blank">https://www.creativefabrica.com/product/beach-honker-summer-vibes-svg/</a><br> <br> <a href="https://pixelfed.social/discover/tags/summer?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#summer</a> <a href="https://pixelfed.social/discover/tags/beach?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#beach</a> <a href="https://pixelfed.social/discover/tags/duck?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#duck</a> <a href="https://pixelfed.social/discover/tags/surfing?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#surfing</a> <a href="https://pixelfed.social/discover/tags/decor?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#decor</a> <a href="https://pixelfed.social/discover/tags/illustration?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#illustration</a> <a href="https://pixelfed.social/discover/tags/vector?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#vector</a> <a href="https://pixelfed.social/discover/tags/clipart?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#clipart</a> <a href="https://pixelfed.social/discover/tags/svg?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#svg</a> <a href="https://pixelfed.social/discover/tags/svgdesign?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#svgdesign</a> <a href="https://pixelfed.social/discover/tags/diycraft?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#diycraft</a>
<p>Heute geht es um die Berechnung von Pie-Charts über <a href="https://social.tchncs.de/tags/SVG" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SVG</span></a>-Pfade. Dazu werden Winkelfunktionen benötigt. Uiii.</p><p>Zunächst per Hand / Taschenrechner den Algorithmus verstehen und dann via JS automatisieren. Eigentlich eine schöne praktische Sache (ich verwende aktuelle Statistiken zu Browsern und Betriebssystemen von statcounter.com).</p>
ITs History!World's first mass-market <a href="https://pixelfed.social/discover/tags/laptop?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#laptop</a> was the <a href="https://pixelfed.social/discover/tags/T1100?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#T1100</a> computer by <a href="https://pixelfed.social/discover/tags/Toshiba?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#Toshiba</a>. Introduced with a 4.77MHz <a href="https://pixelfed.social/discover/tags/CPU?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#CPU</a>, 512KB of <a href="https://pixelfed.social/discover/tags/RAM?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#RAM</a>, <a href="https://pixelfed.social/discover/tags/monochrome?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#monochrome</a> <a href="https://pixelfed.social/discover/tags/LCD?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#LCD</a> display, and battery capacity up to 7 hours, it changed the world of <a href="https://pixelfed.social/discover/tags/IBM?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#IBM</a> compatible portable computers. It even worked with <a href="https://pixelfed.social/discover/tags/MS?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#MS</a> <a href="https://pixelfed.social/discover/tags/Windows1?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#Windows1</a> in 640x200px <a href="https://pixelfed.social/discover/tags/CGA?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#CGA</a> <a href="https://pixelfed.social/discover/tags/graphics?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#graphics</a>, but only within a narrow view angle <a href="https://youtu.be/qk04sDF5SrM" rel="nofollow noopener noreferrer" target="_blank">https://youtu.be/qk04sDF5SrM</a><br> <br> Even without a hard disk this machine was very important, since the plus model was re-engineered in <a href="https://pixelfed.social/discover/tags/USSR?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#USSR</a> as Электроника <a href="https://pixelfed.social/discover/tags/МС1504?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#МС1504</a>. Unlike <a href="https://pixelfed.social/discover/tags/US?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#US</a>, users in <a href="https://pixelfed.social/discover/tags/Russia?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#Russia</a> didn't pay royalties, or used the internal 3.5" floppy drive to boot <a href="https://pixelfed.social/discover/tags/MS?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#MS</a>-DOS 2.11 <a href="https://youtu.be/_u5LwiP5Q4g" rel="nofollow noopener noreferrer" target="_blank">https://youtu.be/_u5LwiP5Q4g</a><br> <br> Our <a href="https://pixelfed.social/discover/tags/graphic?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#graphic</a> <a href="https://pixelfed.social/discover/tags/illustration?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#illustration</a> is a tribute to this <a href="https://pixelfed.social/discover/tags/IT?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#IT</a> <a href="https://pixelfed.social/discover/tags/milestone?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#milestone</a>, celebrating the 40th <a href="https://pixelfed.social/discover/tags/anniversary?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#anniversary</a> of this historic <a href="https://pixelfed.social/discover/tags/microcomputer?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#microcomputer</a> achievement in 1985. See it in comparison of <a href="https://pixelfed.social/discover/tags/ComputerChronicles?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#ComputerChronicles</a> to <a href="https://pixelfed.social/discover/tags/Tandy?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#Tandy</a> or <a href="https://pixelfed.social/discover/tags/Dynamac?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#Dynamac</a> <a href="https://pixelfed.social/discover/tags/laptops?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#laptops</a> two years later <a href="https://youtu.be/tPEMilDYpgY" rel="nofollow noopener noreferrer" target="_blank">https://youtu.be/tPEMilDYpgY</a><br> <br> The <a href="https://pixelfed.social/discover/tags/screenshot?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#screenshot</a> of this <a href="https://pixelfed.social/discover/tags/retrocomputer?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#retrocomputer</a> <a href="https://pixelfed.social/discover/tags/cgi?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#cgi</a> <a href="https://pixelfed.social/discover/tags/art?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#art</a> shows <a href="https://pixelfed.social/discover/tags/SVG?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#SVG</a> <a href="https://pixelfed.social/discover/tags/vector?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#vector</a> <a href="https://pixelfed.social/discover/tags/outlines?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#outlines</a> around the cursor in <a href="https://pixelfed.social/discover/tags/xRay?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#xRay</a> view-mode. Made with <a href="https://pixelfed.social/discover/tags/Inkscape?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#Inkscape</a> and <a href="https://pixelfed.social/discover/tags/FreeSoftware?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#FreeSoftware</a>
wakest<p>«<a href="https://social.wake.st/tags/SVG" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SVG</span></a> in essence is a language that describes images in text. It describes how something must be presented...So only at the final moment of presenting this description is calculated into pixels. Also it can flourish images into animations: movements along complicated paths, a poisoned apple fluently going from sickly purple to tempting red, or the girl that grows after drinking from the bottle saying "Drink me"» -<span class="h-card" translate="no"><a href="https://social.edu.nl/@steltenpower" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>steltenpower</span></a></span> in <a href="http://svgopen.steltenpower.com/livre_english.txt" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">http://</span><span class="ellipsis">svgopen.steltenpower.com/livre</span><span class="invisible">_english.txt</span></a></p>
Inautilo<p><a href="https://mastodon.social/tags/Development" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Development</span></a> <a href="https://mastodon.social/tags/Guides" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Guides</span></a><br>The HTML ‘canvas’ element · Why is ‘canvas’ actually necessary alongside SVG? <a href="https://ilo.im/163jyn" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">ilo.im/163jyn</span><span class="invisible"></span></a></p><p>_____<br><a href="https://mastodon.social/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>HTML</span></a> <a href="https://mastodon.social/tags/Canvas" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Canvas</span></a> <a href="https://mastodon.social/tags/SVG" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SVG</span></a> <a href="https://mastodon.social/tags/Content" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Content</span></a> <a href="https://mastodon.social/tags/Accessibility" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Accessibility</span></a> <a href="https://mastodon.social/tags/WebPerf" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebPerf</span></a> <a href="https://mastodon.social/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebDev</span></a> <a href="https://mastodon.social/tags/Frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Frontend</span></a> <a href="https://mastodon.social/tags/JavaScript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>JavaScript</span></a></p>
Alexandre B A Villares 🐍<p>Has anyone tried the dark arts of converting <a href="https://ciberlandia.pt/tags/SVG" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SVG</span></a> to <a href="https://ciberlandia.pt/tags/shapely" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>shapely</span></a> recently? :( </p><ul><li><a href="https://gis.stackexchange.com/questions/301605/how-to-create-shape-in-shapely-from-an-svg-path-element" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">gis.stackexchange.com/question</span><span class="invisible">s/301605/how-to-create-shape-in-shapely-from-an-svg-path-element</span></a></li><li><a href="https://gist.github.com/un1tz3r0/9f473e4de65787d336ca60681bc6fcbd" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">gist.github.com/un1tz3r0/9f473</span><span class="invisible">e4de65787d336ca60681bc6fcbd</span></a></li><li><a href="https://medium.com/@femion/3-ways-to-cut-svg-shapes-d24108aba4a3" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">medium.com/@femion/3-ways-to-c</span><span class="invisible">ut-svg-shapes-d24108aba4a3</span></a></li></ul><p><a href="https://ciberlandia.pt/tags/Python" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Python</span></a></p>
Beecraftr*Sunshine and Surf Honk SVG*<br> <br> Shop Now 80% OFF<br> <br> Download here: <a href="https://www.creativefabrica.com/product/sunshine-and-surf-honk-svg/" rel="nofollow noopener noreferrer" target="_blank">https://www.creativefabrica.com/product/sunshine-and-surf-honk-svg/</a><br> <br> <a href="https://pixelfed.social/discover/tags/summer?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#summer</a> <a href="https://pixelfed.social/discover/tags/beach?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#beach</a> <a href="https://pixelfed.social/discover/tags/duck?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#duck</a> <a href="https://pixelfed.social/discover/tags/surfing?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#surfing</a> <a href="https://pixelfed.social/discover/tags/decor?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#decor</a> <a href="https://pixelfed.social/discover/tags/illustration?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#illustration</a> <a href="https://pixelfed.social/discover/tags/vector?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#vector</a> <a href="https://pixelfed.social/discover/tags/clipart?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#clipart</a> <a href="https://pixelfed.social/discover/tags/svg?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#svg</a> <a href="https://pixelfed.social/discover/tags/svgdesign?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#svgdesign</a> <a href="https://pixelfed.social/discover/tags/diycraft?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#diycraft</a>
Ana Tudor 🐯<p>Haven't had it in me to do anything for the past week's <a href="https://mastodon.social/tags/CodePenChallenge" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CodePenChallenge</span></a>, so here's a demo from earlier this year that fits: <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</span></a> infinite scroll gallery <a href="https://codepen.io/thebabydino/pen/XJrYqGb" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/XJr</span><span class="invisible">YqGb</span></a></p><p>One of my most hearted demos ever &amp; my only one to get over 1000 ❤️ without being in the most hearted of previous year.</p><p><a href="https://mastodon.social/tags/SVG" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SVG</span></a> <a href="https://mastodon.social/tags/cssGrid" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cssGrid</span></a> <a href="https://mastodon.social/tags/scrollAnimation" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>scrollAnimation</span></a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>filter</span></a> <a href="https://mastodon.social/tags/svgFilter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>svgFilter</span></a> <a href="https://mastodon.social/tags/cssFilter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cssFilter</span></a> <a href="https://mastodon.social/tags/cssLayout" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cssLayout</span></a> <a href="https://mastodon.social/tags/3D" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>3D</span></a> <a href="https://mastodon.social/tags/cssTransforms" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cssTransforms</span></a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>code</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>frontend</span></a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>web</span></a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>dev</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webDevelopment</span></a></p>
Beecraftr*Too Silly to Sink Trio SVG*<br> <br> Shop Now 80% OFF<br> <br> Download here: <a href="https://www.creativefabrica.com/product/too-silly-to-sink-trio-svg/" rel="nofollow noopener noreferrer" target="_blank">https://www.creativefabrica.com/product/too-silly-to-sink-trio-svg/</a><br> <br> <a href="https://pixelfed.social/discover/tags/summer?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#summer</a> <a href="https://pixelfed.social/discover/tags/beach?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#beach</a> <a href="https://pixelfed.social/discover/tags/duck?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#duck</a> <a href="https://pixelfed.social/discover/tags/surfing?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#surfing</a> <a href="https://pixelfed.social/discover/tags/decor?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#decor</a> <a href="https://pixelfed.social/discover/tags/illustration?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#illustration</a> <a href="https://pixelfed.social/discover/tags/vector?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#vector</a> <a href="https://pixelfed.social/discover/tags/clipart?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#clipart</a> <a href="https://pixelfed.social/discover/tags/svg?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#svg</a> <a href="https://pixelfed.social/discover/tags/svgdesign?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#svgdesign</a> <a href="https://pixelfed.social/discover/tags/diycraft?src=hash" class="u-url hashtag" rel="nofollow noopener noreferrer" target="_blank">#diycraft</a>
Mary Holstege<p><a href="https://mastodon.social/tags/GenerativeArt" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>GenerativeArt</span></a> interlude</p><p>A little open venation</p><p><a href="https://mastodon.social/tags/XQuery" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>XQuery</span></a> <a href="https://mastodon.social/tags/SVG" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SVG</span></a> <a href="https://mastodon.social/tags/CreativeCoding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CreativeCoding</span></a></p>
Ana Tudor 🐯<p>Irregular shaped image with both convex &amp; concave roundings. Shape depends on other elements, how they scale/ wrap. Flexible layout depending on viewport.</p><p>Because someone asked how to<br><a href="https://www.reddit.com/r/css/comments/1k60u7w/comment/momcgkp/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://www.</span><span class="ellipsis">reddit.com/r/css/comments/1k60</span><span class="invisible">u7w/comment/momcgkp/</span></a></p><p>Live on <span class="h-card" translate="no"><a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>codepen</span></a></span> <a href="https://codepen.io/thebabydino/pen/LEExpVg" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/LEE</span><span class="invisible">xpVg</span></a></p><p><a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.social/tags/subgrid" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>subgrid</span></a> + <a href="https://mastodon.social/tags/SVG" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SVG</span></a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>filter</span></a> magic.</p><p><a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>code</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>frontend</span></a> <a href="https://mastodon.social/tags/svgFilter" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>svgFilter</span></a> <a href="https://mastodon.social/tags/layout" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>layout</span></a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>web</span></a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>dev</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webDevelopment</span></a> <a href="https://mastodon.social/tags/cssLayout" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cssLayout</span></a> <a href="https://mastodon.social/tags/cssGrid" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cssGrid</span></a></p>
Airports Bot<p>Stavanger Airport, Sola - Stavanger, Norway</p><p><a href="https://en.wikipedia.org/wiki/Stavanger_Airport,_Sola" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">en.wikipedia.org/wiki/Stavange</span><span class="invisible">r_Airport,_Sola</span></a><br><a href="https://www.openstreetmap.org/#map=13/58.876701/5.637780" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://www.</span><span class="ellipsis">openstreetmap.org/#map=13/58.8</span><span class="invisible">76701/5.637780</span></a></p><p><a href="https://mastodon.world/tags/ENZV" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>ENZV</span></a> <a href="https://mastodon.world/tags/SVG" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SVG</span></a> <a href="https://mastodon.world/tags/Stavanger" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Stavanger</span></a> <a href="https://mastodon.world/tags/Norway" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Norway</span></a> <a href="https://mastodon.world/tags/airport" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>airport</span></a> <a href="https://mastodon.world/tags/aviation" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>aviation</span></a> <a href="https://mastodon.world/tags/avgeeks" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>avgeeks</span></a> <a href="https://mastodon.world/tags/GIS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>GIS</span></a></p>
Martin Owens :inkscape:<p>Ugh, I'm grinding gears on these PDF details. Context fill! from hell's heart I stab at thee!</p><p>At least I found some solid bugs in Inkscape's SVG rendering too. So there's that!</p><p><a href="https://floss.social/tags/inkscape" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>inkscape</span></a> <a href="https://floss.social/tags/svg" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>svg</span></a> <a href="https://floss.social/tags/pdf" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>pdf</span></a></p>
Christopher Kirk-Nielsen<p>I wanted to make the backdrop of my website's menu (on mobile) be frosted glass, but with a rough texture. <a href="https://front-end.social/tags/SVG" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SVG</span></a> filter (with SVGFM: <a href="https://svgfm.chriskirknielsen.com/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">svgfm.chriskirknielsen.com/</span><span class="invisible"></span></a>, hashtag always be pluggin'), boom, done! Except Firefox is like "whoa not with `backdrop-filter`" (fine with `filter` though), and Safari still doesn't know what an inline SVG filter URL is. Boo. :( Time to file/find browser bugs…</p><p>Anyways, check out that texture — sure would love to ship it. 😢<br><a href="https://codepen.io/chriskirknielsen/pen/xbbbRKZ?editors=1100" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/chriskirknielsen/pe</span><span class="invisible">n/xbbbRKZ?editors=1100</span></a></p>
Christopher Kirk-Nielsen<p>While I'm not a huge fan of the verbosity of the syntax* here, this is very cool, and the basic demo is surprisingly impressive: <a href="https://webkit.org/blog/16794/the-css-shape-function/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">webkit.org/blog/16794/the-css-</span><span class="invisible">shape-function/</span></a></p><p>* Though to be fair: a) I don't remember all of <a href="https://front-end.social/tags/SVG" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SVG</span></a>'s commands, and b) this does feel rather expressive and <a href="https://front-end.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</span></a>-y (looking at you, `radial-gradient(circle at center in hsl longer hue, red, blue)`!)</p>
Rafael Perez<p>Prismic.io has published a collection of lists for many types of css/javascript/svg driven animations to enhance your web apps' user experience. Each example includes real-world use cases and clear code examples in the appropriate languages.</p><p>The collection includes:</p><p>1. Text Animations<br>2. Hover Effects<br>3. Button Animations<br>4. Background Effects, and<br>5. Image Effects</p><p>"CSS Animation Collection: 150+ Examples &amp; Code"</p><p><a href="https://prismic.io/guides/css-animations" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">prismic.io/guides/css-animatio</span><span class="invisible">ns</span></a></p><p><a href="https://mastodon.social/tags/programming" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>programming</span></a> <a href="https://mastodon.social/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>css</span></a> <a href="https://mastodon.social/tags/javascript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>javascript</span></a> <a href="https://mastodon.social/tags/svg" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>svg</span></a> <a href="https://mastodon.social/tags/html" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>html</span></a> <a href="https://mastodon.social/tags/webdev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webdev</span></a></p>
Loufock Holmes<p>Coloring Richard Kiel as Jaws in James Bond</p><p><a href="https://mycreepycoloringbook.tchouk-tchouk.com/coloring/richard-kiel-as-jaws-in-james-bond-1977-79/66/?AUTO_PLAY=1#DarkSeaGreen,DarkOliveGreen,Turquoise,Cyan,OliveDrab" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">mycreepycoloringbook.tchouk-tc</span><span class="invisible">houk.com/coloring/richard-kiel-as-jaws-in-james-bond-1977-79/66/?AUTO_PLAY=1#DarkSeaGreen,DarkOliveGreen,Turquoise,Cyan,OliveDrab</span></a></p><p><a href="https://mastodon.social/tags/coloring" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>coloring</span></a> <a href="https://mastodon.social/tags/classichorror" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>classichorror</span></a> <a href="https://mastodon.social/tags/svg" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>svg</span></a> <a href="https://mastodon.social/tags/javascript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>javascript</span></a> <a href="https://mastodon.social/tags/vector" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>vector</span></a> <a href="https://mastodon.social/tags/graphics" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>graphics</span></a> <a href="https://mastodon.social/tags/jamesbond" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>jamesbond</span></a> <a href="https://mastodon.social/tags/jaws" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>jaws</span></a> <a href="https://mastodon.social/tags/richardkiel" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>richardkiel</span></a></p>
Loufock Holmes<p>Coloring Richard Kiel as Jaws in James Bond</p><p><a href="https://mycreepycoloringbook.tchouk-tchouk.com/coloring/richard-kiel-as-jaws-in-james-bond/66/?AUTO_PLAY=1#Chocolate,DimGray,White,PaleTurquoise,AliceBlue" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">mycreepycoloringbook.tchouk-tc</span><span class="invisible">houk.com/coloring/richard-kiel-as-jaws-in-james-bond/66/?AUTO_PLAY=1#Chocolate,DimGray,White,PaleTurquoise,AliceBlue</span></a></p><p><a href="https://mastodon.social/tags/coloring" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>coloring</span></a> <a href="https://mastodon.social/tags/classichorror" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>classichorror</span></a> <a href="https://mastodon.social/tags/svg" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>svg</span></a> <a href="https://mastodon.social/tags/javascript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>javascript</span></a> <a href="https://mastodon.social/tags/vector" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>vector</span></a> <a href="https://mastodon.social/tags/graphics" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>graphics</span></a> <a href="https://mastodon.social/tags/jamesbond" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>jamesbond</span></a> <a href="https://mastodon.social/tags/jaws" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>jaws</span></a> <a href="https://mastodon.social/tags/richardkiel" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>richardkiel</span></a></p>
David Bisset<p>Interesting:</p><p>OmniSVG is the first family of "end-to-end multimodal SVG generators" capable of generating complex and detailed SVGs ("from simple icons to intricate anime characters"). </p><p><a href="https://github.com/OmniSVG/OmniSVG" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">github.com/OmniSVG/OmniSVG</span><span class="invisible"></span></a></p><p><a href="https://phpc.social/tags/opensource" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>opensource</span></a> <a href="https://phpc.social/tags/webdev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webdev</span></a> <a href="https://phpc.social/tags/svg" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>svg</span></a> <a href="https://phpc.social/tags/AI" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>AI</span></a></p>
Mary Holstege<p><a href="https://mastodon.social/tags/GenerativeArt" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>GenerativeArt</span></a> interlude</p><p>More fun with integer sequences</p><p>Triangular Truchet tiling with integer sequences driving things</p><p>Flip sequence determines whether hypoteneuse runs down from left or up; swap sequence determines whether the pattern lays out from left or right.<br>Colour sequences determine colour advancement horizontally and vertically.</p><p>Loops</p><p><a href="https://mastodon.social/tags/XQuery" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>XQuery</span></a> <a href="https://mastodon.social/tags/SVG" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SVG</span></a> <a href="https://mastodon.social/tags/CreativeCoding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CreativeCoding</span></a></p>