Skip to content

Instantly share code, notes, and snippets.

View navin-moorthy's full-sized avatar
💻
Focused

Navin Moorthy navin-moorthy

💻
Focused
View GitHub Profile
@navin-moorthy
navin-moorthy / index.html
Last active January 1, 2020 12:48
CloneCSS-Textured Text
<h1>Navin Navi</h1>
@navin-moorthy
navin-moorthy / index.html
Last active January 1, 2020 12:48
CloneCSS-His Dark Materials Font Split
<h1 style="--text: 'His Dark Materials';"><span>His</span> Dark Materials</h1>
@navin-moorthy
navin-moorthy / index.html
Last active January 12, 2020 15:21
CloneCSS-GSAP Back Ease Circles
<svg class="animation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 716 1008">
<g fill="none" fill-rule="evenodd">
<rect width="716" height="1008" fill="#A5B229" />
<g class="circles" fill="#8DC0AF" transform="translate(0 292)">
<circle cx="358" cy="358" r="358" style="mix-blend-mode:multiply" />
<circle cx="358" cy="358" r="304" style="mix-blend-mode:multiply" />
<circle cx="358" cy="358" r="258" style="mix-blend-mode:multiply" />
<circle cx="358" cy="358" r="220" style="mix-blend-mode:multiply" />
<circle cx="358" cy="358" r="187" style="mix-blend-mode:multiply" />
<circle cx="358" cy="358" r="159" style="mix-blend-mode:multiply" />
@navin-moorthy
navin-moorthy / index.html
Last active January 14, 2020 02:56
CloneCSS-GSAP PIXI JS Blend Mode Circles Intro
<div class="container"></div>
@navin-moorthy
navin-moorthy / index.html
Last active January 15, 2020 02:32
CloneCSS-2020 Checkboxes and radio buttons
<ul>
<li>
<input id="c1" type="checkbox">
<label for="c1">Checkbox</label>
</li>
</ul>
@navin-moorthy
navin-moorthy / index.html
Last active February 7, 2020 17:39
CloneCSS-GASP SpeedLines
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 600 600">
<g class="speedLines">
<line x1="0" y1="0" x2="0" y2="0"></line>
<line x1="0" y1="0" x2="0" y2="0"></line>
<line x1="0" y1="0" x2="0" y2="0"></line>
<line x1="0" y1="0" x2="0" y2="0"></line>
<line x1="0" y1="0" x2="0" y2="0"></line>
<line x1="0" y1="0" x2="0" y2="0"></line>
<line x1="0" y1="0" x2="0" y2="0"></line>
<line x1="0" y1="0" x2="0" y2="0"></line>
@navin-moorthy
navin-moorthy / index.html
Last active February 7, 2020 18:39
CloneCSS-Nike Logo
<div id="nike">nike</div>
@navin-moorthy
navin-moorthy / index.html
Last active February 8, 2020 07:06
CloneCSS-GSAP Heart lines illusion
<svg class="animation" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 716 1008">
<defs>
<mask id="main-mask" maskUnits="userSpaceOnUse">
<rect width="716" height="716" y="292" fill="#fff"/>
</mask>
<mask id="heart-mask" maskUnits="userSpaceOnUse">
<path class="heart" fill="#fff" d="M358,412c122-309,712,10.25.5,588C-354,422,236,103,358,412Z"/>
</mask>
</defs>
<rect class="bg" width="716" height="1008" fill="#000113"/>
@navin-moorthy
navin-moorthy / playground.json
Last active February 18, 2020 09:40
Small Snippets
{
"scripts": [],
"showConsole": false
}
@navin-moorthy
navin-moorthy / power-mode-vs-code.json
Last active August 12, 2020 02:55
VS Code Power Mode Smokey Effect
{
"powermode.enabled": true,
"powermode.enableStatusBarComboTimer": false,
"powermode.enableShake": false,
"powermode.customExplosions": ["https://media.giphy.com/media/l378dE2QwudKXK1pK/giphy.gif"],
"powermode.explosionOrder": "sequential",
"powermode.explosionSize": 12,
"powermode.explosionFrequency": 1,
"powermode.maxExplosions": 1,
"powermode.explosionOffset": 0.5,