SVG 및 CSS로 현실적인 구름을 그리는 것

SVG 및 CSS는 현실적인 클라우드 효과를 만듭니다

그리스 신화에서 Zeus는 클라우드 요정 Nefere를 만들었습니다. 다른 그리스 신화와 마찬가지로이 이야기는 매우 기괴합니다. 짧고 적합한 버전은 다음과 같습니다.

Legend에 따르면, Neferele은 그의 아름다운 아내의 이미지로 Zeus에 의해 만들어졌습니다. 필사자가 Nefere를 만나 그녀와 사랑에 빠졌습니다. 그들은 결국,이 구름이 반 남자와 반 남성 센타우 아기를 낳았다는 사실에 놀랍습니다.

아주 이상합니까? 나는 개인적으로 이해할 수 없습니다. 다행히도 브라우저에서 구름을 만드는 과정은 훨씬 간단하고 심각합니다.

최근에 개발자 Yuan Chuan이 코드에 의해 생성 된 현실적인 클라우드 효과를 구현했다는 것을 알았습니다. 저에게는 브라우저에서 구현 된이 효과는 한때 신화였습니다.

이 샘플 코드를 탐색하면 사용하여 상상할 수 있습니다.<filter></filter> CSS box-shadow (2 개의 SVG 필터 포함)는 설득력있는 단일 클라우드 효과를 달성 할 수 있습니다.

우리가 원하는 현실적인 효과는 feTurbulence 와 feDisplacementMap 의 영리한 조합을 통해 달성됩니다. 이 SVG 필터는 강력하고 복잡하며 매우 흥미로운 기능을 제공합니다 (오스카상을 수상한 알고리즘 포함). 그러나 근본적인 복잡성은 어려울 수 있습니다.

SVG 필터의 물리학은이 기사의 범위를 벗어나지 만 MDN 및 W3.org에는 많은 문서가 있습니다. feTurbulence 및 feDisplacementMap 에 대한 매우 유용한 페이지는 무료로 제공됩니다 (그리고이 멋진 책의 장으로).

이 기사에서는이 SVG 필터를 사용하여 놀라운 결과를 얻는 방법을 배우는 데 중점을 둘 것입니다. 예술가들이 놀라운 풍경을 만들기 위해 안료의 분자 구조를 이해할 필요가없는 것처럼, 우리는 장면 뒤의 알고리즘이 어떻게 작동하는지 더 깊이 살펴볼 필요가 없습니다.

대신, 브라우저에 설득력있는 구름을 그리는 데 중요한 여러 SVG 속성을 주시해 봅시다. 이러한 속성을 사용 하여이 강력한 필터를 쉽게 사용하고 프로젝트에서 정확하게 사용자 정의하는 방법을 배울 수 있습니다.

기본부터 시작하십시오

CSS box-shadow 속성에주의를 기울일 가치가있는 5 가지 값이 있습니다.

<code>box-shadow:<offsetx><offsety><blurradius><spreadradius><color> ;</color></spreadradius></blurradius></offsety></offsetx></code>

그림자 자체가 무대에서 캐릭터가되도록 이러한 값을 올리십시오 (아마도 현명한 개발자가 사용하는 것보다 높습니다).

<code>#cloud-square { background: turquoise; box-shadow: 200px 200px 50px 0px #000; width: 180px; height: 180px; } #cloud-circle { background: coral; border-radius: 50%; box-shadow: 200px 200px 50px 0px #000; width: 180px; height: 180px; }</code>

Shadow Dramas를 연주하거나 본 적이 있습니까?

그림자를 바꾸기 위해 손으로 모양을 바꾸는 것과 마찬가지로 HTML의 "소스 모양"을 이동하여 변형하여 브라우저에서 렌더링 된 그림자의 모양을 변경하고 변경할 수 있습니다. box-shadow 원래 크기를 복사하고 border-radius 에서 "변환"기능. SVG 필터는 요소와 그 그림자에 동시에 적용됩니다.

<code><svg height="0" width="0"><filter><feturbulence basefrequency=".01" numoctaves="10" type="fractalNoise"></feturbulence><fedisplacementmap in="SourceGraphic" scale="10"></fedisplacementmap></filter></svg></code>

이것은 현재 SVG의 마크 업입니다. 비주얼을 정의하지 않았기 때문에 렌더링하지 않습니다 (폭과 높이는 말할 것도 없습니다). SourceGraphic 목적<div> ). 우리의 출처<code><div> 그림자는 필터에 의해 독립적으로 왜곡됩니다. ID를 사용하여 HTML 요소 ( <code>#cloud-circle )를 SVG 필터에 연결하는 필요한 CSS 규칙을 추가합니다.

<code>#cloud-circle { filter: url(#filter); box-shadow: 200px 200px 50px 0px #fff; }</code>

바라보다!

자, SVG 필터를 추가하는 것은 매우 눈에 띄지 않습니다.

괜찮아요! 우리는 방금 표면에 닿았 고 볼 좋은 것들이 많이있었습니다.

실험 feDisplacementMap scale 속성

이 속성에 대해 비과학 실험을 수행하면 극적인 효과가 발생할 수 있습니다. 현재, 모든 값을 feTurbulence 하지 않도록하겠습니다. DisplacementMap 의 scale 속성을 조정하십시오.

scale 값이 증가함에 따라 (30 단위) 소스<div> 왜곡이 발생하고 하늘의 임의의 구름 형태를 반영하기 위해 그림자가 시전됩니다.<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;code&gt;&lt;fedisplacementmap in=&quot;SourceGraphic&quot; scale=&quot;180&quot;&gt;&lt;/fedisplacementmap&gt;&lt;/code&gt;</pre><div class="contentsignin">로그인 후 복사</div></div> <p> 좋아, 우리는 약간의 진전을 이루었다! 더 설득력있는 클라우드 효과를 만들어 향상시키기 위해 색상을 조금 바꾸겠습니다.</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> &lt;code&gt;body { background: linear-gradient(165deg, #527785 0%, #7FB4C7 100%); } #cloud-circle { width: 180px; height: 180px; background: #000; border-radius: 50%; filter: url(#filter); box-shadow: 200px 200px 50px 0px #fff; }&lt;/code&gt;</pre><div class="contentsignin">로그인 후 복사</div></div> <p> 이제 우리는 현실적인 클라우드 효과에 더 가깝습니다!</p> <h3 id="code-box-shadow-code-의-code-blur-code-값을-수정하십시오"> <code>box-shadow 의 blur 값을 수정하십시오

다음 일련의 이미지는 box-shadow 에 대한 blur 값의 영향을 보여줍니다. 여기서는 blur 값이 10 픽셀 단위로 증가합니다.

구름이 적운 같은 효과를 주려면 소스를 약간 넓힐 수 있습니다.<div> .<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> &lt;code&gt;#cloud-circle { width: 500px; height: 275px; background: #000; border-radius: 50%; filter: url(#filter); box-shadow: 200px 200px 60px 0px #fff; }&lt;/code&gt;</pre><div class="contentsignin">로그인 후 복사</div></div> <p> 등! 우리는 소스 요소를 넓히고 이제 우리가 구름이라고 부르는 흰색 그림자를 차단합니다. 소스 이미지에 의해 구름이 가려지지 않도록 그림자를 더 먼 거리로 "다시 캐스트"합시다. (그림자 드라마의 시야를 차단하지 않도록 벽에서 손을 제거하는 것을 상상해보십시오.)</p> <p> 일부 CSS 포지셔닝으로 쉽게 달성 할 수 있습니다.<code><div> 클라우드의 부모 요소이며 기본적으로 정적으로 위치합니다. 절대 포지셔닝을 사용하여 소스를 전송합시다<code><div> "당겨"문서 스트림을 제거하십시오. 처음에 이것은 그림자를 재배치하므로 그림자 사이의 거리를 늘리고 요소의 위치를 ​​약간 조정해야합니다.<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> &lt;code&gt;#cloud-circle { width: 500px; height: 275px; background: #000; border-radius: 50%; filter: url(#filter); box-shadow: 400px 400px 60px 0px #fff; /* 增加阴影偏移量*/ position: absolute; /* 将父元素移出文档流*/ top: -320px; /* 向下移动*/ left: -320px; /* 向右移动*/ }&lt;/code&gt;</pre><div class="contentsignin">로그인 후 복사</div></div> <p> 예! 우리는 이미 설득력있는 구름을 가지고 있습니다.</p> <p> 브라우저로 렌더링 된 이미지는 구름을 잘 묘사합니다. 그러나이 클라우드가 클라우드 요정 Neferre를 실제로 반영 할 수 있습니까? 나는 우리가 더 잘할 수 있다고 믿는다!</p> <h3 id="레이어를-사용하여-깊이를-표현합니다"> 레이어를 사용하여 깊이를 표현합니다</h3> <p> 이것이 우리가 원하는 것입니다.</p> <p> 이 사진에서 구름의 깊이, 질감 및 풍부함으로 판단하면, 한 가지는 분명합니다. Zeus는 미술 학교에 다녔습니다. 적어도 그는 강력하고 겉으로는 평범한 개념을 설명하는 보편적 인 디자인 원칙을 읽어야합니다.</p> <blockquote><p> […] 조명 편차는 깊이와 자연 감각의 해석에 중요한 역할을하며 디자이너가 다양한 방식으로 작동 할 수 있습니다. 밝은 영역과 어두운 영역 사이의 대비를 사용하여 깊이의 모양을 변화시킵니다.</p></blockquote> <p> 이 구절은 우리가 자신을 생성하는 클라우드 코드를 크게 향상시킬 수있는 방법에 대한 단서를 제공합니다. 다양한 모양, 크기 및 색상의 층을 쌓아서 참조 이미지와 매우 유사한 구름을 렌더링 할 수 있습니다. 필요에 따라 필터를 여러 번 호출하면됩니다. </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;code&gt;&lt;svg height=&quot;0&quot; width=&quot;0&quot;&gt;&lt;filter&gt;&lt;feturbulence basefrequency=&quot;0.012&quot; numoctaves=&quot;4&quot; type=&quot;fractalNoise&quot;&gt;&lt;/feturbulence&gt;&lt;fedisplacementmap in=&quot;SourceGraphic&quot; scale=&quot;170&quot;&gt;&lt;/fedisplacementmap&gt;&lt;/filter&gt;&lt;filter&gt;&lt;feturbulence basefrequency=&quot;0.012&quot; numoctaves=&quot;2&quot; type=&quot;fractalNoise&quot;&gt;&lt;/feturbulence&gt;&lt;fedisplacementmap in=&quot;SourceGraphic&quot; scale=&quot;150&quot;&gt;&lt;/fedisplacementmap&gt;&lt;/filter&gt;&lt;filter&gt;&lt;feturbulence basefrequency=&quot;0.012&quot; numoctaves=&quot;2&quot; type=&quot;fractalNoise&quot;&gt;&lt;/feturbulence&gt;&lt;fedisplacementmap in=&quot;SourceGraphic&quot; scale=&quot;100&quot;&gt;&lt;/fedisplacementmap&gt;&lt;/filter&gt;&lt;/svg&gt;&lt;/code&gt;</pre><div class="contentsignin">로그인 후 복사</div></div> <p> 우리의 층을 적용하면 우리에게 <code>feTurbulence 탐구하고 다양성을 달성 할 수있는 기회를 얻을 수 있습니다. 우리는 사용 가능한 더 매끄러운 유형을 선택합니다 : fractalNoise 및 numOctaves 최대 6으로 돌립니다.

<code><feturbulence basefrequency="n" numoctaves="6" type="fractalNoise"></feturbulence></code>

그게 무슨 뜻입니까? 이제 baseFrequency 속성에 집중합시다. 다음은 N의 가치를 높일 때 얻은 결과입니다.

난기류 , 소음 , 주파수 및 옥타브 와 같은 단어는 이상하거나 혼란스러워 보일 수 있습니다. 하지만 걱정하지 마세요! 이 필터의 효과를 음파와 비교하는 것은 실제로 완전히 정확합니다. 저 주파수 ( baseFrequency=0.001 )를 저음 및 고주파수 ( baseFrequency=0.1 )와 더 높고 명확한 색조와 연관시킬 수 있습니다.

우리는 적운 유사 효과의 경우, baseFrequency 의 값이 ~ 0.005 및 ~ 0.01의 범위에 편안하게있을 수 있음을 알 수 있습니다.

numOctaves 사용하여 세부 사항을 추가하십시오

numOctaves 증가 시키면 매우 세부적인 이미지를 렌더링 할 수 있습니다. 이를 위해서는 많은 계산이 필요하므로 높은 값이 성능에 심각하게 영향을 줄 수 있습니다. 브라우저가 헬멧과 무릎 패드를 착용하지 않는 한이 값을 증가시키지 마십시오.

좋은 소식은 세부 사항과 섬세를 생성하기 위해이 값을 너무 높게 조정할 필요가 없다는 것입니다. 위의 이미지에서 볼 수 있듯이 numOctaves 값을 4 또는 5로 설정할 수 있습니다.

결과는 다음과 같습니다

seed 속성을 사용하여 무한한 변화를 달성하십시오

seed 속성에 대해 말해야 할 것이 많습니다. 왜냐하면 그것은 무대 뒤에서 일어나는 마법을 암시하기 때문입니다. 그러나 우리의 목적을 위해 seed 의 유용성은 "다른 값, 다른 모양"의 네 단어로 요약 될 수 있습니다.

Perlin 노이즈 기능 (앞서 언급) 은이 값을 임의의 숫자 생성기의 시작점으로 사용합니다. 이 속성을 포함하지 않도록 선택하면 기본 seed 0이됩니다. 그러나이 속성이 포함 된 경우 seed 에 어떤 가치를 부여하든 성능 문제에 대해 걱정할 필요가 없습니다.

위의 GIF는 seed 제공하는 일부 기능을 나타냅니다. 각 클라우드는 계층화 된 복합 클라우드입니다. (각 층의 특성을 조정했지만 각각의 seed 값을 일관되게 유지합니다.)

여기에서 참조 이미지를주의 깊게 살펴보면 이미 3 개의 구름을 넣었습니다.<div> (다른 불투명도)베이스에 겹쳐진다<code><div> 우수한. 시행 착오와 임의의 <code>seed 값을 입력하여 사진의 클라우드 모양과 비슷한 모양이되었습니다.

거칠고 상상력이 풍부합니다

물론, 우리는 브라우저를 그려 생각합니다<div> 제우스보다 더 나은 Neferele는 거만 할 것입니다. 그러나 CSS 및 SVG 필터에서 더 많은 신비를 파낼수록 Thor의 원래 생성과 시각적으로 놀라운 것을 만들 수 있습니다. 그런 다음 더 많은 실험을 계속할 수 있습니다!<p> 반사 안개</p> <p> 고층 권총 클라우드</p> <p> 이 기사에서 우리는 단지 권력과 복잡성의 바다에서 멍청합니다. SVG 필터는 일반적으로 압도적이고 접근 할 수없는 것처럼 보입니다.</p> <p> 그러나 A 단일 DIV 프로젝트 또는 Diana Smith의 드로잉 기술의 예와 마찬가지로 편안하고 즐거운 실험 방법은 항상 놀라운 결과를 가져옵니다!</p> <h4 id="업적-잠금-해제-Neferre-Cloud-Generator"> 업적 잠금 해제! Neferre Cloud Generator</h4> <p> 나는 많은 사람들이 구름을 만드는 데 필요한 모든 기술적 세부 사항을 깊이 파고 들게되어 기쁘지만 프로젝트에서 구름을 사용하는 더 편리한 방법을 선호 할 수 있습니다. 나는 구름을 생성하고 모양과 변화를 실험하는 데 도움이되는 가제트를 개발했습니다.</p> <p> 구름을 생성하십시오!</p> <p> 질문, 제안 또는 의견이 있습니까? 트위터로 저에게 연락 하거나이 게시물에 의견을 남겨주세요.</p> <p> <small>이 기사에 대한 귀중한 제안에 대해 Amelia Bellamy-Royds에게 대단히 감사합니다.</small></p> </div>