Skip to content

Instantly share code, notes, and snippets.

Peter Hrynkow peterhry

Block or report user

Report or block peterhry

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@peterhry
peterhry / square.css
Created Sep 29, 2014
CSS to force square aspect ratio
View square.css
.l-square {
padding-top: 100%;
position: relative;
}
.l-square > div {
position: absolute;
top: 0;
left: 0;
bottom: 0;
View gist:afac4906f2b330509fc7
<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 Jul 18, 2014
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.
View gist:019372e1b4e0efaed11d
$(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));
});
View Curved-type-with-SVG.markdown

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 Dec 4, 2013
Some handy SCSS mixins
View rad 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} {
View Wrapping-Algorithm-for-Multiline-Canvas-Text.markdown

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.

View index.html
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<style>
circle {
stroke: #000;
fill-opacity: .1;
}
@peterhry
peterhry / index.html
Created Feb 18, 2013
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.
View index.html
<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 Jan 10, 2013
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.
View index.html
<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 Jan 10, 2013
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.
View index.html
<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>
You can’t perform that action at this time.