Skip to content

Instantly share code, notes, and snippets.

View rampol's full-sized avatar

Ramon Polo rampol

View GitHub Profile
@rampol
rampol / index.html
Created June 29, 2018 20:10
Particles write text
<div class="title">
<h3>A N O T H E R <strong>C O D E P E N</strong></h3>
</div>
<div class="more-pens">
<a target="_blank" href="https://codepen.io/plasm/" class="white-mode">VIEW OTHER PENS</a>
<a target="_blank" href="https://codepen.io/collection/nZpPbz/" class="white-mode">VIEW OTHER PARTICLES</a>
</div>
@rampol
rampol / index.html
Created June 26, 2018 17:23
Monitor SVG Animation
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="300" wx="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<path id="stand" style="fill:#E8EDEE;" d="M361.931,494.345H150.069c0-19.5,15.81-35.31,35.31-35.31h141.241
C346.121,459.034,361.931,474.845,361.931,494.345"/>
<polygon id="standBack" style="fill:#B0B6BB;" points="317.793,459.034 194.207,459.034 211.862,388.414 300.138,388.414 "/>
<path id="screen" style="fill:#38454F;" d="M512,317.793H0V48.552c0-17.064,13.833-30.897,30.897-30.897h450.207
c17.064,0,30.897,13.833,30.897,30.897V317.793z"/>
@rampol
rampol / index.html
Created June 26, 2018 17:19
Path Slider Basic Demo
<!-- SVG icons -->
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="alarmclock" viewBox="0 0 30 32"><path class="icon__path" d="M 7.5,0 C 3.364,0 0,3.364 0,7.5 l 0,1.0625 c 0,0.276 0.224,0.5 0.5,0.5 0.276,0 0.5,-0.223 0.5,-0.5 L 1,7.5 C 1,3.916 3.916,1 7.5,1 L 8.375,1 C 8.651,1 8.875,0.776 8.875,0.5 8.875,0.224 8.651,0 8.375,0 L 7.5,0 z m 14,0 C 21.224,0 21,0.224 21,0.5 21,0.776 21.224,1 21.5,1 l 0.875,0 c 3.584,0 6.5,2.916 6.5,6.5 l 0,1.0625 c 0,0.276 0.224,0.5 0.5,0.5 0.276,0 0.5,-0.224 0.5,-0.5 l 0,-1.0625 C 29.875,3.364 26.511,0 22.375,0 L 21.5,0 z M 15,2 C 7.28,2 1,8.28 1,16 1,23.72 7.28,30 15,30 22.72,30 29,23.72 29,16 29,8.28 22.72,2 15,2 z m 0,1 C 22.168,3 28,8.832 28,16 28,23.168 22.168,29 15,29 7.832,29 2,23.168 2,16 2,8.832 7.832,3 15,3 z m -0.5,5.8125 c -0.276,0 -0.5,0.224 -0.5,0.5 L 14,16.5 c 0,0.133 0.06325,0.24975 0.15625,0.34375 l 4.90625,4.9375 c 0.098,0.098 0.21575,0.125 0.34375,0.125 0.128,0 0.277,-0.028 0.375,-0.125 0.195,-0.195 0.195,-0.52375 0,-0.71875 L 15
@rampol
rampol / index.html
Created June 23, 2018 19:13
WAAAVE
<div class="background"></div>
<div class="title">
<h3>PLASM.it - 2017</h3>
<h1>WAAA<span>VE</span></h1>
</div>
<div class="more-pens">
<a target="_blank" href="https://codepen.io/plasm/" class="white-mode">VIEW OTHER PENS</a>
<a target="_blank" href="https://codepen.io/plasm/pen/NpXaGQ" class="white-mode">CANVAS VERSION</a>
</div>
@rampol
rampol / carnival-balloons.markdown
Created June 23, 2018 19:13
Carnival Balloons
@rampol
rampol / index.html
Created June 23, 2018 19:12
MAGNETO
<div class="title">
<h3>PLASM.it - 2017</h3>
<h1>MAGNETO</h1>
<h3>X-Men Marvel Tribute</h3>
</div>
<div class="more-pens">
<a target="_blank" href="https://codepen.io/plasm/" class="white-mode">VIEW OTHER PENS</a>
<a target="_blank" href="https://codepen.io/collection/nZpPbz/" class="white-mode">VIEW OTHER PARTICLES</a>
</div>
@rampol
rampol / script.js
Created June 23, 2018 19:08
Test of Matter.js and Three.js
var DOT_SIZE = 30;
var X_START_POS = 120;
var Y_START_POS = 80;
// ‥‥‥‥‥‥‥‥‥‥‥‥‥□□□
// ‥‥‥‥‥‥〓〓〓〓〓‥‥□□□
// ‥‥‥‥‥〓〓〓〓〓〓〓〓〓□□
// ‥‥‥‥‥■■■□□■□‥■■■
// ‥‥‥‥■□■□□□■□□■■■
// ‥‥‥‥■□■■□□□■□□□■
// ‥‥‥‥■■□□□□■■■■■‥
@rampol
rampol / index.html
Created June 23, 2018 15:40
The Milk Glass
<aside>
<h1>The Milk Glass</h1>
<h2>by @gianlucaguarini</h2>
</aside>
<script>/**
* matter-js 0.14.0 by @liabru 2017-11-30
* http://brm.io/matter-js/
* License MIT
*/
!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var t;t="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,t.Matter=e()}}(function(){return function e(t,n,o){function i(s,a){if(!n[s]){if(!t[s]){var l="function"==typeof require&&require;if(!a&&l)return l(s,!0);if(r)return r(s,!0);var c=new Error("Cannot find module '"+s+"'");throw c.code="MODULE_NOT_FOUND",c}var d=n[s]={exports:{}};t[s][0].call(d.exports,function(e){var n=t[s][1][e];return i(n?n:e)},d,d.exports,e,t,n,o)}return n[s].exports}for(var r="function"==typeof require&&require,s=0;s<o.length;s++)i(o[s]);return i}({1:[function(e,t,n){var o={};t.exports=o;var i=e("../geometry/Vertices"),r=e("../geometry/Vector"),s=e("../core/Sleeping")
@rampol
rampol / playing-with-matter.markdown
Created June 23, 2018 15:34
Playing with Matter
@rampol
rampol / gelly-circle.markdown
Created June 23, 2018 15:33
Gelly circle