파도는 아마도 CSS에서 만들기 가장 어려운 모양 중 하나일 것입니다. 우리는 항상 다음과 같은 속성으로 근사하려고 합니다. border-radius 그리고 우리가 약간 가깝게 느껴지는 것을 얻을 때까지 많은 마법의 숫자. 그리고 그것은 우리가 더 어려운 물결 모양 패턴에 들어가기도 전입니다.

"SVG 그것을!" 당신은 말할 수도 있고 아마도 당신이 더 나은 방법이라고 말할 것입니다. 그러나 우리는 CSS가 멋진 물결을 만들 수 있고 그것을 위한 코드가 모두 미쳤을 필요가 없다는 것을 알게 될 것입니다. 그리고 무엇을 추측? 나는 가지고있다 온라인 생성기 더 간단하게 만들기 위해!

제너레이터를 가지고 놀면, 그것이 내뿜는 CSS가 단지 두 개의 그라디언트와 CSS 마스크 속성이라는 것을 알 수 있습니다. 이 두 가지만 있으면 어떤 종류의 물결 모양이나 패턴도 만들 수 있습니다. 우리가 파도에 있는 동안 파도의 크기와 곡률을 쉽게 제어할 수 있다는 것은 말할 것도 없습니다.

일부 값은 "매직 넘버” 그러나 실제로 그 뒤에 논리가 있으며 우리는 코드를 분석하고 웨이브 생성 뒤에 숨겨진 모든 비밀을 발견할 것입니다.

이 기사는 후속 조치입니다. 이전 것 모든 종류의 지그재그, 범위, 가리비, 물결 모양 테두리 테두리를 만들었습니다. 여기에서 다룰 것과 동일한 기술을 사용하지만 더 자세하게 이 기사를 확인하는 것이 좋습니다.

파도 뒤에 숨겨진 수학

엄밀히 말하면, 물결 모양 뒤에는 하나의 마법 공식이 없습니다. 위아래로 곡선이 있는 모든 모양을 파동이라고 할 수 있으므로 복잡한 수학에 국한되지 않습니다. 대신 기하학의 기초를 사용하여 파동을 재현합니다.

두 개의 원 모양을 사용하는 간단한 예부터 시작하겠습니다.

반지름이 같은 두 개의 원이 서로 옆에 있습니다. 저 빨간선 보이시죠? 첫 번째 원의 위쪽 절반과 두 번째 원의 아래쪽 절반을 덮습니다. 이제 당신이 그 줄을 잡고 그것을 반복한다고 상상해보십시오.

우리는 이미 파도를 보고 있습니다. 이제 아래 부분(또는 맨 위 부분)을 채워서 다음을 얻습니다.

타다! 우리는 물결 모양을 가지고 있으며 원 반경에 대해 하나의 변수를 사용하여 제어할 수 있습니다. 이것은 우리가 만들 수 있는 가장 쉬운 웨이브 중 하나이며 내가 보여준 것입니다. this 이전 기사

첫 번째 그림을 사용하고 원을 약간 움직여서 약간의 복잡성을 추가해 보겠습니다.

여전히 반지름이 같은 두 개의 원이 있지만 더 이상 수평으로 정렬되지 않습니다. 이 경우 빨간색 선은 더 이상 각 원의 절반 영역을 덮지 않고 대신 더 작은 영역을 덮습니다. 이 영역은 빨간색 점선으로 제한됩니다. 그 선은 두 원이 만나는 지점과 교차합니다.

이제 그 선을 잡고 반복하면 더 부드러운 또 다른 파도를 얻을 수 있습니다.

나는 당신이 아이디어를 얻을 것 같아요. 원의 위치와 크기를 제어하여 원하는 웨이브를 만들 수 있습니다. 변수를 생성할 수도 있습니다. P 과 S각각.

온라인 생성기에서 두 개의 입력을 사용하여 파동을 제어한다는 사실을 눈치채셨을 것입니다. 위의 변수에 매핑됩니다. S 는 "파도의 크기"이며 P "파도의 곡률"입니다.

나는 정의하고있다 P as P = m*S 어디에 m 웨이브의 곡률을 업데이트할 때 조정하는 변수입니다. 이를 통해 S를 업데이트하더라도 항상 동일한 곡률을 가질 수 있습니다.

m 사이의 모든 값이 될 수 있습니다. 0 과 2. 0 두 원이 수평으로 정렬된 첫 번째 특정 경우를 제공합니다. 2 일종의 최대값이다. 우리는 더 커질 수 있지만 몇 가지 테스트 후에 위의 모든 것이 2 나쁘고 평평한 모양을 만듭니다.

우리 원의 반지름을 잊지 말자! 다음을 사용하여 정의할 수도 있습니다. S 과 P 이렇게 :

R = sqrt(P² + S²)/2

인셀덤 공식 판매점인 P 동일하다 0, 우리는 R = S/2.

이 모든 것을 CSS의 그라디언트로 변환하기 시작할 모든 것이 있습니다!

그라디언트 만들기

우리의 파도는 원을 사용하고, 원에 대해 이야기할 때 우리는 방사형 그라디언트에 대해 이야기합니다. 그리고 두 개의 원이 우리의 웨이브를 정의하기 때문에 논리적으로 두 개의 방사형 그래디언트를 사용할 것입니다.

우리는 다음과 같은 특별한 경우부터 시작할 것입니다. P 동일하다 0. 다음은 첫 번째 그라디언트의 그림입니다.

이 그라데이션은 전체 바닥 영역, 말하자면 파도의 "물"을 채우면서 첫 번째 곡률을 만듭니다.

.wave {
  --size: 50px;

  mask: radial-gradient(var(--size) at 50% 0%, #0000 99%, red 101%) 
    50% var(--size)/calc(4 * var(--size)) 100% repeat-x;
}

　 --size 변수는 방사형 그래디언트의 반경과 크기를 정의합니다. 와 비교하자면 S 변수, 다음과 같습니다 S/2.

이제 두 번째 그라디언트를 추가해 보겠습니다.

두 번째 그라디언트는 웨이브를 완성하는 원에 불과합니다.

radial-gradient(var(--size) at 50% var(--size), blue 99%, #0000 101%) 
  calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%

당신이 선택하면 이전 기사 당신은 내가 그곳에서 이미 한 일을 단순히 반복한다는 것을 알게 될 것입니다.

두 기사를 모두 따랐지만 그라디언트 구성이 동일하지 않습니다.

다른 그래디언트 구성을 사용하여 동일한 결과에 도달할 수 있기 때문입니다. 두 구성을 비교하면 정렬에 약간의 차이가 있음을 알 수 있지만 트릭은 동일합니다. 그래디언트에 익숙하지 않은 경우 혼동될 수 있지만 걱정하지 마십시오. 약간의 연습을 통해 그것들에 익숙해지고 다른 구문이 같은 결과를 초래할 수 있음을 스스로 알게 될 것입니다.

다음은 첫 번째 웨이브의 전체 코드입니다.

.wave {
  --size: 50px;

  mask:
    radial-gradient(var(--size) at 50% var(--size),#000 99%, #0000 101%) 
      calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%,
    radial-gradient(var(--size) at 50% 0px, #0000 99%, #000 101%) 
      50% var(--size)/calc(4 * var(--size)) 100% repeat-x;
}

이제 이 코드를 가져와서 원하는 웨이브를 생성하는 데 완전히 재사용할 수 있도록 하는 변수를 도입하도록 조정해 보겠습니다. 이전 섹션에서 보았듯이 주요 트릭은 원을 이동하여 더 이상 정렬되지 않도록 하는 것이므로 각 원의 위치를 ​​업데이트하겠습니다. 첫 번째는 위, 두 번째는 아래로 이동합니다.

코드는 다음과 같습니다.

.wave {
  --size: 50px;
  --p: 25px;

  mask:
    radial-gradient(var(--size) at 50% calc(var(--size) + var(--p)), #000 99%, #0000 101%) 
      calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%,
    radial-gradient(var(--size) at 50% calc(-1*var(--p)), #0000 99%, #000 101%) 
      50% var(--size) / calc(4 * var(--size)) 100% repeat-x;
}

신제품을 소개해 드렸어요 --p 각 원의 중심 위치를 정의하는 데 사용되는 변수입니다. 첫 번째 그라디언트는 다음을 사용합니다. 50% calc(-1*var(--p)), 두 번째가 사용하는 동안 중심이 위로 이동합니다. calc(var(--size) + var(--p)) 아래로 이동합니다.

데모는 천 마디 말의 가치가 있습니다.

원이 정렬되지도 않고 서로 닿지도 않습니다. 반지름을 변경하지 않고 멀리 떨어져서 우리는 웨이브를 잃었습니다. 그러나 이전에 새 반경을 계산하는 데 사용한 것과 동일한 수학을 사용하여 문제를 해결할 수 있습니다. 기억 R = sqrt(P² + S²)/2. 우리의 경우, --size 동일하다 S/2; 같은 --p 이것은 또한 같음 P/2 두 원을 모두 움직이기 때문입니다. 따라서 중심점 사이의 거리는 다음 값의 두 배입니다. --p 이를 위해 :

R = sqrt(var(--size) * var(--size) + var(--p) * var(--p))

그것은 우리에게 결과를 제공합니다 55.9px.

우리의 웨이브가 돌아왔습니다! 해당 방정식을 CSS에 연결해 보겠습니다.

.wave {
  --size: 50px;
  --p: 25px;
  --R: sqrt(var(--p) * var(--p) + var(--size)*var(--size));

  mask:
    radial-gradient(var(--R) at 50% calc(var(--size) + var(--p)), #000 99%, #0000 101%) 
      calc(50% - 2*var(--size)) 0 / calc(4 * var(--size)) 100%,
    radial-gradient(var(--R) at 50% calc(-1*var(--p)), #0000 99%, #000 101%) 
      50% var(--size)/calc(4 * var(--size)) 100% repeat-x;
}

유효한 CSS 코드입니다. sqrt() 사양의 일부입니다, 하지만 이 글을 쓰고 있는 시점에는 이에 대한 브라우저 지원이 없습니다. 즉, 더 광범위해질 때까지 해당 값을 계산하기 위해 JavaScript 또는 Sass를 약간 뿌려야 합니다. sqrt() 지원합니다.

이것은 매우 멋지다. 두 개의 그라디언트만 있으면 멋진 웨이브를 얻을 수 있으며 이를 사용하여 모든 요소에 적용할 수 있습니다. mask 재산. 더 이상 시행착오가 필요 없습니다. 두 개의 변수를 업데이트하기만 하면 됩니다.

파도 반전

만약 우리가 "물" 대신에 "하늘"을 채우고 있는 다른 방향으로 파도가 가고 싶다면 어떻게 해야 할까요? 믿거나 말거나, 우리가 해야 할 일은 두 가지 값을 업데이트하는 것입니다.

.wave {
  --size: 50px;
  --p: 25px;
  --R: sqrt(var(--p) * var(--p) + var(--size) * var(--size));

  mask:
    radial-gradient(var(--R) at 50% calc(100% - (var(--size) + var(--p))), #000 99%, #0000 101%)
      calc(50% - 2 * var(--size)) 0/calc(4 * var(--size)) 100%,
    radial-gradient(var(--R) at 50% calc(100% + var(--p)), #0000 99%, #000 101%) 
      50% calc(100% - var(--size)) / calc(4 * var(--size)) 100% repeat-x;
}

내가 거기에서 한 모든 것은 다음과 같은 오프셋을 추가합니다. 100%, 위에서 강조 표시된 결과는 다음과 같습니다.

더 쉽게 하기 위해 키워드 값을 사용하여 보다 친숙한 구문을 고려할 수 있습니다.

.wave {
  --size: 50px;
  --p: 25px;
  --R: sqrt(var(--p)*var(--p) + var(--size) * var(--size));

  mask:
    radial-gradient(var(--R) at left 50% bottom calc(var(--size) + var(--p)), #000 99%, #0000 101%) 
      calc(50% - 2 * var(--size)) 0/calc(4 * var(--size)) 100%,
    radial-gradient(var(--R) at left 50% bottom calc(-1 * var(--p)), #0000 99%, #000 101%) 
      left 50% bottom var(--size) / calc(4 * var(--size)) 100% repeat-x;
}

우리는 left 과 bottom 측면과 오프셋을 지정하는 키워드. 기본적으로 브라우저는 기본적으로 left 과 top — 그래서 우리는 100% 요소를 맨 아래로 이동합니다. 실제로, 우리는 그것을 이동합니다. top by 100%, 그래서 그것은 정말로 말하는 것과 같습니다. bottom. 수학보다 읽기가 훨씬 쉽습니다!

이 업데이트된 구문으로 우리가 해야 할 일은 교환하는 것입니다. bottom for top — 또는 그 반대로 — 파도의 방향을 변경합니다.

상단 및 하단 웨이브를 모두 얻으려면 단일 선언에서 모든 그라디언트를 결합합니다.

.wave {
  --size: 50px;
  --p: 25px;
  --R: sqrt(var(--p)*var(--p) + var(--size)*var(--size));

  mask:
    /* Gradient 1 */
    radial-gradient(var(--R) at left 50% bottom calc(var(--size) + var(--p)), #000 99%, #0000 101%) 
      left calc(50% - 2*var(--size)) bottom 0 / calc(4 * var(--size)) 51% repeat-x,
    /* Gradient 2 */
    radial-gradient(var(--R) at left 50% bottom calc(-1 * var(--p)), #0000 99%, #000 101%) 
      left 50% bottom var(--size) / calc(4 * var(--size)) calc(51% - var(--size)) repeat-x,
    /* Gradient 3 */
    radial-gradient(var(--R) at left 50% top calc(var(--size) + var(--p)), #000 99%, #0000 101%) 
      left calc(50% - 2 * var(--size)) top 0 / calc(4 * var(--size)) 51% repeat-x,
    /* Gradient 4 */
    radial-gradient(var(--R) at left 50% top calc(-1 * var(--p)), #0000 99%, #000 101%) 
      left 50% top var(--size) / calc(4 * var(--size)) calc(51% - var(--size)) repeat-x;
}

코드를 확인하면 모든 그라디언트를 결합하는 것 외에도 높이를 100% 에 51% 둘 다 요소의 절반을 덮도록 합니다. 예, 51%. 간격을 피하는 작은 중첩을 위해 약간의 추가 백분율이 필요합니다.

왼쪽과 오른쪽은 어떻습니까?

그것은 당신의 숙제입니다! 상단 및 하단에 수행한 작업을 수행하고 값을 업데이트하여 오른쪽 및 왼쪽 값을 얻으십시오. 걱정하지 마십시오. 쉽고 간단하며 값을 교환하기만 하면 됩니다.

번거로우시더라도 언제든지 이용하세요 온라인 생성기 코드를 확인하고 결과를 시각화합니다.

물결선

이전에 빨간색 선을 사용하여 첫 번째 웨이브를 만든 다음 요소의 하단 부분을 채웠습니다. 저 물결선 어때요? 그것도 파도! 변수로 두께를 제어하여 재사용할 수 있다면 더욱 좋습니다. 하자!

처음부터 시작하지 않고 이전 코드를 가져와 업데이트합니다. 가장 먼저 할 일은 그라디언트의 색상 정지점을 업데이트하는 것입니다. 두 그라디언트는 투명한 색상에서 시작하여 불투명한 색상으로 또는 그 반대의 경우도 마찬가지입니다. 선이나 테두리를 시뮬레이션하려면 투명에서 시작하여 불투명으로 이동한 다음 다시 투명으로 돌아가야 합니다.

#0000 calc(99% - var(--b)), #000 calc(101% - var(--b)) 99%, #0000 101%

나는 당신이 이미 짐작했다고 생각합니다. --b 변수는 선 두께를 제어하는 ​​데 사용하는 것입니다. 이것을 그라디언트에 적용해 보겠습니다.

예, 결과는 물결 모양의 선과는 거리가 멉니다. 그러나 자세히 보면 하나의 그라디언트가 아래쪽 곡률을 올바르게 생성하고 있음을 알 수 있습니다. 따라서 우리가 정말로 해야 할 일은 두 번째 기울기를 수정하는 것입니다. 완전한 원을 유지하는 대신 다른 그라디언트처럼 부분적인 원을 만들어 봅시다.

아직 멀었지만 우리에게 필요한 두 곡률이 있습니다! 코드를 확인하면 두 개의 동일한 그라디언트가 있음을 알 수 있습니다. 유일한 차이점은 위치입니다.

.wave {
  --size: 50px;
  --b: 10px;
  --p: 25px;
  --R: sqrt(var(--p)*var(--p) + var(--size)*var(--size));

  --_g: #0000 calc(99% - var(--b)), #000 calc(101% - var(--b)) 99%, #0000 101%;
  mask:
    radial-gradient(var(--R) at left 50% bottom calc(-1*var(--p)), var(--_g)) 
      calc(50% - 2*var(--size)) 0/calc(4*var(--size)) 100%,
    radial-gradient(var(--R) at left 50% top    calc(-1*var(--p)), var(--_g)) 
      50% var(--size)/calc(4*var(--size)) 100%;
}

이제 최종 모양의 크기와 위치를 조정해야 합니다. 더 이상 전체 높이에 대한 그래디언트가 필요하지 않으므로 100% 이걸로 :

/* Size plus thickness */
calc(var(--size) + var(--b))

이 값 뒤에는 수학적 논리가 없습니다. 곡률만큼만 커야 합니다. 패턴에 미치는 영향을 잠시 후에 보게 될 것입니다. 그 동안 위치를 업데이트하여 그라디언트를 수직으로 중앙에 배치해 보겠습니다.

.wave {
  --size: 50px;
  --b: 10px;
  --p: 25px;
  --R: sqrt(var(--p)*var(--p) + var(--size)*var(--size));

  --_g: #0000 calc(99% - var(--b)), #000 calc(101% - var(--b)) 99%, #0000 101%;  
  mask:
    radial-gradient(var(--R) at left 50% bottom calc(-1*var(--p)), var(--_g)) 
      calc(50% - 2*var(--size)) 50%/calc(4 * var(--size)) calc(var(--size) + var(--b)) no-repeat,
    radial-gradient(var(--R) at left 50% top calc(-1 * var(--p)), var(--_g)) 50%
      50%/calc(4 * var(--size)) calc(var(--size) + var(--b)) no-repeat;
}

아직 멀었습니다:

하나의 그라디언트는 약간 아래로 이동하고 다른 그라디언트는 약간 위로 이동해야 합니다. 둘 다 높이의 절반만큼 움직여야 합니다.

거의 다 왔습니다! 반경이 완벽하게 겹치도록 약간 수정해야 합니다. 두 줄 모두 테두리의 절반만큼 오프셋해야 합니다(--b) 두께:

우리는 그것을 얻었다! 몇 가지 변수를 제어하여 쉽게 조정할 수 있는 완벽한 물결선:

.wave {
  --size: 50px;
  --b: 10px;
  --p: 25px;
  --R: calc(sqrt(var(--p) * var(--p) + var(--size) * var(--size)) + var(--b) / 2);

  --_g: #0000 calc(99% - var(--b)), #000 calc(101% - var(--b)) 99%, #0000 101%;
  mask:
    radial-gradient(var(--R) at left 50% bottom calc(-1 * var(--p)), var(--_g)) 
     calc(50% - 2*var(--size)) calc(50% - var(--size)/2 - var(--b)/2) / calc(4 * var(--size)) calc(var(--size) + var(--b)) repeat-x,
    radial-gradient(var(--R) at left 50% top calc(-1*var(--p)),var(--_g)) 
     50%  calc(50% + var(--size)/2 + var(--b)/2) / calc(4 * var(--size)) calc(var(--size) + var(--b)) repeat-x;
}

논리를 이해하는 데 약간의 시간이 걸린다는 것을 알고 있습니다. 괜찮습니다. 제가 말했듯이 CSS에서 물결 모양을 만드는 것은 쉽지 않으며 그 뒤에 숨겨진 복잡한 수학은 말할 것도 없습니다. 그렇기 때문에 온라인 생성기 는 생명의 은인입니다 — 뒤에 있는 논리를 완전히 이해하지 못하더라도 최종 코드를 쉽게 얻을 수 있습니다.

물결 모양 패턴

방금 만든 물결선으로 패턴을 만들 수 있습니다!

오, 아니요, 패턴의 코드는 더 이해하기 어려울 것입니다!

전혀! 우리는 이미 코드를 가지고 있습니다. 우리가해야 할 일은 제거하는 것입니다. repeat-x 우리가 이미 가지고 있는 것, 그리고 tada. 🎉

멋진 웨이브 패턴입니다. 우리가 다시 방문하겠다고 말한 방정식을 기억하십니까?

/* Size plus thickness */
calc(var(--size) + var(--b))

이것이 패턴의 선 사이의 거리를 제어하는 ​​것입니다. 변수를 만들 수 있지만 더 복잡할 필요는 없습니다. 생성기에서 변수를 사용하지도 않습니다. 나중에 변경할 수도 있습니다.

다음은 다른 방향으로 가는 동일한 패턴입니다.

그 데모에서 코드를 제공하고 있지만, 그것을 분석하고 그렇게 하기 위해 내가 어떤 변경을 했는지 이해해 주셨으면 합니다.

코드 단순화

이전의 모든 데모에서 우리는 항상 --size 과 --p 독립적으로. 그러나 앞에서 온라인 생성기가 평가한다고 언급한 것을 기억하십니까? P 같음 m*S어디로 m 파도의 곡률을 제어합니까? 고정 승수를 정의하면 하나의 특정 웨이브로 작업할 수 있고 코드가 더 쉬워질 수 있습니다. 이것은 대부분의 경우에 필요한 것입니다. 특정 물결 모양과 크기를 제어하는 ​​변수입니다.

코드를 업데이트하고 소개하겠습니다. m 변하기 쉬운:

.wave {
  --size: 50px;
  --R: calc(var(--size) * sqrt(var(--m) * var(--m) + 1));

  mask:
    radial-gradient(var(--R) at 50% calc(var(--size) * (1 + var(--m))), #000 99%, #0000 101%) 
      calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%,
    radial-gradient(var(--R) at 50% calc(-1 * var(--size) * var(--m)), #0000 99%, #000 101%) 
      50% var(--size) / calc(4 * var(--size)) 100% repeat-x;
  }

보시다시피 더 이상 필요하지 않습니다. --p 변하기 쉬운. 나는 그것을 대체했다 var(--m)*var(--size), 그에 따라 수학의 일부를 최적화했습니다. 이제 특정 물결 모양으로 작업하려면 생략할 수 있습니다. --m 변수를 만들고 고정 값으로 바꿉니다. 해보자 .8 예를 들어.

--size: 50px;
--R: calc(var(--size) * 1.28);

mask:
  radial-gradient(var(--R) at 50% calc(1.8 * var(--size)), #000 99%, #0000 101%) 
    calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%,
  radial-gradient(var(--R) at 50% calc(-.8 * var(--size)), #0000 99%, #000 101%) 
    50% var(--size) / calc(4 * var(--size)) 100% repeat-x;

이제 코드가 어떻게 더 쉬워졌는지 확인하시겠습니까? 웨이브를 제어할 수 있는 단 하나의 변수와 더 이상 의존할 필요가 없습니다. sqrt() 브라우저 지원이 없습니다!

물결선과 패턴에 대해서도 우리가 본 모든 데모에 동일한 논리를 적용할 수 있습니다. 자세한 수학적 설명으로 시작하여 일반 코드를 제공했지만 실제 사용 사례에서는 더 쉬운 코드가 필요할 수 있습니다. 이것이 내가 항상 하는 일입니다. 나는 제네릭 코드를 거의 사용하지 않지만, 특히 대부분의 경우 변수로 저장할 필요가 없는 알려진 값을 사용하는 단순화된 버전을 항상 고려합니다. (스포일러 경고: 마지막에 몇 가지 예를 공유하겠습니다!)

이 접근 방식의 제한 사항

수학적으로 우리가 만든 코드는 완벽한 물결 모양과 패턴을 제공해야 하지만 실제로는 이상한 결과에 직면하게 됩니다. 네, 이 방법에는 한계가 있습니다. 예를 들어, 온라인 생성기는 특히 물결 모양의 선이 있는 경우 좋지 않은 결과를 생성할 수 있습니다. 문제의 일부는 크기에 비해 테두리 두께에 큰 값을 사용하는 것과 같이 결과가 스크램블되는 특정 값 조합으로 인해 발생합니다.

다른 경우에는 일부 반올림과 관련된 문제로 인해 웨이브 사이의 정렬 불량 및 간격이 발생합니다.

그렇지만 우리가 다룬 방법은 대부분의 경우 부드러운 물결을 생성하기 때문에 여전히 좋은 방법이며 완벽해질 때까지 다른 값을 사용하여 나쁜 결과를 쉽게 피할 수 있다고 생각합니다.

최대 포장

이 글이 끝나면 더 이상 물결 모양이나 패턴을 만들기 위해 시행착오를 겪지 않기를 바랍니다. 게다가 온라인 생성기로, 원하는 모든 종류의 웨이브를 만드는 이면에 있는 모든 수학 비밀이 있습니다!

이 기사는 여기서 끝나지만 이제 물결 모양을 사용하는 멋진 디자인을 만드는 강력한 도구를 갖게 되었습니다. 다음은 시작하는 데 도움이 되는 영감입니다...

당신은 어때요? 내 온라인 생성기를 사용하고(또는 이미 모든 수학을 암기했다면 수동으로 코드를 작성하세요) 당신의 창작물을 보여주세요! 댓글 섹션에서 좋은 컬렉션을 가져 가자.