Image coloring, help my fake dogs pass on their markings

[silverpaws]

I have a browser game already running that revolves around breeding dogs. Right now we use static images, and I'd like markings and colors to be traits that are inheritable through generations.

I am able to layer images based on the parents layers to create a new dog with new markings. However, this only works with precolored layers. Which means the markings and such are not really being inherited, there is no chance for uniqueness at all.

What I would like to achieve is the ability to colors parts of a layer or whole image based on what the parents have colored. So lets say you are breeding two border collies, the sire has four white socks and the dam has no socks at all. It should produce puppies anywhere on that spectrum, some with half socks, some with just white feet, etc.

I hope I'm explaining this correctly. In my head, I see this being possible by coloring only those certain parts of an image. So I only color the feet for example, in a somewhat random pattern based on the parents feet patterns. So this eliminates the need for precolored layers and presents the possibility of random mutations.

Is this at all achieveable? Is there another way that I'm not thinking of?

I have an intermediate working knowledge of php, I've coded most of the game myself, but then I hit something like this and get completely stuck. Help put me on the right track please?

[mogosselin]

Maybe you could color an SVG image with different layers over your original image. I think you can do that with CSS3 (no need to dynamically generate an image on the server side):

http://stackoverflow.com/questions/9529300/can-i-change-the-fill-color-of-an-svg-path-with-css

 

(I searched for "coloring SVG with CSS")