HYBICON

Documentation


Hover mode
Click mode
Info mode

How to use?

Hybicon is based on SVG and works with Raphaël.js. Download and include these files into your HTML page and customize your icon with HTML5 data attributes.
<body>
    <div data-hybicon></div>
    <script src="js/required/raphael.min.js"></script>
    <script src="js/hybicon.min.js"></script>
</body>

How to customize?

Icon

You can use predefined hybrid icons with data-hybicon attribute.
<div data-hybicon="icon1-icon2"></div>
github
star
github-star

Positioning

The icons can be positioned with data-hybicon-positioning attribute.
<div data-hybicon="github-star" data-hybicon-positioning="topright|center|topleft"></div>
default
center
topleft

Hover mode

The icons animated on hover when set data-hybicon-hovermode attribute.
<div data-hybicon="code-fave" data-hybicon-hovermode="show|rotate|switch"></div>
default
rotate
switch

Click mode

The icons animated on click when set data-hybicon-clickmode attribute.
<div data-hybicon="icon1-icon2" data-hybicon-clickmode="show|rotate|switch"></div>
default
rotate
switch

Info mode

The info field appears when set data-hybicon-infomode attribute.
<div data-hybicon="download-code" 
     data-hybicon-infomode="show|right-*width*"
     data-hybicon-infotext="*your text*">
</div>
default
right
right-300

Hyperlink

Simple add an anchor tag around hybicon's div.
<a href="documentation.html#hyperlink"><div data-hybicon="link"></div></a>
click it

JavaScript disabled

Add a HTML element into div if you want to treat that case when JavaScript disabled.
<div data-hybicon="github-star" data-hybicon-hovermode="switch" style="text-align:center;">
    <img src="hybicon.sample.png" alt="GitHub stargazers" />
</div>
GitHub stargazers
try it without JS

Accessibility

SVG may be accessible with data-hybicon-alt attribute.
It provides an alternative text to SVG and hybicon will be read out by assistive technologies.
<div data-hybicon="noview-view" 
     data-hybicon-hovermode="switch" 
     data-hybicon-alt="Go to The Accessibility Project">
</div>
try it with screen reader

Keyboard

In click mode, hybicon is able to get focus and do the animation with keyboard. Default key is space bar and you can override it with data-hybicon-keycode attribute.
Furthermore when you use the onmousedown event on the div it fired by keydown also.
Generated SVG supports WAI-ARIA with aria-pressed attribute.
<div data-hybicon="switch-circle" 
     data-hybicon-clickmode
     data-hybicon-keycode="72"
     onmousedown="alert('It appears after mousedown and keydown.');">
</div>
try it with 'h' key

Advanced mode

Hybicon works on a 100x100 matrix. Positioning and animation are based on the following formula:
"centerX, centerY, size, rotate"
You can also set the time and easing of animation.
<div data-hybicon="arrowright-arrowright"
     data-hybicon-icon1init="20,50,25,0" <!-- default: "45,55,77,0" -->
     data-hybicon-icon1anim="35,50,30,180" <!-- default: "45,55,77,0" -->
     data-hybicon-icon2init="80,50,25,180" <!-- default: "80,20,33,0" -->
     data-hybicon-icon2anim="65,50,30,0" <!-- default: "80,20,33,0" -->
     data-hybicon-animtime="600" <!-- default: "200" -->
     data-hybicon-animease="bounce" <!-- default: "linear" -->
     data-hybicon-clickmode>
</div>
click it

3rd party icon

Icons are predefined SVG paths. You can use your own icons with data-hybicon-iconclass attribute.
In this case only hybicon.core.min.js necessary.
var myIcons = {
    triangle: "M0,100,L100,100,L50,20,z",
    rectangle: "M0,0,L100,0,L100,100,L0,100,z"
}
<div data-hybicon-iconclass="myIcons"
     data-hybicon="triangle-rectangle"
     data-hybicon-clickmode="rotate">
</div>
<script src="js/required/raphael.min.js"></script>
<script src="js/hybicon.core.min.js"></script>
click it

Style settings


Alignment

<div data-hybicon="icons" data-hybicon-align="left|center|right""></div>
left
default
right

Size

<div data-hybicon data-hybicon-size="unit in px|'css' for responsive behaviour""></div>
40
60
80
default
120
140

Background

<div data-hybicon="github-star" data-hybicon-background="as CSS background"></div>
#FFF

Border

<div data-hybicon="github-star" data-hybicon-border="as CSS border"></div>
solid 3px #333

Border's radius

<div data-hybicon="github-star" data-hybicon-borderradius="as CSS border-radius"></div>
15%

Color

<div data-hybicon="github-star" data-hybicon-color="as CSS color(-icon2 color)"></div>
#4183C4
#4183C4-#333

Style

<div data-hybicon="github-star" data-hybicon-style="fill|stroke(-icon2 style)"></div>
default
stroke
fill-stroke
stroke-fill

CSS

The parts of hybicon can be styled with following ids.
<div id="myHybicon"
     data-hybicon="user-idea" 
     data-hybicon-hovermode="switch" 
     data-hybicon-infomode 
     data-hybicon-size="css">
</div>
#myHybicon {
    width: 222px;
    height: 222px;
}
#myHybicon-svg {
    background: #FFF;
    border-radius: 15%;
}
#myHybicon-icon1 { 
    fill: #333;
}
#myHybicon-icon2 { 
    fill: #FFF;
    stroke: #F6921E;
    stroke-width: 2;
}
#myHybicon-info { 
    fill: #604c3b;
    stroke: #604c3b;
    stroke-width: 3;
}
#myHybicon-infotext {
    fill: #FFF;
    font: 11px Impact, sans-serif;
}

See the Pen hybicon.js template by Gábor Berkesi (@softwaretailoring) on CodePen.

How to spread?

Tweet for it
Beer for it
Star for it