<commit_before><!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>CSS Shapes Patterns</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <div id="container">
    <h1><span>CSS Shapes<br/>Patterns</span></h1>

    <x-pattern name="origin">
      _.backgroundColor = color();
      _.borderRadius = rand(
        '100% 0 0 0',
        '0 100% 0 0',
        '0 0 100% 0',
        '0 0 0 100%'
      );
    </x-pattern>

    <x-pattern name="triangle" require="clip-path">
      _.backgroundColor = color();
      _.clipPath = _.webkitClipPath = `polygon(${ rand(
        '0 0, 100% 0, 100% 100%',
        '0 0, 100% 0, 0 100%',
        '0 0, 100% 100%, 0 100%',
        '100% 0, 100% 100%, 0 100%'
      )})`;
    </x-pattern>

    <x-pattern name="diamond" require="clip-path">
      _.backgroundColor = color();
      _.clipPath = _.webkitClipPath = `polygon(${ rand(
        '0 0, 50% 0, 100% 100%, 0% 50%',
        '50% 0, 100% 0, 100% 50%, 0 100%',
        '0 0, 100% 50%, 100% 100%, 50% 100%',
        '0 50%, 100% 0, 50% 100%, 0 100%'
      )})`;
    </x-pattern>

    <x-pattern name="circles">
      _.backgroundColor = color(rangeOf(.2, .9, .2));
      _.borderRadius = '50%';
      _.width = _.height = rangeOf(25, 125, 25) +  '%';
      _.transform = `scale(${ rangeOf(.6, 1.8, .3) })`;
    </x-pattern>

    <x-pattern name="leaves">
      _.backgroundColor = color(rangeOf(.2, .9, .3));
      _.borderRadius = rand('100% 0', '0 100%');
      _.width = _.height = rangeOf(25, 125, 25) + '%';
      _.transform = `scale(${ rangeOf(.6, 1.8, .3) })`;
    </x-pattern>

    <x-pattern name="tiles">
      _.backgroundColor = color(rangeOf(.2, .9, .2));
      _.width = _.height = rangeOf(25, 125, 25) + '%';
      _.transform = `scale(${ rangeOf(.6, 1.8, .3) })`;
    </x-pattern>

    <x-pattern name="pizza" require="clip-path">
      _.backgroundColor = color(rangeOf(.2, .9, .2));
      _.clipPath = _.webkitClipPath = `polygon(
        ${ rangeOf(0, 100, 20) + '%'} ${rangeOf(0, 100, 20) + '%'},
        ${ rangeOf(0, 100, 20) + '%'} ${rangeOf(0, 100, 20) + '%'},
        ${ rangeOf(0, 100, 20) + '%'} ${rangeOf(0, 100, 20) + '%'}
      )`;
      _.transform = `scale(${ rand(1, 2.5, .3) })`;
    </x-pattern>

    <x-pattern name="lines">
      _.backgroundColor = color(rangeOf(.2, .9, .3));
      _.height = rangeOf(1, 5) + 'px';
      _.transform = `
        scale(${ rand(2, 2.5, 3, 3.5) })
        rotate(${ rangeOf(25, 100, 25) + 'deg' })
      `;
    </x-pattern>

    <x-pattern name="squares">
      _.border = `${ rangeOf(2, 10) + 'px' } solid ${ color(rangeOf(.2, .8, .2)) }`;
      _.width = _.height = rangeOf(25, 200, 25) + '%';
      _.transform = 'rotate(45deg)';
    </x-pattern>

    <x-pattern name="ribbons">
      _.border = `${ rangeOf(2, 5) + 'px' } solid ${ color(rangeOf(.2, .8, .2)) }`;
      _.borderRadius = '50%';
      _.transform = `scale(${ rangeOf(5, 18) })`;
    </x-pattern>

    <x-pattern name="curves">
      _.borderRadius = '50%';
      _.borderTop = `${ rangeOf(1, 10) + 'px' } solid ${ color(rangeOf(.2, .9, .3)) }`;
      _.width = _.height = rangeOf(25, 200) + '%';
      _.transform = `
        scale(${ rand(1, 1.5, 1.8, 2) })
        rotate(${ rangeOf(25, 360) + 'deg' })
      `;
    </x-pattern>

    <x-pattern name="clouds">
      let c = color(rangeOf(.2, .8, .2));
      _.borderRadius = rangeOf(50, 100) + '%';
      _.border = `0 solid ${ c }`;
      _.borderTopWidth = _.borderRightWidth = '.4em';
      _.transform = `skew(${ rangeOf(30, 50) + 'deg'})`;
    </x-pattern>

    <x-pattern name="tubes">
      let c = _.backgroundColor = color(rangeOf(.2, .8, .2));
      _.boxShadow = `
        inset 0 0 0 1px ${ c },
        inset 2px 2px 4px 0 ${ c }
      `;
      _.left = '25%';
      _.width = '50%';
      _.height = '156%';
      _.borderRadius = '35px';
      _.transform = `rotate(${ ((index % 2 ) ? -1 : 1) * 15 + 'deg' })`;
    </x-pattern>

    <x-pattern name="raindrops"><commit_msg>add butterly patterns<commit_after><!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>CSS Shapes Patterns</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <div id="container">
    <h1><span>CSS Shapes<br/>Patterns</span></h1>

    <x-pattern name="origin">
      _.backgroundColor = color();
      _.borderRadius = rand(
        '100% 0 0 0',
        '0 100% 0 0',
        '0 0 100% 0',
        '0 0 0 100%'
      );
    </x-pattern>

    <x-pattern name="triangle" require="clip-path">
      _.backgroundColor = color();
      _.clipPath = _.webkitClipPath = `polygon(${ rand(
        '0 0, 100% 0, 100% 100%',
        '0 0, 100% 0, 0 100%',
        '0 0, 100% 100%, 0 100%',
        '100% 0, 100% 100%, 0 100%'
      )})`;
    </x-pattern>

    <x-pattern name="diamond" require="clip-path">
      _.backgroundColor = color();
      _.clipPath = _.webkitClipPath = `polygon(${ rand(
        '0 0, 50% 0, 100% 100%, 0% 50%',
        '50% 0, 100% 0, 100% 50%, 0 100%',
        '0 0, 100% 50%, 100% 100%, 50% 100%',
        '0 50%, 100% 0, 50% 100%, 0 100%'
      )})`;
    </x-pattern>

    <x-pattern name="circles">
      _.backgroundColor = color(rangeOf(.2, .9, .2));
      _.borderRadius = '50%';
      _.width = _.height = rangeOf(25, 125, 25) +  '%';
      _.transform = `scale(${ rangeOf(.6, 1.8, .3) })`;
    </x-pattern>

    <x-pattern name="leaves">
      _.backgroundColor = color(rangeOf(.2, .9, .3));
      _.borderRadius = rand('100% 0', '0 100%');
      _.width = _.height = rangeOf(25, 125, 25) + '%';
      _.transform = `scale(${ rangeOf(.6, 1.8, .3) })`;
    </x-pattern>

    <x-pattern name="tiles">
      _.backgroundColor = color(rangeOf(.2, .9, .2));
      _.width = _.height = rangeOf(25, 125, 25) + '%';
      _.transform = `scale(${ rangeOf(.6, 1.8, .3) })`;
    </x-pattern>

    <x-pattern name="pizza" require="clip-path">
      _.backgroundColor = color(rangeOf(.2, .9, .2));
      _.clipPath = _.webkitClipPath = `polygon(
        ${ rangeOf(0, 100, 20) + '%'} ${rangeOf(0, 100, 20) + '%'},
        ${ rangeOf(0, 100, 20) + '%'} ${rangeOf(0, 100, 20) + '%'},
        ${ rangeOf(0, 100, 20) + '%'} ${rangeOf(0, 100, 20) + '%'}
      )`;
      _.transform = `scale(${ rand(1, 2.5, .3) })`;
    </x-pattern>

    <x-pattern name="lines">
      _.backgroundColor = color(rangeOf(.2, .9, .3));
      _.height = rangeOf(1, 5) + 'px';
      _.transform = `
        scale(${ rand(2, 2.5, 3, 3.5) })
        rotate(${ rangeOf(25, 100, 25) + 'deg' })
      `;
    </x-pattern>

    <x-pattern name="squares">
      _.border = `${ rangeOf(2, 10) + 'px' } solid ${ color(rangeOf(.2, .8, .2)) }`;
      _.width = _.height = rangeOf(25, 200, 25) + '%';
      _.transform = 'rotate(45deg)';
    </x-pattern>

    <x-pattern name="ribbons">
      _.border = `${ rangeOf(2, 5) + 'px' } solid ${ color(rangeOf(.2, .8, .2)) }`;
      _.borderRadius = '50%';
      _.transform = `scale(${ rangeOf(5, 18) })`;
    </x-pattern>

    <x-pattern name="curves">
      _.borderRadius = '50%';
      _.borderTop = `${ rangeOf(1, 10) + 'px' } solid ${ color(rangeOf(.2, .9, .3)) }`;
      _.width = _.height = rangeOf(25, 200) + '%';
      _.transform = `
        scale(${ rand(1, 1.5, 1.8, 2) })
        rotate(${ rangeOf(25, 360) + 'deg' })
      `;
    </x-pattern>

    <x-pattern name="butterfly">
      let c = _.backgroundColor = color(rangeOf(.2, .8, .2));
      _.boxShadow = `
        inset 0 0 0 1px ${ c },
        inset 2px 2px 4px 0 ${ c }
      `;
      _.left = '50%';
      _.width = '50%';
      _.borderRadius = '100% / 90%';
      _.transform = `
        translate(${ ((index % 2 ) ? -1 : 1) * 60 + '%' })
        rotate(${ ((index % 2 ) ? 1 : -1) * rangeOf(20, 40) + 'deg' })
      `;
    </x-pattern>

    <x-pattern name="clouds">
      _.border = `0 solid ${ color(rangeOf(.2, .9, .1)) }`;
      _.borderRadius = '100%';
      _.borderTopWidth = _.borderLeftWidth = '.4em';
      _.transform = `skewX(${-1 * rangeOf(30, 40) + 'deg'})`;
    </x-pattern>

    <x-pattern name="raindrops">
{'fraction_non_alphanumeric': 0.23058133854421103, 'fraction_numerical': 0.08402540302882266, 'mean_word_length': 2.2126324048646526, 'pattern_counts': {'":': 0, '<': 89, '<?xml version=': 0, '>': 89, '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': '5663081', 'n_tokens_mistral': 3667, 'n_tokens_neox': 3090, 'n_words': 723}