Code Ready | Frontend

✅ Как создать анимированную SVG волну?



SVG — «масштабируемая векторная графика» — это вид графики, которую создают с помощью математического описания геометрических примитивов, которые и образуют все детали будущего изображения. ⬇️



☑️ Также SVG помогают делать невероятные текстовые анимации, который точно запомнятся пользователю.



Мы оставляем HTML и CSS код ниже, для создания анимированной SVG волны:



HTML ⤵️

<svg viewbox="0 0 100 20">

    <defs>

      <lineargradient id="gradient" x1="0" x2="0" y1="0" y2="1">

        <stop offset="5%" stop-color="#326384"/>

        <stop offset="95%" stop-color="#123752"/>

      </lineargradient>

      <pattern id="wave" x="0" y="0" width="120" height="20" patternunits="userSpaceOnUse">

        <path id="wavePath" d="M-40 9 Q-30 7 -20 9 T0 9 T20 9 T40 9 T60 9 T80 9 T100 9 T120 9 V20 H-40z" mask="url(#mask)" fill="url(#gradient)"> 

          <animatetransform

              attributename="transform"

              begin="0s"

              dur="1.5s"

              type="translate"

              from="0,0"

              to="40,0"

              repeatcount="indefinite" />

        </path>

      </pattern>

    </defs>

    <text text-anchor="middle" x="50" y="15" font-size="17" fill="url(#wave)"  fill-opacity="0.6">LOADING</text>

    <text text-anchor="middle" x="50" y="15" font-size="17" fill="url(#gradient)" fill-opacity="0.1">LOADING</text>

  </svg>

CSS ⤵️

body,html{margin:0;padding:0;height:100%;}

body{

  font-family: 'Cabin Condensed', sans-serif;

  display:flex;

  justify-content:center;

  align-items:center;

}

svg{font-weight:700;max-width:600px;height:auto;}

@code_ready | #обучение #html #css