%20--%3E%3Cmetadata%20xmlns%3Ardf%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2F02%2F22-rdf-syntax-ns%23%22%20xmlns%3Axsi%3D%22http%3A%2F%2Fwww.w3.org%2F2001%2FXMLSchema-instance%22%20xmlns%3Adc%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Felements%2F1.1%2F%22%20xmlns%3Adcterms%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Fterms%2F%22%3E%3Crdf%3ARDF%3E%3Crdf%3ADescription%3E%3Cdc%3Atitle%3EShadows%3C%2Fdc%3Atitle%3E%3Cdc%3Acreator%3EDiceBear%3C%2Fdc%3Acreator%3E%3Cdc%3Asource%20xsi%3Atype%3D%22dcterms%3AURI%22%3Ehttps%3A%2F%2Fwww.dicebear.com%3C%2Fdc%3Asource%3E%3Cdcterms%3Alicense%20xsi%3Atype%3D%22dcterms%3AURI%22%3Ehttps%3A%2F%2Fcreativecommons.org%2Fpublicdomain%2Fzero%2F1.0%2F%3C%2Fdcterms%3Alicense%3E%3Cdc%3Arights%3E%E2%80%9CShadows%E2%80%9D%20(https%3A%2F%2Fwww.dicebear.com)%20by%20%E2%80%9CDiceBear%E2%80%9D%2C%20licensed%20under%20%E2%80%9CCC0%201.0%E2%80%9D%20(https%3A%2F%2Fcreativecommons.org%2Fpublicdomain%2Fzero%2F1.0%2F)%3C%2Fdc%3Arights%3E%3C%2Frdf%3ADescription%3E%3C%2Frdf%3ARDF%3E%3C%2Fmetadata%3E%3Cdefs%3E%3Cg%20id%3D%22shoulders-square-c34f80a1%22%3E%3Cpath%20d%3D%22M4%2050V17C4%209%2010%203%2018%203h42c8%200%2014%206%2014%2014v33Z%22%20fill%3D%22%237b373f%22%2F%3E%3C%2Fg%3E%3Cg%20id%3D%22tops-tuft-c34f80a1%22%3E%3Cpath%20d%3D%22M23%2019c2-12%2016-12%2019-5-6-2-10%202-9%206Z%22%20fill%3D%22%237b373f%22%2F%3E%3C%2Fg%3E%3Cg%20id%3D%22heads-tall-c34f80a1%22%3E%3Cuse%20transform%3D%22matrix(.89%200%200%20.89%205.95%20-.32)%20rotate(6%2C%2028%2C%2025)%22%20href%3D%22%23tops-tuft-c34f80a1%22%2F%3E%3Cellipse%20cx%3D%2231%22%20cy%3D%2237%22%20rx%3D%2217%22%20ry%3D%2223%22%20fill%3D%22%237b373f%22%2F%3E%3C%2Fg%3E%3CclipPath%20id%3D%22clip-c34f80a1%22%3E%3Crect%20width%3D%22100%22%20height%3D%22100%22%20rx%3D%220%22%20ry%3D%220%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Cg%20clip-path%3D%22url(%23clip-c34f80a1)%22%3E%3Crect%20width%3D%22100%22%20height%3D%22100%22%20fill%3D%22%23e8e4ed%22%2F%3E%3Cuse%20transform%3D%22translate(11%2051)%22%20href%3D%22%23shoulders-square-c34f80a1%22%2F%3E%3Cuse%20transform%3D%22translate(19%201)%22%20href%3D%22%23heads-tall-c34f80a1%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E)
Modern Times — single-element watch inspired by Picto Watches @codepen.io: codepen.io/stoumann/pen...
codepen.ioModern TimesSingle-element watch using typed attr(), masks and more. Picto watches inspired by pictowatches.com...
Mads Stoumann
Mads Stoumann
@stoumann.bsky.social
I'm a tech director, web developer, graphic designer, musician, blogger, comicbook-geek, LEGO-collector, food lover … as well as husband and father!
39 followers51 following78 posts
Oklch Hue Wheel for this weeks #codepenchallenge: codepen.io/stoumann/pen...
codepen.ioOKLCH Hue Wheel...
My entry for this week's #Codepen challenge — using progress(), sibling-count(), sibling-index() and more. Resize the browser to spread the fan: codepen.io/stoumann/pen...
codepen.ioColor Fan Deck...
Postcard from Lanzarote — a small tribute to the colors of César Manrique — with a bunch of shape() codepen.io/stoumann/pen...
codepen.ioPostcard from Lanzarote...
Number Scroller with Snap. Scroll through a timeline or numeric range with CSS snap points. codepen.io/stoumann/pen...
codepen.ioNumber Scroller w. Snap...
Harvest — shape() and corner-shape() for this weeks #codepenchallenge! codepen.io/stoumann/pen...
Mads Stoumann reposted
Mads Stoumann reposted
Creating a Maintenance Page using a Cloudflare Worker: dev.to/madsstoumann...
dev.toCreating a Maintenance Page using a Cloudflare WorkerLast night, an Azure outage took down several sites my company maintains. While the servers were...
Creating a Maintenance Page using a Cloudflare Worker: dev.to/madsstoumann...
dev.toCreating a Maintenance Page using a Cloudflare WorkerLast night, an Azure outage took down several sites my company maintains. While the servers were...
Updated my Security Headers on Cloudflare and wrote a short article about it: dev.to/madsstoumann...
dev.toAdding Security Headers on CloudflareFour years ago, I wrote a posts about Security Headers. In that post, I mentioned how to set up...
Circular Ranges — revisited, as a web component: codepen.io/stoumann/pen...
codepen.ioCircular Ranges...
All the various Weather Widgets combined: codepen.io/stoumann/pen... Article here: dev.to/madsstoumann...
codepen.ioWeather Widgets: Combined...
Weather Widgets — new article and a *lot* of demos: dev.to/madsstoumann...
dev.toWeather WidgetsEveryone talks about it — but no one does anything about it. What? The weather, of course! So, at...
I wrote an article about how to create responsive, accessible charts in CSS — using typed `attr()` and more! dev.to/madsstoumann...
dev.toCharts in CSSCharts have been done in CSS many times before — there's even a dedicated project. So why this post?...
Charts in CSS, using typed attr() — article coming soon: codepen.io/stoumann/pen...
codepen.ioCharts in CSS...
Had fun creating digital clocks in CSS — and wrote an article about it! For 12-hour systems I used `@counter-style` and modulo `mod()` in CSS for the first time. Examples include Japanese Hiragana and Arabic numerals. dev.to/madsstoumann...
dev.toDigital Clocks in CSSIn my previous post, I looked into clocks and watches, mimicking classic, analog watches. Now, how...
I'm launching a bunch of SVG Art Generators — here's the first: Das ist Bauhaus codepen.io/stoumann/pen...
codepen.ioDas ist Bauhaus...
Made a web component to easily embed a list of dev.to articles — or a specific article: dev.to/madsstoumann...
dev.toThe Unofficial Dev.To Embed Web ComponentThe other day, I re-discovered the dev.to API and found out that it can be used without an API key....
All work and no play ... Monday on a Thursday ... codepen.io/stoumann/pen...
Bing! You're Hypnotized — my entry for the spin'n'rotate challenge: codepen.io/stoumann/pen... via @CodePen
I'm working on an article about offset; anchor, distance, path, position and rotate. As an example, I chose to re-create a subway map. I wrote a script — but it didn't quite go according to plan 🤣 Now, I have this funky tool to create weird subway-maps: browser.style/art/subway-m...
Work-in-progress inspired by a post in a Math group on FB. Each tile has the same two arcs, but when you rotate the tiles 90, 180 and 270 degrees … browser.style/art/circle-g...
Wrote an article about a CSS Grid art-generator: dev.to/madsstoumann...
dev.toArt with CSS Grid and SVG filtersHave you ever explored the power of grid-auto-flow: dense? When combined with randomly generated...
A bit of art with CSS Grid and SVG filters: codepen.io/stoumann/pen...
codepen.ioCrayon CollageScroll down for controls: adjust amount of nodes, minmax, chroma etc....
What Tailscale and MUBIs logos inspired me to do: dev.to/madsstoumann...
dev.toCreating a Scroll GridThe other day I noticed the similarities between Tailscale and MUBI — not the companies, of course,...
Had some fun creating The Ray last night — an optical illusion, where a single ray of color changes, depending on it’s surrounding colors (light and dark). Make your own here: browser.style/art/the-ray/
My art-generator of the week is a circle of circles: browser.style/art/circle-o...
Made a new art generator, "Triangley", which is an homage to Bridget Riley's triangle art: browser.style/art/triangley/
Alcohol Tester. Did this for the local school, teaching kids about units of alcohol, driving etc. Surprised that the legal limit in the US is 4x that of Sweden 😳 codepen.io/stoumann/pen...
codepen.ioAlcohol TesterCan I Drive? Fill out which beverages you've been drinking and calculate your BAC — and if you're fit to drive. Did this for the local school, teachin...
I love Bauhaus posters, so I made an art generator, Das ist Bauhaus: browser.style/art/bauhaus/
You are up to date.