Mutation and Evolution of Animated SVG Figures

Johnny Martin1, Ignatius Yuwono2
1San Jose State University, 2PayPal
Play (23min) Download: MP4 | MP3

Inspired by a similar program introduced by Richard Dawkins, our program provides a dynamic updating display of primitive animated SVG biomorphs. Our SVG biomorphs evolves on the screen under the influence of mouse interactions that guide mutations along an evolutionary path. Genes control organism traits which are realized in SVG with JavaScript animation. JavaScript events trigger selective mutation forming the interface for user interaction. This paper describes a system of dynamic shape-based organisms with quantitative traits, evolving from simple to complex organisms through user selection.


In The Blind Watchmaker[1], Richard Dawkins describes a computer program to simulate the evolution of biomorphs. The program presented is an example of a genetic algorithm (GA). Dawkins’s program simulates biological evolution in the computer by attempting to modeling a complex structure’s evolutionary development via cumulative selection.

Dawkins models an unfolding evolution with a specific goal provide by user input. In contrast to Darwinist selection the program uses user controlled selection. The biomorphs that evolve in the program develop, and their embodiment is controlled by a number of trait factors encoded in “genes” which mutate in each generation. Mutations result from user input. This alters biomorph development and leads to new biomorph forms.

The program functions as follows. A parent is selected. The subroutine REPRODUCTION runs, and generates random mutations in each of the 9 genes of the parent; the new genes are passed to the subroutine DEVELOPMENT, which draws new biomorphs based on the new genes. The result is a set of 9 offspring, each with a variation of one of the parent’s genes. One offspring is selected to be the parent of the next generation. This process, repeated multiple times, gives birth to the program EVOLUTION.

Several implementations of biomorph generating programs can be found in the literature [2,3,4]. Ours offers an interesting feature that encodes traits for biomorphs to animate. The animation trait is controlled by one of several genes.

Living Biomorphs in SVG

Our version of biomorph includes genes that control for animation or movement of joints between shape structures. Effectively this allows for the development of biomorphs that are jointed with movable joints. Each successive iteration provides the biomorph with grouped sub-structures. Both shape structures, their groupings, and their movement will morph and mutate also with each successive iteration.

SVG is the ideal medium for expressing biomorph mutation since SVG allows for transforming of shape structures and their groupings–via scaling, rotation, and translation–with much less programming effort compared to other graphics systems. Since each joint allows for relative movement, SVG is also ideally suited to express biomorph animation, which can be achieved using JavaScript.

In conclusion, by using SVG as a medium, we have been able to effectively visualize systems of animated biomorphs with quantitative traits, evolving from simple to complex–having multi-jointed limbs and other complex natural and unnatural appearances–through simple user selection.


[1] Dawkins, R. The Blind Watchmaker, W. W. Norton & Company, 1996, ISBN-13: 978-0393315707

[2] Sims, K. Artificial evolution for computer graphics, ACM SIGGRAPH Computer Graphics, v.25 n.4, p.319-328, July 1991

[3] Bai L., Eyiyurekli M., and Breen, D.E. Self-organizing primitives for automated shape composition. In Proc. IEEE International Conference on Shape Modeling & Applications, 2008.

[4] Bai L., Eyiyurekli M., and Breen, D.E. Automated shape composition based on cell biology and distributed genetic programming. In Proc. of the 10th annual conference on Genetic and evolutionary computation, July 12-16, 2008.

[5] Moles A.A. Théorie de l’information et perception esthétique. Denoel, 1958.

[6] Gagné, C., Parizeau, M. Genericity in evolutionary computation software tools: Principles and case-study. International Journal on Artificial Intelligence Tools, 15(2):173–194, 2006.

[7] Fleischer, K.W., Barr, A.H. A multiple-mechanism developmental model for defining self-organizing geometric structures, 1995

[8] Klein, J., Spector, L. Unwitting distributed genetic programming via asynchronous JavaScript and XML. In Proc of the 9th annual conference on Genetic and evolutionary computation, July 07-11, 2007.