<svg viewBox="0 0 500 500">
  <rect x="501" stroke="#000000" width="500" height="500" />
  <rect y="-501" stroke="#000000" width="500" height="500" />
  <rect x="-501" stroke="#000000" width="500" height="500" />
  <text transform="matrix(1 0 0 1 250 380)">
    <tspan x="0" y="0" font-size="38.377">What is your</tspan>
    <tspan x="0" y="46.1" font-size="38.377">favorite animal ?</tspan>
  </text>
  <text transform="matrix(1 0 0 1 -250 260)" fill="#FFFFFF" font-size="38.377">Excellent choice !</text>
  <text transform="matrix(1 0 0 1 250 -260)" fill="#FFFFFF" font-size="38.377">I agree with you :)</text>
  <text transform="matrix(1 0 0 1 750 260)" fill="#FFFFFF" font-size="38.377">Free like a dragonfly !</text>
  <g vb="0 -500 500 500" class="choice">
    <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M203.3,56.3c0,0-29.9-16.2-35.8,11.9c-5.8,28.1,15,33.7,28.1,30.2c-5.8,15.5,12.7,35.3,47.2,35.3s62.6-12.3,54.3-41c18.8,5.2,37.8-0.7,36.3-25.6c-1.5-24.9-28.4-22.1-36.3-13.8c-8.4-23.8-15-34-45.6-33.2C220.8,20.8,206.1,37.5,203.3,56.3z"
    />
    <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M210.9,98.7c0,0,29.4,19.5,74.3-2.8" />
    <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M282.8,92.2c0,0,3.2,1.9,3.3,7.4" />
    <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M213.9,95.9c0,0-4.7,2.2-4.1,6.8" />
    <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M297.1,53.3c0,0,0.8,14.3-4.4,32.4" />
    <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M203.3,56.3c0,0-1.1,25.1,1.4,31.7" />
    <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M297.2,59.9c0,0,22.6-11,22.2,9.8c-0.3,20.8-24.7,18.5-24.7,18.5" />
    <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M202.3,61.6c0,0-22.7-14.1-27.7,11c-5.1,25.1,25.9,18.5,25.9,18.5" />
    <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M194.7,102.7c0,0,2.5-12.7,14.3-17.4c0.2-18.1,0-43.4,20.5-48.4C250,32,250,50.5,250,50.5c7.1-12.2,29.9-33,37.7,2c1.4,21.3-1.5,27.2-1.5,27.2s6.9,4.3,11,12.9" />
    <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M238.3,85c0,0,10.7-9,22,0" />
    <path d="M259.5,66.3c-3.6,0-6.4,2.9-6.4,6.4c0,3.5,2.9,6.4,6.4,6.4c3.5,0,6.4-2.9,6.4-6.4C265.9,69.2,263.1,66.3,259.5,66.3z M260.9,73.8c-1.5,0-2.7-1.2-2.7-2.7s1.2-2.7,2.7-2.7c1.5,0,2.7,1.2,2.7,2.7S262.4,73.8,260.9,73.8z" />
    <path d="M241.6,66.3c-3.5,0-6.4,2.9-6.4,6.4c0,3.5,2.9,6.4,6.4,6.4c3.5,0,6.4-2.9,6.4-6.4C248.1,69.2,245.2,66.3,241.6,66.3z M242.9,73.8c-1.5,0-2.7-1.2-2.7-2.7c0-1.5,1.2-2.7,2.7-2.7c1.5,0,2.7,1.2,2.7,2.7C245.6,72.6,244.4,73.8,242.9,73.8z" />
    <ellipse cx="245.2" cy="86.4" rx="2.3" ry="1.4" />
    <ellipse cx="253.5" cy="86.2" rx="2.8" ry="1.2" />
  </g>
  <g>
    <path fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M203.3-149.8c0,0-29.9-16.2-35.8,11.9c-5.8,28.1,15,33.7,28.1,30.2c-5.8,15.5,12.7,35.3,47.2,35.3s62.6-12.3,54.3-41c18.8,5.2,37.8-0.7,36.3-25.6c-1.5-24.9-28.4-22.1-36.3-13.8c-8.4-23.8-15-34-45.6-33.2C220.8-185.3,206.1-168.6,203.3-149.8z"
    />
    <path fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M210.9-107.5c0,0,29.4,19.5,74.3-2.8" />
    <path fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M282.8-113.9c0,0,3.2,1.9,3.3,7.4" />
    <path fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M213.9-110.3c0,0-4.7,2.2-4.1,6.8" />
    <path fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M297.1-152.9c0,0,0.8,14.3-4.4,32.4" />
    <path fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M203.3-149.8c0,0-1.1,25.1,1.4,31.7" />
    <path fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M297.2-146.2c0,0,22.6-11,22.2,9.8c-0.3,20.8-24.7,18.5-24.7,18.5" />
    <path fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M202.3-144.5c0,0-22.7-14.1-27.7,11c-5.1,25.1,25.9,18.5,25.9,18.5" />
    <path fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M194.7-103.4c0,0,2.5-12.7,14.3-17.4c0.2-18.1,0-43.4,20.5-48.4c20.5-4.9,20.5,13.5,20.5,13.5c7.1-12.2,29.9-33,37.7,2c1.4,21.3-1.5,27.2-1.5,27.2s6.9,4.3,11,12.9" />
    <path fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M238.3-121.1c0,0,10.7-9,22,0" />
    <path d="M259.5-139.8c-3.6,0-6.4,2.9-6.4,6.4c0,3.5,2.9,6.4,6.4,6.4c3.5,0,6.4-2.9,6.4-6.4C265.9-136.9,263.1-139.8,259.5-139.8z M260.9-132.3c-1.5,0-2.7-1.2-2.7-2.7s1.2-2.7,2.7-2.7c1.5,0,2.7,1.2,2.7,2.7S262.4-132.3,260.9-132.3z" />
    <path d="M241.6-139.8c-3.5,0-6.4,2.9-6.4,6.4c0,3.5,2.9,6.4,6.4,6.4c3.5,0,6.4-2.9,6.4-6.4C248.1-136.9,245.2-139.8,241.6-139.8z M242.9-132.3c-1.5,0-2.7-1.2-2.7-2.7c0-1.5,1.2-2.7,2.7-2.7c1.5,0,2.7,1.2,2.7,2.7C245.6-133.6,244.4-132.3,242.9-132.3z" />
    <ellipse cx="245.2" cy="-119.7" rx="2.3" ry="1.4" />
    <ellipse cx="253.5" cy="-119.9" rx="2.8" ry="1.2" />
  </g>
  <g vb="-500 0 500 500" class="choice">
    <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M70,190.3c0,0-17.2-15.9-1.7-19.5c3.8,8.5,11.5,13.4,11.5,13.4" />
    <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M104.7,189.3c0,0,10.6-0.3,15.6-10.3c1.9,6.8,1.5,18.9-7.5,22.9" />
    <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M65.5,195c0,0-5-2.8-10-6.2c-5-3.5-11.3,4.2-11.3,4.2s1.8,8.7,6.3,9c4.5,0.3,8-2.5,12.2-3.3" />
    <path d="M63.4,213.7c0,0,1.6-7.9,5.9-9.2s-1.5,8.3-1.9,9.2C67.1,214.6,63.4,213.7,63.4,213.7z" />
    <path d="M82,216c0,0,1.6-7.9,5.9-9.2s-1.5,8.3-1.9,9.2C85.7,216.9,82,216,82,216z" />
    <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M114.6,208.3c0,0,3.2-1.8,10.7-4.7c7.4-2.8,11.6,4.3,11.7,7.9c0.1,3.6-5.5,7.8-11.2,7c-5.7-0.8-8.3-5.8-10.4-5.9" />

    <ellipse transform="matrix(0.9708 0.2399 -0.2399 0.9708 63.1943 -9.6226)" fill="none" stroke="#000000" stroke-miterlimit="10" cx="71.1" cy="254.8" rx="51.7" ry="40.3" />
    <path d="M82.4,225.2l-4.7,10.9c0,0,12.1,5.7,15.3,1.4S82.4,225.2,82.4,225.2z" />
    <path d="M48.7,223.5l-3.6,9.3c0,0-12.2-1.3-8.6-6.8C40.2,220.5,48.7,223.5,48.7,223.5z" />
    <path d="M115.7,214.8c-1.7-13.4-6.7-27.2-21.6-31.2c-0.2-0.1-0.4-0.1-0.7-0.2C93.5,183.5,85.2,214,115.7,214.8z" />
    <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M53.8,215.1c0,0,14.1-38.7,40.3-31.6c26.2,7.2,21.8,44.4,22.5,56.9" />
    <path fill="none" stroke="#000000" stroke-miterlimit="10" d="M47.8,288.9c0,0,45.7,2.4,55.2-25.9" />
  </g>
  <g>
    <path fill="#FFFFFF" d="M-275.6,347.8c0,0,14.1-38.7,40.3-31.6c26.2,7.2,21.8,44.4,22.5,56.9" />
    <path fill="#FFFFFF" d="M-259.5,323c0,0-17.2-15.9-1.7-19.5c3.8,8.5,11.5,13.4,11.5,13.4" />
    <path fill="#FFFFFF" d="M-224.7,322c0,0,10.6-0.3,15.6-10.3c1.9,6.8,1.5,18.9-7.5,22.9" />
    <path fill="#FFFFFF" d="M-264,327.7c0,0-5-2.8-10-6.2c-5-3.5-11.3,4.2-11.3,4.2s1.8,8.7,6.3,9c4.5,0.3,8-2.5,12.2-3.3" />
    <path d="M-266,346.4c0,0,1.6-7.9,5.9-9.2s-1.5,8.3-1.9,9.2C-262.4,347.3-266,346.4-266,346.4z" />
    <path d="M-247.5,348.7c0,0,1.6-7.9,5.9-9.2s-1.5,8.3-1.9,9.2C-243.8,349.6-247.5,348.7-247.5,348.7z" />
    <path fill="#FFFFFF" d="M-214.9,341.1c0,0,3.2-1.8,10.7-4.7c7.4-2.8,11.6,4.3,11.7,7.9c0.1,3.6-5.5,7.8-11.2,7c-5.7-0.8-8.3-5.8-10.4-5.9" />

    <ellipse transform="matrix(0.9708 0.2399 -0.2399 0.9708 85.4169 73.3)" fill="#FFFFFF" stroke="#000000" cx="-258.4" cy="387.5" rx="51.7" ry="40.3" />
    <path d="M-247.1,358l-4.7,10.9c0,0,12.1,5.7,15.3,1.4S-247.1,358-247.1,358z" />
    <path d="M-280.8,356.2l-3.6,9.3c0,0-12.2-1.3-8.6-6.8C-289.3,353.3-280.8,356.2-280.8,356.2z" />
    <path d="M-213.8,347.5c-1.7-13.4-6.7-27.2-21.6-31.2c-0.2-0.1-0.4-0.1-0.7-0.2C-236,316.2-244.3,346.8-213.8,347.5z" />
    <path fill="#FFFFFF" stroke="#000000" d="M-281.7,421.6c0,0,45.7,2.4,55.2-25.9" />
  </g>
  <g vb="500 0 500 500" class="choice">
    <path fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M395.8,205.4c0,0,36.4,6.7,44.1,11.4c7.7,4.7,32.4,9.9,30.6,19.4c-1.8,9.5-43.1,0-56.6-7.8c-13.5-7.8-12.6-15.4-12.6-15.4L395.8,205.4z" />
    <path fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M386.5,205.4c0,0-50.7,6.5-64.8,16.6c-14.1,10.2-10.7,14.6-10,15.7c0.7,1.1,45.6,0,57.3-8.5c11.7-8.5,9.6-13.9,10.4-16.2c0.8-2.3,6.6-6.2,6.6-6.2L386.5,205.4z" />
    <path fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M392.1,295.8c0,0,7.7-13.5,0.5-54.5c-3.6-2.1-4.3,0-4.3,0S384.3,285.8,392.1,295.8z" />
    <path fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M386.5,209.7c0,0-6.3-5.3-0.5-9.7c5.8-4.4,14.7-0.2,13.3,5.5C397.9,211.1,386.5,209.7,386.5,209.7z" />
    <path fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M386,224c0,0-0.5,15.4,2.5,17.3s5.4-2.1,6-4.3c0.7-2.2,4.2-10.3,1.3-13.6C392.8,220.1,386,224,386,224z" />
    <circle fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" cx="387.5" cy="194.8" r="4.1" />
    <circle fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" cx="395.8" cy="194.8" r="4.1" />
    <path fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M395.8,202.8c0,0,21-8.7,34.6-7.4c13.6-5.1,38.3-10.6,45.5-7.7c7.1,2.9,4.8,11.1-6,15.9c-10.9,4.8-39.6,9.3-45.7,9.3c-6.2,0-11.7-1.6-20.3-4.1C395.2,206.4,395.8,202.8,395.8,202.8z" />
    <path fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M386,201.7c0,0-27.3-8.5-35-6.3c-10.3-4-43.3-12.1-48.2-5.8c-4.9,6.3,12.6,15,13.9,15.8c1.2,0.8,23.1,11.9,43,7s26.4-9.3,26.4-9.3V201.7z" />
    <path fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M389.8,207.5c0,0-7.8-2.5-6.5,8.8c1.3,11.3,2.5,9.6,5.5,9.9c3,0.3,13.3,0.6,10.6-9.5C396.7,206.7,389.8,207.5,389.8,207.5z" />
    <circle fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" cx="386.8" cy="192.5" r="1.3" />
    <circle fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" cx="395.4" cy="192.2" r="1.4" />
  </g>
  <g>
    <path fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M755.9,345.2c0,0,36.4,6.7,44.1,11.4c7.7,4.7,32.4,9.9,30.6,19.4c-1.8,9.5-43.1,0-56.6-7.8c-13.5-7.8-12.6-15.4-12.6-15.4L755.9,345.2z" />
    <path fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M746.6,345.2c0,0-50.7,6.5-64.8,16.6c-14.1,10.2-10.7,14.6-10,15.7c0.7,1.1,45.6,0,57.3-8.5c11.7-8.5,9.6-13.9,10.4-16.2c0.8-2.3,6.6-6.2,6.6-6.2L746.6,345.2z" />
    <path fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M752.2,435.6c0,0,7.7-13.5,0.5-54.5c-3.6-2.1-4.3,0-4.3,0S744.4,425.6,752.2,435.6z" />
    <path fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M746.6,349.4c0,0-6.3-5.3-0.5-9.7c5.8-4.4,14.7-0.2,13.3,5.5C758,350.8,746.6,349.4,746.6,349.4z" />
    <path fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M746,363.7c0,0-0.5,15.4,2.5,17.3s5.4-2.1,6-4.3c0.7-2.2,4.2-10.3,1.3-13.6C752.9,359.9,746,363.7,746,363.7z" />
    <circle fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" cx="747.6" cy="334.5" r="4.1" />
    <circle fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" cx="755.9" cy="334.5" r="4.1" />
    <path fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M755.9,342.6c0,0,21-8.7,34.6-7.4c13.6-5.1,38.3-10.6,45.5-7.7c7.1,2.9,4.8,11.1-6,15.9c-10.9,4.8-39.6,9.3-45.7,9.3c-6.2,0-11.7-1.6-20.3-4.1C755.2,346.1,755.9,342.6,755.9,342.6z" />
    <path fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M746,341.5c0,0-27.3-8.5-35-6.3c-10.3-4-43.3-12.1-48.2-5.8c-4.9,6.3,12.6,15,13.9,15.8c1.2,0.8,23.1,11.9,43,7s26.4-9.3,26.4-9.3V341.5z" />
    <path fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M749.9,347.2c0,0-7.8-2.5-6.5,8.8c1.3,11.3,2.5,9.6,5.5,9.9c3,0.3,13.3,0.6,10.6-9.5C756.8,346.4,749.9,347.2,749.9,347.2z" />
    <circle fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" cx="746.9" cy="332.3" r="1.3" />
    <circle fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" cx="755.4" cy="331.9" r="1.4" />
  </g>
</svg>
body {
  text-align: center;
  background: black;
  margin:0;
}

svg {
  background: white;
  border: 5px solid rebeccaPurple;
  width: 90vmin;
  height: 90vmin;
}

.choice {
  cursor: pointer;
  pointer-events: all;
  transition: .2s;
}

.choice:hover {
  opacity: .5;
}

tspan {
  font-family: arial, sans-serif;
}

text {
  text-anchor: middle;
}
var svg = document.querySelector("svg");
var choices = svg.querySelectorAll(".choice");
for (var i = 0; i < choices.length; i++) {
  choices[i].addEventListener("click", moveViewbox);
}
var viewBox = {
  x: 0,
  y: 0,
  width: 500,
  height: 500
};

function moveViewbox() {
  var newViewBox = this.getAttribute("vb").split(" ");
  TweenMax.to(viewBox, 2, {
    x: newViewBox[0],
    y: newViewBox[1],
    width: newViewBox[2],
    height: newViewBox[3],
    ease: Elastic.easeOut,
    onUpdate: function() {
      svg.setAttribute("viewBox", viewBox.x + " " + viewBox.y + " " + viewBox.width + " " + viewBox.height);
    }
  });
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js