我们经常看到代码被用来创造高科技的设计元素。这是有道理的，因为最新的CSS/JavaScript技术和未来主义的愿景之间存在着自然的关联。但是，如果我们想创造一些更传统的、手绘的外观呢？
事实证明，在结合代码和手绘元素时，你可以完成一些相当惊人的事情。例如，你可以使用SVG动画来使元素看起来是在实时 "绘制"。或者你可以在更现代的东西上添加一抹素描艺术。天空是无限的。
今天，我们将向你展示一些例子，说明如何通过代码增强手绘元素（真实的或模拟的）。请欣赏!
Szenia Zadvornykh的"人群观察 "作品
看这个动画让人想起了坐在拥挤的城市中间的长椅上的感觉。各种古怪的人物以健康的步伐走动。JavaScript的使用将这组插图变成了一件动人的艺术作品。
参见Szenia Zadvornykh的《笔式人群模拟器》。
丹尼尔的杰出流场
流域是一种生成性的、基于网格的艺术，可以进行一些惊人的创作。高度精细的作品，看起来就像有人花了几个小时手工绘制每一笔。这个片段有一个控制面板，可以让你调整背景颜色、速度等。
查看丹尼尔的《笔流场图
萨拉-德拉斯纳的并非一无是处的草图
这是一幅有趣的动画画，用日常物品拼出 "无用 "一词。这有点名不副实，因为这个片段是一个很好的例子，说明GSAP库可以用来增强艺术作品。
见《笔向无用的网络致敬》 作者：Sarah Drasner
黑板菜单by Josetxu
如果你有一个喜欢的咖啡店或咖啡厅，你有可能见证过黑板菜单的休闲优雅。有时有点乱，但总是充满了好东西。这个片段给你的屏幕带来了类似的魅力，并配有手绘的字体和时髦的边框。
查看Josetxu的钢笔咖啡馆菜单布局
写出你的名字的风格Craig Roblewsky
手写文本动画是在设计中增加个性的更流行的使用案例之一。这个工具通过增加一个手的图标（可以关闭），以及一些设置来调整，使它变得更加有趣。
请看Craig Roblewsky的《用DrawSVG(GSAP3)做笔的动画手写》。
一个移动的壁画by ilithya
这个虚拟壁画就像现代的《黄色潜水艇》动画片。鲜艳的色彩和柔和的动画，它绝对是一个吸引人的东西。更令人印象深刻的是，它是用纯CSS构建的。
请看ilithya为JSConf EU 2019设计的钢笔多屏幕壁画
Sarah Frisk的手绘404
正如这个片段所证明的，在你的404页面上找点乐子是没有错的。一个愚蠢的外星人角色是用蜡笔画的。从那里，它的特点是一个不稳定的CSS动画，带来一点自制的氛围。
看笔404:未找到玩家作者：Sarah Frisk
杰玛-斯蒂尔斯的"自己画 "作品
没有什么比Etch a Sketch更能体现 "手绘 "了。掌握这个经典玩具的非正统旋钮，你就能画出令人难以置信的东西。在这里，一个在线版本通过使用键盘的方向键来工作。哦，你会点击 "清除 "按钮，而不是摇晃着重新开始。即使你不是一个伟大的艺术家，你也应该能够创造一些有趣的方块字。
请看Gemma Stiles的《钢笔蚀刻画》🖌。
两种不同的艺术形式走到一起
无论你是喜欢绘画、编码，还是两者都喜欢--你都是一个艺术家。毕竟，每一种都能让你以令人兴奋的方式表达你的创造力。
而且，尽管这两种艺术形式需要极大的不同技能，但它们却能很好地结合起来。上面的片段证明，代码可以为手绘元素带来新的维度。运动、互动性和其他特殊效果都能增强体验。
想更深入地挖掘手绘元素和代码的交叉点吗？请查看我们的CodePen系列，了解更多。
