Skip to content

Instantly share code, notes, and snippets.

View the-gigi's full-sized avatar

Gigi Sayfan the-gigi

105 followers · 0 following
View GitHub Profile
@the-gigi
the-gigi / svg-part-one-strokes.html
Created September 2, 2021 04:36
<svg>
<rect x="10" y="10" width="60" height="60" fill="orange"/>
<rect x="70" y="10" width="60" height="60" fill="plum"/>
<line x1="15" x2="125" y1="40" y2="40"
stroke="white"
stroke-width="10"
stroke-opacity="0.3"
/>
</svg>
@the-gigi
the-gigi / svg-part-one-opacity.html
Created September 2, 2021 04:34
<svg width="300" height="200">
<path d="M 10 10
l 40 40
v 20
h 40
v -20
l 40 -40
z
" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/>
<path d="M 40 30
@the-gigi
the-gigi / svg-part-one-half-moons.html
Created September 2, 2021 04:32
<svg>
<path d="M 40 40
a 10 10, 0, 0, 0, 20, 0
z
m 30 20
a 10 10, 0, 0, 0, 20, 0
z
"
fill="green"/>
</svg>
@the-gigi
the-gigi / svg-part-one-basic-shapes.html
Last active September 2, 2021 04:31
svg-part-one-basic-shapes.html
<svg width ="150" height="250">
<line x1="10" x2="100" y1="10" y2="10" stroke="blue" />
<rect x="10" y="20" rx="10" ry="10" width="90" height="20" fill="orange"/>
<circle cx="20" cy ="60" r="10" stroke="green" fill="none"/>
<ellipse cx="50" cy ="100" rx="50" ry="20" stroke="red" fill="yellow"/>
<polyline points="10 140 30 150 50 140 70 150 90 140"
stroke="gray" fill="transparent" stroke-width="3"/>
<polygon points="50, 165 55, 180 70, 180 60, 190 65, 205 50, 195 35, 205 40, 190 30, 180 45, 180" stroke="purple" stroke-width="3" fill="lime"/>
</svg>
@the-gigi
the-gigi / svg-part-one-line.html
Created September 2, 2021 03:41
<svg width="200" height="100">
<line x1="10" x2="180" y1="10" y2="80" stroke="pink" stroke-width="3" />
</svg>
@the-gigi
the-gigi / svg-part-one-circle.html
Last active September 2, 2021 03:40
<svg viewBox="0 0 100 50" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="25" r="15"/>
</svg>
@the-gigi
the-gigi / graphics-evolution-webgl-3.js
Created July 11, 2021 01:57
var render = function () {
requestAnimationFrame(render);
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
renderer.render(scene, camera);
};
render();
@the-gigi
the-gigi / graphics-evolution-webgl-2.js
Created July 11, 2021 01:54
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial({ color: "gold" });
var cube = new THREE.Mesh( geometry, material );
scene.add(cube);
camera.position.z = 2;
@the-gigi
the-gigi / graphics-evolution-webgl-1.js
Created July 11, 2021 01:52
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(100,
window.innerWidth/window.innerHeight,
0.1,
1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
@the-gigi
the-gigi / graphics-evolution-three-js.html
Created July 11, 2021 01:50
<html>
<body>
<script src="https://threejs.org/build/three.js"></script>
<script>
// Javascript will go here.
</script>
</body>
</html>