Skip to content

Instantly share code, notes, and snippets.

HARUN PEHLİVAN harunpehlivan

View GitHub Profile

Cubic Bezier curve w/ SVG code

A Cubic Bezier is defined by a start point, an end point two control points which describe the slope of the curve at the beginning of the line and at the end of it.

In SVG a Cubic Bezier can be defined as a path, or as part of a path. In this case the path definition contains a Move part defining the starting point and a Cubic Curve part defining the two control points and the end point.

React and SVG is used for display, Redux is used for state handling, and RxJS is handling the drag & drop.

The drag & drop handling of this pen is described in the following article: http://codepen.io/HunorMarton/post/handling-complex-mouse-and-touch-events-with-rxjs

@harunpehlivan
harunpehlivan / index.html
Created May 25, 2021 22:59
Tangent + Cotangent
<div id="app">Loading...</div>
<div id="app">Loading...</div>
@harunpehlivan
harunpehlivan / index.html
Created May 25, 2021 22:53
Sine + Cosine
<div id="app">Loading...</div>
<div id="app" />
@harunpehlivan
harunpehlivan / index.html
Created May 25, 2021 22:47
Tilting Maze game
<div id="center">
<div id="game">
<div id="maze">
<div id="end"></div>
</div>
<div id="joystick">
<div class="joystick-arrow"></div>
<div class="joystick-arrow"></div>
<div class="joystick-arrow"></div>
<div class="joystick-arrow"></div>
@harunpehlivan
harunpehlivan / index.html
Created May 25, 2021 22:35
SVG tutorial
<div id="root"></div>
<a id="youtube" target="_blank" href="https://www.youtube.com/user/harunpehlivan1">
<span>HARUN PEHLİVAN </span>
</a>
<div id="youtube-card">
HARUN PEHLİVAN YouTube
</div>
<script>
@harunpehlivan
harunpehlivan / index.html
Created May 25, 2021 21:32
SVG tutorial
<div id="root"></div>
<a id="youtube" target="_blank" href="https://youtu.be/kBT90nwUb_o">
<span>Learn SVGs</span>
</a>
<div id="youtube-card">
Learn SVG through 24 examples
</div>
<script>

Crossy Road with three.js

An interactive tech demo inspired by Crossy Road using three.js where I put together a scene with an orthographic camera that follows the player, a few simplified 3D objects with some texture, lights and shadows, and a basic game logic that randomly generates a level that you can walk through.

A Pen by HARUN PEHLİVAN on CodePen.

License.

@harunpehlivan
harunpehlivan / index.html
Created May 25, 2021 21:20
Stick Hero with Canvas
<div class="container">
<div id="score"></div>
<canvas id="game" width="375" height="375"></canvas>
<div id="introduction">Hold down the mouse to stretch out a stick</div>
<div id="perfect">DOUBLE SCORE</div>
<button id="restart">RESTART</button>
</div>
<a id="youtube" href="https://youtu.be/eue3UdFvwPo" target="_blank">
<span>See how this game was made</span>