<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" width="300" height="300" viewBox="0 0 300 300">
  <path d="M 50 50 L 200 100 L 200 300 z" fill="none" stroke="#ddd" stroke-width="1"/><path id="triangle" d="M 50 50 L 200 100 L 200 300 z" fill="none" stroke="blue" stroke-width="5"/></svg>
body {
  margin: 20px auto;
  font-family: 'Lato';
  font-weight: 600;
  width: 600px;
  text-align: center;
}

.progress-text {
  font-size: 1.25em;
  color: black;
  margin-bottom: 1em;
  font-weight: 600;
}
var path = new ProgressBar.Path("#triangle", {
  duration: 6000,
  from: {
    color: "#ff0000",
    width: 2
  },
  to: {
    color: "#0099ff",
    width: 10
  },
  strokeWidth: 4,
  easing: "easeInOut",
  step: (state, shape) => {
    shape.path.setAttribute("stroke", state.color);
    shape.path.setAttribute("stroke-width", state.width);
  }
});

path.animate(1);

External CSS

  1. https://fonts.googleapis.com/css?family=Lato:300|600

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/progressbar.js/1.0.1/progressbar.min.js