<link href="https://fonts.googleapis.com/css?family=Rubik+Mono+One" rel="stylesheet">
<div class="back">
  <svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="1000px" height="1000px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
    <g>

        <polyline fill="none" stroke="#FFFFFF" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
        200.7,251 201.7,328.3 279,329.3 279.9,406.6 357.2,407.5 358.2,484.8 435.5,485.8 	"/>
    </g>
    <g>

        <polyline fill="none" stroke="#FFFFFF" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
        596,131.5 651.3,185.5 706.7,131.5 762,185.5 817.3,131.5 872.7,185.5 928,131.5 	"/>
    </g>
    <rect x="727.5" y="567.5" fill="none" stroke="#FFFFFF" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" width="100" height="100"/>
    <g>

        <line fill="none" stroke="#FFFFFF" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="890.5" y1="328" x2="790.5" y2="428"/>

        <line fill="none" stroke="#FFFFFF" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="790.5" y1="328" x2="890.5" y2="428"/>
    </g>
    <g>

        <line fill="none" stroke="#FFFFFF" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="148.5" y1="485" x2="148.5" y2="627"/>

        <line fill="none" stroke="#FFFFFF" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" x1="78" y1="556.5" x2="219" y2="556.5"/>
    </g>
    <polygon fill="none" stroke="#FFFFFF" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
      332.5,200 332.5,99.5 232,99.5 "/>
    <polygon fill="none" stroke="#FFFFFF" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" points="
      558.5,632.8 487.4,561.8 416,633.2 "/>
    <circle fill="none" stroke="#FFFFFF" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="311" cy="807" r="50"/>
    <circle fill="none" stroke="#FFFFFF" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" cx="562" cy="294" r="50"/>
    <g>
      <path fill="none" stroke="#FFFFFF" stroke-width="15" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
        M512,816.5c36.6,0,36.6,52,73.2,52c36.6,0,36.6-52,73.2-52c36.6,0,36.6,52,73.3,52c36.6,0,36.6-52,73.3-52"/>
    </g>
    </svg>
  <h1>Design<br />d'interface</h1>
</div>
<div class="front">
  <svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="1000px" height="1000px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
    <circle fill="none" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" cx="161.3" cy="209.8" r="20.6"/>
    <circle fill="#FF4E4E" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" cx="362.3" cy="667.8" r="20.6"/>
    <circle fill="none" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" cx="670.3" cy="736.8" r="20.6"/>
    <circle fill="none" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" cx="737.3" cy="463.8" r="20.6"/>
    <circle fill="none" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" cx="341.3" cy="381.8" r="20.6"/>
    <circle fill="none" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" cx="847.3" cy="242.8" r="20.6"/>
    <circle fill="#FF4E4E" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" cx="943.3" cy="471.8" r="20.6"/>
    <circle fill="none" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" cx="680.3" cy="93.8" r="20.6"/>
    <circle fill="none" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" cx="217.3" cy="848.8" r="20.6"/>
    <circle fill="none" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" cx="528.3" cy="945.8" r="20.6"/>
    <circle fill="#FF4E4E" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" cx="820.3" cy="810.8" r="20.6"/>
    <circle fill="#FF4E4E" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" cx="94.3" cy="520.8" r="20.6"/>
    <circle fill="#FF4E4E" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" cx="528.3" cy="267.8" r="20.6"/>
    <circle fill="none" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" cx="395.3" cy="93.8" r="20.6"/>
    <line fill="none" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" x1="155.2" y1="229.5" x2="100.2" y2="501.1"/>
    <line fill="none" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" x1="181.9" y1="209.8" x2="507.7" y2="267.8"/>
    <line fill="none" stroke="#FF4E4E" stroke-width="22" stroke-miterlimit="10" x1="416" y1="95" x2="660" y2="95"/>
    <line fill="none" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" x1="405.6" y1="114.4" x2="512.7" y2="247.2"/>
    <line fill="none" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" x1="700.9" y1="106.3" x2="831.6" y2="229.5"/>
    <line fill="none" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" x1="857.4" y1="263.4" x2="931.5" y2="451.2"/>
    <line fill="none" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" x1="917.4" y1="471.8" x2="757.9" y2="463.8"/>
    <line fill="none" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" x1="512.7" y1="281.3" x2="359" y2="371.3"/>
    <line fill="none" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" x1="329" y1="365.3" x2="174.4" y2="225.7"/>
    <line fill="none" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" x1="112.5" y1="530.3" x2="344.8" y2="657"/>
    <line fill="none" stroke="#FF4E4E" stroke-width="22" stroke-miterlimit="10" x1="382.9" y1="657" x2="718.3" y2="471.8"/>
    <line fill="none" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" x1="361" y1="387.8" x2="716.7" y2="463.8"/>
    <line fill="none" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" x1="742.1" y1="484.4" x2="820.3" y2="790.2"/>
    <line fill="none" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" x1="228.7" y1="831.7" x2="348.1" y2="682.7"/>
    <line fill="none" stroke="#FF4E4E" stroke-width="22" stroke-miterlimit="10" x1="374.7" y1="684.2" x2="512.7" y2="932.4"/>
    <line fill="none" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" x1="538.8" y1="928.1" x2="659.7" y2="754.5"/>
    <line fill="none" stroke="#FF4E4E" stroke-width="22" stroke-miterlimit="10" x1="731.5" y1="443.2" x2="680.3" y2="114.4"/>
    <line fill="none" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" x1="341.3" y1="402.4" x2="362.3" y2="647.2"/>
    <line fill="none" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" x1="233.3" y1="861.8" x2="507.7" y2="945.8"/>
    <line fill="none" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" x1="670.3" y1="716.2" x2="351.8" y2="399.5"/>
    <line fill="none" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" x1="548.9" y1="267.8" x2="831.6" y2="256.2"/>
    <line fill="none" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" x1="684.9" y1="722.3" x2="931.5" y2="488.7"/>
    <line fill="none" stroke="#FF4E4E" stroke-width="10" stroke-miterlimit="10" x1="548.9" y1="945.8" x2="804.3" y2="823.8"/>
  </svg>
  <h1>Développement<br />d'applications<br />métiers</h1>
</div>
body {
  margin: 0;
  height: 100vh;
}
* {
  box-sizing: border-box;
}
.back {
  position: relative;
  background: #ff4e4e;
  color: #fff;
}
.front {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: #fff;
  justify-content: flex-end;
}
.back,
.front {
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 0 50px;
}
h1 {
  font-family: 'Rubik Mono One', sans-serif;
  font-size: 72px;
}
.front h1 {
  position: relative;
  color: #ff4e4e;
  text-align: right;
}
svg {
  position: absolute;
  opacity: 0;
  -webkit-transform: translateX(50px);
  transform: translateX(50px);
  -webkit-transition: opacity .5s ease-in-out, transform 1s ease-out;
  transition: opacity .5s ease-in-out, transform 1s ease-out;
  max-height: 100%;
}
.back svg {
  right: 0;
}
.front svg {
  left: 0;
  -webkit-transform: translateX(-50px);
  transform: translateX(-50px);
}
svg * {
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
}
.on svg {
  opacity: .3;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}
svg * {
  animation: stroke 5s ease-in-out infinite;
}
.front circle {
  animation: none;
  stroke-dashoffset: 0;
}
polyline {
  animation-delay: 1s;
}
polygon {
  animation-delay: 2s;
}
circle {
  animation-delay: 3s;
}
rect {
  animation-delay: 4s;
}
line:nth-child(2n) {
  animation-delay: 1s;
}
line:nth-child(3n) {
  animation-delay: 2s;
}
@-webkit-keyframes stroke {
  20% {
    stroke-dashoffset: 0;
  }
  40% {
    stroke-dashoffset: -500;
  }
}
@keyframes stroke {
  20% {
    stroke-dashoffset: 0;
  }
  40% {
    stroke-dashoffset: -500;
  }
}

@media(max-width:800px) {
  .back {
    height: 60vh;
  }
  .front {
    top: 40vh;
    height: 60vh;
  }
  .front {
    clip-path: polygon(0% 25%, 100% 0%, 100% 100%, 0% 100%) !important;
    z-index: 1;
  }
  h1 {
    font-size: 36px;
  }
}
var $window = $(window);
var windowWidth = $window.width();
var windowHeight = $window.height();
var mousePos = {x:windowWidth/2,y:windowHeight/2};

$(window).resize(function(){
  windowWidth = $window.width();
  windowHeight = $window.height();
});

clip(mousePos);

$(document).mousemove(function(e){
  mousePos = {x:e.pageX,y:e.pageY};
  clip(mousePos);
});

function clip(mousePos) {
  var pourcPos = {'x':mousePos.x * 100 / windowWidth * 2,
                  'y':mousePos.y * 100 / windowHeight};
  var gapX = pourcPos.x * 30 / 200 - 15;
  var gapY = (15 *(pourcPos.y * 30 / 100 - 15)) / 100;
  var pointTop;
  var pointBottom;
  if (pourcPos.y<50) {
    pointTop = 150 - pourcPos.x + gapY * gapX;
    pointBottom = 150 - pourcPos.x;
  } else {
    pointTop = 150 - pourcPos.x;
    pointBottom = 150 - pourcPos.x - gapY * gapX;
  }
  if (pourcPos.x<100) {
    $('.back').addClass('on');
    $('.front').removeClass('on');
  }else if (pourcPos.x>100) {
    $('.back').removeClass('on');
    $('.front').addClass('on');
  } else {
    $('.back').add('.front').removeClass('on');
  }
  $('.front').css({'clip-path':'polygon('+pointTop+'% 0%, 100% 0%, 100% 100%, '+pointBottom+'% 100%)'});
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js