<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Graphics {Modern art}</title>
        <style type='text/css'>
            @import url('data/genericstyle.css');
            .modernart, img {
                margin: 0 30px 0 0;
                border: none;
            }
        </style>
        <script type="text/javascript" src="modernart.js"></script>
        <script type="text/javascript">
            window.onload = function() {
                var pauseOrResume = function(obj) {
                    var elem = obj.parent
                    elem.onclick = elem.toggle
                }
                modernart.applyEffectToImages(pauseOrResume);
            }
        </script>
    </head>
    <body>
        <h1>A few examples</h1>
        <div class='simple'>
            <img src='media/greek-letters.png' alt='Greek letters' />
            <img src='media/greek-letters.png' alt='Greek letters'
                 class='modernart modernnumbers:5 moderncolor:individual'
                 />
            <img src='media/greek-letters.png' alt='Greek letters'
                 class='modernart modernnumbers:5 moderncolor:flow'
                 />
        </div>

        <div class="clear"></div>

        <h3>Pause and resume</h3>
        <p>Click on the masterpieces to pause and resume the animations.</p>

        <h2>Other examples</h2>
        <ul style='margin: 10px 0 20px 30px'>
            <li><a href='modernart-examples/?n=1'>Another example</a></li>
            <li><a href='modernart-examples/?n=2'>Another example</a></li>
            <li><a href='modernart-examples/?n=3'>Another example</a></li>
            <li><a href='modernart-examples/?n=4'>Another example</a></li>
            <li><a href='modernart-examples/?n=5'>Another example</a></li>
            <li><a href='modernart-examples/?n=6'>Another example</a></li>
        </ul>

        <h2>Code</h2>
            <p style='margin: 0 0 20px 30px'><a href='modernart.js'>Source code</a></p>

        <h2>Picture</h2>
            <p>The picture has been released under <a href='http://creativecommons.org/publicdomain/zero/1.0/'>CC 0</a>.</p>

        <div>
            <p><a href=".">Back to index</a></p>
        </div>
    </body>
</html>