Patryk Smakosz patsma

## gist:4af21355fcd75387f922adc10d114eff
const svg = document.getElementById('scene').getSVGDocument();
const shape01 = svg.getElementById('shape-01');

## fidelis.svg

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                patsma
                / fidelis.svg
            
            
              Created
              March 13, 2020 22:39
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## Add filter to SVG
function setSvgAttrs() {
    let svg = document.getElementsByTagName('svg')[0];
    gsap.set(svg, {attr: {viewBox: '0 0 970 250'}});

    const background01 = document.querySelector('#background01');


    function createFilter() {
        const svgns = "http://www.w3.org/2000/svg";

## cloudSettings
{"lastUpload":"2019-12-07T07:27:29.821Z","extensionVersion":"v3.4.3"}

## center svg origin
var element = document.querySelector(prompt('Insert the querySelector to the svg element.', '#gear'));
var bbox = element.getBBox(),
    x = bbox.x,
    y = bbox.y,
    w = bbox.width,
    h = bbox.height
;

var result =
  'center center' + "\n" +

## Image hover border animation.html
  <div class="image-container-block">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/65984/photo-1413752567787-baa02dde3c65.jpg" alt="">
            <div class="inner-image-block">
                <div class="image-animate-border"></div>
            </div>
        </div>

<style>

</style>

## Safari input form
.wpcf7 form input {
    -webkit-user-select: text;
}

## txt
http://ogp.me

Basic Metadata
To turn your web pages into graph objects, you need to add basic metadata to your page. We've based the initial version of the protocol on RDFa which means that you'll place additional <meta> tags in the <head> of your web page. The four required properties for every page are:

og:title - The title of your object as it should appear within the graph, e.g., "The Rock".
og:type - The type of your object, e.g., "video.movie". Depending on the type you specify, other properties may also be required.
og:image - An image URL which should represent your object within the graph.
og:url - The canonical URL of your object that will be used as its permanent ID in the graph, e.g., "http://www.imdb.com/title/tt0117500/".
As an example, the following is the Open Graph protocol markup for The Rock on IMDB:

## timeline.js
var select = function(s){
  return document.querySelector(s);
}
var normalTimelineGreen = select('.normalTimelineGreen');
var returnedTimelineRed = select('.returnedTimelineRed');


## Toggle GSAP menus
Some may find this confusing, but I like to tack .reverse() onto the end and toggle an animation like this...

var tl = new TimelineMax()
  .to("#box", 0.25, { opacity: 0.5, scale: 0.75 })
  .reverse();

$("#box").click(function() {
  tl.reversed(!tl.reversed());
});
http://codepen.io/osublake/pen/9d46535fe6e5b5c8f577308a5ae1ea72
	const svg = document.getElementById('scene').getSVGDocument();
	const shape01 = svg.getElementById('shape-01');
	function setSvgAttrs() {
	let svg = document.getElementsByTagName('svg')[0];
	gsap.set(svg, {attr: {viewBox: '0 0 970 250'}});

	const background01 = document.querySelector('#background01');


	function createFilter() {
	const svgns = "http://www.w3.org/2000/svg";
	var element = document.querySelector(prompt('Insert the querySelector to the svg element.', '#gear'));
	var bbox = element.getBBox(),
	x = bbox.x,
	y = bbox.y,
	w = bbox.width,
	h = bbox.height
	;

	var result =
	'center center' + "\n" +
	<div class="image-container-block">
	<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/65984/photo-1413752567787-baa02dde3c65.jpg" alt="">
	<div class="inner-image-block">
	<div class="image-animate-border"></div>
	</div>
	</div>

	<style>

	</style>
	http://ogp.me

	Basic Metadata
	To turn your web pages into graph objects, you need to add basic metadata to your page. We've based the initial version of the protocol on RDFa which means that you'll place additional <meta> tags in the <head> of your web page. The four required properties for every page are:

	og:title - The title of your object as it should appear within the graph, e.g., "The Rock".
	og:type - The type of your object, e.g., "video.movie". Depending on the type you specify, other properties may also be required.
	og:image - An image URL which should represent your object within the graph.
	og:url - The canonical URL of your object that will be used as its permanent ID in the graph, e.g., "http://www.imdb.com/title/tt0117500/".
	As an example, the following is the Open Graph protocol markup for The Rock on IMDB:
	var select = function(s){
	return document.querySelector(s);
	}
	var normalTimelineGreen = select('.normalTimelineGreen');
	var returnedTimelineRed = select('.returnedTimelineRed');
	Some may find this confusing, but I like to tack .reverse() onto the end and toggle an animation like this...

	var tl = new TimelineMax()
	.to("#box", 0.25, { opacity: 0.5, scale: 0.75 })
	.reverse();

	$("#box").click(function() {
	tl.reversed(!tl.reversed());
	});
	http://codepen.io/osublake/pen/9d46535fe6e5b5c8f577308a5ae1ea72