index.styl

/*
* Fityme - Fake it till you make it
* Stylus library to generate skeleton screen and improve your perceived performance
*/

// Encoding 
encoding = "data:image/svg+xml;utf8,"
url = "http://www.w3.org/2000/svg"
gradient = "<linearGradient id='shiny'><stop offset='0%' stop-color='white'></stop><stop offset='100%' stop-color='black'><animate attributeName='offset' from='0' to='1' dur='2.5s' repeatCount='indefinite' /></stop><stop offset='100%' stop-color='white'></stop></linearGradient>"
mask = "<mask id='shining'><rect x='0' y='0' width='200%' height='100%' fill='url(%23shiny)' /></mask>"
defs = "<defs>" + gradient + mask + "</defs>"

/*
* @func fityme
* @param {number} w - Width of svg canvas
* @param {number} h - Height of svg canvas
* @param {number} args.. - All your content, you can pass as params as you want like circles, squares or rectangles
* @returns {string} svg - SVG tag with it's encoding and all it's childs
*/
fityme(w, h, args...)
    tag = "<svg xmlns='http://www.w3.org/2000/svg' width='" + w + "' height='" + h + "'>" + defs + args + "</svg>"
    p('\n')
    p('FITYME card generated:')
    p(tag)
    encoding + tag

/*
* @func layout - A helper function to define the positioning of each shape
* @param {number} wdth - Width of shape to use in calculations
* @param {number} hght - Height of shape to use in calculations
* @param {number} x - Horizontal positioning of shape
* @param {number} y - Vertical positioning of shape
* @returns {array} cordinates - a list of 3 values 1. Calculated X position, 2. Calculates Y position and 3. translates to align the shape
*/
layout(wdth, hght, x, y,)
    transf = none
    transX = 0
    transY = 0
    
    if x == center
        x = 50%
        transX = wdth/2

    if y == center
        y = 50%
        transY = hght/2

    if y == bottom
        y = 100%
        transY = hght

    return x y translate(-(transX), -(transY))

render(tag, wdth, hght, positions, fill, radius, anim)
    x = positions[0]
    y = positions[1]
    trans = positions[2]

    tween = ""

    if anim
        tween = "mask='url(%23shining)' "
    
    space = " "

    open  = "<" //: rect
    rx    =     "rx='" + radius + "' "
    fill  =     "fill='" + replace('#', '%23', '' + fill) + "' "
    x     =     "x='" + x + "' "
    y     =     "y='" + y + "' "
    wdth  =     "width='" + wdth + "' "
    hght  =     "height='" + hght + "' "
    trans =     "transform='" + trans + "' "
    close = "/>"

    open + tag + space + tween + rx + fill + x + y + trans + wdth + hght + close

/*
* @func layout - Draws a rectangle
* @param {number} wdth - Width of shape
* @param {number} hght - Height of shape
* @param {number} x - Horizontal positioning of shape
* @param {number} y - Vertical positioning of shape
* @returns {string} tag - A complete rect svg tag
*/
rect(wdth = 100%, hght = auto, x = 0, y = 0, fill = '%23ccc', radius = 0, anim = false)
    positions = layout(wdth, hght, x, y)
    render("rect", wdth, hght, positions, replace('#', '%23', '' + fill), radius, anim)
    
/*
* @func layout - Draws a square
* @param {number} size - Width of shape
* @param {number} x - Horizontal positioning of shape
* @param {number} y - Vertical positioning of shape
* @returns {string} tag - A complete rect svg tag since a square is a rectangle with all sides equal
*/
sqr(size, x, y, fill)
    rect(size, size, x, y, fill)

/*
* @func layout - Draws a circle
* @param {number} size - Width of shape
* @param {number} x - Horizontal positioning of shape
* @param {number} y - Vertical positioning of shape
* @returns {string} tag - A svg cricle tag
*/
circle(size, x, y, fill, anim = false)
    half = size / 2
    positions = layout(size, size, x + size, y + size)

    x = positions[0]
    y = positions[1]
    trans = positions[2]
    
    "<circle fill='" + replace('#', '%23', '' + fill) + "' cx='" + x + "' cy='" + y + "' r='" + size + "' transform='" + trans + "' />"