Skip to content

Instantly share code, notes, and snippets.

View peterhry's full-sized avatar

Peter Hrynkow peterhry

View GitHub Profile
@peterhry
peterhry / square.css
Created September 29, 2014 17:27
CSS to force square aspect ratio
.l-square {
padding-top: 100%;
position: relative;
}
.l-square > div {
position: absolute;
top: 0;
left: 0;
bottom: 0;
<svg preserveAspectRatio="xMinYMin" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 560 1388">
<defs>
<mask id="canTopMask">
<image width="560" height="1388" xlink:href="img/can-top-alpha.png"></image>
</mask>
</defs>
<image mask="url(#canTopMask)" id="canTop" width="560" height="1388" xlink:href="can-top.jpg"></image>
</svg>
@peterhry
peterhry / gist:019372e1b4e0efaed11d
Created July 18, 2014 16:25
jQuery Dropcaps - The CSS pseudo selector approach is too buggy. I’m using jQuery to wrap the first char in a style-able <span> instead.
$(document).ready(function () {
var p1 = $('.post-intro p').eq(0),
text = p1.text();
p1.html('<span class="dropcap">' + text.substr(0,1) + '</span>' + text.substr(1));
});
@peterhry
peterhry / Curved-type-with-SVG.markdown
Created July 6, 2014 04:08
A Pen by Peter Hrynkow.

Curved type with SVG

I’m planning to create an SVG branch for CircleType.js – Here is a little experiement.

A Pen by Peter Hrynkow on CodePen.

License.

@peterhry
peterhry / rad mixins
Created December 4, 2013 19:14
Some handy SCSS mixins
// Peter Hrynkow
// Grid mixin
[class*=span-] {
float: left;
position: relative;
}
@mixin grid ($name, $columns, $padding-x, $padding-y) {
$column-width: 100% / $columns;
@for $i from 1 through $columns {
.span-#{$name}-#{$i} {

Wrapping Algorithm for Multiline Canvas Text

A simple text wrapping algorithm for multiline canvas text. Does not support hyphenation but will break words that don’t fit on a line by themselves.

A Pen by Peter Hrynkow on CodePen.

License.

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<style>
circle {
stroke: #000;
fill-opacity: .1;
}
@peterhry
peterhry / index.html
Created February 18, 2013 18:14
A CodePen by peterhry. Curved Text - An improvement on this approach: http://css-tricks.com/set-text-on-a-circle/ In this case the character widths are calculated so that you don't need to use a monospaced font.
<span id="curved">Here is some hot curved text. It goes all the way around.</span>
<span id="curved2">Here it is going the other way. What do you think?</span>
@peterhry
peterhry / index.html
Created January 10, 2013 20:02
A CodePen by peterhry. 3D Axis Data Visualizer Thingy - We were going to use this on an internal project but it got canned. Might be useful for some type of data viz project.
<div class="viewport">
<div class="model">
<ul class="axis">
<li class="plane x">
<div class="poly"></div>
<div class="poly"></div>
<div class="poly"></div>
<div class="poly"></div>
<span class="label unselectable left">Min</span>
<span class="label unselectable right">Max</span>
@peterhry
peterhry / index.html
Created January 10, 2013 20:01
A CodePen by peterhry. 3D Axis Data Visualizer Thingy - We were going to use this on an internal project but it got canned. Might be useful for some type of data viz project.
<div class="viewport">
<div class="model">
<ul class="axis">
<li class="plane x">
<div class="poly"></div>
<div class="poly"></div>
<div class="poly"></div>
<div class="poly"></div>
<span class="label unselectable left">Min</span>
<span class="label unselectable right">Max</span>