<commit_before><!DOCTYPE html>
<html>
	<head>
    <style>
      html, body { margin: 0; padding: 0; width: 100%; height: 100%; }
      
      @keyframes fadeout {
        from { opacity: 1 }
        to { opacity: 0 }
      }

      @keyframes popin {
        0% { transform: scale(0.1) }
        80% { transform: scale(1) }
        100% { transform: scale(0.95) }
      }

      .flower {
        position: absolute;
        top: 300px;
        left: 300px;
        animation: fadeout 2s ease-in, popin 0.5s ease-in-out;
        animation-duration: 1s, 0.3s;
        animation-delay: 0.3s, 0;
        animation-fill-mode: forwards, forwards;
      }

      .flower .petal {
        position: absolute;
        top: 0;
        left: 0;
        -webkit-mask-image: url('petal.svg');
        mask-image: url('petal.svg');
        -webkit-mask-size: 100% auto;
        mask-image-size: 100% auto;
        background-repeat: no-repeat;
        background-size: 100% auto;
        transform-origin: bottom center;
      }

      .flower .center {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
      }

      .flower .pistil {
        position: absolute;
        background: gold;
      }

      .flower .pistil.dotted {
        background-image: -webkit-repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
        background-image: -moz-repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
        background-image: repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
        background-size: 3px 3px;
      }

      .flower .pistil.striped {
        background-image: -webkit-repeating-linear-gradient(135deg, rgba(0,0,0,.3), rgba(0,0,0,.3) 1px, transparent 2px, transparent 2px, rgba(0,0,0,.3) 3px);
        background-image: -moz-repeating-linear-gradient(135deg, rgba(0,0,0,.3), rgba(0,0,0,.3) 1px, transparent 2px, transparent 2px, rgba(0,0,0,.3) 3px);
        background-image: repeating-linear-gradient(135deg, rgba(0,0,0,.3), rgba(0,0,0,.3) 1px, transparent 2px, transparent 2px, rgba(0,0,0,.3) 3px);
        background-size: 4px 4px;
      }

      .flower .pistil.border1 {
        border-style: outset;
        border-color: darkblue;
      }
    </style>
	</head>
	<body>
    <script>
      (function () {

        function makeFlower(radius, numPetals) {
          var flowerDiv = document.createElement('div');
          var centerDiv = document.createElement('div');
          var pistilDiv = document.createElement('div');

          var petalColour = 'rgb(' +
            Math.floor(Math.random() * 255) + ', ' +
            Math.floor(Math.random() * 255) +', ' +
            Math.floor(Math.random() * 255) + ')';

          var petal;

          var pistilBackgrounds = [
            null, 'striped', 'dotted'
          ];

          var petalWidth = radius/8 * (1+Math.random()*2);
          var pistilRadius = radius/8 * (1+Math.random()*2);

          flowerDiv.classList.add('flower');
          centerDiv.classList.add('center');
          pistilDiv.classList.add('pistil');
          flowerDiv.style.width = radius + 'px';
          flowerDiv.style.height = radius + 'px';
          flowerDiv.style.marginTop = (-radius/2) + 'px';
          flowerDiv.style.marginLeft = (-radius/2) + 'px';

          for (var i = 0; i < numPetals; ++i) {
            petal = document.createElement('div');
            petal.classList.add('petal');
            petal.style.top = (-radius/2) + 'px';
            petal.style.left = (-petalWidth/2) + 'px';
            petal.style.transform = 'rotate(' + (i*Math.PI*2/numPetals) + 'rad)';
            petal.style.width = petalWidth + 'px';
            petal.style.height = radius/2 + 'px';
            petal.style.backgroundColor = petalColour;
            centerDiv.appendChild(petal);
          }

          pistilDiv.style.width = pistilRadius + 'px';
          pistilDiv.style.height = pistilRadius + 'px';
          pistilDiv.style.borderRadius = pistilRadius + 'px';
          pistilDiv.style.marginTop = -pistilRadius/2 + 'px';
          pistilDiv.style.marginLeft = -pistilRadius/2 + 'px';

          pistilDiv.classList.add(pistilBackgrounds[Math.floor(Math.random() * pistilBackgrounds.length)]);

          centerDiv.appendChild(pistilDiv);
          flowerDiv.appendChild(centerDiv);

          centerDiv.style.transform = 'rotate( ' + (Math.random()*Math.PI*2) + 'rad)';

          return flowerDiv;
        }

        var maxRadius = 500;
        var minRadius = 10;

        var frequencies = [
          16.35,              // C
          20.60,              // E
          24.50               // G
        ];

        var mouseDirty = false;
        var mousePosition = [0, 0];

        document.addEventListener('mousemove', function (e) {
          mouseDirty = true;
          mousePosition[0] = e.clientX
          mousePosition[1] = e.clientY;
        });

        var context = new AudioContext;

        setInterval(function () {
          if (mouseDirty) {
            var radius = Math.random() * (maxRadius - minRadius) + minRadius;
            var numPetals = Math.round(Math.random()*10) + 4;
            var flower = makeFlower(radius, numPetals);

            flower.style.left = mousePosition[0] + 'px';
            flower.style.top = mousePosition[1] + 'px';

            document.body.appendChild(flower);

            var oscillator = context.createOscillator();
            var gainNode = context.createGain();
            gainNode.connect(context.destination);
            gainNode.gain.value = 1;

            var octaveShift = Math.pow(2, 4 - Math.round(radius/(maxRadius-minRadius)*4) + 1);
            var baseFrequency = frequencies[Math.floor(Math.random() * frequencies.length)];

            oscillator.frequency.value = baseFrequency * octaveShift;
            oscillator.connect(gainNode);
            oscillator.start(0);

            var gainInterval = setInterval(function () {
              gainNode.gain.value = Math.max(0, gainNode.gain.value - 0.05);
            }, 10);

            setTimeout(function () {
              document.body.removeChild(flower);
              oscillator.stop();
              clearInterval(gainInterval);
            }, 2000);

            mouseDirty = false;
          }
        }, 100);
<commit_msg>two chords for flowers<commit_after><!DOCTYPE html>
<html>
	<head>
    <style>
      html, body { margin: 0; padding: 0; width: 100%; height: 100%; }
      
      @keyframes fadeout {
        from { opacity: 1 }
        to { opacity: 0 }
      }

      @keyframes popin {
        0% { transform: scale(0.1) }
        80% { transform: scale(1) }
        100% { transform: scale(0.95) }
      }

      .flower {
        position: absolute;
        top: 300px;
        left: 300px;
        animation: fadeout 2s ease-in, popin 0.5s ease-in-out;
        animation-duration: 1s, 0.3s;
        animation-fill-mode: forwards, forwards;
      }

      .flower .petal {
        position: absolute;
        top: 0;
        left: 0;
        -webkit-mask-image: url('petal.svg');
        mask-image: url('petal.svg');
        -webkit-mask-size: 100% auto;
        mask-image-size: 100% auto;
        background-repeat: no-repeat;
        background-size: 100% auto;
        transform-origin: bottom center;
      }

      .flower .center {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
      }

      .flower .pistil {
        position: absolute;
        background: gold;
      }

      .flower .pistil.dotted {
        background-image: -webkit-repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
        background-image: -moz-repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
        background-image: repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
        background-size: 3px 3px;
      }

      .flower .pistil.striped {
        background-image: -webkit-repeating-linear-gradient(135deg, rgba(0,0,0,.3), rgba(0,0,0,.3) 1px, transparent 2px, transparent 2px, rgba(0,0,0,.3) 3px);
        background-image: -moz-repeating-linear-gradient(135deg, rgba(0,0,0,.3), rgba(0,0,0,.3) 1px, transparent 2px, transparent 2px, rgba(0,0,0,.3) 3px);
        background-image: repeating-linear-gradient(135deg, rgba(0,0,0,.3), rgba(0,0,0,.3) 1px, transparent 2px, transparent 2px, rgba(0,0,0,.3) 3px);
        background-size: 4px 4px;
      }

      .flower .pistil.border1 {
        border-style: outset;
        border-color: darkblue;
      }
    </style>
	</head>
	<body>
    <script>
      (function () {

        function makeFlower(radius, numPetals) {
          var flowerDiv = document.createElement('div');
          var centerDiv = document.createElement('div');
          var pistilDiv = document.createElement('div');

          var petalColour = 'rgb(' +
            Math.floor(Math.random() * 255) + ', ' +
            Math.floor(Math.random() * 255) +', ' +
            Math.floor(Math.random() * 255) + ')';

          var petal;

          var pistilBackgrounds = [
            null, 'striped', 'dotted'
          ];

          var petalWidth = radius/8 * (1+Math.random()*2);
          var pistilRadius = radius/8 * (1+Math.random()*2);

          flowerDiv.classList.add('flower');
          centerDiv.classList.add('center');
          pistilDiv.classList.add('pistil');
          flowerDiv.style.width = radius + 'px';
          flowerDiv.style.height = radius + 'px';
          flowerDiv.style.marginTop = (-radius/2) + 'px';
          flowerDiv.style.marginLeft = (-radius/2) + 'px';

          for (var i = 0; i < numPetals; ++i) {
            petal = document.createElement('div');
            petal.classList.add('petal');
            petal.style.top = (-radius/2) + 'px';
            petal.style.left = (-petalWidth/2) + 'px';
            petal.style.transform = 'rotate(' + (i*Math.PI*2/numPetals) + 'rad)';
            petal.style.width = petalWidth + 'px';
            petal.style.height = radius/2 + 'px';
            petal.style.backgroundColor = petalColour;
            centerDiv.appendChild(petal);
          }

          pistilDiv.style.width = pistilRadius + 'px';
          pistilDiv.style.height = pistilRadius + 'px';
          pistilDiv.style.borderRadius = pistilRadius + 'px';
          pistilDiv.style.marginTop = -pistilRadius/2 + 'px';
          pistilDiv.style.marginLeft = -pistilRadius/2 + 'px';

          pistilDiv.classList.add(pistilBackgrounds[Math.floor(Math.random() * pistilBackgrounds.length)]);

          centerDiv.appendChild(pistilDiv);
          flowerDiv.appendChild(centerDiv);

          centerDiv.style.transform = 'rotate( ' + (Math.random()*Math.PI*2) + 'rad)';

          return flowerDiv;
        }

        var maxRadius = 500;
        var minRadius = 10;

        var chords = [
          [
            16.35,              // C
            20.60,              // E
            24.50               // G
          ],
          [
            21.83,              // F
            27.50,              // A
            32.70               // C
          ]
        ];

        var frequencies = chords[0];

        var mouseDirty = false;
        var mousePosition = [0, 0];

        document.addEventListener('mousemove', function (e) {
          mouseDirty = true;
          mousePosition[0] = e.clientX
          mousePosition[1] = e.clientY;
        });

        var context = new AudioContext;

        setInterval(function () {
          if (mouseDirty) {
            var radius = Math.random() * (maxRadius - minRadius) + minRadius;
            var numPetals = Math.round(Math.random()*10) + 4;
            var flower = makeFlower(radius, numPetals);

            flower.style.left = mousePosition[0] + 'px';
            flower.style.top = mousePosition[1] + 'px';

            document.body.appendChild(flower);

            var oscillator = context.createOscillator();
            var gainNode = context.createGain();
            gainNode.connect(context.destination);
            gainNode.gain.value = 1;

            var octaveShift = Math.pow(2, 4 - Math.round(radius/(maxRadius-minRadius)*4) + 1);
            var baseFrequency = frequencies[Math.floor(Math.random() * frequencies.length)];

            oscillator.frequency.value = baseFrequency * 8;
            oscillator.connect(gainNode);
            oscillator.start(0);

            var gainInterval = setInterval(function () {
              gainNode.gain.value = Math.max(0, gainNode.gain.value - 0.05);
            }, 10);

            setTimeout(function () {
              document.body.removeChild(flower);
              oscillator.stop();
              clearInterval(gainInterval);
            }, 2000);

            mouseDirty = false;
          }
        }, 100);

        setInterval(function () {
          frequencies = chords[(chords.indexOf(frequencies) + 1) % chords.length];
        }, 3000);

{'fraction_non_alphanumeric': 0.14051646028390213, 'fraction_numerical': 0.03518574448807007, 'mean_word_length': 1.8849923763885863, 'pattern_counts': {'":': 0, '<': 21, '<?xml version=': 0, '>': 19, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4357312', 'n_tokens_mistral': 4463, 'n_tokens_neox': 4048, 'n_words': 791}