Skip to content

Instantly share code, notes, and snippets.

View techonomics69's full-sized avatar
:octocat:
Focusing

Christian Anderson techonomics69

:octocat:
Focusing
View GitHub Profile
@techonomics69
techonomics69 / alien-deviation-of-microcosm.markdown
Created December 31, 2017 18:04
ALIEN - Deviation of microcosm
@techonomics69
techonomics69 / index.html
Created December 31, 2017 19:20
Morph complex paths
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 396 354.71"><defs><style>.cls-1{stroke:red;stroke-miterlimit:10;}</style></defs><title>Fichier 4animmorph1</title><g id="Calque_2" data-name="Calque 2"><g id="Calque_1-2" data-name="Calque 1"><path id="light" class="cls-1" d="M313.29,272.25a11.9,11.9,0,1,0-11.94,11.88A11.85,11.85,0,0,0,313.29,272.25ZM297.53,79.68A11.78,11.78,0,1,0,285.8,91.48,11.8,11.8,0,0,0,297.53,79.68Zm12.11-30.19a6.08,6.08,0,1,0,6,6.07A6,6,0,0,0,309.64,49.49ZM73.42,266.28a6.08,6.08,0,1,0-6.06-6.05A6,6,0,0,0,73.42,266.28ZM319.2,158.74h-5.48v7l5.48.32Zm-222-52.06-5-2.54-3.07,6.49,5.1,2.24Zm91.62-61.87,6.68-.41V38.84l-7.19.42ZM318.5,144.43l-5.53.68.61,6.8,5.55-.36Zm-116-105.6V44.4l6.7.36.46-5.54ZM141.22,264.18l6.39,3.28,2.39-5-6.09-3.13ZM257,53.58l-2.69,4.89,5.91,3.47,3-4.72Zm-127.87,203,6,4,3-4.71L132.43,252ZM95.66,97.94l4.81,2.83L104.12,95,99.5,91.87Zm221.83,82.24,1-7.1-5.52-.63-1,6.75ZM143.8,58.62l-2.71-4.88-6.16,3.66,3,4.71ZM85.41,145.47l-5.54-.62L79.27,152l5.55.31Zm217.26,74.59,3.47-6
@techonomics69
techonomics69 / index.html
Last active January 1, 2018 04:37
Multi Step Form with Progress Bar using jQuery and CSS3
<!-- multistep form -->
<form id="msform">
<!-- progressbar -->
<ul id="progressbar">
<li class="active">Account Setup</li>
<li>Social Profiles</li>
<li>Personal Details</li>
</ul>
<!-- fieldsets -->
<fieldset>
@techonomics69
techonomics69 / index.html
Last active June 2, 2021 11:56
particles.js
<!-- particles.js container -->
<div id="particles-js"></div>
<!-- stats - count particles -->
<div class="count-particles">
<span class="js-count-particles">--</span> particles
</div>
<!-- particles.js lib (JavaScript CodePen settings): https://github.com/VincentGarreau/particles.js -->
@techonomics69
techonomics69 / index.html
Created January 2, 2018 00:28
Mobile iPhone SVG Animation
<div class="main">
<?xml version="1.0" encoding="UTF-8"?>
<svg width="690px" height="619px" viewBox="0 0 690 619" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 48.2 (47327) - http://www.bohemiancoding.com/sketch -->
<title>Icon </title>
<desc>Created with Sketch.</desc>
<defs>
<polygon id="path-1" points="194.994586 0.283787341 194.994586 270.736381 0.585072827 269.66152 193.533003 0.283787341"></polygon>
<rect id="path-3" x="60" y="101" width="49" height="40" rx="4"></rect>
</defs>
@techonomics69
techonomics69 / animated-unsubscribe-page.markdown
Last active March 24, 2018 06:19
Animated Unsubscribe Page

Illustration brought to life

I recreated an illustration by Ryan Morrison in Webflow with HTML and CSS visually, without writing any code.

A Pen by christian anderson on CodePen.

License.

@techonomics69
techonomics69 / hover-effect-inspired-by-grav.markdown
Last active March 24, 2018 06:25
Hover Effect inspired by grav
require 'json'
require 'intercom'
require 'json'
require 'csv'
class ConvoParser
attr_reader :intercom, :output_file
def initialize(client, file_name)
@intercom = client
@techonomics69
techonomics69 / index.html
Created August 13, 2019 12:04
Paper Clip Toggle Switch
<input type="checkbox" id="toggle">
<label class="switch pristine" for="toggle">
<div class="handle"></div>
</label>