Skip to content

Instantly share code, notes, and snippets.

Avatar
💭
Perfection is not attainable, but if we chase perfection we can catch excellence

Patryk Smakosz patsma

💭
Perfection is not attainable, but if we chase perfection we can catch excellence
View GitHub Profile
View gist:4af21355fcd75387f922adc10d114eff
const svg = document.getElementById('scene').getSVGDocument();
const shape01 = svg.getElementById('shape-01');
View fidelis.svg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@patsma
patsma / Add filter to SVG
Created Feb 8, 2020
Dynamically add filter to your SVG
View 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";
View 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" +
View 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>
View Safari input form
.wpcf7 form input {
-webkit-user-select: text;
}
@patsma
patsma / txt
Created Mar 20, 2018
OP meta tags
View 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:
@patsma
patsma / timeline.js
Created Mar 13, 2018
Toggle timeline held in function
View timeline.js
var select = function(s){
return document.querySelector(s);
}
var normalTimelineGreen = select('.normalTimelineGreen');
var returnedTimelineRed = select('.returnedTimelineRed');
View 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
View gist:44be2909aa0eadba0bebb9ac24c3d4d7
Serwis nie zbiera w sposób automatyczny żadnych informacji, z wyjątkiem informacji zawartych w plikach cookies.
Pliki cookies (tzw. „ciasteczka”) stanowią dane informatyczne, w szczególności pliki tekstowe, które przechowywane są w urządzeniu końcowym Użytkownika Serwisu i przeznaczone są do korzystania ze stron internetowych Serwisu. Cookies zazwyczaj zawierają nazwę strony internetowej, z której pochodzą, czas przechowywania ich na urządzeniu końcowym oraz unikalny numer.
Podmiotem zamieszczającym na urządzeniu końcowym Użytkownika Serwisu pliki cookies, oraz uzyskującym do nich dostęp jest operator Serwisu SejmLog.
Pliki cookies wykorzystywane są w celu:
a) dostosowania zawartości stron internetowych Serwisu do preferencji Użytkownika oraz optymalizacji korzystania ze stron internetowych; w szczególności pliki te pozwalają rozpoznać urządzenie Użytkownika Serwisu i odpowiednio wyświetlić stronę internetową, dostosowaną do jego indywidualnych potrzeb;
You can’t perform that action at this time.