Skip to content

Instantly share code, notes, and snippets.

View vineeth-pappu's full-sized avatar
🥇
History in the making

Vineeth Viswanathan vineeth-pappu

🥇
History in the making
View GitHub Profile
@vineeth-pappu
vineeth-pappu / index.html
Created January 17, 2021 07:24
OutRun ( no canvas)
<div id="game">
<div id="road">
<div id="cloud"></div>
<div id="hero"></div>
</div>
<div id="hud">
@vineeth-pappu
vineeth-pappu / futuristic-hud-with-3d-transform.markdown
Created January 17, 2021 07:38
Futuristic HUD with 3D transform

Field Agents UI Design

Playing with the "plus" containers. It looks a bit futuristic and stealthy while also keeping it simple.

A Pen by vineeth on CodePen.

License.

@vineeth-pappu
vineeth-pappu / index.html
Created January 17, 2021 07:49
Scifi Stuff
<div id="starfield"></div>
<div id="app">
<div class='gui'>
<div class="ui-border-v2 t">
<svg viewBox="0 0 620 30">
<path d="M628.587,25.19l-7.963-13.811h-0.008L617.525,6.03A12.244,12.244,0,0,0,607.74.994H409.994V0h198.43c4.149,0,8.2,2.1,9.748,4.781l2.949,5.089h0.028l8.086,14.062A12.237,12.237,0,0,0,639.03,29h80.976v0.006h77.735a12.243,12.243,0,0,0,9.784-5.037l3.091-5.348h0.008l7.963-13.811C820.142,2.113,824.192,0,828.345,0H1029.99V1H829.029a12.237,12.237,0,0,0-9.794,5.068L811.15,20.131h-0.029l-2.948,5.089C806.618,27.9,802.573,30,798.424,30H638.345C634.192,30,630.142,27.887,628.587,25.19Z" transform="translate(-410)"></path>
</svg>
<div class="batt"></div>
</div>
<div class='ui-c-border' v-for='n in ["t", "b"]' :class='n' :key='n + Math.random() + "border"'>
@vineeth-pappu
vineeth-pappu / index.html
Created January 17, 2021 10:03
Watch Dogs Loading Animation
<svg width="116px" height="130px" viewBox="0 0 116 130" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Watch Dogs Loader 1</title>
<description></description>
<defs>
<linearGradient id="gradient-1" x1="0%" x2="41%" y1="100%" y2="17%">
<stop offset="0%" style="stop-color:rgba(255,255,255,0.9)"/>
<stop offset="54%" style="stop-color:rgba(255,255,255,0.9)"/>
<stop offset="54%" style="stop-color:rgba(255,255,255,0.6)"/>
<stop offset="100%" style="stop-color:rgba(255,255,255,0.5)"/>
</linearGradient>
@vineeth-pappu
vineeth-pappu / index.html
Created January 17, 2021 10:06
Watch Dogs Glitch Effect
<div class="glitch">
<div class="glitch-img"></div>
<div class="glitch-img"></div>
<div class="glitch-img"></div>
<div class="glitch-img"></div>
</div>
@vineeth-pappu
vineeth-pappu / index.html
Created January 17, 2021 10:06
Watch Dogs Glitch Effect
<div class="glitch">
<div class="glitch-img"></div>
<div class="glitch-img"></div>
<div class="glitch-img"></div>
<div class="glitch-img"></div>
</div>