有點懶得把文章同步到公衆號之外的平臺，所以晚了半個月(3月29日發佈)，但還是再發上來吧。
建議大家先看看這個視頻(已上傳b站：「一場因顏色混合模式而開啓的視覺盛筵！」，一鍵三連，お願い)再閱讀本文，以便對最終制作的內容先有所瞭解。
這兩天古柳突然想實踐下“顏色混合模式”，看看開啓這個設置後可視化作品會有什麼效果，其實不太記得爲什麼突然有這個想法，可能是因爲在看一些顏色/色彩相關內容時，想起 Nadieh Bremer 爲客戶 Kantar Consulting 做的可視化作品 MotiveMix，因爲“光效”太好看，所以一直銘記於心。
可一直不知道這“光效”到底是什麼實現的，且用“光效”二字描述，也表明古柳此前總覺得大概有什麼沒接觸過的技術/實現方式才能產生類似發光的效果。
但沒想太多，先翻出這個作品重新理解下。遺憾的是海報圖片裏文字信息很模糊、看不清，即使眼睛瞪得像銅鈴加上連蒙帶猜也只能瞭解這個作品的很少信息，到底有哪些數據屬性、是如何映射呈現到作品裏的、能否找到原始數據等等都不甚清楚。
雖然滿是疑問，但這次古柳想到乾脆擺脫原始數據的束縛、也別管怎麼對數據進行處理和映射，直接構造些隨機的僞數據來試驗下心中的想法：會不會“光效”是由於開了“顏色混合模式”而產生的？
有這樣的想法其實是因爲一直知道“顏色混合模式/Color Blending”這個概念，但從來沒實踐過不知道效果如何，但古柳直覺認爲大概和所想的八九不離十，因而決定動手實踐下。
做法就是實現類似 MotiveMix 的徑向圖，擺上兩種顏色的、位置大小各異的圓圈，再開啓顏色混合模式即可。
首先是徑向圖，實現過很多次，但也忘了些細節，看看以前文章裏的思路與代碼，複製黏貼再改下就行。參見：財新網「星空彩繪諾貝爾獎」可視化作品復現 - 古柳 2020-09-30、關於推特30天地圖挑戰全部7.6k+圖片的顏色可視化 - 古柳 2020-12-12
接着構造僞數據，用 Math.random() 隨機數給各種屬性來一遍，沒啥複雜的地方。
最後是”顏色混合模式“的使用，臨時抱佛腳看看 Nadieh Bremer 這篇文章 「Beautiful color blending effects with SVGs & d3.js」，所謂“顏色混合模式”指的就是當元素有重疊時顏色應該如何顯示，默認 D3.js/SVG 裏後繪製的元素會遮擋覆蓋先繪製的元素，想要有不同的顯示效果，就可以設置”顏色混合模式“，不同參數有不同效果，可自行了解。
這次具體只需簡單設置三處地方即可：給所有圓圈設置 mix-blend-mode: screen 樣式、給圓圈的父元素 group 設置 isolation: isolate 樣式、以及設置整體背景爲黑色 background-color: #000 即可，由於後續會將 SVG 導出成圖片，所以設置 SVG 的背景色爲黑色，而非 body 等爲黑色，以免導出時失去效果。
/*設置 group 元素爲 isolate */
g.circleWrapper { isolation: isolate; }
/* 設置 SVG 元素的混合模式/blend mode，如 screen, multiply 等 */
circle { mix-blend-mode: screen; }
/* 設置背景爲黑色 */
svg { background-color: #000; }
最終實現效果和古柳預想的類似，也和 MotiveMix 效果很像，看來光效確實是這麼實現的，非常簡單，但視覺效果很棒。
原本到這裏可能就結束了，但正好這兩天古柳瞭解到 Ant Design 系統級色彩體系的相關內容。
Ant Design 系統級色彩體系同樣源於「自然」的設計價值觀。設計師通過對自然場景的抽象捕捉，結合螞蟻的技術基因，形成了特有的 12 色。進一步又通過大量的觀察，捕捉不同色彩在自然光下的變化規律，藉助美術中素描的思路，對 12 個顏色進行了衍生。
![]()
瞭解到這 12個主色，且尤其喜歡其中寓意自然、生機的 Lime / 青檸色(lime-6 #a0d911)，於是用青檸和其他顏色搭配又做了幾張圖，發現都很好看，尤其喜歡其中“紅龍果”配色的左上一圖。
接着小小改動代碼，進行動態呈現。
當然這樣隨機手動搭配過於抓瞎，爲了不遺漏更多絕妙搭配，並且考慮到既然都變成動態效果了，乾脆就順手做成方便錄製視頻的形式好了，於是古柳繼續進一步對12種顏色全部兩兩搭配的66組效果進行依次動態呈現，並且在每一組結束後將其導出成圖片，方便後續查看和分享給更多感興趣的人。(公衆號後臺回覆顏色混合模式即可領取)
並且最後再做個12種顏色、66組搭配的整體圖，用於放視頻開頭展示。
於是就是這個視頻「一場因顏色混合模式而開啓的視覺盛筵！」
就這樣從一開始突然想實踐下“顏色混合模式”，看看能不能復現出 MotiveMix 作品的類似光效，到利用 Ant Design 系統級色彩體系的12主色製作所有66組效果圖，並順帶製作了一期視頻，以方便更多人能直觀感受到古柳稱之爲“視覺盛筵”的這些作品的震撼效果，私心覺得比之前小火的23萬播放量的「中國傳統顏色可視化」視頻還要贊，希望大家也會喜歡。
最後，本次實現的更多具體細節及代碼開源，就等後續有空寫文章再介紹啦，感興趣的可以「點贊」、「在看」、「留言」等支持，大家越有熱情，文章也會越早面世，畢竟沒啥人感興趣的話或許就一直鴿鴿鴿了，逃...