<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%)'});
}
This Pen doesn't use any external CSS resources.