Take Me On

index.haml

#btnwrap
  %button#button{:onclick => "takeMeOn()"}
    %i.fas.fa-play.play
    %i.fas.fa-pause.pause


%audio#aha{:controls => ""}
  %source{:src => "https://puu.sh/GeJzb/75c457c7df.mp3", :type => "audio/mpeg"}
%input{:type => "checkbox"}/
#outer
  %svg.frame{:height => "1800px", :width => "1800px", :xmlns => "http://www.w3.org/2000/svg", "xmlns:xlink" => "http://www.w3.org/1999/xlink"}
    %defs
      %mask#myMask
        %image#dark{:height => "100%", :width => "100%"}
      %mask#myMask2
        %image#light{:height => "100%", :width => "100%"}
      %mask#myMask3
        %image#mid{:height => "100%", :width => "100%"}
    %foreignobject.dark{:height => "1800px", :style => "mask:url(#myMask);", :width => "1800px"}
    %foreignobject.mid{:height => "1800px", :style => "mask:url(#myMask3);", :width => "1800px"}
    %foreignobject.light{:height => "1800px", :style => "mask:url(#myMask2);", :width => "1800px"}
  %svg.squiggle{:style => "display:none", :version => "1.1", :xmlns => "http://www.w3.org/2000/svg"}
    %defs
      %filter#squiggle
        %feturbulence#turbulence{:basefrequency => "0.15 0.05", :numoctaves => "3", :result => "noise", :seed => "2"}
        %fedisplacementmap#displacement{:in => "SourceGraphic", :in2 => "noise", :scale => "2"}
  #container
    %canvas#videoCanvas
    %video{:autoplay => "", :playsinline => ""}


  #wrap
    .inner
    -2.times do
      .frame
    %svg{:height => "620px", :version => "1.1", :viewbox => "0 0 890 620", :width => "890px", :xmlns => "http://www.w3.org/2000/svg", "xmlns:xlink" => "http://www.w3.org/1999/xlink"}
      %path{:d => "M 720 300 Q 870 500 590 540 Q 280 580 80 310 Q 0 200 410 170 ", :fill => "transparent", :stroke => "#000"}
      %path{:d => "M 570 230 Q 740 440 590 540 Q 460 610 270 450 Q 0 200 260 170 ", :fill => "transparent", :stroke => "#000"}
      %path{:d => "M 740 370 Q 850 120 590 70 Q 400 20 170 180 Q 20 280 260 380 ", :fill => "transparent", :stroke => "#000"}

script.js

const constraints = {
  video: true
};

const container = document.querySelector('#container');
const img = document.querySelector('#container img');
const video = document.querySelector('#container video');
var imgData;
const canvas = document.querySelector('#videoCanvas');
const ctx = canvas.getContext('2d');



document.addEventListener("DOMContentLoaded", function() {
   navigator.mediaDevices.getUserMedia(constraints).
    then(handleSuccess);
    document.body.classList.add('loaded');
});

setInterval(function() {
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
    ctx.filter = 'blur(1px) grayscale(100%) brightness(140%) contrast(90)';
  ctx.drawImage(video, 0, 0); document.querySelector("#light").setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', canvas.toDataURL('image/jpg'));
  ctx.filter = 'blur(6px) grayscale(100%) brightness(140%) contrast(90)';
  ctx.drawImage(video, 0, 0); document.querySelector("#mid").setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', canvas.toDataURL('image/jpg'));
  ctx.filter = 'blur(4px) grayscale(100%) brightness(190%) contrast(120)';
  ctx.drawImage(video, 0, 0); document.querySelector("#dark").setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', canvas.toDataURL('image/jpg'));

  
}, 200);

function handleSuccess(stream) {
  video.srcObject = stream;
};



var takeOnMe = document.getElementById("aha");
var playing = 1;
var button = document.getElementById("button");
function takeMeOn(){
  button.classList.toggle("playing");
  if (playing == 1){
    takeOnMe.play();
    playing = 0;
  }else{
    takeOnMe.pause();
    playing = 1;
  }
};

style.scss

$c1: #a5a7bb;
$c2: #a496a4;
$c3: #554d73;
$w: #fff;
body {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  height: 100vh;
  background: $w;
  overflow: hidden;
  opacity:0;
  font-family:'Yesteryear';
  &.loaded{
      animation:fadeIn 1s ease-in-out 1 forwards 3s;
      @keyframes fadeIn{
        from{
          opacity:0;
        }
        to{
          opacity:1;
        }
      }
    }
  audio {
    opacity: 0;
  }
  button {
    position: absolute;
    top: 60px;
    right: 100px;
    border: 3px solid #444;
    z-index: 999;
    outline: none;
    background: transparent;
    width: 35px;
    height: 35px;
    overflow: hidden;
    background: $c3;
    border-radius: 3px;
    filter: url(#squiggle);
    pointer-events: all;
    &:hover {
      background: $c1;
      i {
        color: #444;
      }
    }
    &.playing {
      i {
        transform: translate(-50%, calc(-50% - 75px));
        &:last-of-type {
          transform: translate(-50%, -50%);
        }
      }
    }
    i {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      color: $c1;
      transition: 0.3s ease-in-out;
      &:last-of-type {
        transform: translate(-50%, calc(-50% + 75px));
      }
    }
  }
  input {
    position: absolute;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 998;
    &:checked ~ #outer {
      #wrap {
        svg {
          clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
        }
        .inner {
          &:before {
            transform: translateX(calc(-100% - 103px));
          }
        }
      }
      #container {
        &:before {
          transform: translate(-50%, -50%) scaleX(1);
        }
        video {
          clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
        }
      }
    }
  }
  #outer {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    height: 100vh;
    background: $w;
    position: absolute;
    width: 100vw;
    height: 100vh;
    transform: scale(0.75);
    &:before {
      content: "";
      position: absolute;
      width: 890px;
      height: 620px;
      box-shadow: 0 0 0 4px #444, 0 0 0 50px $w;
      z-index: 99;
      filter: url(#squiggle);
    }
  }
  &:hover {
    #container {
      &:after {
        content: "click me";
      }
      &:before {
        transform: translate(-50%, -50%) scaleX(0.5);
      }
    }
    #wrap {
      svg {
        clip-path: polygon(0 0, 45% 0, 45% 100%, 0% 100%);
      }
      .frame {
        &:after {
          transform: translateY(-35px);
        }
        &:nth-of-type(2) {
          &:after {
            transform: translateY(35px);
          }
        }
      }
      .inner {
        &:before {
          transform: translateX(calc(-50% - 50px));
        }
      }
    }
  }
  #wrap,
  #btnwrap {
    position: absolute;
    width: 890px;
    height: 620px;
    z-index: 100;
    pointer-events: none;
    svg {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      filter: url(#squiggle);
      transition: 0.6s ease-in-out;
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
      path {
        stroke: #333;
        stroke-linecap: round;
        stroke-dasharray: 300px;
        stroke-dashoffset: 2900px;
        animation: strokes 6s steps(20, end) infinite,
          width 3s steps(20, end) infinite;
        stroke-width: 0px;
        @for $i from 1 through 6 {
          &:nth-of-type(#{$i}) {
            animation-delay: #{$i/2 + 1}s, #{$i/2 + 1}s;
          }
        }
        @keyframes width {
          25% {
            stroke-width: 3px;
          }
          50% {
            stroke-width: 0px;
          }
          100% {
            stroke-width: 0px;
          }
        }
        @keyframes strokes {
          100% {
            stroke-dashoffset: 800px;
          }
        }
      }
    }
    .inner {
      position: absolute;
      width: 100%;
      height: calc(100% + 10px);
      overflow: hidden;
      left: 0;
      top: -5px;
      &:before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        box-shadow: 0 0 0 4px #444, 0 0 0 100px $w, 0 0 0 104px #444;
        z-index: 99;
        left: 0;
        top: 0;
        filter: url(#squiggle);
        transition: 0.6s ease-in-out;
      }
    }
    .frame {
      width: 250px;
      height: 200px;
      position: absolute;
      top: -75px;
      left: -100px;
      z-index: 99;
      transform-style: preserve-3d;
      &:nth-of-type(2) {
        width: 200px;
        height: 150px;
        top: calc(100% - 75px);
        left: calc(100% - 125px);
        &:before {
          background: url(https://media.giphy.com/media/5brOigokOC6AyC9i7X/giphy.gif)
            50% 50% / cover;
          filter: url(#squiggle) saturate(0) contrast(2);
        }
        &:after {
          left: -15px;
          top: -15px;
          background: $c2;
        }
      }
      &:before,
      &:after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        box-shadow: 0 0 0 4px #444;
        z-index: 99;
        filter: url(#squiggle) saturate(0) contrast(1.5);
      }
      &:before {
        background: url(https://media.giphy.com/media/bJjSrvGSPbtmw/giphy.gif)
          50% 50% / cover;
      }
      &:after {
        z-index: -1;
        top: 25px;
        left: 25px;
        background: $c1;
        transform: translateZ(-10px);
        filter: url(#squiggle);
        transition: 0.5s ease-in-out;
      }
    }
  }
  &:hover {
    video {
      clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
    }
  }
  #container {
    position: absolute;
    width: 100vw;
    height: 100vh;
    left: 0;
    top: 0;
    opacity: 1;
    z-index: 9;
    &:after {
      content: "hover me";
      position: absolute;
      bottom: -25px;
      display: inline-block;
      color: #444;
      font-size: 30px;
      z-index: 99;
      left: 50%;
      transform: translateX(-50%);
    }
    &:before {
      content: "";
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%) scaleX(0);
      background: linear-gradient(to bottom, $c2, $c3);
      transform-origin: right;
      mix-blend-mode: hard-light;
      transition: 0.6s ease-in-out;
      z-index: 9;
      position: absolute;
      width: 890px;
      height: 620px;
    }
  }
  canvas:not(#screenshotCanvas) {
    width: 0;
    height: 0;
  }
  svg {
    position: absolute;
  }
  svg.frame {
    position: absolute;
    width: 900px;
    height: 900px;
    z-index: 0;
    clip-path: polygon(0 15%, 100% 14%, 100% 85%, 0 85%);
    foreignObject {
      z-index: 1;
      height: 900px;
      width: 900px;
      max-width: 900px;
      max-height: 900px;
      position: relative;
      z-index: 2;
      &.light {
        background: $w;
      }
      &.dark {
        background: repeating-linear-gradient(
            45deg,
            #333,
            #333 2px,
            transparent 2px,
            transparent 8px,
            #333 8px,
            #333 6px
          ),
          repeating-linear-gradient(
            40deg,
            #333,
            #333 2px,
            $w 2px,
            $w 8px,
            #333 8px,
            #333 6px
          );
        background-position: 50% 50%;
        animation: bgshift 2s steps(5, end) infinite;
        @keyframes bgshift {
          to {
            background-position: calc(50% + 50px) calc(50% + 20px);
          }
        }
        &:before {
          content: "";
          position: absolute;
          width: 100%;
          height: 100%;
          background: #333;
          mix-blend-mode: lighten;
        }
      }
      &.mid {
        background: #333;
      }
    }
  }
  video {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(1.4);
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
    transition: 0.6s ease-in-out;
    filter: saturate(0.75);
  }
  img {
    display: none;
  }
  #btnwrap {
    z-index: 9999;
  }
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" rel="stylesheet" />

take-me-on.markdown

Take Me On

CodePen Challenge August 2020 // Take On Me w/ SVG Filters, Canvas to Image SVG masking, SVG path animation & optional audio

A Pen by Adam Kuhn on CodePen.

License.