一场因颜色混合模式而开启的视觉盛筵！

有点懒得把文章同步到公众号之外的平台，所以晚了半个月(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万播放量的「中国传统颜色可视化」视频还要赞，希望大家也会喜欢。

最后，本次实现的更多具体细节及代码开源，就等后续有空写文章再介绍啦，感兴趣的可以「点赞」、「在看」、「留言」等支持，大家越有热情，文章也会越早面世，毕竟没啥人感兴趣的话或许就一直鸽鸽鸽了，逃...