Blob！

我最近是 Bizarro Devs 杂志的特邀编辑。这是一份很棒的新闻稿！ 立即注册！ 我在其中添加了一些关于 Blob 的链接。就像那些现在很流行的奇怪的、柔软的、随机形状一样。以下是这些链接。我总是喜欢发布我写的东西；)

Blob！Blob 很流行！Blob 是——咳咳——有点奇怪。我会整天沉醉于像 Matt Pamer 的年度报告封面 这样的设计中。我喜欢观看像这样的设计趋势如何在设计工具中体现，并以许多创造性和巧妙的不同方式应用。

我们可以从 <svg> 开始，使用几乎所有矢量设计应用程序中都存在的钢笔工具绘制我们自己的 Blob。不过，我是一个作弊者，可能会最终查看 Noun Project 寻找一些 Blob 示例并从那里窃取 SVG。但遗憾的是，那里没有太多，至少就 Blob 而言。

感谢上帝——（等等）—— THE BLOBMAKER

一旦我们有了 Blob，它就渴望四处移动。Monica Dinculescu 展示了如何在纯 CSS 中使用各种 CSS 变换来实现关键帧动画。

查看
仅 CSS 的变形 Blob，作者为 Monica Dinculescu (@notwaldorf)
在 CodePen 上。

或者我们可以使用像 KUTE.js 这样的 JavaScript 库来实现变形，就像 Heartbeat 在这里所做的那样。

查看
使用 KUTE.js 变形的形状，作者为 Heartbeat.UA (@hbagency)
在 CodePen 上。

像 Greensock 这样的库可以帮助 Blob 四处移动和变形。Greensock 甚至有一个插件可能是最强大的 变形工具。这个 Pen 使用了 Greensock，但还添加了一些原生 SVG 滤镜，使 Blob 令人满意地相互挤压。我们可以称之为 粘性效果：

查看
SVG Blob 遮罩，作者为 ATCOM (@Atcom)
在 CodePen 上。

到目前为止，我们只研究了 SVG，但不要排除 <canvas>！Liam Egan 使这个基于 Canvas 的 Blob 变得非常柔软。

查看
Blob，作者为 Liam Egan (@shubniggurath)
在 CodePen 上。

为什么不给派对增添一些物理效果，比如重力，让这些 Blob 以这种方式变得柔软！ Hakim El Hattab 在这里做到了这一点。

查看
Blob，作者为 Hakim El Hattab (@hakimel)
在 CodePen 上。

Blob 不必孤单！相互挤压的 Blob 就像液体一样。您可能对 Peeke Kuepers 的文章 模拟液体 Blob 感到兴趣。