Created
September 26, 2022 01:35
-
-
Save msawangwan/abb2326545a387e94d424b4d486974a5 to your computer and use it in GitHub Desktop.
Revisions
-
msawangwan created this gist
Sep 26, 2022 .There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,39 @@ #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"} This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,51 @@ 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; } }; This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,386 @@ $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; } } This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1 @@ <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" rel="stylesheet" /> This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,8 @@ 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](https://codepen.io/cobra_winfrey/pen/qBZWVmO) by [Adam Kuhn](https://codepen.io/cobra_winfrey) on [CodePen](https://codepen.io). [License](https://codepen.io/license/pen/qBZWVmO).