Sample analysis using svg

This article mainly shows you the "sample analysis of using svg", which is easy to understand and clear. I hope it can help you solve your doubts. Let the editor lead you to study and learn the article "sample analysis of using svg".

1. Example 1

Css code html, body {width: 100%; height: 100%;} body {background: # 131518;} # patt1 path {stroke: # ff509e;} # patt2 path {stroke: # 95d13c;} # patt3 path {stroke: # 00b6cb;} # patt4 path {stroke: # 9753e1;} # mask1 rect {- webkit-animation: pulse 1.90476s infinite; animation: pulse 1.90476s infinite -webkit-animation-timing-function: cubic-bezier (0.445, 0.05,0.55,0.95); animation-timing-function: cubic-bezier (0.445, 0.05,0.55,0.95);} # mask2 rect {x: 10;-webkit-animation: pulse 1.90476s infinite 0.47619s; animation: pulse 1.90476s infinite 0.47619s;-webkit-animation-timing-function: cubic-bezier (0.445, 0.05,0.55,0.95) Animation-timing-function: cubic-bezier (0.445, 0.05,0.55,0.95);} # squiggle1, # squiggle2, # squiggle3, # squiggle4 {background-blend-mode: multiply;} @-webkit-keyframes pulse {0% {x: 10;} 50% {x:-20;} 100% {x:-50;} @ keyframes pulse {0% {x: 10;} } 100% {x:-50;}} html code example 2

Css code .st0 {fill:none;stroke:#000000;stroke-miterlimit:10;} .st1 {fill:#7100BF;stroke:#000000;stroke-miterlimit:10;} .box {width: 600pxposition height: 600px;} html code example 3

Css code .st0 {fill:#09E900;} .st1 {fill:#9C55FF;} .st2 {fill:#FF2A56;} .st3 {fill:#FFFE6A;} .st4 {fill:#2AFFF5;} # logo.animate # G1 path {animation:2s dong;} # logo.animate # G1 path#h {animation-delay:0.3s;} # logo.animate # G1 path#i {animation-delay:0.6s;} # logo.animate # G1 path#t {animation-delay:0.9s } # logo.animate # G1 path#u {animation-delay:1.2s;} @ keyframes dong {from {transform:scale;} to {transform:scale (1.1);}} html code js code var btn = document.querySelector ("# btn"); var logo = document.querySelector ("# logo"); var paths = document.querySelectorAll ("# G1 path"); btn.addEventListener ("click", function () {logo.classList.toggle ("animate");}); var count = 0 For (var I = 0, l = paths.length; I

< l;i++) {paths[i].addEventListener("webkitAnimationEnd",function(){count++;if(count>

5) {logo.classList.toggle ("animate"); count = 0;}})}; above is all the content of the article "sample Analysis using svg". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!