Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div id="app">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1680 1050" id="solo-poster">
    <defs>
      <mask id="mask--bg-highlight">
        <image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/106403/solo-poster--bg-highlight-mask.jpg" width="1680" height="1050"/>
      </mask>
      
      <mask id="mask--sun-flare">
        <image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/106403/solo-poster--sun-flare--mask.jpg" width="1123" height="420" x="0" y="350" class="sun"/>
      </mask>

      <filter id="blur" x="-40%" y="-40%" width="180%" height="180%">
        <feGaussianBlur in="SourceGraphic" stdDeviation="20" />
      </filter>
    </defs>
    
    <image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/106403/solo-poster--bg.jpg" width="1680" height="1050" x="0" y="0"/>
    
    <rect mask="url(#mask--bg-highlight)" id="bg-highlight" width="1680" height="1050" fill="#fffed6" />
    
    <circle filter="url(#blur)" cx="485" cy="560" r="60" fill="white" class="sun"/> 
    <image mask="url(#mask--sun-flare)" xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/106403/solo-poster--sun-flare.jpg" x="0" y="350" class="sun" id="sun-flare"/>
  </svg>
  
  <transition-group name="transition--names-" id="names">
    <svg id="name--solo" v-if="focusedCharacter == 'solo' || hoveredCharacter == 'solo'" key="solo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 857.9 332.5">
      <path id="XMLID_37_" class="st0" d="M198.9 153.8L120.5 166c-4 .6-5.6 3.2-4.9 7.8.1.5 12.1 8.8 36.2 24.9 11.7 7.7 18.7 19.2 21 34.4 3 19.2-2.3 37.1-15.7 53.8-12.8 16.2-28.3 25.6-46.4 28.5L0 332.5 1 265l73-11.3c4-.6 5.6-3.3 4.8-8-.1-.4-11.4-7.9-33.9-22.5-9.7-6.4-15.6-16.4-17.7-30.2-3.1-20.3 1.5-39.5 13.9-57.6 12.5-18.2 28.3-28.8 47.5-31.8l111.1-17.2-.8 67.4z"/>
      <path id="XMLID_40_" class="st0" d="M427.8 140.9c5.1 32.7-4.4 63.7-28.5 92.8-23.3 28.2-51.4 44.9-84.5 50-26.2 4.1-49.5-.6-69.9-13.9-21.6-13.7-34.3-33.4-38.3-59.2-5.1-32.7 4.4-63.7 28.5-93 23.3-28.1 51.5-44.7 84.5-49.8 26.2-4.1 49.5.6 69.9 13.9 21.6 13.7 34.4 33.4 38.3 59.2zm-70.2 22.5c-1.5-9.4-6.1-16.8-13.8-22.1-7.7-5.4-16.3-7.4-25.8-5.9-12 1.9-22.3 8.2-30.8 19.1-8.6 10.8-12 22.1-10.2 34 1.5 9.4 6 16.8 13.7 22.1 7.5 5.2 16.2 7.1 25.9 5.6 11.9-1.8 22.2-8.2 30.8-18.9 8.5-11.1 11.9-22.3 10.2-33.9z"/>
      <path id="XMLID_43_" class="st0" d="M630.4 234.9l-184.9 28.6L447.7 48l74.1-11.5-1.7 148.1 111.1-17.2-.8 67.5z"/>
      <path id="XMLID_64_" class="st0" d="M856.6 74.5c5.1 32.7-4.4 63.7-28.5 92.8-23.3 28.2-51.4 44.9-84.5 50-26.2 4.1-49.5-.6-69.9-13.9-21.6-13.7-34.3-33.4-38.3-59.2-5.1-32.7 4.4-63.7 28.5-93 23.3-28.1 51.5-44.7 84.5-49.8 26.2-4.1 49.5.6 69.9 13.9 21.5 13.7 34.3 33.4 38.3 59.2zM786.3 97c-1.5-9.4-6.1-16.8-13.8-22.1-7.7-5.4-16.3-7.4-25.8-5.9-12 1.9-22.3 8.2-30.8 19.1-8.6 10.8-12 22.1-10.2 34 1.5 9.4 6 16.8 13.7 22.1 7.5 5.2 16.2 7.1 25.9 5.6 11.9-1.8 22.2-8.2 30.8-18.9 8.5-11.1 12-22.3 10.2-33.9z"/>
    </svg>
    
    <svg id="name--qira" v-if="focusedCharacter == 'qira' || hoveredCharacter == 'qira'" key="qira" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 840.3 322.8">
      <path id="XMLID_95_" class="st0" d="M221.2 303.4L104 321.6c-24.6 3.8-46.6-1-66-14.5C17.6 293 5.4 273.2 1.4 247.6-3.7 214.9 5 184 27.4 155c21.7-27.8 48-44.2 79.1-49 24.6-3.8 46.6 1 66 14.5 20.5 14.1 32.7 33.9 36.6 59.6 3 19.4.8 39-6.6 58.9l19.7-3-1 67.4zm-78.1-101.6c-1.5-9.4-5.9-16.8-13.2-22.2-7.3-5.5-15.4-7.5-24.4-6.1-11.3 1.7-20.9 8-28.8 18.8-8 10.7-11.1 22-9.3 33.8 1.5 9.4 5.8 16.8 13.1 22.2 7.1 5.3 15.3 7.2 24.5 5.8 11.2-1.7 20.8-7.9 28.8-18.6 8-10.9 11.1-22.1 9.3-33.7z"/>
      <path id="XMLID_98_" class="st0" d="M311.2 289.5l-73.8 11.4 2.3-215.5 74.1-11.5-2.6 215.6z"/>
      <path id="XMLID_100_" class="st0" d="M376.7 86.7c1.5 9.4-1.4 21.7-8.5 36.8-7.5 15.5-15.4 24.2-23.6 26.4l7.5-28.1c-5.9.9-11.1-.4-15.7-4s-7.4-8.5-8.3-14.6c-1.2-7.7.8-15.2 5.8-22.5 5.3-7.3 11.5-11.6 18.8-12.7 5.9-.9 11.1.4 15.7 4 4.5 3.5 7.3 8.5 8.3 14.7z"/>
      <path id="XMLID_102_" class="st0" d="M599.2 90.7c2.6 16.6-.4 33.1-9 49.3-8.1 15.5-19.2 27.4-33.5 35.6 3 5.2 7.3 7.4 12.9 6.5l42-6.5-1 67.5-64.1 9.9c-16.6 2.6-33-3.9-49.1-19.4l-34.1-32.4-.9 64.8-73.8 11.4L391 62l140.8-21.8c16.1-2.5 30.7 1.1 43.7 10.7 13.2 9.6 21.1 22.9 23.7 39.8zm-73.5 23.2c-.6-3.7-2.2-6.7-5-8.9-2.8-2.3-5.9-3.1-9.4-2.6l-47 7.3-.3 32.4 47-7.3c4.2-.7 7.9-3.1 11-7.4 3.2-4.4 4.5-8.9 3.7-13.5z"/>
      <path id="XMLID_105_" class="st0" d="M763.7 219.4l-6-26-56.3 8.7-6.8 28-76.4 11.8 54.1-223.6L790.9 0l49.3 207.5-76.5 11.9zm-33-138.3L715 146.3l30.1-4.7-14.4-60.5z"/>
    </svg>
    
    <svg id="name--chewie" v-if="focusedCharacter == 'chewie' || hoveredCharacter == 'chewie'" key="chewie" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1255.7 394.8">
      <path id="XMLID_82_" class="st0" d="M185.8 233l-80.3 12.4c-11.3 1.7-20.9 8-28.8 18.8-8 10.7-11.1 22-9.3 33.8 1.5 9.4 5.8 16.8 13.1 22.2 7.1 5.3 15.3 7.2 24.5 5.8l80.2-12.4-1 67.5-80.2 12.5c-24.6 3.8-46.6-1-66-14.5-20.5-14.1-32.7-34-36.7-59.7-5-32.5 3.6-63.3 26-92.3 21.7-27.8 48-44.2 79.1-49l80.3-12.4-.9 67.3z"/>
      <path id="XMLID_84_" class="st0" d="M415.8 345.3l-74.1 11.5.9-79.4-61.8 9.6-.9 79.4-73.8 11.4 2.3-215.5 74.1-11.5-.9 79.4 61.8-9.6.9-79.4 74.1-11.5-2.6 215.6z"/>
      <path id="XMLID_86_" class="st0" d="M638.9 162.9L515.4 182l.1 12 74.1-11.5-.8 56.7-74.1 11.5.1 12 123.6-19.1-1 67.5L440 341.5l2.3-215.5 197.5-30.6-.9 67.5z"/>
      <path id="XMLID_88_" class="st0" d="M900.5 270.2l-83.9 13-16.2-69.4-18.4 74.8-83.9 13L648.7 94l76.5-11.9 16.2 69.2 18.4-74.6 83.9-13 16.3 69.2 18.2-74.5 76.6-11.9-54.3 223.7z"/>
      <path id="XMLID_90_" class="st0" d="M1037.7 249l-73.8 11.4 2.3-215.5 74.1-11.5-2.6 215.6z"/>
      <path id="XMLID_92_" class="st0" d="M1254.8 67.5l-123.4 19.1.1 12 74.1-11.5-.8 56.7-74.1 11.5.1 12 123.6-19.1-1 67.5-197.4 30.6 2.3-215.5L1255.7 0l-.9 67.5z"/>
    </svg>
    
    <svg id="name--lando" v-if="focusedCharacter == 'lando' || hoveredCharacter == 'lando'" key="lando" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1084.8 368.4">
      <path id="XMLID_68_" class="st0" d="M184.9 339.7L0 368.4l2.3-215.5 74.1-11.5-1.7 148.1 111.1-17.2-.9 67.4z"/>
      <path id="XMLID_70_" class="st0" d="M338 316l-6-26-56.3 8.7-6.8 28-76.4 11.8L246.7 115l118.5-18.4 49.3 207.5L338 316zm-33-138.3l-15.7 65.2 30.1-4.7-14.4-60.5z"/>
      <path id="XMLID_73_" class="st0" d="M636.9 269.7l-74.1 11.5c-.1-6.3-.6-12.6-1.6-18.8-3-19.3-9-34.9-17.9-46.7-10.7-14.5-24.5-20.9-41.2-19.2l-1.1 94.3-73.8 11.4 2.3-215.5 1-.2c27.1-4.2 51.6-3.1 73.6 3.4 26.3 7.5 46.4 21.8 60.3 43l1-67.3 74.1-11.5-2.6 215.6z"/>
      <path id="XMLID_75_" class="st0" d="M865 109.2c5.1 32.6-3.6 63.4-26 92.3-21.7 27.9-48 44.3-79.1 49.1l-104.8 16.2 2.3-215.5L762.3 35c24.6-3.8 46.6 1 66 14.5 20.5 14.2 32.7 34.1 36.7 59.7zm-66.1 21.4c-1.4-9.3-5.8-16.7-13.2-22-7.3-5.4-15.4-7.4-24.3-6l-35.7 5.5-.7 80.7 35.9-5.6c11.2-1.7 20.8-7.9 28.8-18.6 8-10.9 11-22.3 9.2-34z"/>
      <path id="XMLID_78_" class="st0" d="M1083.4 75.2c5.1 32.7-3.6 63.6-26 92.5-21.7 27.9-48 44.3-79.1 49.1-24.6 3.8-46.6-1-66-14.5-20.4-13.9-32.6-33.7-36.6-59.4-5.1-32.7 3.6-63.6 26-92.6 21.7-27.8 48-44.2 79.1-49 24.6-3.8 46.6 1 66 14.5 20.4 13.9 32.6 33.7 36.6 59.4zm-66 21.8c-1.5-9.4-5.9-16.8-13.2-22.2-7.3-5.5-15.4-7.5-24.4-6.1-11.3 1.7-20.9 8-28.8 18.8-8 10.7-11.1 22-9.3 33.8 1.5 9.4 5.8 16.8 13.1 22.2 7.1 5.3 15.3 7.2 24.5 5.8 11.2-1.7 20.8-7.9 28.8-18.6 8-10.9 11.1-22.1 9.3-33.7z"/>
    </svg>
    
    <svg id="name--becket" v-if="focusedCharacter == 'beckett' || hoveredCharacter == 'beckett'" key="beckett" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1441.7 437.7">
      <path id="XMLID_51_" class="st0" d="M198.4 245.2c2.7 17.3-1.3 33.9-11.9 49.8 13 7.7 20.8 19.7 23.4 36.3 3.2 20.6-2.8 39.4-18.1 56.2-14.2 15.9-31.3 25.3-51.3 28.4L0 437.7l2.3-215.5 128.4-19.9c15.6-2.4 29.8 0 42.6 7.3 14.3 8 22.7 19.9 25.1 35.6zm-62.2 99c-.6-3.7-2.2-6.7-5-8.9-2.8-2.3-5.9-3.1-9.4-2.6l-51.8 8-.3 32.4 51.8-8c4.4-.7 8.1-3.2 11.1-7.6 3.1-4.4 4.3-8.9 3.6-13.3zm-1.4-75.1c-.3-1.8-.9-3.5-1.8-5.1-.9-1.5-2.1-2.8-3.4-3.8-1.3-1-2.8-1.7-4.4-2.2-1.6-.5-3.3-.6-5-.3l-49.5 7.7-.3 32.4 49.5-7.7c4.4-.7 8.1-3.2 11.1-7.6 3.2-4.5 4.5-8.9 3.8-13.4z"/>
      <path id="XMLID_55_" class="st0" d="M424.8 224.8L301.4 244l.1 12 74.1-11.5-.8 56.7-74.1 11.5.1 12 123.6-19.1-1 67.5L226 403.7l2.3-215.5 197.5-30.6-1 67.2z"/>
      <path id="XMLID_57_" class="st0" d="M616 195.2l-80.3 12.4c-11.3 1.7-20.9 8-28.8 18.8-8 10.7-11.1 22-9.3 33.8 1.5 9.4 5.8 16.8 13.1 22.2 7.1 5.3 15.3 7.2 24.5 5.8l80.2-12.4-1 67.5-80.2 12.4c-24.6 3.8-46.6-1-66-14.5-20.5-14.1-32.7-34-36.7-59.7-5-32.5 3.6-63.3 26-92.3 21.7-27.8 48-44.2 79.1-49l80.3-12.4-.9 67.4z"/>
      <path id="XMLID_59_" class="st0" d="M769.3 216.6l29.3 27.8c2 1.8 6 2.2 12.1 1.3l30.4-4.7-1 67.5-51.8 8c-16.6 2.6-33-3.9-49.1-19.4l-34.1-32.4-.9 64.8-73.8 11.4 2.3-215.5 74.1-11.5-.9 70.6 46.4-77.6 90.4-14-73.4 123.7z"/>
      <path id="XMLID_61_" class="st0" d="M1053.2 127.5l-123.4 19.1.1 12 74.1-11.5-.8 56.7-74.2 11.5.1 12 123.6-19.1-1 67.5-197.4 30.6 2.3-215.5L1054.2 60l-1 67.5z"/>
      <path id="XMLID_35_" class="st0" d="M1067.5 58l-.9 67.4 67.8-10.5-1.5 148.1 74.1-11.5 1.5-148.1 90.1-13.9-1.5 148.1 74.1-11.5 1.5-148.1 68-10.5 1-67.5z"/>
    </svg>
    
    <svg id="name--l3-37" v-if="focusedCharacter == 'l3-37' || hoveredCharacter == 'l3-37'" key="l3-37" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 908.8 355.3">
      <path id="XMLID_36_" class="st0" d="M378.9 188.9c10.7-16.9 14.6-34.7 11.7-53.4-2.4-15.7-9.3-28-20.6-36.8-11.3-8.9-24.4-12.1-39.2-9.8l-135.8 21-.8 61.9 123.4-19.1c4.1-.6 6.6 1.5 7.4 6.4.4 2.7-.2 5.1-1.7 7.3s-3.5 3.5-5.8 3.8l-74.1 11.5-.7 56.7 74.1-11.5c4.1-.6 6.5 1.5 7.2 6.3.4 2.5-.2 4.8-1.6 7.1-1.5 2.3-3.4 3.6-5.7 4L74.8 281.2l1.7-152.9-74.2 11.4L0 355.3l328.2-50.8c19.1-3 34.9-13.4 47.4-31.5 12.6-18.1 17.3-37.5 14.1-58-1.5-10-5.1-18.7-10.8-26.1z"/>
      <path id="XMLID_44_" class="st0" d="M508.5 189.7L409.7 205l.4-40.4 98.8-15.3-.4 40.4z"/>
      <path id="XMLID_46_" class="st0" d="M686.1 90.5c2.9 18.7-1 36.5-11.7 53.4 5.7 7.4 9.3 16.1 10.9 26.1 3.2 20.5-1.5 39.9-14.1 58-12.5 18-28.3 28.5-47.4 31.5l-135.6 21 .8-62.1 123.3-19.1c2.3-.4 4.2-1.7 5.7-4s2-4.6 1.6-7.1c-.7-4.8-3.1-6.9-7.2-6.3l-74.1 11.5.7-56.7 74.1-11.5c2.3-.4 4.2-1.6 5.8-3.8 1.5-2.2 2.1-4.6 1.7-7.3-.8-4.9-3.2-7.1-7.4-6.4l-123.4 19.1.8-61.9 135.8-21c14.8-2.3 27.9 1 39.2 9.8 11.2 8.8 18 21.1 20.5 36.8z"/>
      <path id="XMLID_48_" class="st0" d="M775.4 235.8L696.5 248l94.9-168-93.3 14.5.8-61.9L908.8 0 775.4 235.8z"/>
    </svg>
  </transition-group>
  
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1680 1050" id="characters">
    <defs>
      <mask id="mask--characters-clouds">
        <image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/106403/solo-poster--charactes-cloud-mask.jpg" width="1680" height="1050"/>
      </mask>
      
      <mask id="mask--solo">
        <image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/106403/solo-poster--solo-mask.jpg" width="514" height="1286"/>
      </mask>
      
      <mask id="mask--qira">
        <image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/106403/solo-poster--qira-mask.jpg" width="396" height="1299"/>
      </mask>
      
      <mask id="mask--chewie">
        <image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/106403/solo-poster--chewie-mask.jpg" width="741" height="1407"/>
      </mask>
      
      <mask id="mask--beckett">
        <image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/106403/solo-poster--beckett-mask.jpg" width="493" height="1333"/>
      </mask>
      
      <mask id="mask--l3-37">
        <image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/106403/solo-poster--l3-37-mask.jpg" width="529" height="1301"/>
      </mask>
      
      <mask id="mask--lando">
        <image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/106403/solo-poster--lando-mask.jpg" width="732" height="1412"/>
      </mask>
    </defs>
    
    <g mask="url(#mask--characters-clouds)" :class="{'characters-unfocused' : focusedCharacter == null}">
      <linearGradient id="gradient--sun-ambience" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="100%" y2="0%" gradientTransform="rotate(-45, 1050, 0)">
        <stop offset="0%" stop-color="#fffed6" stop-opacity=".2"/>
        <stop offset="75%" stop-color="#fffed6" stop-opacity="0"/>
      </linearGradient>
      
      <rect width="1680" height="1050" fill="url(#gradient--sun-ambience)" />
      
      <linearGradient id="gradient--sun-ambience-fluctuating" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="100%" y2="0%" gradientTransform="rotate(-45, 1050, 0)">
        <stop offset="0%" stop-color="#fffed6" stop-opacity=".4"/>
        <stop offset="75%" stop-color="#fffed6" stop-opacity="0"/>
      </linearGradient>
      
      <transition-group name="transition-character-" tag="g">
        <g v-if="focusedCharacter == null || focusedCharacter == 'l3-37'" key="l3-37" class="character l3-37" mask="url(#mask--l3-37)">
          <image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/106403/solo-poster--l3-37.jpg" x="0" y="0" width="529" height="1301"/>
        </g>
        
        <g v-if="focusedCharacter == null || focusedCharacter == 'beckett'" key="beckett" class="character beckett" mask="url(#mask--beckett)">
          <image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/106403/solo-poster--beckett.jpg" x="0" y="0" width="493" height="1333"/>
          <image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/106403/solo-poster--beckett-face.jpg" x="0" y="0" width="224" height="227"/>
        </g>
        
        <g v-if="focusedCharacter == null || focusedCharacter == 'solo'" key="solo" class="character solo" mask="url(#mask--solo)">
          <image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/106403/solo-poster--solo-body.jpg" x="0" y="0" width="514" height="1286"/>
          <image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/106403/solo-poster--solo-face.jpg" x="0" y="0" width="514" height="350"/>
        </g>
        
        <g v-if="focusedCharacter == null || focusedCharacter == 'chewie'" key="chewie" class="character chewie" mask="url(#mask--chewie)">
          <image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/106403/solo-poster--chewie.jpg" x="0" y="0" width="741" height="1407"/>
        </g>
        
        <g v-if="focusedCharacter == null || focusedCharacter == 'lando'" key="lando" class="character lando" mask="url(#mask--lando)">
          <image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/106403/solo-poster--lando.jpg" x="0" y="0" width="732" height="1412"/>
          <image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/106403/solo-poster--lando-face.jpg" x="318" y="0" width="166" height="223"/>
        </g>
        
        <g v-if="focusedCharacter == null || focusedCharacter == 'qira'" key="qira" class="character qira" mask="url(#mask--qira)">
          <image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/106403/solo-poster--qira-body.jpg"  x="0" y="0" width="396" height="1299"/>
          <image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/106403/solo-poster--qira-face.jpg" x="0" y="0" width="396" height="323"/>
        </g>
      </transition-group>
      
      <rect width="1680" height="1050" fill="url(#gradient--sun-ambience-fluctuating)" id="sun-ambience-fluctuating" />
    </g>
  </svg>
  
  <svg id="character-click-paths" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1680 1050" id="characters">
    
    <g mask="url(#mask--characters-clouds)" :class="{'characters-unfocused' : focusedCharacter == null}">
      <!-- spacer for firefox and probably others... -->
      <rect width="1680" height="1050" fill="transparent" />
      
      <path v-if="focusedCharacter == null || focusedCharacter == 'l3-37'" @click="focus('l3-37')" @mouseover="hover('l3-37')" @mouseleave="blur('l3-37')" class="l3-37 character-click-el" width="529" height="1301" fill="
  transparent" d="M255.84 409.7c-14.9 6.34-54.25-9.3-55.73-10.53-11.86-9.95-154.6-118.89-156.76-119.03-7.15-.47-6.45-34.54-8.53-35.84-8.54-5.3-18.36-7.37-27.45-11.24-4.11-1.74 2.85-25.92 4.48-25.92 5.2-.02 58.22 15.88 63.38 12.08 1.96-1.44 35.98 21.7 35.26 26.37-.28 1.8 91.88 74.75 105.28 84.55 1.79 1.31 7.5-1.4 7.78-3.51 1.83-14.35.9-28.53-2.16-42.65-1.43-6.62 11.23-105.38 103.57-91.18 1.89.3-5.13-21.11-9.92-28.65-1.58-2.49-26.96-.98-36.94-1.73-4.32-.33-36.84-30.13-45.1-31.43-9.34-1.48-16.37-9.34-17.69-18.65-.92-6.5 19.1-26.38 19.28-27.18 5.63-24.76 23.8-38.84 43.83-51.24 5.85-3.62 1.3-23.68 7.94-27.47l.87-.5c11.8-6.27 14.35-5.57 20.88 5.77 4.58 7.96 71.32.5 99.2 10.82 10.29 3.81 47.28 35.9 52.22 40.85 3.33 3.33-10.25 64.22-17.45 74.18-4.16 5.75-37.43-7.76-38.8-8.46-6.27-3.18-17.14 27.58-19.1 30.21-2.9 3.92 46.4 16.26 48.63 22.57 1.32 3.72 27.18 35.23 26.62 40.74-.96 9.42 8.51 90.42 13.86 102.87 1.15 2.68 46.23 15.52 50.28 24.34 7.05 15.38 6.69 31.07 2.86 46.92-4.19 17.32-64.28 135-63.57 145.4 1.3 19.1 11.61 694.55 12.26 702.1.28 3.28-16.96 39.71-23.04 43.74-13.24 8.76-75.81 12.3-91.96 12.87-8.33.29-32.18-38.46-33.89-43.3-.54-1.52 35.64-72.13 37.5-83.08.49-2.9-7.03-174.02-8.03-197.64-.19-4.36-13.84-285.36-14.01-311.02-.02-2.6-52.1 152.72-57.41 172.84-4.72 17.85-13.3 440-15.98 443.52-2.93 3.88-67.63 5.17-69.37 2.73-3.33-4.67-32.73-36.02-32.32-53.32.03-1.48-9.37-369.02-10.16-372.06-1.94-7.41 91.28-364.72 92.9-376.76.25-1.84-13.77-14.34-21-17.54-3.2-1.41-4.88-25.38-5.35-28.74-.85-6.06 29.87-23.16 32.84-26.8z"/>

      <path v-if="focusedCharacter == null || focusedCharacter == 'beckett'" @click="focus('beckett')" @mouseover="hover('beckett')" @mouseleave="blur('beckett')" width="493" height="1333" class="beckett character-click-el" fill="
  transparent" d="M138.07 7.83c48.84-.24 96.03 32.9 79.53 119.89 30 31.5 39.01 34.44 73.51 58.44s91.5 11.97 133.5 98.97 120 79.7 0 273.19L488.56 998H384l6.12 301.05-64.5 33.78-97.5-18.78 75-61.5-28.5-271.48-46.5-7.5 3 266.99-164.99 51-16.5-40.5 85.5-60 4.5-187.5-104.99 30V780.09L0 657.08 55.64 258.1l69-64.5s-69-88.49-61.5-116.99C75.64 29.1 94.5 8.05 138.07 7.83z"/>

      <path v-if="focusedCharacter == null || focusedCharacter == 'solo'" @click="focus('solo')" @mouseover="hover('solo')" @mouseleave="blur('solo')" width="514" height="1286" class="solo character-click-el" fill="
  transparent" d="M252 1287c-22.52 0-125.25-6.78-120.07-43.54 3.61-25.56 10.41-92.47 13.15-99.83 3.38-9.1 39.56-149.5 45.59-176.83 9.25-41.91 28.48-137 18.84-133-13.68 5.67-23.17-6.63-25.67-18.41-3.2-15.1-27.7-64.96-36.21-77.66-13.63-20.33-46.3-31.98-32.35-63.12 4.8-10.73 22.36-14.45 25.25-23.24 3.31-10.05-45.9-99.28-20-114.16 10.88-6.25 12.07-27.27 15.14-37.1 6.6-21.17 17.57-36.56 28.77-55.18 12.01-20 22.63-63.83 8.6-85.47-7.57-11.66-21.52-11.04-32.72-16.74-16.5-8.4-27.79-23.98-35.73-40.2-8.36-17.07.47-24.52-.06-40.81-.37-11.34-13.18-14.96-15.24-25.75-5.6-29.19-9.46-57-15.63-85.3-2.23-5.94 3.44-28.18 5.42-33.7-2.55-18.37-17.97-13.36-32.42-22.04-15.28-9.17-72.99-33.7-31.76-54.94 12.2-6.28 20.35 5.8 29.27 11.58 12.52 8.11 25.13-10.57 37.68-.77 9.04 7.06 5.96 20.49 17.8 27.2 11.23 6.35 58.19 22.72 63.53 32.13 6.6 11.61-7.26 27.38 1.61 37.33 6.31 7.08 19.18 1.2 24.56 8.67 6.9 9.59-9.43 35.97-8.33 48.9 12.72-12.73 30.44-17.31 47.3-21.92 33.5-9.17 24.64-8.95 13.24-32.29-8.12-16.65-4.76-36.88-15.07-52.7-1.47-2.27 24.76-50.54 28.57-57.9 20.66-39.97 77.49-51.08 114.69-26.6 19.74 12.99 38.46 40.56 44.45 63.31 8.17 31.07-11.34 40.7-23.61 64.33-8.9 17.13-14.98 45.5 1.67 59.4 24.76 20.65-6.15 41.32 9.26 66.68 16.71 27.5 17.83 61.17 16.7 92.66-.74 20.61-18.73 76.33-4.9 92.6 16.15 19.03 32.54 39.73 50.33 57.18 16.94 16.62 37.68 30.72 47.7 53.05 5.17 11.49 2.57 32.48-14.56 40.36-42.18 19.4-84.37-62.24-95.9-71.45-25.16-20.12-1.65 25.01-7.96 32.98-3.36 4.24-2.74 54.95 8.19 74.07 18.17 31.83 37.18 59.95 47.26 95.7 10.57 37.48 16.94 76.5 34.22 111.76 17.62 35.97 5.73 52.02-20.4 78.01-28.38 28.24-124.6 142.7-122.57 163.18 1.98 20.08 21.98 40.46 36.37 52.87 14.97 12.91 42.6 14.1 45.49 37.45 3.42 27.65-46.8 18.45-60.26 15.7-27.92-5.69-79.85-48.95-94.27-52.61-27.43-6.97-26.97-3.45-35.4 23.74-10.88 35.1 12.54 56.21 30 83.73 13.48 21.26 18.29 33.27-9.56 38.69-4.67 0 29.04-5.65 0 0zm119.41-413.15c-2.1-19.57-20.87-65.58-40.05-74.04-8.23 32.86-49.87 175.05-52.24 214.22 19.5-6.4 88.6-110.82 92.3-140.18-3.02-28.06-2.3 18.2 0 0zm-246.2-188.21c-.8 18.45 10.54 25.25 24.5 34.01-.34-1.2-8.09-19.55-7.69-23.34.88-8.46 14.7-1.74 12.79-8.99-8.02-30.26-21.42-32.28-29.6-1.68-.7 15.86.51-1.92 0 0z"/>

      <path v-if="focusedCharacter == null || focusedCharacter == 'chewie'" @click="focus('chewie')" @mouseover="hover('chewie')" @mouseleave="blur('chewie')" width="741" height="1407" class="chewie character-click-el" fill="
  transparent" d="M597 633v-22.42l-40.46-40.5-106.46-54.01-45.14-278.46c11.5-41.46 17.86-74.85 15.17-92-12-76.5-67.5-150-142.5-136.5-45.06 8.12-88.49 121.5-103.49 202.5s-55.5 37.5-108 161.99-92.99 133.5-16.5 205.49 153 73.5 127.5 206.99 18 128.99 7.5 298.48 27 191.99 19.5 244.49 96 109.5 124.5 33 41.83-117 41.83-117 13.66 75 43.66 70.5 79.5 37.56 70.5-114-64.5-299.98-18-461.97c102 18 162-6 162-6l89.99 10.5 22.3-57L597 633z"/>

      <path v-if="focusedCharacter == null || focusedCharacter == 'lando'" @click="focus('lando')" @mouseover="hover('lando')" @mouseleave="blur('lando')" width="732" height="1412" class="lando character-click-el" fill="
  transparent" d="M1 453.94c12.16-.55 12.34-21.34 23-27.2 16.6-9.13 97.09-14.18 117.57-18.55 22.76-4.85 94.47-119.57 121.76-156.18 23.74-31.85-5.76-46.7-27.04-72.52 31.55-13.56 64.67-22.84 97.15-33.81-11.17-17-21.75-95.3.88-109.83 30.6-19.65 73.8-51.5 102.99-11.3 4.41 6.1 11.68-.1 17.45.06 8.5.22 21.1 10 24.8 17.88 5.82 12.44 5.77 32.38.6 44.78-11.22 26.93-20.98 41.14-.92 64.98 15.23 18.1 48.61 31.46 68.18 45.94l-28.3 24.12c32.82 14.9 52.53 27 70.28 60.18 19.25 35.97 32.5 75.72 46.92 113.78 32.03 84.54 83.13 350.77 91.59 395.81 3.74 19.93 7.12 17.32-12.62 18.03-16.38.59-33.88-.66-50.11 1.86-7.98 1.24-5.1 11.91-5.1 17.56-22.06 0-86.3-4.1-84.07-11.9 2.63-9.23-29.37-13.76-35.76-15.66 0 7.38 3.53 25.09-5.58 28.88-12.48 5.2-21.63 23.86-29.76 29.11-6.58 4.26.5 30.31 1.14 36.22 3.48 32.16 9.41 64.08 12.88 96.75 4.24 40-.36 79.27 6.8 119.26 5.49 30.6 6.03 62.38 3.1 93.07-2.39 24.94 8.47 49.73 5.33 73.57-3.2 24.2-11.76 33.46-5.77 58.35 6.56 27.22 31.5 43.94 27.41 71.93-14.12 1.94-84.03 4.7-89.24-10.76-10.14-30.03-11.54-58.75-15.16-89.84-7.57-64.9-35.1-125.77-37.1-191.8-.75-24.34-3.32-50.26-5.04-75.73-1.01-15.01-4.27-87.23-3.68-108.4 1.63-58.45-14.19-104.52-33.82-160.92-16.1 36.54-19.6 85.28-40.51 118.38-20.72 32.8-13.69 65.3-13.64 101.84.05 38.16 7.21 75.14 10.78 113.05 3.87 41.05-4.23 81.8-4.17 123.52.01 11.07 9.59 43.85-1.5 51.2-11.88 7.85-4.6 19.39-2.02 29.08 4.51 16.93-5 34.73-10.31 50.2-2.22 6.45-152.32 1.6-190.86-10.42-6.73-2.1-5.7-19.83-.3-22.7 16.12-8.6 39.94-9.57 57.6-14.32 14.4-3.87 42.65-38.68 38.37-40.52 1.97-7.59 17.66-110.97 13.2-133.17-4.04-20.1-18.56-147.93-21.74-191.26-3.54-48.15 4.91-99.77 10.51-147.67.94-8 11.93-48.87.74-50.26-7.22-.93-113.54-21.98-130.06-33.63-12.15-8.55-47-20.66-61.92-7.97-7.96-6.39 40.54-114.11 46-128.04 19.75-50.37 42.84-99.73 69.98-146.54C125.08 435.23 1 455.66 1 453.94c5.47-.25 0 1.34 0 0z"/>

      <path v-if="focusedCharacter == null || focusedCharacter == 'qira'" @click="focus('qira')" @mouseover="hover('qira')" @mouseleave="blur('qira')" width="732" height="1412" class="qira character-click-el" fill="
transparent" d="M19.96 278.94c13.98-20.87-.44-119.45 5.51-149.28 5.2-26.02 69.31-92.33 94.5-108.74 35.23-20.8 87.33.23 115.38 26.26.22-1.4 21.09-40.22 35.15-20.36 8.27 11.68 4.94 41.22 6.14 55.08 1.81 20.9 4.06 41.8 8.4 62.35 6.32 29.9 17.69 28.72 40.88 42.92 25.1 15.37 17.78 61.43 21.98 85.76 11.05 64.04-6.02 146.26-36.47 203.37-5.86 10.98-16.8 16.51-22.26 26.59-9.08 16.73-11.98 35.69-13 54.44-2.22 40.61-8.18 82.07-6.46 122.74 3.17 75.2 39.04 147.56 54.26 220.71 8.19 39.4 11.46 32.47-19.83 43.46-24.02 8.43-26.83 32.78-25.14 55.01 2.5 33.02 21.35 172.71 27.17 186.74 9.6 23.12 4.38 51.47 22.94 70.81 19.94 20.78 53.14 12.68 65.42 40.16-26.81 5.2-342.2 6.76-343.95-6.21-2.9-21.6 1.32-228.3 4.26-277.56 1.45-24.15 10.52-51.17-6.58-67.77-15-14.56-10.23-165.22-4.88-220.82C48.9 667.03 70.9 623.7 99.7 574.83c12.49-21.19-79.04-75.26-87.65-100.86-17.08-50.8 36.18-114 36.5-164.86-14.46 1.2-51.14-10.04-28.6-30.18zm198.03-2.03l-.03.02.03-.02zm-38.25-56.5c-4.01 11.85-3.16 24.16 7.23 32.5 39.4 27.82 67.2 57.18 99.9 91.52 7.45-22.49 14.53-59.9.73-81.4-7.75-12.07-20.9-19.32-28.1-31.72-5.81-10.05 3.6-32.64-9.55-36.4.29-.15 1.54-57.8-6.17-84.8-14.07 7.59-10.04 28.8-12.13 41.27-13.68 81.54-47.91 57.23-51.9 69.03zM213 1185.94c21.42-43.1-15.6-115.15-20.42-160.22-2.4-22.5 6.11-46.24 3.53-67.52-.61-5.02-19.5-4.82-22.66-5.02-16.82-1.07-25.56 13.4-29 28.06-6.24 26.6-4.1 56-7.97 83.16-4.43 31.15-9.2 62.75-4.4 94.17 1.44 9.43 8.44 15.66 12.4 23.87 4.73 9.75 3.22 22.5 5.46 32.95 7 32.74 27.07 48 55.09 63.03 2.13-24.12 24.51-74.03 7.97-92.48z"/>
    </g>
  </svg>
  
<!--   <div class="testing">
    <button @click="focus('solo')">solo</button>
    <button @click="focus('chewie')">chewie</button>
    <button @click="focus('qira')">qira</button>
    <button @click="focus('lando')">lando</button>
    <button @click="focus('beckett')">beckett</button>
    <button @click="focus('l3-37')">l3-37</button>
  </div> -->
</div>
              
            
!

CSS

              
                #app {
  background: #1a1228;
  position: absolute;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

#solo-poster,
#characters,
#character-click-paths {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  height: 100vh;
  width: 160vh;
  
  @media (min-width: 160vh) {
    width: 100vw;
    height: 62.5vw;
  }
}

#bg-highlight,
#sun-flare,
#sun-ambience-fluctuating {
  animation: 15s starlight infinite;
}

@keyframes starlight {
  0% { opacity: 0.3 }
  5% { opacity: 0.6 }
  15% { opacity: 0.4 }
  20% { opacity: 0.8 }
  25% { opacity: 0.3 }
  30% { opacity: 1 }
  35% { opacity: 0.4 }
  40% { opacity: 0.6 }
  45% { opacity: 1 }
  50% { opacity: 0.2 }
  55% { opacity: 0.3 }
  60% { opacity: 0.6 }
  65% { opacity: 0.4 }
  70% { opacity: 0.2 }
  80% { opacity: 0.6 }
  85% { opacity: 0.8 }
  90% { opacity: 0.4 }
  95% { opacity: 0.6 }
  100% { opacity: 0.35 }
}

.sun {
  transform: translateX(-15vw)
}

#sun-flare {
  mix-blend-mode: color-dodge
}

#names {
  display: flex;
  justify-content: center;
  
  svg {
    display: block;
    position: absolute;
    top: 15vmin;
    width: 80%;
    height: auto;
    fill: white;
    mix-blend-mode: overlay;
  }
}

.transition--names--enter-active {
  transition: opacity .6s cubic-bezier(0.68, -0.55, 0.265, 1.55), transform 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.transition--names--leave-active {
  position: absolute;
  transition: opacity .6s, transform 1s;
}

.transition--names--enter {
  opacity: 0;
  transform: translate3d(0, 20vh, 0) scale(.5)  
}

.transition--names--leave-to {
  opacity: 0;
  transform: translate3d(0, -30vh, 0) scale(1.5)  
}

.character {
  position: relative;
  transition: opacity .5s, transform 1s cubic-bezier(0.68, -0.55, 0.265, 1.55)
}

.character-click-el { cursor: pointer; -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  webkit-user-select: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);}

.l3-37 {
  transform: translate(30%, 7vmax);
  transition-delay: 0s!important;
}

.beckett {
  transform: translate(38%, 5vmax);
  transition-delay: .1s!important;
}

.lando {
  transform: translate(27%, 5vmax);
  transition-delay: .2s!important;
}

.solo {
  transform: translate(33%, 5vmax);
  transition-delay: .3s!important;
}

.qira {
  transform: translate(40%, 5vmax);
  transition-delay: .4s!important;
}

.chewie {
  transform: translate(34%, 1vmax);
  transition-delay: .5s!important;
}

.characters-unfocused {
  .solo {
    transform: translate(36%, calc(5% + 5vmax)) scale(.9);
  }

  .qira {
    transform: translate(calc(48% + 10vmin), calc(25% + 5vmax)) scale(.6);
  }
  
  .chewie {
    transform: translate(calc(50% + 10vmin), calc(20% + 1vmax)) scale(.65);
  }
  
  .lando {
    transform: translate(calc(30% + 10vmin), calc(25% + 5vmax)) scale(.6);
  }
  
  .beckett {
    transform: translate(calc(38.5% - 8vmin), calc(25% + 5vmax)) scale(.56);
    
    @media (max-width: 600px) {
      transform: translate(calc(32.5% + 10vmin), calc(25% + 5vmax)) scale(.56);
    }
  }
  
  .l3-37 {
    transform: translate(calc(20% + 10vmin), calc(30% + 5vmax)) scale(.5);
    
    @media (max-width: 600px) {
      transform: translate(calc(23% + 10vmin), calc(30% + 5vmax)) scale(.5);
    }
  }
}

.transition-character--enter,
.transition-character--leave-to {
  opacity: 0;
  transform: translate(50%, 50%) scale(.5)!important;
}

.testing {
  position: absolute;
}
              
            
!

JS

              
                new Vue({
  el: '#app',
  data() {
    return {
      focusedCharacter: null,
      hoveredCharacter: null
    }
  },
  methods: {
    hover(char) {
      this.hoveredCharacter = this.focusedCharacter == null ? char : null
    },
    
    blur(char) {
      setTimeout(() => {
        if (this.hoveredCharacter == char && this.focusedCharacter == null) {
          this.hoveredCharacter = null
        }
      }, 10);
       
    },
    
    focus(char) {
      this.focusedCharacter = this.focusedCharacter == null ? char : null
      
      console.log('clicked')
    }
  }
});
              
            
!
999px

Console