Blorps

Blog:

  • Genetics Game Blog

    • Draggable DIV Element

    Click and hold the mouse button down while moving the DIV element

    Click here to move

    Move

    this

    =^w^=

    Blorp Maker

    blorp-base blorp-face blorp-outline blorp-pattern-1 blorp-pattern-2 blorp-pattern-3 blorp-pattern-4
    Click on one of the dropdown menus and choose a category. Then click on one of the options and customize the blorp!

    Name your character:
    rainbow cat
    fruit fruit fruit fruit fruit

    Real pixel, color applied through CSS background-color:

    Filtered pixel, color applied through CSS filter:

    cat

    The goal was to be able to create custom style sheets and allow for the coloring of icons

    For this code to work well the starting color needs to be black. If your icon set isn't black you can prepend "brightness(0) saturate(100%)" to your filter property which will first turn the icon set to black.

    For as long as I worked on creating this solution from multiple resources I found some had spent far longer to create this already completed solution. Only slightly modified to focus on HEX colors. Credit goes to MultiplyByZer0 for their post https://stackoverflow.com/a/43960991/604861

    https://codepen.io/sosuke/pen/Pjoqqp