SVG动画-使用间隙和线条勾勒动感形状

stroke-dasharray是动画技术中通常用来定义线条之间间隔和宽度的数组数据。这里用来建立一个SVG旋转图形动画。

svg,strokedasharray

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2625
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var s = "";
var ii = 1;
for(var i=95; i>10; i-=10) {
  var d = Math.PI*2*i;
  var f = parseInt(d*.1);
  var r1 = parseInt(Math.random()*200);
  s+='<circle id="væg-'+(ii++)+'" stroke="#8B572A" stroke-width="11" stroke-dasharray="1,'+f+','+r1+'" sketch:type="MSShapeGroup" cx="0" cy="0" r="'+i+'"><animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0" to="360" begin="0" dur="32s" repeatCount="indefinite" /></circle>\n';
}

$('#Page-1').html($('#Page-1').html()+s);

setInterval(function() {
      var w = 90;
  var cr = parseInt(Math.random()*255);
  var cg = parseInt(Math.random()*255);
  var cb = parseInt(Math.random()*255);
      var stroke = 'rgba('+cr+','+cg+','+cb+','+(Math.random()*.3+.7)+')';
  var fill = 'rgba('+(255-cr)+','+(255-cr)+','+(255-cr)+',.08)';
  $('h1').css({'color':stroke,'background-color':fill});
  $('circle').each(function() {
  var dp = "";
    for(var i=0; i<Math.random()*4; i++)  {
      dp+=(i===0 ? "" : ",")+parseInt(Math.random()*100)
    }
 var sw = Math.random()*(w/2);
    w-=sw;

$(this).attr({'stroke-width':sw+'px','stroke-dasharray': dp,'stroke':stroke,'r':90-w+'px','fill':fill});
  })
},3000)

编译

CSS

HTML

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <h1>Animated SVG stroke-dasharray</h1>
      <svg class="col-md-12" viewBox="0 0 220 213" version="1.1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" xmlns:sketch="https://www.bohemiancoding.com/sketch/ns">
          <title>labyrint 1</title>
          <description>Created with Sketch (https://www.bohemiancoding.com/sketch)</description>
          <defs></defs>
          <g transform="translate(100, 100)" id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
            <line x1="-100" y1="0" x2="100" y2="0" style="stroke: rgba(255,255,255,.5);"><animateTransform attributeType="xml" attributeName="transform" type="rotate" from="360" to="0" begin="0" dur="32s" repeatCount="indefinite" /></line>
            <line x1="0" y1="-100" x2="0" y2="100" style="stroke: rgba(255,255,255,.5);"><animateTransform attributeType="xml" attributeName="transform" type="rotate" from="360" to="0" begin="0" dur="32s" repeatCount="indefinite" /></line>
              <circle id="mur-1" stroke="#8B572A" stroke-dasharray="10,10,1000" sketch:type="MSShapeGroup" cx="0" cy="0" r="100"><animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0" to="360" begin="0" dur="32s" repeatCount="indefinite" /</circle>
              <circle id="mur-2" stroke="#8B572A" stroke-dasharray="40,10,2000" sketch:type="MSShapeGroup" cx="0" cy="0" r="90"><animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0" to="360" begin="0" dur="32s" repeatCount="indefinite" /></circle>
              <line x1="-100" y1="0" x2="100" y2="0" style="stroke: rgba(255,255,255,.5);"><animateTransform attributeType="xml" attributeName="transform" type="rotate" from="360" to="0" begin="0" dur="64s" repeatCount="indefinite" /></line>
            <line x1="0" y1="-100" x2="0" y2="100" style="stroke: rgba(255,255,255,.5);"><animateTransform attributeType="xml" attributeName="transform" type="rotate" from="360" to="0" begin="0" dur="64s" repeatCount="indefinite" /></line>
          </g>
      </svg>
    </div>
 </div>
</div>

stroke-dasharray是动画技术中通常用来定义线条之间间隔和宽度的数组数据。这里用来建立一个SVG旋转图形动画。

svg,strokedasharray

编辑器支持Emmet

快捷键

stroke-dasharray是动画技术中通常用来定义线条之间间隔和宽度的数组数据。这里用来建立一个SVG旋转图形动画。

svg,strokedasharray

使用Vue和GSAP实现的柱状图动画图表

使用Anime.js和SVG实现的Mozilla混合图标变形动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：