Skip to content

css polygons from matricesยค

jump to the demo

generate an image from text to extract the contours of the letters.

import matplotlib.pyplot as plot
import matplotlib, skimage, skimage.measure
from nbconvert_a11y.ttt import format_frame, new

figure = plot.gcf()
ax = plot.gca()
ax.axis("off")
plot.text(0, 0 , "wxyz", fontsize=150)
figure.savefig(image := io.BytesIO())
matrix = pipe(image, skimage.io.imread, (lambda x: x[:, :, :3]), skimage.color.rgb2gray)
No description has been provided for this image
contours = Series(skimage.measure.find_contours(matrix)).to_frame("contour")
contours.contour = contours.contour.apply(
    compose_left(
        numpy.round, operator.methodcaller("astype", int),
        DataFrame, DataFrame.drop_duplicates, operator.attrgetter("values")
    )
)
shift = contours.contour.apply(
    lambda x: Series(dict(zip("xy", x.min(0))))
)
shift_min = shift.min()
shift_min.iloc[1] += 20
contours.contour = contours.contour.apply(
    lambda x: x -  shift_min.values
)
wxyz = Series(["wxyz " * 1000] * len(contours))

compose css styles from the contours in the dataframe.

contours["polygon"] = contours.apply(
    compose_left(
        operator.attrgetter("contour"),
        map(reversed), map(tuple), map("%ipx %ipx".__mod__), 
        ", ".join, "polygon({});".format
    ), axis=1
)
contours["css"] = contours.apply(
    lambda s: """#wxyz p:nth-child(%i) {
        transform-origin: middle center;
        clip-path: %s;
        transform: %s;
        max-height: 300px;
    }""" % (s.name+1, s.polygon, F"""
    translate({s.name}px, {s.name}px)
    skewY({[-1, 1][s.name//2] *10}deg)
    """.strip()),
    axis=1
)

pipe(new("style", """
div#wxyz {
    display: grid;
    background-color: white;
    color: black;
    font-size: 6px;
    height: 300px;
    width: 600px;
    > p {
        grid-column: 1/1;
        grid-row: 1/1;

    }
}
""", *contours.css), str, HTML)
%%

    image = new(
        "figure",
        new("figcaption",
large letters W X Y Z are shown against a white background.
further inspection reveals that each letter is made up of smaller W X Y Z
letters. [WXYZ](https://github.com/deathbeds/wxyz) is a piece of software
that feels like childs refrigerator magnets that are used to build interactive
interfaces in jupyter notebooks. it revealed a unique kind of calligraphy 
where the letters had deep computational meanings.

            , id="wxyz-caption"
        ),
        new(
            "div",
            *wxyz.apply(
                partial(new, "p")
            ),
            role="img",
            id="wxyz",
            **{"aria-labelledby": "wxyz-caption", "aria-hidden": "true"}
        ),
    )

    pipe(image, str, HTML, display)

> while doing this i learned that i will need to allow for shapes and other kinds of css function in the variable definitions.
for example we could pre compose transforms.

    display\
```css
[href="#wxyz"]:first-of-type {
    background: -moz-element(#wxyz); background-size: 20%;
    display: inline-block;
    height: 300px; width: 600px;
    filter: invert(100%);
}
```
large letters W X Y Z are shown against a white background. further inspection reveals that each letter is made up of smaller W X Y Z letters. [WXYZ](https://github.com/deathbeds/wxyz) is a piece of software that feels like childs refrigerator magnets that are used to build interactive interfaces in jupyter notebooks. it revealed a unique kind of calligraphy where the letters had deep computational meanings.
pipe(format_frame(contours.iloc[:3].drop("css", axis=1), caption="subset of the final dataframe of the contours", id="wxyz-table"), str, HTML)
subset of the final dataframe of the contours
None'contour''polygon'
0array([[114, 102], [113, 103], [112, 103], ..., [114, 99], [114, 100], [114, 101]])'polygon(102px 114px, 103px 113px, 103px 112px, 103px 111px, 104px 110px, 104px 109px, 104px 108px, 104px 107px, 105px 106px, 105px 105px, 105px 104px, 105px 103px, 106px 102px, 106px 101px, 106px 100px, 106px 99px, 107px 98px, 107px 97px, 107px 96px, 107px 95px, 108px 94px, 108px 93px, 108px 92px, 108px 91px, 109px 90px, 109px 89px, 109px 88px, 110px 87px, 110px 86px, 110px 85px, 110px 84px, 111px 83px, 111px 82px, 111px 81px, 111px 80px, 112px 79px, 112px 78px, 112px 77px, 112px 76px, 113px 75px, 113px 74px, 113px 73px, 113px 72px, 114px 71px, 114px 70px, 114px 69px, 114px 68px, 115px 67px, 115px 66px, 115px 65px, 115px 64px, 116px 63px, 116px 62px, 116px 61px, 117px 60px, 117px 59px, 117px 58px, 117px 57px, 118px 56px, 118px 55px, 118px 54px, 118px 53px, 119px 52px, 119px 51px, 119px 50px, 119px 49px, 120px 48px, 120px 47px, 120px 46px, 120px 45px, 121px 44px, 121px 43px, 121px 42px, 121px 41px, 122px 40px, 122px 39px, 122px 38px, 123px 37px, 123px 36px, 123px 35px, 123px 34px, 124px 33px, 124px 32px, 124px 31px, 124px 30px, 125px 29px, 125px 28px, 125px 27px, 125px 26px, 126px 25px, 126px 24px, 126px 23px, 126px 22px, 127px 21px, 127px 20px, 127px 19px, 127px 18px, 128px 17px, 128px 16px, 128px 15px, 128px 14px, 129px 13px, 129px 12px, 129px 11px, 130px 10px, 130px 9px, 130px 8px, 130px 7px, 131px 6px, 131px 5px, 131px 4px, 131px 3px, 132px 2px, 132px 1px, 131px 0px, 130px 0px, 129px 0px, 128px 0px, 127px 0px, 126px 0px, 125px 0px, 124px 0px, 123px 0px, 122px 0px, 121px 0px, 120px 0px, 119px 0px, 118px 0px, 117px 0px, 116px 0px, 115px 0px, 114px 0px, 113px 1px, 113px 2px, 113px 3px, 112px 4px, 112px 5px, 112px 6px, 112px 7px, 111px 8px, 111px 9px, 111px 10px, 111px 11px, 110px 12px, 110px 13px, 110px 14px, 110px 15px, 109px 16px, 109px 17px, 109px 18px, 108px 19px, 108px 20px, 108px 21px, 108px 22px, 107px 23px, 107px 24px, 107px 25px, 107px 26px, 106px 27px, 106px 28px, 106px 29px, 106px 30px, 105px 31px, 105px 32px, 105px 33px, 105px 34px, 104px 35px, 104px 36px, 104px 37px, 104px 38px, 103px 39px, 103px 40px, 103px 41px, 102px 42px, 102px 43px, 102px 44px, 102px 45px, 101px 46px, 101px 47px, 101px 48px, 101px 49px, 100px 50px, 100px 51px, 100px 52px, 100px 53px, 99px 54px, 99px 55px, 99px 56px, 99px 57px, 98px 58px, 98px 59px, 98px 60px, 98px 61px, 97px 62px, 97px 63px, 97px 64px, 96px 65px, 96px 66px, 96px 67px, 96px 68px, 95px 69px, 95px 70px, 95px 71px, 95px 72px, 94px 73px, 94px 74px, 94px 75px, 94px 76px, 93px 77px, 93px 78px, 93px 79px, 93px 80px, 92px 81px, 92px 82px, 92px 83px, 92px 84px, 91px 85px, 91px 86px, 91px 87px, 90px 88px, 90px 87px, 89px 86px, 89px 85px, 89px 84px, 88px 83px, 88px 82px, 88px 81px, 88px 80px, 87px 79px, 87px 78px, 87px 77px, 87px 76px, 86px 75px, 86px 74px, 86px 73px, 86px 72px, 85px 71px, 85px 70px, 85px 69px, 85px 68px, 84px 67px, 84px 66px, 84px 65px, 83px 64px, 83px 63px, 83px 62px, 83px 61px, 82px 60px, 82px 59px, 82px 58px, 82px 57px, 81px 56px, 81px 55px, 81px 54px, 81px 53px, 80px 52px, 80px 51px, 80px 50px, 80px 49px, 79px 48px, 79px 47px, 79px 46px, 79px 45px, 78px 44px, 78px 43px, 78px 42px, 77px 41px, 77px 40px, 77px 39px, 77px 38px, 76px 37px, 76px 36px, 76px 35px, 76px 34px, 75px 33px, 75px 32px, 75px 31px, 75px 30px, 74px 29px, 74px 28px, 74px 27px, 74px 26px, 73px 25px, 73px 24px, 73px 23px, 72px 22px, 72px 21px, 72px 20px, 72px 19px, 71px 18px, 71px 17px, 71px 16px, 71px 15px, 70px 14px, 70px 13px, 70px 12px, 70px 11px, 69px 10px, 69px 9px, 69px 8px, 69px 7px, 68px 6px, 68px 5px, 68px 4px, 68px 3px, 67px 2px, 67px 1px, 66px 0px, 65px 0px, 64px 0px, 63px 0px, 62px 0px, 61px 0px, 60px 0px, 59px 0px, 58px 0px, 57px 0px, 56px 0px, 55px 0px, 54px 0px, 53px 0px, 52px 0px, 51px 0px, 50px 0px, 49px 0px, 48px 0px, 47px 0px, 46px 0px, 45px 0px, 44px 1px, 44px 2px, 44px 3px, 44px 4px, 43px 5px, 43px 6px, 43px 7px, 43px 8px, 42px 9px, 42px 10px, 42px 11px, 42px 12px, 41px 13px, 41px 14px, 41px 15px, 40px 16px, 40px 17px, 40px 18px, 40px 19px, 39px 20px, 39px 21px, 39px 22px, 39px 23px, 38px 24px, 38px 25px, 38px 26px, 38px 27px, 37px 28px, 37px 29px, 37px 30px, 37px 31px, 36px 32px, 36px 33px, 36px 34px, 36px 35px, 35px 36px, 35px 37px, 35px 38px, 34px 39px, 34px 40px, 34px 41px, 34px 42px, 33px 43px, 33px 44px, 33px 45px, 33px 46px, 32px 47px, 32px 48px, 32px 49px, 32px 50px, 31px 51px, 31px 52px, 31px 53px, 31px 54px, 30px 55px, 30px 56px, 30px 57px, 30px 58px, 29px 59px, 29px 60px, 29px 61px, 28px 62px, 28px 63px, 28px 64px, 28px 65px, 27px 66px, 27px 67px, 27px 68px, 27px 69px, 26px 70px, 26px 71px, 26px 72px, 26px 73px, 25px 74px, 25px 75px, 25px 76px, 25px 77px, 24px 78px, 24px 79px, 24px 80px, 24px 81px, 23px 82px, 23px 83px, 23px 84px, 22px 85px, 22px 86px, 22px 87px, 21px 88px, 21px 87px, 20px 86px, 20px 85px, 20px 84px, 20px 83px, 19px 82px, 19px 81px, 19px 80px, 19px 79px, 18px 78px, 18px 77px, 18px 76px, 18px 75px, 17px 74px, 17px 73px, 17px 72px, 17px 71px, 16px 70px, 16px 69px, 16px 68px, 16px 67px, 15px 66px, 15px 65px, 15px 64px, 14px 63px, 14px 62px, 14px 61px, 14px 60px, 13px 59px, 13px 58px, 13px 57px, 13px 56px, 12px 55px, 12px 54px, 12px 53px, 12px 52px, 11px 51px, 11px 50px, 11px 49px, 11px 48px, 10px 47px, 10px 46px, 10px 45px, 9px 44px, 9px 43px, 9px 42px, 9px 41px, 8px 40px, 8px 39px, 8px 38px, 8px 37px, 7px 36px, 7px 35px, 7px 34px, 7px 33px, 6px 32px, 6px 31px, 6px 30px, 6px 29px, 5px 28px, 5px 27px, 5px 26px, 5px 25px, 4px 24px, 4px 23px, 4px 22px, 3px 21px, 3px 20px, 3px 19px, 3px 18px, 2px 17px, 2px 16px, 2px 15px, 2px 14px, 1px 13px, 1px 12px, 1px 11px, 1px 10px, 0px 9px, 0px 8px, 0px 7px, 0px 6px, -1px 5px, -1px 4px, -1px 3px, -2px 2px, -2px 1px, -3px 0px, -4px 0px, -5px 0px, -6px 0px, -7px 0px, -8px 0px, -9px 0px, -10px 0px, -11px 0px, -12px 0px, -13px 0px, -14px 0px, -15px 0px, -16px 0px, -17px 0px, -18px 0px, -19px 0px, -20px 0px, -20px 1px, -20px 2px, -20px 3px, -20px 4px, -19px 5px, -19px 6px, -19px 7px, -19px 8px, -18px 9px, -18px 10px, -18px 11px, -18px 12px, -17px 13px, -17px 14px, -17px 15px, -17px 16px, -16px 17px, -16px 18px, -16px 19px, -16px 20px, -15px 21px, -15px 22px, -15px 23px, -14px 24px, -14px 25px, -14px 26px, -14px 27px, -13px 28px, -13px 29px, -13px 30px, -13px 31px, -12px 32px, -12px 33px, -12px 34px, -12px 35px, -11px 36px, -11px 37px, -11px 38px, -11px 39px, -10px 40px, -10px 41px, -10px 42px, -10px 43px, -9px 44px, -9px 45px, -9px 46px, -9px 47px, -8px 48px, -8px 49px, -8px 50px, -7px 51px, -7px 52px, -7px 53px, -7px 54px, -6px 55px, -6px 56px, -6px 57px, -6px 58px, -5px 59px, -5px 60px, -5px 61px, -5px 62px, -4px 63px, -4px 64px, -4px 65px, -4px 66px, -3px 67px, -3px 68px, -3px 69px, -3px 70px, -2px 71px, -2px 72px, -2px 73px, -1px 74px, -1px 75px, -1px 76px, -1px 77px, 0px 78px, 0px 79px, 0px 80px, 0px 81px, 1px 82px, 1px 83px, 1px 84px, 1px 85px, 2px 86px, 2px 87px, 2px 88px, 2px 89px, 3px 90px, 3px 91px, 3px 92px, 3px 93px, 4px 94px, 4px 95px, 4px 96px, 5px 97px, 5px 98px, 5px 99px, 5px 100px, 6px 101px, 6px 102px, 6px 103px, 6px 104px, 7px 105px, 7px 106px, 7px 107px, 7px 108px, 8px 109px, 8px 110px, 8px 111px, 8px 112px, 9px 113px, 9px 114px, 10px 114px, 11px 114px, 12px 114px, 13px 114px, 14px 114px, 15px 114px, 16px 114px, 17px 114px, 18px 114px, 19px 114px, 20px 114px, 21px 114px, 22px 114px, 23px 114px, 24px 114px, 25px 114px, 26px 114px, 27px 114px, 28px 114px, 29px 114px, 30px 114px, 31px 114px, 32px 113px, 32px 112px, 32px 111px, 32px 110px, 33px 109px, 33px 108px, 33px 107px, 33px 106px, 34px 105px, 34px 104px, 34px 103px, 34px 102px, 35px 101px, 35px 100px, 35px 99px, 35px 98px, 36px 97px, 36px 96px, 36px 95px, 37px 94px, 37px 93px, 37px 92px, 37px 91px, 38px 90px, 38px 89px, 38px 88px, 38px 87px, 39px 86px, 39px 85px, 39px 84px, 39px 83px, 40px 82px, 40px 81px, 40px 80px, 40px 79px, 41px 78px, 41px 77px, 41px 76px, 41px 75px, 42px 74px, 42px 73px, 42px 72px, 43px 71px, 43px 70px, 43px 69px, 43px 68px, 44px 67px, 44px 66px, 44px 65px, 44px 64px, 45px 63px, 45px 62px, 45px 61px, 45px 60px, 46px 59px, 46px 58px, 46px 57px, 46px 56px, 47px 55px, 47px 54px, 47px 53px, 48px 52px, 48px 51px, 48px 50px, 48px 49px, 49px 48px, 49px 47px, 49px 46px, 49px 45px, 50px 44px, 50px 43px, 50px 42px, 50px 41px, 51px 40px, 51px 39px, 51px 38px, 51px 37px, 52px 36px, 52px 35px, 52px 34px, 53px 33px, 53px 32px, 53px 31px, 53px 30px, 54px 29px, 54px 28px, 54px 27px, 54px 26px, 55px 25px, 55px 24px, 55px 23px, 56px 22px, 56px 23px, 57px 24px, 57px 25px, 57px 26px, 57px 27px, 58px 28px, 58px 29px, 58px 30px, 58px 31px, 59px 32px, 59px 33px, 59px 34px, 59px 35px, 60px 36px, 60px 37px, 60px 38px, 61px 39px, 61px 40px, 61px 41px, 61px 42px, 62px 43px, 62px 44px, 62px 45px, 62px 46px, 63px 47px, 63px 48px, 63px 49px, 63px 50px, 64px 51px, 64px 52px, 64px 53px, 64px 54px, 65px 55px, 65px 56px, 65px 57px, 66px 58px, 66px 59px, 66px 60px, 66px 61px, 67px 62px, 67px 63px, 67px 64px, 67px 65px, 68px 66px, 68px 67px, 68px 68px, 68px 69px, 69px 70px, 69px 71px, 69px 72px, 69px 73px, 70px 74px, 70px 75px, 70px 76px, 70px 77px, 71px 78px, 71px 79px, 71px 80px, 72px 81px, 72px 82px, 72px 83px, 72px 84px, 73px 85px, 73px 86px, 73px 87px, 73px 88px, 74px 89px, 74px 90px, 74px 91px, 74px 92px, 75px 93px, 75px 94px, 75px 95px, 75px 96px, 76px 97px, 76px 98px, 76px 99px, 76px 100px, 77px 101px, 77px 102px, 77px 103px, 78px 104px, 78px 105px, 78px 106px, 78px 107px, 79px 108px, 79px 109px, 79px 110px, 79px 111px, 80px 112px, 80px 113px, 80px 114px, 81px 114px, 82px 114px, 83px 114px, 84px 114px, 85px 114px, 86px 114px, 87px 114px, 88px 114px, 89px 114px, 90px 114px, 91px 114px, 92px 114px, 93px 114px, 94px 114px, 95px 114px, 96px 114px, 97px 114px, 98px 114px, 99px 114px, 100px 114px, 101px 114px);'
1array([[157, 301], [157, 302], [157, 303], ..., [157, 298], [157, 299], [157, 300]])'polygon(301px 157px, 302px 157px, 303px 157px, 304px 156px, 305px 156px, 306px 156px, 307px 156px, 308px 155px, 309px 155px, 310px 154px, 311px 154px, 312px 153px, 313px 153px, 314px 152px, 315px 151px, 316px 150px, 317px 149px, 318px 148px, 319px 147px, 319px 146px, 320px 145px, 321px 144px, 321px 143px, 322px 142px, 323px 141px, 323px 140px, 324px 139px, 324px 138px, 325px 137px, 325px 136px, 326px 135px, 326px 134px, 327px 133px, 327px 132px, 328px 131px, 328px 130px, 328px 129px, 329px 128px, 329px 127px, 330px 126px, 330px 125px, 330px 124px, 331px 123px, 331px 122px, 332px 121px, 332px 120px, 332px 119px, 333px 118px, 333px 117px, 334px 116px, 334px 115px, 334px 114px, 335px 113px, 335px 112px, 336px 111px, 336px 110px, 336px 109px, 337px 108px, 337px 107px, 338px 106px, 338px 105px, 338px 104px, 339px 103px, 339px 102px, 340px 101px, 340px 100px, 341px 99px, 341px 98px, 341px 97px, 342px 96px, 342px 95px, 343px 94px, 343px 93px, 343px 92px, 344px 91px, 344px 90px, 345px 89px, 345px 88px, 345px 87px, 346px 86px, 346px 85px, 347px 84px, 347px 83px, 347px 82px, 348px 81px, 348px 80px, 349px 79px, 349px 78px, 349px 77px, 350px 76px, 350px 75px, 351px 74px, 351px 73px, 351px 72px, 352px 71px, 352px 70px, 353px 69px, 353px 68px, 353px 67px, 354px 66px, 354px 65px, 355px 64px, 355px 63px, 355px 62px, 356px 61px, 356px 60px, 357px 59px, 357px 58px, 357px 57px, 358px 56px, 358px 55px, 359px 54px, 359px 53px, 359px 52px, 360px 51px, 360px 50px, 361px 49px, 361px 48px, 361px 47px, 362px 46px, 362px 45px, 363px 44px, 363px 43px, 363px 42px, 364px 41px, 364px 40px, 365px 39px, 365px 38px, 365px 37px, 366px 36px, 366px 35px, 367px 34px, 367px 33px, 367px 32px, 368px 31px, 368px 30px, 369px 29px, 369px 28px, 369px 27px, 370px 26px, 370px 25px, 371px 24px, 371px 23px, 371px 22px, 372px 21px, 372px 20px, 373px 19px, 373px 18px, 373px 17px, 374px 16px, 374px 15px, 375px 14px, 375px 13px, 375px 12px, 376px 11px, 376px 10px, 377px 9px, 377px 8px, 377px 7px, 378px 6px, 378px 5px, 379px 4px, 379px 3px, 379px 2px, 380px 1px, 379px 0px, 378px 0px, 377px 0px, 376px 0px, 375px 0px, 374px 0px, 373px 0px, 372px 0px, 371px 0px, 370px 0px, 369px 0px, 368px 0px, 367px 0px, 366px 0px, 365px 0px, 364px 0px, 363px 0px, 362px 0px, 361px 0px, 360px 1px, 360px 2px, 359px 3px, 359px 4px, 358px 5px, 358px 6px, 358px 7px, 357px 8px, 357px 9px, 356px 10px, 356px 11px, 356px 12px, 355px 13px, 355px 14px, 354px 15px, 354px 16px, 354px 17px, 353px 18px, 353px 19px, 352px 20px, 352px 21px, 352px 22px, 351px 23px, 351px 24px, 350px 25px, 350px 26px, 350px 27px, 349px 28px, 349px 29px, 348px 30px, 348px 31px, 348px 32px, 347px 33px, 347px 34px, 346px 35px, 346px 36px, 346px 37px, 345px 38px, 345px 39px, 344px 40px, 344px 41px, 344px 42px, 343px 43px, 343px 44px, 342px 45px, 342px 46px, 342px 47px, 341px 48px, 341px 49px, 340px 50px, 340px 51px, 340px 52px, 339px 53px, 339px 54px, 338px 55px, 338px 56px, 338px 57px, 337px 58px, 337px 59px, 336px 60px, 336px 61px, 336px 62px, 335px 63px, 335px 64px, 334px 65px, 334px 66px, 334px 67px, 333px 68px, 333px 69px, 332px 70px, 332px 71px, 332px 72px, 331px 73px, 331px 74px, 330px 75px, 330px 76px, 330px 77px, 329px 78px, 329px 79px, 328px 80px, 328px 81px, 328px 82px, 327px 83px, 327px 84px, 326px 85px, 326px 86px, 326px 87px, 325px 88px, 324px 87px, 324px 86px, 323px 85px, 323px 84px, 322px 83px, 322px 82px, 322px 81px, 321px 80px, 321px 79px, 320px 78px, 320px 77px, 320px 76px, 319px 75px, 319px 74px, 318px 73px, 318px 72px, 318px 71px, 317px 70px, 317px 69px, 316px 68px, 316px 67px, 316px 66px, 315px 65px, 315px 64px, 314px 63px, 314px 62px, 314px 61px, 313px 60px, 313px 59px, 312px 58px, 312px 57px, 312px 56px, 311px 55px, 311px 54px, 310px 53px, 310px 52px, 310px 51px, 309px 50px, 309px 49px, 308px 48px, 308px 47px, 308px 46px, 307px 45px, 307px 44px, 306px 43px, 306px 42px, 306px 41px, 305px 40px, 305px 39px, 304px 38px, 304px 37px, 304px 36px, 303px 35px, 303px 34px, 302px 33px, 302px 32px, 302px 31px, 301px 30px, 301px 29px, 300px 28px, 300px 27px, 300px 26px, 299px 25px, 299px 24px, 298px 23px, 298px 22px, 298px 21px, 297px 20px, 297px 19px, 296px 18px, 296px 17px, 296px 16px, 295px 15px, 295px 14px, 294px 13px, 294px 12px, 294px 11px, 293px 10px, 293px 9px, 292px 8px, 292px 7px, 292px 6px, 291px 5px, 291px 4px, 290px 3px, 290px 2px, 290px 1px, 289px 0px, 288px 0px, 287px 0px, 286px 0px, 285px 0px, 284px 0px, 283px 0px, 282px 0px, 281px 0px, 280px 0px, 279px 0px, 278px 0px, 277px 0px, 276px 0px, 275px 0px, 274px 0px, 273px 0px, 272px 0px, 271px 0px, 270px 0px, 270px 1px, 270px 2px, 271px 3px, 271px 4px, 271px 5px, 272px 6px, 272px 7px, 273px 8px, 273px 9px, 273px 10px, 274px 11px, 274px 12px, 275px 13px, 275px 14px, 276px 15px, 276px 16px, 276px 17px, 277px 18px, 277px 19px, 278px 20px, 278px 21px, 278px 22px, 279px 23px, 279px 24px, 280px 25px, 280px 26px, 280px 27px, 281px 28px, 281px 29px, 282px 30px, 282px 31px, 282px 32px, 283px 33px, 283px 34px, 284px 35px, 284px 36px, 285px 37px, 285px 38px, 285px 39px, 286px 40px, 286px 41px, 287px 42px, 287px 43px, 287px 44px, 288px 45px, 288px 46px, 289px 47px, 289px 48px, 289px 49px, 290px 50px, 290px 51px, 291px 52px, 291px 53px, 292px 54px, 292px 55px, 292px 56px, 293px 57px, 293px 58px, 294px 59px, 294px 60px, 294px 61px, 295px 62px, 295px 63px, 296px 64px, 296px 65px, 296px 66px, 297px 67px, 297px 68px, 298px 69px, 298px 70px, 299px 71px, 299px 72px, 299px 73px, 300px 74px, 300px 75px, 301px 76px, 301px 77px, 301px 78px, 302px 79px, 302px 80px, 303px 81px, 303px 82px, 303px 83px, 304px 84px, 304px 85px, 305px 86px, 305px 87px, 306px 88px, 306px 89px, 306px 90px, 307px 91px, 307px 92px, 308px 93px, 308px 94px, 308px 95px, 309px 96px, 309px 97px, 310px 98px, 310px 99px, 310px 100px, 311px 101px, 311px 102px, 312px 103px, 312px 104px, 313px 105px, 313px 106px, 313px 107px, 314px 108px, 314px 109px, 315px 110px, 315px 111px, 315px 112px, 315px 113px, 315px 114px, 314px 115px, 314px 116px, 314px 117px, 313px 118px, 313px 119px, 312px 120px, 312px 121px, 312px 122px, 311px 123px, 311px 124px, 310px 125px, 310px 126px, 309px 127px, 309px 128px, 309px 129px, 308px 130px, 308px 131px, 307px 132px, 306px 133px, 306px 134px, 305px 135px, 304px 136px, 304px 137px, 303px 138px, 302px 138px, 301px 139px, 300px 140px, 299px 140px, 298px 140px, 297px 141px, 296px 141px, 295px 141px, 294px 141px, 293px 141px, 292px 142px, 291px 142px, 290px 142px, 289px 142px, 288px 142px, 287px 142px, 286px 142px, 285px 142px, 284px 142px, 283px 142px, 282px 142px, 281px 142px, 280px 142px, 280px 143px, 280px 144px, 280px 145px, 280px 146px, 280px 147px, 280px 148px, 280px 149px, 280px 150px, 280px 151px, 280px 152px, 280px 153px, 280px 154px, 280px 155px, 280px 156px, 280px 157px, 281px 158px, 282px 158px, 283px 158px, 284px 158px, 285px 158px, 286px 158px, 287px 158px, 288px 158px, 289px 158px, 290px 158px, 291px 158px, 292px 158px, 293px 158px, 294px 158px, 295px 157px, 296px 157px, 297px 157px, 298px 157px, 299px 157px, 300px 157px);'
2array([[114, 256], [113, 255], [112, 255], [111, 254], [110, 253], [109, 252], [108, 252], [107, 251], [106, 250], [105, 249], [104, 249], [103, 248], [102, 247], [101, 246], [100, 246], [ 99, 245], [ 98, 244], [ 97, 243], [ 96, 243], [ 95, 242], [ 94, 241], [ 93, 240], [ 92, 240], [ 91, 239], [ 90, 238], [ 89, 237], [ 88, 237], [ 87, 236], [ 86, 235], [ 85, 235], [ 84, 234], [ 83, 233], [ 82, 232], [ 81, 232], [ 80, 231], [ 79, 230], [ 78, 229], [ 77, 229], [ 76, 228], [ 75, 227], [ 74, 226], [ 73, 226], [ 72, 225], [ 71, 224], [ 70, 223], [ 69, 223], [ 68, 222], [ 67, 221], [ 66, 220], [ 65, 220], [ 64, 219], [ 63, 218], [ 62, 217], [ 61, 217], [ 60, 216], [ 59, 215], [ 58, 215], [ 57, 214], [ 56, 213], [ 55, 214], [ 54, 214], [ 53, 215], [ 52, 216], [ 51, 217], [ 50, 217], [ 49, 218], [ 48, 219], [ 47, 220], [ 46, 220], [ 45, 221], [ 44, 222], [ 43, 223], [ 42, 223], [ 41, 224], [ 40, 225], [ 39, 226], [ 38, 226], [ 37, 227], [ 36, 228], [ 35, 229], [ 34, 229], [ 33, 230], [ 32, 231], [ 31, 232], [ 30, 232], [ 29, 233], [ 28, 234], [ 27, 235], [ 26, 235], [ 25, 236], [ 24, 237], [ 23, 238], [ 22, 238], [ 21, 239], [ 20, 240], [ 19, 240], [ 18, 241], [ 17, 242], [ 16, 243], [ 15, 243], [ 14, 244], [ 13, 245], [ 12, 246], [ 11, 246], [ 10, 247], [ 9, 248], [ 8, 249], [ 7, 249], [ 6, 250], [ 5, 251], [ 4, 252], [ 3, 252], [ 2, 253], [ 1, 254], [ 0, 253], [ 0, 252], [ 0, 251], [ 0, 250], [ 0, 249], [ 0, 248], [ 0, 247], [ 0, 246], [ 0, 245], [ 0, 244], [ 0, 243], [ 0, 242], [ 0, 241], [ 0, 240], [ 0, 239], [ 0, 238], [ 0, 237], [ 0, 236], [ 0, 235], [ 0, 234], [ 0, 233], [ 1, 232], [ 2, 231], [ 3, 230], [ 4, 230], [ 5, 229], [ 6, 228], [ 7, 227], [ 8, 227], [ 9, 226], [ 10, 225], [ 11, 224], [ 12, 224], [ 13, 223], [ 14, 222], [ 15, 221], [ 16, 221], [ 17, 220], [ 18, 219], [ 19, 218], [ 20, 218], [ 21, 217], [ 22, 216], [ 23, 215], [ 24, 215], [ 25, 214], [ 26, 213], [ 27, 212], [ 28, 212], [ 29, 211], [ 30, 210], [ 31, 209], [ 32, 209], [ 33, 208], [ 34, 207], [ 35, 206], [ 36, 206], [ 37, 205], [ 38, 204], [ 39, 203], [ 40, 203], [ 41, 202], [ 40, 201], [ 39, 200], [ 38, 200], [ 37, 199], [ 36, 198], [ 35, 197], [ 34, 197], [ 33, 196], [ 32, 195], [ 31, 194], [ 30, 194], [ 29, 193], [ 28, 192], [ 27, 191], [ 26, 191], [ 25, 190], [ 24, 189], [ 23, 188], [ 22, 188], [ 21, 187], [ 20, 186], [ 19, 185], [ 18, 185], [ 17, 184], [ 16, 183], [ 15, 182], [ 14, 182], [ 13, 181], [ 12, 180], [ 11, 180], [ 10, 179], [ 9, 178], [ 8, 177], [ 7, 177], [ 6, 176], [ 5, 175], [ 4, 174], [ 3, 174], [ 2, 173], [ 1, 172], [ 0, 171], [ 0, 170], [ 0, 169], [ 0, 168], [ 0, 167], [ 0, 166], [ 0, 165], [ 0, 164], [ 0, 163], [ 0, 162], [ 0, 161], [ 0, 160], [ 0, 159], [ 0, 158], [ 0, 157], [ 0, 156], [ 0, 155], [ 0, 154], [ 0, 153], [ 0, 152], [ 0, 151], [ 1, 150], [ 2, 151], [ 3, 152], [ 4, 152], [ 5, 153], [ 6, 154], [ 7, 154], [ 8, 155], [ 9, 156], [ 10, 157], [ 11, 157], [ 12, 158], [ 13, 159], [ 14, 160], [ 15, 160], [ 16, 161], [ 17, 162], [ 18, 163], [ 19, 163], [ 20, 164], [ 21, 165], [ 22, 166], [ 23, 166], [ 24, 167], [ 25, 168], [ 26, 169], [ 27, 169], [ 28, 170], [ 29, 171], [ 30, 172], [ 31, 172], [ 32, 173], [ 33, 174], [ 34, 175], [ 35, 175], [ 36, 176], [ 37, 177], [ 38, 178], [ 39, 178], [ 40, 179], [ 41, 180], [ 42, 181], [ 43, 181], [ 44, 182], [ 45, 183], [ 46, 184], [ 47, 184], [ 48, 185], [ 49, 186], [ 50, 187], [ 51, 187], [ 52, 188], [ 53, 189], [ 54, 189], [ 55, 190], [ 56, 189], [ 57, 189], [ 58, 188], [ 59, 187], [ 60, 186], [ 61, 186], [ 62, 185], [ 63, 184], [ 64, 183], [ 65, 183], [ 66, 182], [ 67, 181], [ 68, 180], [ 69, 180], [ 70, 179], [ 71, 178], [ 72, 177], [ 73, 177], [ 74, 176], [ 75, 175], [ 76, 174], [ 77, 174], [ 78, 173], [ 79, 172], [ 80, 171], [ 81, 171], [ 82, 170], [ 83, 169], [ 84, 169], [ 85, 168], [ 86, 167], [ 87, 166], [ 88, 166], [ 89, 165], [ 90, 164], [ 91, 163], [ 92, 163], [ 93, 162], [ 94, 161], [ 95, 160], [ 96, 160], [ 97, 159], [ 98, 158], [ 99, 157], [100, 157], [101, 156], [102, 155], [103, 154], [104, 154], [105, 153], [106, 152], [107, 151], [108, 151], [109, 150], [110, 149], [111, 148], [112, 148], [113, 147], [114, 146], [114, 147], [114, 148], [114, 149], [114, 150], [114, 151], [114, 152], [114, 153], [114, 154], [114, 155], [114, 156], [114, 157], [114, 158], [114, 159], [114, 160], [114, 161], [114, 162], [114, 163], [114, 164], [114, 165], [114, 166], [114, 167], [114, 168], [113, 169], [112, 170], [111, 171], [110, 171], [109, 172], [108, 173], [107, 174], [106, 174], [105, 175], [104, 176], [103, 176], [102, 177], [101, 178], [100, 179], [ 99, 179], [ 98, 180], [ 97, 181], [ 96, 182], [ 95, 182], [ 94, 183], [ 93, 184], [ 92, 185], [ 91, 185], [ 90, 186], [ 89, 187], [ 88, 188], [ 87, 188], [ 86, 189], [ 85, 190], [ 84, 191], [ 83, 191], [ 82, 192], [ 81, 193], [ 80, 193], [ 79, 194], [ 78, 195], [ 77, 196], [ 76, 196], [ 75, 197], [ 74, 198], [ 73, 199], [ 72, 199], [ 71, 200], [ 70, 201], [ 71, 202], [ 72, 203], [ 73, 204], [ 74, 204], [ 75, 205], [ 76, 206], [ 77, 206], [ 78, 207], [ 79, 208], [ 80, 209], [ 81, 209], [ 82, 210], [ 83, 211], [ 84, 212], [ 85, 212], [ 86, 213], [ 87, 214], [ 88, 215], [ 89, 215], [ 90, 216], [ 91, 217], [ 92, 218], [ 93, 218], [ 94, 219], [ 95, 220], [ 96, 221], [ 97, 221], [ 98, 222], [ 99, 223], [100, 224], [101, 224], [102, 225], [103, 226], [104, 226], [105, 227], [106, 228], [107, 229], [108, 229], [109, 230], [110, 231], [111, 232], [112, 232], [113, 233], [114, 234], [114, 235], [114, 236], [114, 237], [114, 238], [114, 239], [114, 240], [114, 241], [114, 242], [114, 243], [114, 244], [114, 245], [114, 246], [114, 247], [114, 248], [114, 249], [114, 250], [114, 251], [114, 252], [114, 253], [114, 254], [114, 255]])'polygon(256px 114px, 255px 113px, 255px 112px, 254px 111px, 253px 110px, 252px 109px, 252px 108px, 251px 107px, 250px 106px, 249px 105px, 249px 104px, 248px 103px, 247px 102px, 246px 101px, 246px 100px, 245px 99px, 244px 98px, 243px 97px, 243px 96px, 242px 95px, 241px 94px, 240px 93px, 240px 92px, 239px 91px, 238px 90px, 237px 89px, 237px 88px, 236px 87px, 235px 86px, 235px 85px, 234px 84px, 233px 83px, 232px 82px, 232px 81px, 231px 80px, 230px 79px, 229px 78px, 229px 77px, 228px 76px, 227px 75px, 226px 74px, 226px 73px, 225px 72px, 224px 71px, 223px 70px, 223px 69px, 222px 68px, 221px 67px, 220px 66px, 220px 65px, 219px 64px, 218px 63px, 217px 62px, 217px 61px, 216px 60px, 215px 59px, 215px 58px, 214px 57px, 213px 56px, 214px 55px, 214px 54px, 215px 53px, 216px 52px, 217px 51px, 217px 50px, 218px 49px, 219px 48px, 220px 47px, 220px 46px, 221px 45px, 222px 44px, 223px 43px, 223px 42px, 224px 41px, 225px 40px, 226px 39px, 226px 38px, 227px 37px, 228px 36px, 229px 35px, 229px 34px, 230px 33px, 231px 32px, 232px 31px, 232px 30px, 233px 29px, 234px 28px, 235px 27px, 235px 26px, 236px 25px, 237px 24px, 238px 23px, 238px 22px, 239px 21px, 240px 20px, 240px 19px, 241px 18px, 242px 17px, 243px 16px, 243px 15px, 244px 14px, 245px 13px, 246px 12px, 246px 11px, 247px 10px, 248px 9px, 249px 8px, 249px 7px, 250px 6px, 251px 5px, 252px 4px, 252px 3px, 253px 2px, 254px 1px, 253px 0px, 252px 0px, 251px 0px, 250px 0px, 249px 0px, 248px 0px, 247px 0px, 246px 0px, 245px 0px, 244px 0px, 243px 0px, 242px 0px, 241px 0px, 240px 0px, 239px 0px, 238px 0px, 237px 0px, 236px 0px, 235px 0px, 234px 0px, 233px 0px, 232px 1px, 231px 2px, 230px 3px, 230px 4px, 229px 5px, 228px 6px, 227px 7px, 227px 8px, 226px 9px, 225px 10px, 224px 11px, 224px 12px, 223px 13px, 222px 14px, 221px 15px, 221px 16px, 220px 17px, 219px 18px, 218px 19px, 218px 20px, 217px 21px, 216px 22px, 215px 23px, 215px 24px, 214px 25px, 213px 26px, 212px 27px, 212px 28px, 211px 29px, 210px 30px, 209px 31px, 209px 32px, 208px 33px, 207px 34px, 206px 35px, 206px 36px, 205px 37px, 204px 38px, 203px 39px, 203px 40px, 202px 41px, 201px 40px, 200px 39px, 200px 38px, 199px 37px, 198px 36px, 197px 35px, 197px 34px, 196px 33px, 195px 32px, 194px 31px, 194px 30px, 193px 29px, 192px 28px, 191px 27px, 191px 26px, 190px 25px, 189px 24px, 188px 23px, 188px 22px, 187px 21px, 186px 20px, 185px 19px, 185px 18px, 184px 17px, 183px 16px, 182px 15px, 182px 14px, 181px 13px, 180px 12px, 180px 11px, 179px 10px, 178px 9px, 177px 8px, 177px 7px, 176px 6px, 175px 5px, 174px 4px, 174px 3px, 173px 2px, 172px 1px, 171px 0px, 170px 0px, 169px 0px, 168px 0px, 167px 0px, 166px 0px, 165px 0px, 164px 0px, 163px 0px, 162px 0px, 161px 0px, 160px 0px, 159px 0px, 158px 0px, 157px 0px, 156px 0px, 155px 0px, 154px 0px, 153px 0px, 152px 0px, 151px 0px, 150px 1px, 151px 2px, 152px 3px, 152px 4px, 153px 5px, 154px 6px, 154px 7px, 155px 8px, 156px 9px, 157px 10px, 157px 11px, 158px 12px, 159px 13px, 160px 14px, 160px 15px, 161px 16px, 162px 17px, 163px 18px, 163px 19px, 164px 20px, 165px 21px, 166px 22px, 166px 23px, 167px 24px, 168px 25px, 169px 26px, 169px 27px, 170px 28px, 171px 29px, 172px 30px, 172px 31px, 173px 32px, 174px 33px, 175px 34px, 175px 35px, 176px 36px, 177px 37px, 178px 38px, 178px 39px, 179px 40px, 180px 41px, 181px 42px, 181px 43px, 182px 44px, 183px 45px, 184px 46px, 184px 47px, 185px 48px, 186px 49px, 187px 50px, 187px 51px, 188px 52px, 189px 53px, 189px 54px, 190px 55px, 189px 56px, 189px 57px, 188px 58px, 187px 59px, 186px 60px, 186px 61px, 185px 62px, 184px 63px, 183px 64px, 183px 65px, 182px 66px, 181px 67px, 180px 68px, 180px 69px, 179px 70px, 178px 71px, 177px 72px, 177px 73px, 176px 74px, 175px 75px, 174px 76px, 174px 77px, 173px 78px, 172px 79px, 171px 80px, 171px 81px, 170px 82px, 169px 83px, 169px 84px, 168px 85px, 167px 86px, 166px 87px, 166px 88px, 165px 89px, 164px 90px, 163px 91px, 163px 92px, 162px 93px, 161px 94px, 160px 95px, 160px 96px, 159px 97px, 158px 98px, 157px 99px, 157px 100px, 156px 101px, 155px 102px, 154px 103px, 154px 104px, 153px 105px, 152px 106px, 151px 107px, 151px 108px, 150px 109px, 149px 110px, 148px 111px, 148px 112px, 147px 113px, 146px 114px, 147px 114px, 148px 114px, 149px 114px, 150px 114px, 151px 114px, 152px 114px, 153px 114px, 154px 114px, 155px 114px, 156px 114px, 157px 114px, 158px 114px, 159px 114px, 160px 114px, 161px 114px, 162px 114px, 163px 114px, 164px 114px, 165px 114px, 166px 114px, 167px 114px, 168px 114px, 169px 113px, 170px 112px, 171px 111px, 171px 110px, 172px 109px, 173px 108px, 174px 107px, 174px 106px, 175px 105px, 176px 104px, 176px 103px, 177px 102px, 178px 101px, 179px 100px, 179px 99px, 180px 98px, 181px 97px, 182px 96px, 182px 95px, 183px 94px, 184px 93px, 185px 92px, 185px 91px, 186px 90px, 187px 89px, 188px 88px, 188px 87px, 189px 86px, 190px 85px, 191px 84px, 191px 83px, 192px 82px, 193px 81px, 193px 80px, 194px 79px, 195px 78px, 196px 77px, 196px 76px, 197px 75px, 198px 74px, 199px 73px, 199px 72px, 200px 71px, 201px 70px, 202px 71px, 203px 72px, 204px 73px, 204px 74px, 205px 75px, 206px 76px, 206px 77px, 207px 78px, 208px 79px, 209px 80px, 209px 81px, 210px 82px, 211px 83px, 212px 84px, 212px 85px, 213px 86px, 214px 87px, 215px 88px, 215px 89px, 216px 90px, 217px 91px, 218px 92px, 218px 93px, 219px 94px, 220px 95px, 221px 96px, 221px 97px, 222px 98px, 223px 99px, 224px 100px, 224px 101px, 225px 102px, 226px 103px, 226px 104px, 227px 105px, 228px 106px, 229px 107px, 229px 108px, 230px 109px, 231px 110px, 232px 111px, 232px 112px, 233px 113px, 234px 114px, 235px 114px, 236px 114px, 237px 114px, 238px 114px, 239px 114px, 240px 114px, 241px 114px, 242px 114px, 243px 114px, 244px 114px, 245px 114px, 246px 114px, 247px 114px, 248px 114px, 249px 114px, 250px 114px, 251px 114px, 252px 114px, 253px 114px, 254px 114px, 255px 114px);'
min
max
diff