canvg playground

by LĂ©o Durand

HTML

<script src="https://canvg.github.io/canvg/rgbcolor.js"></script>
<script src="https://canvg.github.io/canvg/rgbcolor.js"></script>
<script src="https://canvg.github.io/canvg/StackBlur.js"></script>
<script src="https://canvg.github.io/canvg/canvg.js"></script>
  
    <button type="button" onclick = "document.getElementById('frame_svg').style.height = '80px';">Click Me!</button>
    <button type="button" onclick = "document.getElementById('frame_svg').style.height = '900px';">Click Me!</button>
    <canvas id="canvas" width="800px" height="600px"></canvas>

CSS

#frame_svg {
    position: fixed;
    left: 10vw; top: 40px;
    width: 80vw; height: 80px;
    transition: 2s ease;
}
.svg{
    fill:none;
    stroke:blue;
    stroke-width:10;
    vector-effect:non-scaling-stroke;
    stroke-linejoin:round;
    stroke-linecap:round;
     stroke-dasharray:14%;
     stroke-dashoffset:30%;
}

JavaScript

svg = '<svg id="frame_svg" viewBox="0 0 1367 490" preserveAspectRatio="none"><path class="svg" d="M335.6,164.2c-18.9-18.3-44.7-29.6-73.1-29.6c-58,0-105,47-105,105c0,58,47,105,105,105c31.9,0,60.5-14.2,79.7-36.7"/><line class="svg" x1="385.5" y1="134.6" x2="385.5" y2="344.6"/><polyline class="svg" points="445.5,344.5 445.5,134.5 605.5,344.5 605.5,134.5 	"/><polyline class="svg" points="769.9,134.5 665,134.5 665,226.7 748.9,226.7 665,226.7 665,344.6 769.9,344.6 	"/><polyline class="svg" points="816.3,344.6 816.5,134.3 909.4,289.3 1002.4,134.5 1002.4,344.3 	"/><polyline class="svg" points="1037.1,344.3 1125.4,134.5 1182.1,269 1068.8,269 1182.1,269 1214,344.3 	"/></svg>';

canvg(document.getElementById('canvas'), svg);