cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div id="wrap">
  <a id="button">click me</a>
  <div class="svg_wrap">
    <svg version="1.1" id="svg" x="0px" y="0px" width="200px" height="100px" viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <style type="text/css">

	.st0{fill:#4B4B4B;}

</style>
  <path class="animation" id="stroke" style="stroke: rgb(0, 0, 0); fill: none; stroke-width: 9;" d="M 12.371 35.052 L 23.711 10.052 L 10.309 62.887 L 34.02 13.402 L 18.299 82.99 L 44.587 19.072 L 29.381 81.959 L 55.412 23.711 L 38.917 83.763 L 67.01 19.072 L 52.319 80.155 L 81.185 12.629 L 63.144 83.763 C 63.144 83.763 89.433 16.237 89.69 16.495 C 89.947 16.753 78.608 82.474 78.608 82.474 L 101.288 16.495 L 87.628 85.825 L 112.886 17.526 L 94.845 95.361 C 94.845 95.361 126.546 13.66 126.546 13.918 C 126.546 14.176 112.113 80.928 112.113 80.928 C 112.113 80.928 135.309 21.134 135.567 21.392 C 135.825 21.65 123.711 84.278 123.711 84.278 L 153.092 11.598 L 131.701 95.876 L 164.175 13.144 L 149.484 90.722 L 174.742 20.361 L 164.69 85.567 L 188.144 19.845"/>
  <g style="" transform="matrix(-0.03142, 0, 0, -0.03142, 23.066561, 36.841389)">
    <g id="pen">
    <path class="st0" d="M162.291,156.616c-14.203,14.203-21.125,44.859-6.453,78.781c15.563,36,6.875,52.516-5.672,66.422&#10;&#9;&#9;C138.181,315.084,36.009,403.381,15.791,423.601c-20.219,20.219-20.219,53.016,0,73.234s53,20.219,73.219,0&#10;&#9;&#9;s107.719-119.75,121.781-134.375c12.984-13.531,30.422-21.25,66.438-5.672c33.906,14.656,64.578,7.75,78.766-6.469l19.375-19.359&#10;&#9;&#9;L181.65,137.241L162.291,156.616z M65.994,473.819c-7.5,7.5-19.688,7.5-27.203,0c-7.5-7.516-7.5-19.688,0-27.203&#10;&#9;&#9;c7.516-7.516,19.703-7.516,27.203,0C73.509,454.132,73.509,466.304,65.994,473.819z" style="fill: rgb(75, 75, 75);"/>
    <path class="st0" d="M498.119,151.506l-85.063-85.063c-1.063-1.078-2.688-1.328-4.031-0.641l-37.422,19.406&#10;&#9;&#9;c-1.328,0.703-2.953,0.438-4.016-0.625c-1.078-1.063-1.328-2.688-0.641-4.016l19.406-37.422c0.703-1.344,0.438-2.969-0.625-4.047&#10;&#9;&#9;l-25.859-25.859c-9.219-9.203-21.938-14-34.938-13.141c-11.016,0.719-21.313,5.438-29.016,13.141&#10;&#9;&#9;c-1.391,1.391-2.688,2.859-3.906,4.438l0,0l-88.688,115.5l174.859,174.875l115.516-88.703c1.563-1.203,3.047-2.5,4.422-3.891&#10;&#9;&#9;c7.719-7.719,12.438-18,13.156-29.031C512.135,173.444,507.338,160.725,498.119,151.506z M380.4,274.1L237.275,130.959&#10;&#9;&#9;l35.266-45.922c25.531,4.859,85,24.75,103.609,76.219c14.5,40.109,33.531,66.625,54.625,74.172L380.4,274.1z" style="fill: rgb(75, 75, 75);"/>
  </g>
  </g>
</svg>
  </div>
</div>

            
          
!
            
              #wrap {
  position:relative;
  width:200px;
  height:100px;
/*   margin: 0 auto; */
  
  display:flex;
  align-items:center;
  justify-content: center;
}
#button {
  padding:12px 20px;
  border:2px solid #fff;
  color: #fff;
  transition:all 0.5s ease;
  box-sizing: border-box;
  box-shadow: 0px 0px 0px 0px white;
}
#button.finish {
  box-shadow:  0px 0px 8px 1px white;
}
#button.finish:active {
  box-shadow:  0px 0px 10px 4px white;
}
.svg_wrap {
  width:200px;
  height:100px;
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
}
#stroke {
  stroke-opacity: 0;
}


            
          
!
            
              const pen = document.getElementById('pen');
const button = document.getElementById('button');
const wrap = document.getElementById('wrap');
const svg = document.getElementById('svg');
const path = document.getElementById('stroke');
const pathLength =  path.getTotalLength(); 
let strokeOffset = pathLength;
path.style.strokeDashoffset = pathLength;
path.style.strokeDasharray = pathLength + ' ' + pathLength;
let flug = false;
let nowPos = 0;

wrap.addEventListener("mouseover", function(){
  if(!flug) { path.style.strokeOpacity = 1;
    anime(); //// ループを実行
    flug = true;
  }
});



const anime = () => {

    if(nowPos > pathLength) {
      button.classList.add('finish');
      return;
    }
    const point =   path.getPointAtLength(nowPos); 
    pen.style.transform = `translate(${(-point.x+15) *33}px,${(-point.y+30)*34}px`;
    path.style.strokeDashoffset = strokeOffset;
    nowPos = nowPos + 5;
    strokeOffset = strokeOffset - 5;

    setTimeout(function() { anime(); }, 1);
}
            
          
!
999px
Loading ..................

Console