cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

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 class="container">
    <h3>Drawing segment between 100px and 200px in a 250px path</h3>
    <div class="code-data total">totalLength = 250</div>
    <svg width="750px" height="21px">
        <path id="pathA" d="M 0 5 L 750 5" stroke="#2980B9" stroke-width="10px"/>
        <path id="pathB" d="M 0 16 L 750 16" stroke="rgba(0,0,0,1)" stroke-width="10px"/>
        <path id="pathC" d="M 0 16 L 750 16" stroke="rgba(0,0,0,0.1)" stroke-width="10px"/>
        <path id="pathD" d="M 0 16 L 750 16" stroke="rgba(0,0,0,1)" stroke-width="10px"/>
        <path id="pathE" d="M 0 16 L 750 16" stroke="rgba(0,0,0,0.1)" stroke-width="10px"/>
    </svg>
    <div class="wrapper">
        <div class="code-data begin">100<br/>begin</div>
        <div class="code-data end">200<br/>end</div>
    </div>
    <div class="code-data align-left">
        <div>stroke-dasharray = "<span id="length1">totalLength</span>, <span id="begin">begin</span>, <span id="end">end - begin</span>"</div>
        <div>stroke-dashoffset = "<span id="length2">totalLength</span>"</div>
    </div>
</div>
            
          
!
            
              *{
  box-sizing: border-box;
}

.container{
  width: 750px;
  margin: 0 auto;
  text-align: center;
}

h3{
  color: rgba(0,0,0,0.7);
}

svg{
  position: relative;
  transform: translateX(0);
}

.code-data{
  font-family: monospace,monospace;
}

.total{
  width: 250px;
  margin: 10px auto 0;
  border-left: 1px solid rgba(0,0,0,0.1);
  border-right: 1px solid rgba(0,0,0,0.1);
  padding-bottom: 10px;
  color: #2980B9;
}

.wrapper{
  position: relative;
  width: 250px;
  margin: 0 auto;
  padding-top: 20px;
  &:before, &:after{
    position: absolute;
    content: "";
    top: -15px;
    width: 1px;
    height: 30px;
    background-color: rgba(0,0,0,0.1);
  }
  &:before{
    left: 100px;
  }
  &:after{
    left: 200px - 1;
  }
  div{
  }
  .begin{
    margin-left: -50px;
    color: #2980B9;
  }
  .end{
    margin-top: -38.5px;
    margin-right: -150px;
    color: #2980B9;
  }
}

.align-left{
  margin: 20px auto;
  text-align: left;
  padding: 5px 15px;
  color: rgba(0,0,0,0.7);
  background-color: rgba(0,0,0,0.05);
  div{
    margin: 5px 0;
  }
}

.current{
  color: #2980B9;
  border-bottom: 4px solid #2980B9;
  font-weight: bold;
}
            
          
!
            
              /**
 * segment - A little JavaScript class (without dependencies) to draw and animate SVG path strokes
 * @version v0.0.1
 * @link https://github.com/lmgonzalves/segment
 * @license MIT
 */
function Segment(t,e,n){this.path=t,this.length=t.getTotalLength(),this.path.style.strokeDashoffset=this.length,this.begin=e?this.valueOf(e):0,this.end=n?this.valueOf(n):this.length,this.timer=null,this.draw(this.begin,this.end)}Segment.prototype={draw:function(t,e,n,i){if(n){var s=i.hasOwnProperty("delay")?1e3*parseFloat(i.delay):0,a=i.hasOwnProperty("easing")?i.easing:null,r=i.hasOwnProperty("callback")?i.callback:null,h=this;if(this.stop(),s)return delete i.delay,this.timer=setTimeout(function(){h.draw(t,e,n,i)},s),this.timer;var l=new Date,o=1e3/60,f=this.begin,g=this.end,u=this.valueOf(t),d=this.valueOf(e);!function p(){var t=new Date,e=(t-l)/1e3,i=e/parseFloat(n),s=i;return"function"==typeof a&&(s=a(s)),i>1?(h.stop(),s=1):h.timer=setTimeout(p,o),h.begin=f+(u-f)*s,h.end=g+(d-g)*s,h.begin<0&&(h.begin=0),h.end>h.length&&(h.end=h.length),h.begin<h.end?h.draw(h.begin,h.end):h.draw(h.begin+(h.end-h.begin),h.end-(h.end-h.begin)),i>1&&"function"==typeof r?r.call(h.context):void 0}()}else this.path.style.strokeDasharray=this.strokeDasharray(t,e)},strokeDasharray:function(t,e){return this.begin=this.valueOf(t),this.end=this.valueOf(e),[this.length,this.begin,this.end-this.begin].join(" ")},valueOf:function(t){var e=parseFloat(t);if(("string"==typeof t||t instanceof String)&&~t.indexOf("%")){var n;~t.indexOf("+")?(n=t.split("+"),e=this.percent(n[0])+parseFloat(n[1])):~t.indexOf("-")?(n=t.split("-"),e=this.percent(n[0])-parseFloat(n[1])):e=this.percent(t)}return e},stop:function(){clearTimeout(this.timer),this.timer=null},percent:function(t){return parseFloat(t)/100*this.length}};


// DEMO
var pathA = document.getElementById('pathA'),
        pathB = document.getElementById('pathB'),
        pathC = document.getElementById('pathC'),
        pathD = document.getElementById('pathD'),
        pathE = document.getElementById('pathE'),
        segmentA = new Segment(pathA, 250, 500),
        segmentB = new Segment(pathB, 250, 250),
        segmentC = new Segment(pathC, 250, 250),
        segmentD = new Segment(pathD, 350, 350),
        segmentE = new Segment(pathE, 450, 450),
        length1 = document.getElementById('length1'),
        length2 = document.getElementById('length2'),
        begin = document.getElementById('begin'),
        end = document.getElementById('end');

    function a1() {
        length1.className = 'current';
        segmentB.draw(250, 500, 2, {delay: 2, callback: function(){ a2(); length1.className = ''; }});
    }
    function a2() {
        length2.className = 'current';
        segmentB.draw(0, 250, 2, {delay: 2, callback: function(){ a3(); length2.className = ''; }});
    }
    function a3() {
        begin.className = 'current';
        segmentC.draw(250, 350, 2, {delay: 2, callback: function(){ a4(); begin.className = ''; }});
    }
    function a4() {
        end.className = 'current';
        segmentD.draw(350, 450, 2, {delay: 2, callback: function(){ a5(); end.className = ''; }});
    }
    function a5() {
        length1.className = 'current';
        segmentE.draw(450, 700, 2, {delay: 2, callback: function(){ a6(); length1.className = ''; }});
    }
    function a6() {
        segmentB.draw(250, 250, 0.5, {delay: 3});
        segmentC.draw(250, 250, 0.5, {delay: 3});
        segmentD.draw(350, 350, 0.5, {delay: 3});
        segmentE.draw(450, 450, 0.5, {delay: 3, callback: function(){ a1(); }});
    }

    a1();
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console