Flashlight

flashlight.markdown

Flashlight

Not good enough.

A Pen by jon on CodePen.

License.

index.html

<svg>
    
    <filter id="drop-shadow">
      <feGaussianBlur stdDeviation="10"  in="SourceAlpha" />
      <feOffset dx="0" dy="0"           result="offsetblur"/>
      <feFlood flood-color="rgba(0,0,0,1)"/>
      <feComposite operator="in"        in2="offsetblur"/>
      <feMerge>
        <feMergeNode/>
        <feMergeNode                    in="SourceGraphic"/>
      </feMerge>
    </filter>
    
    <radialGradient id="rad-grad"
                    r="100%">
        <stop stop-color="#FFF" offset="75%"></stop>
        <stop stop-color="rgba(255,255,255,0)" offset="100%"></stop>
    </radialGradient>
    
    <radialGradient id="rad-grad-invert"
                    r="100%" 
                    cx="50%" cy="0%"
                    gradientUnits="userSpaceOnUse">
        <stop stop-color="rgba(255,255,255,0)" offset="20%"></stop>
        <stop stop-color="rgba(255,255,255,.5)" offset="80%"></stop>
    </radialGradient>
    
    <linearGradient id="linear-grad">
        <stop stop-color="rgba(0,0,0,1)" offset="0%"></stop>
        <stop stop-color="rgba(0,0,0,.5)" offset="10%"></stop>
        <stop stop-color="rgba(0,0,0,.5)" offset="90%"></stop>
        <stop stop-color="rgba(0,0,0,1)" offset="100%"></stop>
    </linearGradient>
    
    
    <mask id="mask">
        <rect width="100%" height="100%"
          fill="#333"></rect>
        
        <circle r="100"
                cx="80%" cy="80%"
                fill="url(#rad-grad)"
                id="hole1">
        </circle>      
        
        <circle r="50"
                cx="50%" cy="40%"
                fill="url(#rad-grad)"
                id="hole2">
        </circle>   
        <rect x="10%" y="10%" width="30%" height="30%"
          fill="url(#rad-grad)"></rect>
        
        <rect x="20%" y="20%" width="30%" height="30%"
          fill="url(#rad-grad)"></rect>
        
        <path d="M400,600 800,300, 0,300 Z"
          fill="url(#rad-grad-invert)"
          _stroke="#FFF"
          _stroke-width="5"
          id="path"></path>
    </mask>
    
    <g mask="url(#mask)">
        <rect width="100%" height="100%"
          fill="#111"
              id="rect"></rect>
        
        <image
               xlink:href="http://www.lucaswrecker.com/wp-content/uploads/2013/03/depositphotos_5874572-Rustic-Stone-Wall.jpg"
               width="100%" height="100%"
               preserveAspectRatio="xMidYMid slice"></image>
        
        <rect width="100%" height="100%"
          fill="url(#linear-grad)"
          stroke="#000"
          stroke-width="3"></rect>
        
        <image xlink:href="https://upload.wikimedia.org/wikipedia/commons/d/d5/Mona_Lisa_(copy,_Hermitage).jpg"
               width="100%" height="100%"
               preserveAspectRatio="xMidYMid meet"
               filter="url(#drop-shadow)"></image>
    </g>
    
    
    
    <rect width="100%" height="100%"
          fill="transparent"
          _stroke="yellowgreen"
          _stroke-width="5"
          id="rect-top"></rect>
</svg>

script.js

var svg = doc.getElem('svg');
var hole = doc.getElem('#hole');
var rect = doc.getElem('#rect');
var rectTop = doc.getElem('#rect-top');
var path = doc.getElem('#path');
var gradInvert = doc.getElem('#rad-grad-invert');

var holeR = 100;

var svgW = svg.clientWidth;
var svgH = svg.clientHeight;

var svgHorcenter = svgW / 2;

setCoords();

function setCoords( event ) {
    
    var cx = hole.cx.baseVal.value;
    var cy = hole.cy.baseVal.value;
    
    if ( event ) {
        cx = event.offsetX;
        cy = event.offsetY;
    }    
    
    hole.setAttr({
        'cx': cx,
        'cy': cy
    });
    
    gradInvert.setAttr({
        'cx': cx,
        'cy': cy
    });
    
    var pathCoordsList = [
        cx - holeR, cy,
        cx + holeR, cy,
        svgHorcenter, svgH
    ];
    
    var pathCoords = pathCoordsList.join(' ');
    
    path.setAttr({
        'd': 'M' + pathCoords
    });
}

rectTop.onmousemove = function( event ) {
    setCoords( event );
}

window.onresize = function () {
    svgW = svg.clientWidth;
    svgH = svg.clientHeight;

    svgHorcenter = svgW / 2;

    setCoords();
}

scripts

<script src="https://codepen.io/yoksel/pen/MKJbjZ"></script>

style.scss

BODY {
    background: #000;
}

svg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: 600px;
    max-height: 400px;
    margin: auto;
    box-sizing: border-box;
}