Vue SVG intersect

by Kenneth Luplau-Brøgger

HTML

<div id="app">
  <div class="container">
    <svg id="headerSvg" width="100%" height="100%" viewBox="0 0 300 200">
      <svg width="100%" height="80%" viewBox="0 0 300 200">
        <defs>
          <path id="logoX" d="M23.6,8.6C24.2,8.8,25,9,25.8,9.2c0.9,0.2,1.8,0.3,2.6,0.2c1.5-0.1,2.7-0.6,3.7-1.6c1-1,1.5-2.3,1.4-3.9
                c0-1.2-0.5-2.2-1.3-3c-0.8-0.7-1.8-1.1-3-1c-1.4,0-2.7,0.6-3.8,1.6c-1.1,1-2.3,2.7-3.7,4.9c-0.3,0.5-0.6,1.1-1,1.7
                c-0.4,0.7-0.8,1.3-1.1,1.9c-0.2-0.6-0.3-1.2-0.5-2c-0.2-0.8-0.4-1.5-0.7-2.3c-0.4-1.1-0.8-1.9-1.3-2.5c-0.5-0.6-1.1-1.1-1.8-1.5
                C14.7,1.4,14,1.2,13.4,1c-0.7-0.1-1.4-0.1-2.3-0.1c-1,0-2.2,0.3-3.7,0.7c-1.5,0.4-3,1-4.7,1.8L2.1,6c0.5-0.2,1-0.4,1.7-0.6
                C4.5,5.2,5.1,5.1,5.7,5c1.3,0,2.2,0.2,2.9,0.7C9.2,6.3,9.7,7,10.1,8c0.4,1.2,0.9,2.5,1.3,3.7c0.4,1.3,1,3.1,1.7,5.6
                c-0.7,1-1.3,1.8-1.8,2.5c-0.6,0.7-1,1.1-1.3,1.4c-0.7-0.2-1.5-0.4-2.3-0.6c-0.8-0.2-1.7-0.3-2.6-0.2c-1.5,0.1-2.7,0.6-3.7,1.6
                c-1,1-1.4,2.3-1.4,3.9c0,1.2,0.5,2.2,1.3,2.9c0.8,0.7,1.8,1.1,2.9,1C5.7,29.6,7,29.1,8,28.1c1-1,2.2-2.6,3.6-4.9
                c0.4-0.7,0.8-1.3,1-1.7c0.2-0.4,0.6-1,1.1-1.8c0.2,0.7,0.4,1.4,0.6,2.3c0.2,0.9,0.5,1.6,0.7,2.3c0.4,1.1,0.8,1.9,1.3,2.5
                c0.5,0.6,1.1,1.1,1.8,1.5c0.6,0.4,1.3,0.6,2.1,0.7c0.8,0.1,1.5,0.2,2.3,0.2c1.1,0,2.3-0.3,3.6-0.7c1.3-0.4,2.9-1,4.7-1.9l0.5-2.5
                c-0.5,0.2-1,0.4-1.8,0.6c-0.7,0.2-1.3,0.3-1.8,0.4c-1.3,0-2.3-0.2-2.9-0.7c-0.6-0.5-1.1-1.3-1.5-2.2c-0.4-1.2-0.8-2.4-1.3-3.6
                c-0.4-1.2-1-3.2-1.8-6c0.7-1,1.3-1.9,1.9-2.6C22.9,9.3,23.3,8.8,23.6,8.6z" width="100" height="100"></path>

          <mask id="logoMask">
            <rect width="100%" height="100%" fill="white"/>
            <use x="135" y="85" width="100" height="100" xlink:href="#logoX" fill="black"/>
          </mask>

          <clipPath id="leftClip">
            <use x="0" y="0" width="300" height="300" xlink:href="#left"/> 
          </clipPath>

         ...

CSS

* {
  box-sizing: border-box;
}

body {
  background: #20262E;
  font-family: Helvetica;
}

#app {
  position: absolute;
  width: 100%;
  height: 100%;
}

.container {
  background: url("https://9qjzgzbyth-flywheel.netdna-ssl.com/wp-content/uploads/2016/07/copenhagen-travel-guide.jpg");
  background-size: cover;
  position: absolute;
  width: 100%;
  height: 100%;
}

input {
  position: relative;
}

#headerSvg {
  position: absolute;
}

.st0{fill:#010000;}
.st1{fill:#E2051A;}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

new Vue({
  el: "#app",
  data: {
    leftOffset: 0,
    rightOffset: 0
  },
  methods: {
  	toggle: function(todo){
    	todo.done = !todo.done
    }
  }
})