- Export your SVG
- Chuck it inline on your page somewhere
- Add
width="0px" height="0px" style="position:absolute;pointer-events:none"to the svg element to make it not visible on the page. - Put the
<path>element within a<clipPath>element - Add an ID and
clipPathUnits="objectBoundingBox"to the clipPath element. - Convert the path data to 'relative' using this site: https://yoksel.github.io/relative-clip-path/ (when exported, path values will be 'absolute', and reference pixel dimensions essentially, this makes it truly responsive).
- Reference the ID you added for the clipPath in your CSS.
Jeremy Driver JezDriver
JezDriver
/ prompt-colours.sh
Created
January 9, 2026 01:43
Variables for outputting text with nice colours #bash
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 characters
| # Include this in your bash profile with: | |
| # source "/path/prompt-colours.sh" | |
| # ------- | |
| # Colours | |
| # ------- | |
| # Reset | |
| NC='\033[0m' # Text Reset |
JezDriver
/ responsive-svg-clip-path.md
Last active
October 15, 2025 06:17
Responsively sizing clip-path using SVG #svg #html #css
JezDriver
/ is-new-session.php
Created
June 24, 2025 01:47
Check if a session exists and a variable has been set #php
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 characters
| <? | |
| function isNewSession() { | |
| if(session_id() == '' || !isset($_SESSION) || session_status() === PHP_SESSION_NONE) { | |
| // session isn't started | |
| session_set_cookie_params(3600,"/"); // 1 hour | |
| session_start(); | |
| } | |
| if (!isset($_SESSION['new_session'])) { | |
| $_SESSION['new_session'] = true; |
JezDriver
/ export-import-all-databases.sh
Last active
March 30, 2025 07:00
Export / import all databases #mysql #bash #terminal
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 characters
| # Export | |
| mysqldump --all-databases > all_databasess.sql | |
| # Import | |
| mysql -u root < all_databasess.sql |
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 characters
| body { | |
| background: #222; | |
| } | |
| .btn { | |
| position: relative; | |
| display: inline-block; | |
| background: transparent; | |
| color: gold; | |
| border: 2px solid; |
JezDriver
/ animations.scss
Last active
March 25, 2025 05:44
Peekaboo - animate elements when they enter the viewport #js #css #scss
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 characters
| [data-peekaboo="fadeinup"] { | |
| transition: 1.5s ease; | |
| transition-property: opacity, transform; | |
| // Animations runs automatically if there's no JS | |
| &:not(.visible, html.no-js *) { | |
| opacity: 0; | |
| transform: translateY(1em); | |
| } | |
| } |
JezDriver
/ nice-eases.css
Last active
September 25, 2024 02:39
Collection of nice eases for css anims
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 characters
| :root { | |
| --fast-slow-fast: cubic-bezier(0.25, 1, 0.25, 1); /* https://sandwich.co/ */ | |
| --fase-out-slow-in: cubic-bezier(0.4, 0, 0.2, 1); /* 0.5s dur https://debutify.com/blog/building-single-product-shopify-store-from-scratch */ | |
| } |
JezDriver
/ google-sheets-exclude-range-from-other-range.md
Created
August 16, 2024 04:56
Exclude a range from another range, returning the initial range without items in the second #gsheets
https://stackoverflow.com/a/72226248
=filter(mainRange, not(iferror( match(mainRange,exclusionRange,0), false )), mainRange<>"")
JezDriver
/ dev-tools-broken-link-checker.js
Created
August 1, 2024 06:32
Check broken links using dev tools #js
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 characters
| // Originally from Jhey: https://twitter.com/jh3yy/status/1793628022245150752 | |
| // I found from https://www.amitmerchant.com/little-devtools-snippet-to-check-broken-links-on-a-webpage/ | |
| // I added the a in the a[href] selector to avoid svg use elements | |
| // 1. Run this in dev tools | |
| // 2. Check the network tab (filter by Fetch/XHR) - see if there are any errors | |
| // 3. Repeat for each page | |
| $$('a[href]:not([href=""])').forEach(anchor => { | |
| console.info({ anchor, href: anchor.href }) | |
| fetch(anchor.href, { method: 'HEAD' }) |
JezDriver
/ use-video-as-poster.html
Created
August 1, 2024 02:53
Use a video as only a poster without preloading the video itself #html
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 characters
| <!-- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#preload --> | |
| <video muted preload="metadata"> | |
| <source src="/blah.mp4" type="video/mp4"> | |
| </video> |
NewerOlder