数学公式 svg
Cultural appropriation of design happens constantly, usually with little appreciation or understanding: witness the recent popularity of “tribal” tattoos, for example. Used solely because they “look cool”, such cultural borrowings ignore the thinking, significance, and development of design across deep time, a phenomenon I very much want to avoid as I explore the design culture of my native land. So as I teach the SVG for this design, with your indulgence, I also hope to share a small cultural history lesson.
设计对文化的侵占经常发生,通常很少有人欣赏或理解:例如,见证“部落”纹身的近来流行。 仅仅因为它们“看起来很酷”而使用它们,所以这种文化借用忽略了深层设计的思想,意义和发展,这是我探索祖国设计文化时非常想避免的一种现象。 因此,在我为该设计教授SVG的同时,我也希望与大家分享一堂小的文化史课程。
科威海 (Kowhaiwhai)
![alt](https://thenewcode.com/assets/images/koru.jpg)
When they beached on its shores during the last great surge of human migration into the Pacific, the Polynesians who discovered New Zealand / Aotearoa brought with them a design language that had developed over a thousand years. Centuries of cultural isolation further developed these designs into a distinctive form known as “kowhaiwhai”: a broad system that reflected the natural environment. These unique designs commonly used the shape of the koru, but also used the forms of hammerhead sharks, parrot beaks, the crescent moon and other natural elements.
在人类最后一次向太平洋迁移的大潮中,当他们在海岸上搁浅时,发现新西兰/奥特罗阿的波利尼西亚人带来了一千多年的设计语言。 几百年的文化隔离进一步将这些设计发展成一种独特的形式,称为“ kowhaiwhai”:反映自然环境的广泛系统。 这些独特的设计通常使用koru的形状,但也使用锤头鲨,鹦鹉嘴,新月形月亮和其他自然元素的形式。
Design forms became strongly associated with particular tribes; over time, the patterns moved from war canoe paddles to the rafters of meeting houses and beyond. Today there are many variations on the design pattern - from the tail of New Zealand’s national airline to one of the new proposed flags for the country - to the point at which “Kowhaiwhai” is used as a general term for the design.
设计形式与特定部落紧密相关。 随着时间的流逝,图案从战争独木舟桨移到会议室的after子上,甚至更多。 如今,设计模式有很多变化-从新西兰国家航空公司的尾巴到该国新提议的标志之一-直至使用“ Kowhaiwhai”作为设计的总称。
![](https://i-blog.csdnimg.cn/blog_migrate/ae6823ad4b96234d4230dab838845cbe.png)
SVG (The SVG)
The SVG for each design echoes the approach I had for the ancient Greek geometric friezes of the previous article:
每种设计的SVG都与我对上一篇文章的古希腊几何饰条所采用的方法相呼应:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 65.6 29.4">
<style type="text/css">
svg { background: #000; }
</style>
<path fill="#EF3633" d="M0,4.7v1.6c0,0,11.3-0.7,15.8,9.8c9.3,5.7,10.6,6.8,15.8,6.8s12.1-4.2,21.5-13.6c5.7-2.6,12.4-3.1,12.4-3.1 V4.7L0,4.7z"/>
<path fill="#FFF" d="M67.6,4.7,65,4.7c-13.8,0-26,14.8-26,14.8c-2.5-3.1-3.2-9.9,3-11.7
c-3.9,2.9-0.1,5.5,1.3,5.3c4.9,0.1,5.3-7.9-2.2-7.9H41c-5.2,0-7.2,5.6-7.2,9c0,1.4,0.6,4.6,2.2,7c-1.3,0.4-2.9,0.6-4.9,0.5
c-9.1-0.3-17.6-10-21.3-13.9c9.6-0.6,10.1,2.2,11.7,3.9c-1.6,0.2-2.2,1.1-2.2,2.5c0,1.6,1,2.6,3.2,2.6c3,0,3-3.1,3-3.1
c0-0.1,0-0.2,0-0.3C25.3,5,13.4,4.7,13.4,4.7c-4.1,0-7.7,0.8-7.7,0.8C4.6,5,2.6,4.7,0,4.7c-13.8,0-26,14.8-26,14.8
c-2.5-3.1-3.2-9.9,3-11.7c-3.9,2.9-0.1,5.5,1.3,5.3c4.9,0.1,5.3-7.9-2.2-7.9H-24c-5.2,0-7.2,5.6-7.2,9c0,1.7,1,6.6,3.9,8.7
c4.3,3.1,19.8,3.9,19.8-8l0-0.3c0,0-0.5-2.6-2.9-2.6c-2.4,0-3.2,1.3-3.2,2.8c0,1.5,1.8,2.8,2.6,2.8c0.8,0-4.3,5.9-12,3.9
C-17.6,16-8.1,5.4,2.9,8c-5.1,9,0.9,15.9,5.7,15.9s6.1-1.9,6.1-3.9s-2.2-4-3.7-4s-2.9,1.1-2.9,2.3s0.1,2,1.3,2.8
c-3.4-0.3-4.9-3.9-4.9-5.6s-0.4-4,1.9-6.4c2.6,3.2,12.3,11.5,17.1,13.6c4.7,2.1,11.6,2,14.9,0.5c5,2.8,19.2,3,19.2-8.4l0-0.3
c0,0-0.5-2.6-2.9-2.6c-2.4,0-3.2,1.3-3.2,2.8c0,1.5,1.8,2.8,2.6,2.8c0.8,0-4.3,5.9-12,3.9C47.4,16,56.9,5.4,67.9,8"/>
<line stroke="#FFF" stroke-width="2" x1="0" y1="3.7" x2="65.8" y2="3.7"/>
<line stroke="#FFF" stroke-width="2" x1="0" y1="25.5" x2="65.8" y2="25.5"/>
</svg>
The lines at the top and bottom are the white border; the black fill on the SVG element (an easy and quick way to set a background color on a SVG) fills in the remainder.
顶部和底部的线是白色边框; SVG元素上的黑色填充(一种在SVG上设置背景颜色的简便方法)将填充其余部分。
The “swirl” design is slightly more complex:
“漩涡”设计稍微复杂一些:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64.7 46.3" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="bottom-swirl">
<path fill="#9D553C" d="M-6.9,46.9C-2.6,42.4,5,30.7,10.8,18.7S28,0,35.8,0s18.8,5.7,18.8,17.5s-5.3,17.2-11.7,17.2
S31.1,32,31.1,24.3c0,0,0.6-3.2,1.8-5c1.2-1.8,2.2-1.6,3.1-1c0.9,0.6,1,2.1,0,3.2s-2.4,6.2,3.2,8.8c4.2,2,7.9-0.3,9.2-2.2
c2.1-2.9,5.7-12.5-3.5-20.3S25.8,7.5,23.3,9.3s-9.5,12.9-11.8,18S4,40.8,0.8,44.8s-8,1.8-8,1.8"/>
<path d="M6.5,46.3c3.8-4.5,8.8-12.3,10.6-16.7c1.2,5,5.7,12.4,9.3,16.7c-2.9,0-6.2,0-6.2,0s-3.8-4.4-4.8-6.1 c-0.8,1.7-3.2,5.5-3.5,5.9C11.6,46.6,6.5,46.3,6.5,46.3z"/>
</g>
<g id="upper-swirl">
<path d="M42.1,23.2c2-0.6,1.6-7.3-3-9s-9.9,1.2-11.4,3.5c-2.1,3.2-3,10,0,15.2c1.8,3.2,7.2,7.4,13.1,7.3s11.1-2.9,13.8-6
s4.6-10,4.6-12.9S56.3,8.1,47.2,0c2.5,0,2.8,0,5.8,0c6,5.6,9,13.2,10.8,17.1c1.8-4,7.8-11.9,13-17.1c2.2,0,5.9,0,6.9,0
c-6.1,5.6-10.6,11.9-12.9,15.8S65.9,26,62.1,32.2c-3.9,6.3-8.2,12.9-19.2,12.9S28.6,41.9,25.2,37s-5.2-11.9-2.4-18.4
s10.1-8.5,14.1-8.5s8.9,4.4,9.5,7.8s1,4.4-0.6,6.6s-2,2.8-4.5,2S38.9,24.1,42.1,23.2z"/>
<path d="M57.1,0c2.6,2.4,5.5,6.4,6.9,8.8c2.2-2.9,5.4-7.2,7-8.8c-2.4,0-4.6,0-4.6,0s-1.1,2-1.6,2.9C63.4,1.5,62.3,0,62.3,0H57.1z" />
</g>
<use xlink:href="#upper-swirl" transform="translate(-64.8)" />
<use xlink:href="#bottom-swirl" transform="translate(64.8)" />
</svg>
To give the “swirls” a certain hand-drawn roughness, they are not made as single-line paths, but as doubled-back shapes. The groups are duplicated and transformed with <use>
to complete the tiling of the design. (Giving translate
a single value means “translate along the X axis”).
为了使“漩涡”具有一定的手绘粗糙度,它们并不是制成单线路径,而是制成了双折形状。 复制组并使用<use>
进行转换以完成设计的平铺。 (给一个translate
值表示“沿X轴平移”)。
CSS (The CSS)
Both are saved as SVG files. To apply them to an element (a <div>
, for this example) I used CSS:
两者都保存为SVG文件。 要将它们应用于元素(在本例中为<div>
),我使用了CSS:
div {
background-repeat: repeat-x;
background-size: contain;
background-image: url(koru.svg);
}
Remember that the element needs to have some height in order to see a background image, either gained from its content or an explicit height
value; further examples can be seen on the associated CodePen.
请记住,元素需要具有一定的高度才能看到背景图像,该背景图像可以从其内容中获得,也可以通过明确的height
值获得; 可以在关联的CodePen上看到更多示例。
民族数学 (Ethnomathematics)
Both of these designs are good examples of ethnomathematics - fully-fledged expressions of mathematics in cultures without a traditional written language. Other examples can be found in Ron Eglash’s study of fractals in African designs.
这两种设计都是民族数学的典范-在没有传统书面语言的文化中,数学的完整表达。 在Ron Eglash的非洲设计中的分形研究中可以找到其他例子。
In the next article I’ll be moving back to the other side of the world, exploring Islamic geometric designs in SVG.
在下一篇文章中,我将回到世界的另一端,探索SVG中的伊斯兰几何设计。
翻译自: https://thenewcode.com/12/World-Ethnomathematics-Maori-Designs-in-SVG
数学公式 svg