重訪圖像地圖
➤ 懷舊與現代技術的結合
✤ https://css-tricks.com/revisiting-image-maps/
本文探討了在現代網頁設計中重新利用圖像地圖的可能性。作者為一位獲獎遊戲作曲家設計網站時，希望結合90年代的復古風格，同時兼顧現代網頁的可訪問性、效能和響應式設計。他回顧了圖像地圖的歷史，並分享瞭如何透過圖像地圖實現互動式導航，克服了圖像地圖在響應式設計上的挑戰，並最終提出了一種使用SVG路徑和錨點的替代方案，以實現更靈活和可維護的互動式圖像。
+ 這篇文章讓我回憶起以前的網頁設計，當時圖像地圖非常流行。現在重新看來，它仍然有其價值，但需要一些技巧才能在現代網頁中有效地使用。
+ 作者的解決方案很有創意，利用SVG路徑和錨點來克服圖像地圖的限制，這是一個值得學習的技巧。
#Web開發 #CSS #SVG #網頁設計

#GenerativeArt interlude

Nothing like a nice little mutation function to liven things up

Hmm, I have an SVG with a textPath to show some wiggly text and now I want to do some post-processing on it in Figma, but when I open it in Figma, the text layer contains no text?

Any suggestions? Can I convert a text/textPath to outline/path in the browser using JavaScript somehow? Could I calculate the x/y/rotation of each letter using JavaScript somehow and replace the textPath? Have I missed some obvious, easy alternative?

#GenerativeArt interlude

Textures

Dunno where I'm going with this, maybe nowhere

#Design #Launches
Hyvector · A powerful web-based vector graphics editor https://ilo.im/163s5u

_____
#SVG #VectorGraphics #Editor #Images #Browser #UiDesign #WebDesign #Development #WebDev #Frontend

A little helper/ explainer demo on @codepen: Polar (r, θ) ➞ Cartesian (x, y) coordinates
https://codepen.io/thebabydino/pen/KNxXZJ

Drag the sliders to see how the result changes.

#ReleaseSaturday — Just added 35 new color palettes (255 in total now) to https://thi.ng/color-palettes. All of these are based on images and dominant colors have been extracted via this tool below and then partially hand edited. The SVG swatches were generated via a custom tool (included in the project repo).

The package provides accessors for obtaining themes as CSS hex colors, RGB or LCH tuples. Themes can also be programmatically selected/filtered by a number of composable criteria (examples in the readme)...

https://demo.thi.ng/umbrella/dominant-colors/

#GenerativeArt interlude

Venation, meet contours

The Ant

Hyvector – A fast and modern SVG editor

https://www.hyvector.com

Spoiler alert : après dix ans de procrastination, j'ai repris le projet Hanafuda.

Ici, un extrait du mois de juillet (avec le trêfle du japon).

C'est fait en SVG avec Inkscape.

#art #svg #experiment messing with inkscape some

Savannah Goldfields ( #SVG ) has released " Georgetown Project Exploration Target Red Dam " on Tue 06 May at 09:35 AEST #government #Mining #Gold #Australia #Strategy
https://grafa.com/asset/savannah-goldfields-ltd-4509-svg.asx?utm_source=asxmktsensitive&utm_medium=mastodon&utm_campaign=svg.asx

New Kitten Release

• Breaking change: `kitten.icons` namespace is now flat (not alphabetically sharded). This should make it much nicer to author with. (The alphabetical sharding was an attempt to work around a size limitation with large objects when using automatic type inference in the TypeScript language server. Since I’m now generating a TypeScript type definition for the entire data structure, the limitation no longer applies and thus the sharding is no longer necessary.) https://kitten.small-web.org/reference/#icons

• The `tags` and `categories` hash tables on `kitten.icons` – which are included as authoring-time aids to help you find icons using metadata searches in your editor – are now marked as unenumerable properties so they no longer pollute the root icons namespace so you can, for example, safely iterate through all icons with a simple loop.

• I’ve started a change log even though Kitten is still pre-release so there is a better place to find them than looking through my Mastodon release notification posts :) https://codeberg.org/kitten/app/src/branch/main/CHANGELOG.md

Enjoy!

Had a go at making a plant pot icon for @pictogrammers Material Design icons (as it would be useful in @homeassistant ).

It was bit annoying to submit a .zip file that’s bigger than the .svg though! https://github.com/Templarian/MaterialDesign/issues/7244

Mickey Minnie Mouse Basketball SVG Cut File
#vectoranger #svg #svgcricut #cricut #cutfile #cameo #silhouette #silhouettecameo #basketball #disney
https://vectoranger.com/product/mickey-minnie-mouse-basketball-svg-cut-file/

#Development #Releases
Chrome 137 beta · CSS if() function, shape() function, and more https://ilo.im/163mp7

_____
#Chrome #Browser #API #HTTP #WebDev #Frontend #SVG #CSS #JavaScript #Backend

#Development #Techniques
Revisiting image maps · Sometimes you need to look back to move forward https://ilo.im/163lr6

_____
#Maps #ImageMaps #Accessibility #WebDev #Frontend #SVG #HTML #JavaScript