A top trend in web design for 2020 is the increased use of SVG animations on web pages and in logo design. In this article, we will implement a simple and straight forward method to create relatively complex animation. We will use Adobe Illustrator, although a similar program capable of creating SVG files will suffice. On our web page we will use HTML and CSS to animate our SVG.

2020年網頁設計的主要趨勢是在網頁和徽標設計中增加使用SVG動畫。 在本文中，我們將實現一種簡單直接的方法來創建相對復雜的動畫。 我們將使用Adobe Illustrator，盡管能夠創建SVG文件的類似程序就足夠了。 在我們的網頁上，我們將使用HTML和CSS對SVG進行動畫處理。

In this tutorial, we will create the IRIS WEB CORE logo.

在本教程中，我們將創建IRIS WEB CORE徽標。

So let’s begin.

因此，讓我們開始吧。

Open Adobe Illustrator and hit “Create new…”, set the artboard width to 1300px and the height to 723px

打開Adobe Illustrator并單擊“ Create new…”，將畫板寬度設置為1300px，高度設置為723px

Type in some text and hit “ctrl + t” on your keyboard on PC or “Command + t” on Mac.

輸入一些文字，然后在PC上的鍵盤上按“ ctrl + t”，在Mac上按“ Command + t”。

Set the font size to “72pt”, the letter tracking to “100” and the font family to “Helvetica”

將字體大小設置為“ 72pt”，字母跟蹤設置為“ 100”，字體系列設置為“ Helvetica”

Hit “Document Setup” and select “Edit Artboards”. Move the edges of the art board closer to the edges of the text.

點擊“文檔設置”，然后選擇“編輯畫板”。 將畫板的邊緣移到更靠近文本邊緣的位置。

Select the text and set the Fill property to “None” and the Stroke property to “White” and “2pt”

選擇文本并將“填充”屬性設置為“無”，將“描邊”屬性設置為“白色”和“ 2pt”

Go to “File” and “Save As”. Choose the destination for the file and select from the “Save as type” dropdown list “SVG (*.SVG)” and hit “Save”

轉到“文件”和“另存為”。 選擇文件的目標，然后從“另存為類型”下拉列表中選擇“ SVG(* .SVG)”，然后單擊“保存”

From the following menu on the Fonts group select from the “Type:” dropdown list “Convert to outline”. Hit the “SVG Code…” button. In the text editor that will open remove the first two lines of code before the <svg></svg> tag.

從“字體”組的以下菜單中，從“類型：”下拉列表中選擇“轉換為輪廓”。 點擊“ SVG Code…”按鈕。 在打開的文本編輯器中，刪除<svg> </ svg>標記之前的前兩行代碼。

Go to the bottom of the file and remove the unnecessary <g></g> tags

轉到文件底部，然后刪除不必要的<g> </ g>標記

Copy the remaining code and paste it into your HTML document. Close Adobe Illustrator.

復制剩余的代碼并將其粘貼到HTML文檔中。 關閉Adobe Illustrator。

Remove the <style></style> tag from your html document as we will do the styling in the .css file.

從html文檔中刪除<style> </ style>標記，因為我們將在.css文件中進行樣式設置。

To control the size of the SVG Logo and to keep it responsive we set a “max-width: 35em;” on its parent container “.iris-logo-wide”.

為了控制SVG徽標的大小并使其保持響應狀態，我們設置了“最大寬度：35em；” 在其父容器“ .iris-logo-wide”上。

To animate our SVG we are concerned with adjusting the following parts of the SVG in our CSS — the “.st0” class and the <path></path> tag.

要為SVG設置動畫，我們需要調整CSS中SVG的以下部分-“ .st0”類和<path> </ path>標記。

Copy and paste the following code into your CSS file.

將以下代碼復制并粘貼到CSS文件中。

.st0{
  fill:#000;
  stroke:#000;
  stroke-width:2;
  stroke-miterlimit:10;
}path{
  stroke:#000;
  fill: #000;
  stroke-dasharray:1800;
  opacity: 10;
  animation: animate 3s cubic-bezier(0,0.23,1,.1);
}@keyframes animate{
  0%{
   opacity:0;
   fill:none;
   stroke-dashoffset:1800;
 }
 
  30%{
   opacity:1;
   fill:none;
   stroke-dashoffset:1800;
  }
 
  90%{
   fill:rgba(0,0,0,0);
  }
  100%{
   opacity: 1;
   fill:rgba(0,0,0,0);
   stroke-dashoffset:0;
  }
}

We can set up the colors of the stroke and fill of our SVG in the “.st0” class and the <path></path> tag. We have set them up here to black #000. Notice that we started with a white #FFF stroke and no fill color. in Adobe Illustrator. This is valid for all the properties of the SVG, they can be changed in our .css file.

我們可以在“ .st0”類和<path> </ path>標記中設置筆劃和SVG填充的顏色。 我們將其設置為黑色＃000。 請注意，我們從白色#FFF筆劃開始，沒有填充顏色。 在Adobe Illustrator中。 這對SVG的所有屬性均有效，可以在我們的.css文件中更改它們。

We want to animate the <path></path> tag so we create an animation “@keyframes animate”. At 0% we start with “opacity:0;” “fill:none;” “stroke-dashoffset:1800;” and at 100% we finish with “opacity: 1;” “fill:rgba(0,0,0,0);” “stroke-dashoffset:0;”.

我們要設置<path> </ path>標簽的動畫，因此我們創建了動畫“ @keyframes animate”。 在0％時，我們從“ opacity：0;”開始 “填充：無；” “ stroke-dashoffset：1800;” 并以100％的“不透明度：1”結束 “ fill：rgba(0,0,0,0);” “ stroke-dashoffset：0;”。

This is the result

這是結果

You can absolutely customise the animation. Notice that we have used a cubic-bezier animation above. Here is a good place to customize your animation https://cubic-bezier.com/

您可以絕對自定義動畫。 注意，我們在上面使用了三次方貝塞爾曲線動畫。 這是自定義動畫的好地方https://cubic-bezier.com/

Find the full code for our web page below

在下面找到我們網頁的完整代碼

HTML

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0"><title>iris Web Core</title>
 
 
  <meta name="description" content="IRIS WEB CORE is a Website Design and Digital Marketing Agency experienced in delivering customers through attractive design, strategic SEO and Social Media management." /><meta name="author" content="COPYRIGHT 2020 IRIS WEB CORE LTD ALL RIGHTS RESERVED (developed with care by Fabio Aleksiev at irisWebCore)" />
    
  
 
<link href="site.css" rel="stylesheet" type="text/css">
  
</head><body><div class="hero"><div class="iris-logo-wide">
   
  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  viewBox="0 0 640 72" style="enable-background:new 0 0 640 72;" xml:space="preserve"><g>
 <path class="st0" d="M7.1,9.9h7.1v51.6H7.1V9.9z"/>
 <path class="st0" d="M33.5,9.9h23.9c3.9,0,7.2,0.6,9.7,1.7c4.9,2.2,7.3,6.3,7.3,12.2c0,3.1-0.6,5.6-1.9,7.6c-1.3,2-3.1,3.6-5.4,4.7
  c2,0.8,3.5,1.9,4.6,3.2s1.6,3.5,1.7,6.5l0.2,6.9c0.1,2,0.2,3.4,0.5,4.4c0.4,1.6,1.2,2.7,2.3,3.2v1.2h-8.6c-0.2-0.4-0.4-1-0.6-1.7
  s-0.3-2.1-0.4-4.1l-0.4-8.6c-0.2-3.4-1.4-5.6-3.8-6.8c-1.3-0.6-3.4-0.9-6.3-0.9H40.5v22.1h-7V9.9z M56.7,33.5c3.3,0,5.9-0.7,7.8-2
  c1.9-1.3,2.9-3.7,2.9-7.1c0-3.7-1.3-6.2-4-7.5c-1.4-0.7-3.3-1.1-5.7-1.1H40.5v17.6H56.7z"/>
 <path class="st0" d="M93.5,9.9h7.1v51.6h-7.1V9.9z"/>
 <path class="st0" d="M123.7,44.8c0.2,2.9,0.9,5.3,2.1,7.1c2.3,3.4,6.4,5.1,12.3,5.1c2.6,0,5-0.4,7.2-1.1c4.2-1.5,6.3-4.1,6.3-7.8
  c0-2.8-0.9-4.8-2.6-6c-1.8-1.2-4.6-2.2-8.4-3.1l-7-1.6c-4.6-1-7.8-2.2-9.7-3.4c-3.3-2.2-4.9-5.4-4.9-9.7c0-4.6,1.6-8.4,4.8-11.4
  c3.2-3,7.8-4.5,13.6-4.5c5.4,0,10,1.3,13.8,3.9c3.8,2.6,5.7,6.8,5.7,12.5h-6.6c-0.4-2.8-1.1-4.9-2.3-6.4c-2.1-2.7-5.8-4-10.9-4
  c-4.1,0-7.1,0.9-8.9,2.6c-1.8,1.7-2.7,3.8-2.7,6c0,2.5,1.1,4.4,3.2,5.6c1.4,0.8,4.5,1.7,9.4,2.8l7.2,1.7c3.5,0.8,6.2,1.9,8.1,3.3
  c3.3,2.4,4.9,5.9,4.9,10.5c0,5.7-2.1,9.8-6.2,12.3s-9,3.7-14.5,3.7c-6.4,0-11.4-1.6-15.1-4.9c-3.6-3.3-5.4-7.7-5.3-13.3H123.7z"/>
 <path class="st0" d="M204.9,9.9l9.7,42l11.7-42h7.6l11.7,42l9.7-42h7.7l-13.6,51.6h-7.3l-11.9-42.8l-12,42.8h-7.3L197.3,9.9H204.9z
  "/>
 <path class="st0" d="M277.3,9.9H315v6.3h-30.8v15.7h28.5v6h-28.5v17.5h31.4v6.2h-38.2V9.9z"/>
 <path class="st0" d="M331.7,9.9h22.2c6,0,10.3,1.8,12.9,5.4c1.5,2.1,2.3,4.6,2.3,7.4c0,3.3-0.9,5.9-2.8,8c-1,1.1-2.3,2.1-4.1,3
  c2.6,1,4.6,2.1,5.9,3.4c2.3,2.3,3.5,5.4,3.5,9.3c0,3.3-1,6.3-3.1,9c-3.1,4-8.1,6-14.9,6h-21.8V9.9z M351.3,31.7
  c3,0,5.3-0.4,6.9-1.2c2.6-1.3,3.9-3.6,3.9-7c0-3.4-1.4-5.6-4.1-6.8c-1.5-0.7-3.8-1-6.9-1h-12.5v16H351.3z M353.7,55.5
  c4.3,0,7.3-1.2,9.2-3.7c1.1-1.6,1.7-3.5,1.7-5.7c0-3.7-1.7-6.3-5-7.7c-1.8-0.7-4.1-1.1-7.1-1.1h-13.9v18.2H353.7z"/>
 <path class="st0" d="M451.3,13.6c3.6,3.4,5.6,7.4,6,11.7h-6.8c-0.8-3.3-2.3-6-4.6-7.9c-2.3-1.9-5.5-2.9-9.7-2.9
  c-5.1,0-9.2,1.8-12.3,5.4c-3.1,3.6-4.7,9.1-4.7,16.4c0,6,1.4,11,4.2,14.7s7,5.6,12.6,5.6c5.2,0,9.1-2,11.8-5.9
  c1.4-2.1,2.5-4.8,3.2-8.2h6.8c-0.6,5.4-2.6,10-6,13.7c-4.1,4.4-9.6,6.6-16.6,6.6c-6,0-11-1.8-15.1-5.4c-5.4-4.8-8.1-12.2-8.1-22.3
  c0-7.6,2-13.9,6-18.7c4.4-5.3,10.4-7.9,18-7.9C442.6,8.4,447.7,10.2,451.3,13.6z"/>
 <path class="st0" d="M516.1,17.2c3.4,4.6,5.1,10.4,5.1,17.5c0,7.7-2,14.1-5.9,19.2c-4.6,6-11.1,9-19.7,9c-7.9,0-14.2-2.6-18.7-7.9
  c-4.1-5.1-6.1-11.5-6.1-19.2c0-7,1.7-13,5.2-17.9c4.5-6.4,11-9.6,19.8-9.6C504.9,8.4,511.7,11.4,516.1,17.2z M509.9,50.1
  c2.8-4.4,4.1-9.5,4.1-15.2c0-6.1-1.6-11-4.8-14.7c-3.2-3.7-7.5-5.6-13-5.6c-5.3,0-9.7,1.8-13.1,5.5c-3.4,3.7-5.1,9.1-5.1,16.2
  c0,5.7,1.4,10.5,4.3,14.5c2.9,3.9,7.6,5.9,14.1,5.9C502.7,56.8,507.1,54.5,509.9,50.1z"/>
 <path class="st0" d="M537.6,9.9h23.9c3.9,0,7.2,0.6,9.7,1.7c4.9,2.2,7.3,6.3,7.3,12.2c0,3.1-0.6,5.6-1.9,7.6s-3.1,3.6-5.4,4.7
  c2,0.8,3.5,1.9,4.6,3.2s1.6,3.5,1.7,6.5l0.2,6.9c0.1,2,0.2,3.4,0.5,4.4c0.4,1.6,1.2,2.7,2.3,3.2v1.2h-8.6c-0.2-0.4-0.4-1-0.6-1.7
  s-0.3-2.1-0.4-4.1l-0.4-8.6c-0.2-3.4-1.4-5.6-3.8-6.8c-1.3-0.6-3.4-0.9-6.3-0.9h-15.9v22.1h-7V9.9z M560.7,33.5
  c3.3,0,5.9-0.7,7.8-2c1.9-1.3,2.9-3.7,2.9-7.1c0-3.7-1.3-6.2-4-7.5c-1.4-0.7-3.3-1.1-5.7-1.1h-17.1v17.6H560.7z"/>
 <path class="st0" d="M596.6,9.9h37.7v6.3h-30.8v15.7h28.5v6h-28.5v17.5h31.4v6.2h-38.2V9.9z"/>
</g>
</svg></div></div></body></html>

CSS

CSS

@charset "UTF-8";
/* CSS Document */html, 
html * {
 padding: 0;
 margin: 0 auto;
 box-sizing: border-box;
 max-width: 1300px;
}.iris-logo-wide {
 margin: 0 auto;
 max-width: 35em;}body {
 
 padding: 1em;
 height: 100em;
 background-image: url("https://s3.wasabisys.com/core/Model_G_@80.jpg");
 background-repeat: no-repeat;
  background-position: top;
 background-size: cover;
 
}.st0{
 fill:#000;
 stroke:#000;
 stroke-width:2;
 stroke-miterlimit:10;
}path{
 stroke:#000;
 fill: #000;
 stroke-dasharray:1800;
 opacity: 10;
 animation: animate 3s cubic-bezier(0,0.23,1,.1);
}@keyframes animate{
 0%{
  opacity:0;
  fill:none;
  stroke-dashoffset:1800;
 }
 
 30%{
  opacity:1;
  fill:none;
  stroke-dashoffset:1800;
 }
 
 90%{
  fill:rgba(0,0,0,0);
 }
 100%{
  opacity: 1;
  fill:rgba(0,0,0,0);
  stroke-dashoffset:0;
 }
}

Get Adobe Illustrator from here https://www.adobe.com/products/illustrator.html

從這里https://www.adobe.com/products/illustrator.html獲取Adobe Illustrator

That is it my friends, if you liked this article visit our Facebook page and our website IRIS WEB CORE.

就是我的朋友們，如果您喜歡這篇文章，請訪問我們的Facebook頁面和我們的網站IRIS WEB CORE 。

And as always have a great day!

一如既往的美好！

Find me on LinkedIn: https://www.linkedin.com/in/fabio-aleksiev-irsctx

在LinkedIn上找到我： https : //www.linkedin.com/in/fabio-aleksiev-irsctx