残体字符设计：INVETA

Jean

发布于 2023-02-10 19:54:27

2970

发布于 2023-02-10 19:54:27

文章被收录于专栏：Web行业观察

残体字符设计是logo设计中很常见的一种风格，它通过删减“多余”的笔画来实现残缺的字符，让读者通过“脑补”还原出原来的文字，以此独特的风格加深用户的产品印象。Github支持STL文本格式的3D模型预览，奈何STL格式非常简陋，难以表示复杂的形状和颜色，只能尽可能用最少的三角形来传达更多的信息，思来想去，最终我准备用12个三角形设计一套“INVETA”的残体logo，在 https://github.com/inveta 上可以看到。SVG的源代码如下：

<svg xmlns="http://www.w3.org/2000/svg" fill="white" viewBox="0 0 12.5 2" style="background-color:black;">
    <polygon points="1,2 0.5,0.5 0,2" />
    <polygon points="1,0 0,0 0.5,1.5" />
    <polygon points="3,0.7 2,0 2,2" />
    <polygon points="2.5,1.3 3.5,2 3.5,0" />
    <polygon points="5,1 5,2 6,0" />
    <polygon points="5,1 4,0 5,2" />
    <polygon points="11.5,1 12.5,2 11.5,0" />
    <polygon points="11.5,1 11.5,0 10.5,2" />
    <polygon points="9.8,2 9.5,0 9.2,2" />
    <polygon points="10.5,0 8.5,0 9.5,0.5" />
    <polygon points="8,0 6.5,0 7,1" />
    <polygon points="8,2 7,1 6.5,2" />
</svg>

这就很简单粗暴了，每个字母用2个三角形表示，使用<polygon>多边形来实现每一个三角形，其中viewBox限定了坐标系的展示范围。然后就要把它转换成STL三维模型的ASCII文本格式，这个格式虽然简陋啰嗦，但也一目了然，就是把每个三角形的每个顶点的XYZ和朝向都罗列出来，仅此而已，把上面的svg代码转换成stl非常简单，stl代码如下：

solid Exported from Blender-3.4.0
facet normal 0.000000 0.000000 1.000000
outer loop
vertex 1.000000 0.000000 0.000000
vertex 0.500000 1.500000 0.000000
vertex 0.000000 0.000000 0.000000
endloop
endfacet
facet normal 0.000000 0.000000 1.000000
outer loop
vertex 1.000000 2.000000 0.000000
vertex 0.000000 2.000000 0.000000
vertex 0.500000 0.500000 0.000000
endloop
endfacet
facet normal 0.000000 0.000000 1.000000
outer loop
vertex 3.000000 1.300000 0.000000
vertex 2.000000 2.000000 0.000000
vertex 2.000000 0.000000 0.000000
endloop
endfacet
facet normal 0.000000 0.000000 1.000000
outer loop
vertex 2.500000 0.700000 0.000000
vertex 3.500000 0.000000 0.000000
vertex 3.500000 2.000000 0.000000
endloop
endfacet
facet normal 0.000000 0.000000 1.000000
outer loop
vertex 5.000000 1.000000 0.000000
vertex 5.000000 0.000000 0.000000
vertex 6.000000 2.000000 0.000000
endloop
endfacet
facet normal 0.000000 0.000000 1.000000
outer loop
vertex 5.000000 1.000000 0.000000
vertex 4.000000 2.000000 0.000000
vertex 5.000000 0.000000 0.000000
endloop
endfacet
facet normal 0.000000 0.000000 1.000000
outer loop
vertex 11.500000 1.000000 0.000000
vertex 12.500000 0.000000 0.000000
vertex 11.500000 2.000000 0.000000
endloop
endfacet
facet normal 0.000000 0.000000 1.000000
outer loop
vertex 11.500000 1.000000 0.000000
vertex 11.500000 2.000000 0.000000
vertex 10.500000 0.000000 0.000000
endloop
endfacet
facet normal 0.000000 0.000000 1.000000
outer loop
vertex 9.800000 0.000000 0.000000
vertex 9.500000 2.000000 0.000000
vertex 9.200000 0.000000 0.000000
endloop
endfacet
facet normal 0.000000 0.000000 1.000000
outer loop
vertex 10.500000 2.000000 0.000000
vertex 8.500000 2.000000 0.000000
vertex 9.500000 1.500000 0.000000
endloop
endfacet
facet normal 0.000000 0.000000 1.000000
outer loop
vertex 8.000000 2.000000 0.000000
vertex 6.500000 2.000000 0.000000
vertex 7.000000 1.000000 0.000000
endloop
endfacet
facet normal 0.000000 0.000000 1.000000
outer loop
vertex 8.000000 0.000000 0.000000
vertex 7.000000 1.000000 0.000000
vertex 6.500000 0.000000 0.000000
endloop
endfacet
endsolid Exported from Blender-3.4.0

这堆STL代码可以直接写在README.md里，然后GitHub会自动渲染，虽然这种做法的性价比不高，每个三角形居然需要7行代码来表示，但出于尝鲜的目的，inveta的GitHub首页就给安排上了，具体的仓库在 https://github.com/inveta/.github 。下面我们来鉴赏一下这个logo的艺术水准。