SVG Anim - CINEMA

Activé par boutons

by Léo Durand

HTML

<form name="rangesSVG">
  <input type="range" id="widthInput" value="80" min="1" max="100" oninput="widthOutput.value = widthInput.value">
  <output id="widthOutput">80</output>
</form>



<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,105
		c31.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>

<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>

CSS

body{
  background:#0047ba;
}
#frame_svg {
  position: fixed;
  left: 10vw;
  top: 40px;
  width: 80vw;
  height: 80px;
  transition: 2s ease;
}

.svg {
  fill: none;
  stroke: white;
  stroke-width: 10;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 14%;
  stroke-dashoffset: 30%;
}

JavaScript

document.rangesSVG.widthInput.oninput = function() {
   value = document.rangesSVG.widthInput.value;
   document.rangesSVG.widthOutput.value = document.rangesSVG.widthInput.value;
   document.rangesSVG.widthOutput.value = document.getElementById("frame_svg").style.width = value + "vw";
 }