Color overlay on a transparent PNG?

(Christopher Powers) #1

I have a client who has a ‘somewhat complex’ animation they want. They want six hearts (they’re thumbprints in a heart shape) and all six are different colors. Is there a way for me to have ONE png but have a color overlay to colorize them INSIDE Hype so I don’t need six separate PNG files for each color…?

(Hans-Gerd Claßen) #2

inline svg should be way …

(Christopher Powers) #3

ok thanks, going to read about this…I may have more questions, LOL I’m really behind on all these as I’m still relatively new to html5 and hype and all…

(Christopher Powers) #4

Ok first problem, says its not supported on Android 2.3, Firefox 3.6 and IE 8… I’m a little out of my depths here, is this fixable?

(Christopher Powers) #5

And when I changed colors, I got even more errors…


When using SVG you don’t need to use the filters. You can use simple attributes or use styles to change the color. Grab a rectangle element and in it’s innerHTML paste this code into it.

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="" width="100%" height="100%" viewBox="0 0 51 48">
<title>Five Pointed Star</title>
<path fill="#942193" stroke="none" d="m25,1 6,17h18l-14,11 5,17-15-10-15,10 5-17-14-11h18z"/>

#942193” is a plum color. :slight_smile:

(Hans-Gerd Claßen) #7

depends on which devices / systems / browsers you have to support …

for example there’s no need to use ccs3-filters to change the fill color.
say this is the heartpath within your svg:

        <path id="heart01" d="..."></path>

just define a style:


… and you’ll get a nice red heart :slight_smile:

(Hans-Gerd Claßen) #8




Also, @cgmpowers here is the code for a heart shape if you need it

<!--?xml version="1.0" encoding="utf-8"?-->
<svg xmlns:svg="" xmlns="" version="1.0" width="100%" height="100%" viewBox="0 0 655 605" id="svg2">
  <g id="layer1">
    <path d="M 297.29747,550.86823 C 283.52243,535.43191 249.1268,505.33855 220.86277,483.99412 C 137.11867,420.75228 125.72108,411.5999 91.719238,380.29088 C 29.03471,322.57071 2.413622,264.58086 2.5048478,185.95124 C 2.5493594,147.56739 5.1656152,132.77929 15.914734,110.15398 C 34.151433,71.768267 61.014996,43.244667 95.360052,25.799457 C 119.68545,13.443675 131.6827,7.9542046 172.30448,7.7296236 C 214.79777,7.4947896 223.74311,12.449347 248.73919,26.181459 C 279.1637,42.895777 310.47909,78.617167 316.95242,103.99205 L 320.95052,119.66445 L 330.81015,98.079942 C 386.52632,-23.892986 564.40851,-22.06811 626.31244,101.11153 C 645.95011,140.18758 648.10608,223.6247 630.69256,270.6244 C 607.97729,331.93377 565.31255,378.67493 466.68622,450.30098 C 402.0054,497.27462 328.80148,568.34684 323.70555,578.32901 C 317.79007,589.91654 323.42339,580.14491 297.29747,550.86823 z" id="path2417" style="fill:#ff5689"></path>

(Christopher Powers) #10

Thanks but its not a true heartshape. Its a thumbprint overlaying another thumbprint that makes the heart shape… Here’s a sample of the ad so you can see…

Each heart will appear on the screen & stay there… The first heart to appear is the red bottom one…then each one appears in the order from bottom to top…I think I might also make them ‘bounce/pulse’ in…

(Christopher Powers) #11

Ok, thanks, trying that now…

(Christopher Powers) #12

Holy crap I feel like I found a superpower or the holy grail of code here… LOL…

I opened the EPS in Illustrator, I went to export as a SVG. Before I even saved, I saw there was an html code button and basically viewed it…and then copied and pasted the html code into Hype as a HTML widget…

So I don’t even need an SVG image file, just the code…correct?? I can then adapt the code and change the colors that way…never loading a PNG or image file on these thumbprint hearts…

(Christopher Powers) #13

The coding is too long to share, but here’s the URL of me testing the svg html heart shape moving and rotating slightly…the movement is just random, I wanted to just see if I could do it.

(Christopher Powers) #14

So…my next question if I’m not pushing my luck here…

Since I need FIVE of these thumbprint hearts on the screen, do I just duplicate the HTML widget I made and have the code updated for each color?

If that’s a yes, then I’m going to encounter another problem. The file size of this document is already large because of the shear amount of svg code required to make this vector image. Wont duplicating it four more times quadruple the file size of the whole document?? Any suggestions on how to resolve that concern?


p.s. Still feel like I discovered a superpower in being able to make a vector image in html…


You’re better off exporting the pic as a PNG in different colours as the code you are using is so much because of all the paths you have to get that thumbprint image. The output should be far less that way than the SVG route. Other than that, there may be a way to optimise your SVG

(Christopher Powers) #16

yeah I agree, png maybe the way I need to go…if this vector artwork wasn’t so freaking complex, LOL it’d be awesome to do it entirely in html and NO image file though, damn I’m glad you all helped me give it a try…I knew html could render some amazing stuff but damn, that was impressive to see in all code!!!



Thank You for asking the question Chris - I learned a lot > @h_classen @DBear

(Christopher Powers) #18

Me too, I’m very new a this and even testing out the capabilities of SVG was exciting to try it out and I learned a lot. Thanks everyone for the help/advice/encouragement!!