D3 Examples - my website front svg

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  
    .svg-class {
      fill:none; 
      stroke: #000; 
      stroke-width:4px
    }
    .path1 {
      stroke-dashoffset:200;
      stroke-dasharray:10;
      -webkit-animation: draw 3s linear infinite;
      -moz-animation: draw 3s linear infinite;
      animation: draw 3s linear infinite;
      fill-opacity: 0;
    }
    
    .path {
      stroke-dashoffset:200;
      stroke-dasharray:10;
      fill-opacity: 0;
    }
    
    .path2 {
      -webkit-animation: draw 6s linear infinite;
      -moz-animation: draw 6s linear infinite;
      animation: draw 6s linear infinite;
    }
    
    .path3 {
      -webkit-animation: draw 10s linear infinite;
      -moz-animation: draw 10s linear infinite;
      animation: draw 10s linear infinite;
    }
    
    .path4 {
      -webkit-animation: draw 14s linear infinite;
      -moz-animation: draw 14s linear infinite;
      animation: draw 14s linear infinite;
    }
    
    @-webkit-keyframes draw {
      30%{stroke-dashoffset:0; fill-opacity: 0;}
      50%{fill-opacity:1;}  
      100%{stroke-dashoffset:0; fill-opacity:1;}    
    }
  </style>
</head>
​
<body>
  <svg width="500px" height="500px">
    <circle class="svg-class path path1" cx="152" cy="152" r="110" />
   
     <polygon class="svg-class path path2" points="270 150, 150 300, 380 300" />
    
     <polygon class="svg-class path path3" 
              points="100 140,0 200,40 350,170 350,200 200" />
    
    <rect x="30" y="80" class=" svg-class path path4" width="300" height="100" />
  </svg>
</body>
​
    