Last active
June 4, 2025 12:55
-
-
Save Schaback/f638c1ca026ab84d25798cc71d05ff2c to your computer and use it in GitHub Desktop.
Pattern test
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "metadata": { | |
| "kernelspec": { | |
| "name": "python", | |
| "display_name": "Python (Pyodide)", | |
| "language": "python" | |
| }, | |
| "language_info": { | |
| "codemirror_mode": { | |
| "name": "python", | |
| "version": 3 | |
| }, | |
| "file_extension": ".py", | |
| "mimetype": "text/x-python", | |
| "name": "python", | |
| "nbconvert_exporter": "python", | |
| "pygments_lexer": "ipython3", | |
| "version": "3.8" | |
| } | |
| }, | |
| "nbformat_minor": 5, | |
| "nbformat": 4, | |
| "cells": [ | |
| { | |
| "id": "04c8360d-9afc-40ca-8145-9ba78219a4c0", | |
| "cell_type": "markdown", | |
| "source": "# PoC: Smaller Triangle Background Generation\nThis is another approach to generate the triangle background. \nHere, the file size does not scale proportional with the number of triangles, but with a repetition factor instead.\n\n\nHere is the full code. There is *some* optimization already in there, but there is a little bit more that could be done. Explanation below.", | |
| "metadata": {} | |
| }, | |
| { | |
| "id": "0cd1d118-54d7-4c66-8e99-78414b0e02a7", | |
| "cell_type": "code", | |
| "source": "%pip install svgwrite\nimport random\n\nfrom IPython.core.display import SVG\nfrom svgwrite import Drawing\n\nX_STRIDE_WIDTH_COUNT = 4\nY_STRIDE_WIDTH_COUNT = 5\n\n\ndwg = Drawing(\"triangle_grid.svg\", size=(1000, 1000), profile=\"full\")\n# I screwed something up with the alignment, there is a ~1px gap between the triangles.\n# Probably has to do with the rotation if I had to guess. Principle should still work though:\ndwg.add(dwg.rect((0, 0), (\"100%\", \"100%\"), fill=\"black\"))\n\n# Triangle size\nsize = 100\n\npoints = [\n (0, 0),\n (0 + size, 0),\n (0 + size // 2, 0 + size // 2),\n]\n\nbg_rect = dwg.rect((0, 0), (\"100%\", \"100%\"))\ndwg.defs.add(bg_rect)\n\nfor x_offset in range(X_STRIDE_WIDTH_COUNT):\n for y_offset in range(Y_STRIDE_WIDTH_COUNT):\n color_channel = random.randint(15, 38)\n triangle = dwg.polygon(points, fill=f\"rgb({color_channel},{color_channel},{color_channel})\")\n dwg.defs.add(triangle)\n\n for rot in range(4):\n pattern = dwg.pattern(\n id=f\"t{rot}-{x_offset}-{y_offset}\",\n patternUnits=\"userSpaceOnUse\",\n x=x_offset * size,\n width=size * X_STRIDE_WIDTH_COUNT,\n y=y_offset * size,\n height=size * Y_STRIDE_WIDTH_COUNT,\n )\n pattern.rotate(rot * 90)\n pattern.add(dwg.use(triangle))\n dwg.defs.add(pattern)\n\n rect = dwg.use(bg_rect)\n rect.update(\n {\"fill\": f\"url(#t{rot}-{x_offset}-{y_offset})\"},\n )\n dwg.add(rect)\n\n\nprint(f\"Filesize: ~{len(dwg.tostring()) / 1000} kb\")\nSVG(data=dwg.tostring())", | |
| "metadata": { | |
| "trusted": true | |
| }, | |
| "outputs": [ | |
| { | |
| "name": "stdout", | |
| "output_type": "stream", | |
| "text": "Filesize: ~18.113 kb\n" | |
| }, | |
| { | |
| "execution_count": 59, | |
| "output_type": "execute_result", | |
| "data": { | |
| "text/plain": "<IPython.core.display.SVG object>", | |
| "image/svg+xml": "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:ev=\"http://www.w3.org/2001/xml-events\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" baseProfile=\"full\" height=\"1000\" version=\"1.1\" width=\"1000\"><defs><rect height=\"100%\" id=\"id794\" width=\"100%\" x=\"0\" y=\"0\"/><polygon fill=\"rgb(22,22,22)\" id=\"id793\" points=\"0,0 100,0 50,50\"/><pattern height=\"500\" id=\"t0-0-0\" patternTransform=\"rotate(0)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"0\" y=\"0\"><use xlink:href=\"#id793\"/></pattern><pattern height=\"500\" id=\"t1-0-0\" patternTransform=\"rotate(90)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"0\" y=\"0\"><use xlink:href=\"#id793\"/></pattern><pattern height=\"500\" id=\"t2-0-0\" patternTransform=\"rotate(180)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"0\" y=\"0\"><use xlink:href=\"#id793\"/></pattern><pattern height=\"500\" id=\"t3-0-0\" patternTransform=\"rotate(270)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"0\" y=\"0\"><use xlink:href=\"#id793\"/></pattern><polygon fill=\"rgb(37,37,37)\" id=\"id795\" points=\"0,0 100,0 50,50\"/><pattern height=\"500\" id=\"t0-0-1\" patternTransform=\"rotate(0)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"0\" y=\"100\"><use xlink:href=\"#id795\"/></pattern><pattern height=\"500\" id=\"t1-0-1\" patternTransform=\"rotate(90)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"0\" y=\"100\"><use xlink:href=\"#id795\"/></pattern><pattern height=\"500\" id=\"t2-0-1\" patternTransform=\"rotate(180)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"0\" y=\"100\"><use xlink:href=\"#id795\"/></pattern><pattern height=\"500\" id=\"t3-0-1\" patternTransform=\"rotate(270)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"0\" y=\"100\"><use xlink:href=\"#id795\"/></pattern><polygon fill=\"rgb(30,30,30)\" id=\"id796\" points=\"0,0 100,0 50,50\"/><pattern height=\"500\" id=\"t0-0-2\" patternTransform=\"rotate(0)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"0\" y=\"200\"><use xlink:href=\"#id796\"/></pattern><pattern height=\"500\" id=\"t1-0-2\" patternTransform=\"rotate(90)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"0\" y=\"200\"><use xlink:href=\"#id796\"/></pattern><pattern height=\"500\" id=\"t2-0-2\" patternTransform=\"rotate(180)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"0\" y=\"200\"><use xlink:href=\"#id796\"/></pattern><pattern height=\"500\" id=\"t3-0-2\" patternTransform=\"rotate(270)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"0\" y=\"200\"><use xlink:href=\"#id796\"/></pattern><polygon fill=\"rgb(38,38,38)\" id=\"id797\" points=\"0,0 100,0 50,50\"/><pattern height=\"500\" id=\"t0-0-3\" patternTransform=\"rotate(0)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"0\" y=\"300\"><use xlink:href=\"#id797\"/></pattern><pattern height=\"500\" id=\"t1-0-3\" patternTransform=\"rotate(90)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"0\" y=\"300\"><use xlink:href=\"#id797\"/></pattern><pattern height=\"500\" id=\"t2-0-3\" patternTransform=\"rotate(180)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"0\" y=\"300\"><use xlink:href=\"#id797\"/></pattern><pattern height=\"500\" id=\"t3-0-3\" patternTransform=\"rotate(270)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"0\" y=\"300\"><use xlink:href=\"#id797\"/></pattern><polygon fill=\"rgb(20,20,20)\" id=\"id798\" points=\"0,0 100,0 50,50\"/><pattern height=\"500\" id=\"t0-0-4\" patternTransform=\"rotate(0)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"0\" y=\"400\"><use xlink:href=\"#id798\"/></pattern><pattern height=\"500\" id=\"t1-0-4\" patternTransform=\"rotate(90)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"0\" y=\"400\"><use xlink:href=\"#id798\"/></pattern><pattern height=\"500\" id=\"t2-0-4\" patternTransform=\"rotate(180)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"0\" y=\"400\"><use xlink:href=\"#id798\"/></pattern><pattern height=\"500\" id=\"t3-0-4\" patternTransform=\"rotate(270)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"0\" y=\"400\"><use xlink:href=\"#id798\"/></pattern><polygon fill=\"rgb(30,30,30)\" id=\"id799\" points=\"0,0 100,0 50,50\"/><pattern height=\"500\" id=\"t0-1-0\" patternTransform=\"rotate(0)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"100\" y=\"0\"><use xlink:href=\"#id799\"/></pattern><pattern height=\"500\" id=\"t1-1-0\" patternTransform=\"rotate(90)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"100\" y=\"0\"><use xlink:href=\"#id799\"/></pattern><pattern height=\"500\" id=\"t2-1-0\" patternTransform=\"rotate(180)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"100\" y=\"0\"><use xlink:href=\"#id799\"/></pattern><pattern height=\"500\" id=\"t3-1-0\" patternTransform=\"rotate(270)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"100\" y=\"0\"><use xlink:href=\"#id799\"/></pattern><polygon fill=\"rgb(33,33,33)\" id=\"id800\" points=\"0,0 100,0 50,50\"/><pattern height=\"500\" id=\"t0-1-1\" patternTransform=\"rotate(0)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"100\" y=\"100\"><use xlink:href=\"#id800\"/></pattern><pattern height=\"500\" id=\"t1-1-1\" patternTransform=\"rotate(90)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"100\" y=\"100\"><use xlink:href=\"#id800\"/></pattern><pattern height=\"500\" id=\"t2-1-1\" patternTransform=\"rotate(180)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"100\" y=\"100\"><use xlink:href=\"#id800\"/></pattern><pattern height=\"500\" id=\"t3-1-1\" patternTransform=\"rotate(270)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"100\" y=\"100\"><use xlink:href=\"#id800\"/></pattern><polygon fill=\"rgb(35,35,35)\" id=\"id801\" points=\"0,0 100,0 50,50\"/><pattern height=\"500\" id=\"t0-1-2\" patternTransform=\"rotate(0)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"100\" y=\"200\"><use xlink:href=\"#id801\"/></pattern><pattern height=\"500\" id=\"t1-1-2\" patternTransform=\"rotate(90)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"100\" y=\"200\"><use xlink:href=\"#id801\"/></pattern><pattern height=\"500\" id=\"t2-1-2\" patternTransform=\"rotate(180)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"100\" y=\"200\"><use xlink:href=\"#id801\"/></pattern><pattern height=\"500\" id=\"t3-1-2\" patternTransform=\"rotate(270)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"100\" y=\"200\"><use xlink:href=\"#id801\"/></pattern><polygon fill=\"rgb(32,32,32)\" id=\"id802\" points=\"0,0 100,0 50,50\"/><pattern height=\"500\" id=\"t0-1-3\" patternTransform=\"rotate(0)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"100\" y=\"300\"><use xlink:href=\"#id802\"/></pattern><pattern height=\"500\" id=\"t1-1-3\" patternTransform=\"rotate(90)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"100\" y=\"300\"><use xlink:href=\"#id802\"/></pattern><pattern height=\"500\" id=\"t2-1-3\" patternTransform=\"rotate(180)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"100\" y=\"300\"><use xlink:href=\"#id802\"/></pattern><pattern height=\"500\" id=\"t3-1-3\" patternTransform=\"rotate(270)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"100\" y=\"300\"><use xlink:href=\"#id802\"/></pattern><polygon fill=\"rgb(31,31,31)\" id=\"id803\" points=\"0,0 100,0 50,50\"/><pattern height=\"500\" id=\"t0-1-4\" patternTransform=\"rotate(0)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"100\" y=\"400\"><use xlink:href=\"#id803\"/></pattern><pattern height=\"500\" id=\"t1-1-4\" patternTransform=\"rotate(90)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"100\" y=\"400\"><use xlink:href=\"#id803\"/></pattern><pattern height=\"500\" id=\"t2-1-4\" patternTransform=\"rotate(180)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"100\" y=\"400\"><use xlink:href=\"#id803\"/></pattern><pattern height=\"500\" id=\"t3-1-4\" patternTransform=\"rotate(270)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"100\" y=\"400\"><use xlink:href=\"#id803\"/></pattern><polygon fill=\"rgb(19,19,19)\" id=\"id804\" points=\"0,0 100,0 50,50\"/><pattern height=\"500\" id=\"t0-2-0\" patternTransform=\"rotate(0)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"200\" y=\"0\"><use xlink:href=\"#id804\"/></pattern><pattern height=\"500\" id=\"t1-2-0\" patternTransform=\"rotate(90)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"200\" y=\"0\"><use xlink:href=\"#id804\"/></pattern><pattern height=\"500\" id=\"t2-2-0\" patternTransform=\"rotate(180)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"200\" y=\"0\"><use xlink:href=\"#id804\"/></pattern><pattern height=\"500\" id=\"t3-2-0\" patternTransform=\"rotate(270)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"200\" y=\"0\"><use xlink:href=\"#id804\"/></pattern><polygon fill=\"rgb(36,36,36)\" id=\"id805\" points=\"0,0 100,0 50,50\"/><pattern height=\"500\" id=\"t0-2-1\" patternTransform=\"rotate(0)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"200\" y=\"100\"><use xlink:href=\"#id805\"/></pattern><pattern height=\"500\" id=\"t1-2-1\" patternTransform=\"rotate(90)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"200\" y=\"100\"><use xlink:href=\"#id805\"/></pattern><pattern height=\"500\" id=\"t2-2-1\" patternTransform=\"rotate(180)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"200\" y=\"100\"><use xlink:href=\"#id805\"/></pattern><pattern height=\"500\" id=\"t3-2-1\" patternTransform=\"rotate(270)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"200\" y=\"100\"><use xlink:href=\"#id805\"/></pattern><polygon fill=\"rgb(17,17,17)\" id=\"id806\" points=\"0,0 100,0 50,50\"/><pattern height=\"500\" id=\"t0-2-2\" patternTransform=\"rotate(0)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"200\" y=\"200\"><use xlink:href=\"#id806\"/></pattern><pattern height=\"500\" id=\"t1-2-2\" patternTransform=\"rotate(90)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"200\" y=\"200\"><use xlink:href=\"#id806\"/></pattern><pattern height=\"500\" id=\"t2-2-2\" patternTransform=\"rotate(180)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"200\" y=\"200\"><use xlink:href=\"#id806\"/></pattern><pattern height=\"500\" id=\"t3-2-2\" patternTransform=\"rotate(270)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"200\" y=\"200\"><use xlink:href=\"#id806\"/></pattern><polygon fill=\"rgb(29,29,29)\" id=\"id807\" points=\"0,0 100,0 50,50\"/><pattern height=\"500\" id=\"t0-2-3\" patternTransform=\"rotate(0)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"200\" y=\"300\"><use xlink:href=\"#id807\"/></pattern><pattern height=\"500\" id=\"t1-2-3\" patternTransform=\"rotate(90)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"200\" y=\"300\"><use xlink:href=\"#id807\"/></pattern><pattern height=\"500\" id=\"t2-2-3\" patternTransform=\"rotate(180)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"200\" y=\"300\"><use xlink:href=\"#id807\"/></pattern><pattern height=\"500\" id=\"t3-2-3\" patternTransform=\"rotate(270)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"200\" y=\"300\"><use xlink:href=\"#id807\"/></pattern><polygon fill=\"rgb(17,17,17)\" id=\"id808\" points=\"0,0 100,0 50,50\"/><pattern height=\"500\" id=\"t0-2-4\" patternTransform=\"rotate(0)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"200\" y=\"400\"><use xlink:href=\"#id808\"/></pattern><pattern height=\"500\" id=\"t1-2-4\" patternTransform=\"rotate(90)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"200\" y=\"400\"><use xlink:href=\"#id808\"/></pattern><pattern height=\"500\" id=\"t2-2-4\" patternTransform=\"rotate(180)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"200\" y=\"400\"><use xlink:href=\"#id808\"/></pattern><pattern height=\"500\" id=\"t3-2-4\" patternTransform=\"rotate(270)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"200\" y=\"400\"><use xlink:href=\"#id808\"/></pattern><polygon fill=\"rgb(18,18,18)\" id=\"id809\" points=\"0,0 100,0 50,50\"/><pattern height=\"500\" id=\"t0-3-0\" patternTransform=\"rotate(0)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"300\" y=\"0\"><use xlink:href=\"#id809\"/></pattern><pattern height=\"500\" id=\"t1-3-0\" patternTransform=\"rotate(90)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"300\" y=\"0\"><use xlink:href=\"#id809\"/></pattern><pattern height=\"500\" id=\"t2-3-0\" patternTransform=\"rotate(180)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"300\" y=\"0\"><use xlink:href=\"#id809\"/></pattern><pattern height=\"500\" id=\"t3-3-0\" patternTransform=\"rotate(270)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"300\" y=\"0\"><use xlink:href=\"#id809\"/></pattern><polygon fill=\"rgb(23,23,23)\" id=\"id810\" points=\"0,0 100,0 50,50\"/><pattern height=\"500\" id=\"t0-3-1\" patternTransform=\"rotate(0)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"300\" y=\"100\"><use xlink:href=\"#id810\"/></pattern><pattern height=\"500\" id=\"t1-3-1\" patternTransform=\"rotate(90)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"300\" y=\"100\"><use xlink:href=\"#id810\"/></pattern><pattern height=\"500\" id=\"t2-3-1\" patternTransform=\"rotate(180)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"300\" y=\"100\"><use xlink:href=\"#id810\"/></pattern><pattern height=\"500\" id=\"t3-3-1\" patternTransform=\"rotate(270)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"300\" y=\"100\"><use xlink:href=\"#id810\"/></pattern><polygon fill=\"rgb(34,34,34)\" id=\"id811\" points=\"0,0 100,0 50,50\"/><pattern height=\"500\" id=\"t0-3-2\" patternTransform=\"rotate(0)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"300\" y=\"200\"><use xlink:href=\"#id811\"/></pattern><pattern height=\"500\" id=\"t1-3-2\" patternTransform=\"rotate(90)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"300\" y=\"200\"><use xlink:href=\"#id811\"/></pattern><pattern height=\"500\" id=\"t2-3-2\" patternTransform=\"rotate(180)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"300\" y=\"200\"><use xlink:href=\"#id811\"/></pattern><pattern height=\"500\" id=\"t3-3-2\" patternTransform=\"rotate(270)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"300\" y=\"200\"><use xlink:href=\"#id811\"/></pattern><polygon fill=\"rgb(20,20,20)\" id=\"id812\" points=\"0,0 100,0 50,50\"/><pattern height=\"500\" id=\"t0-3-3\" patternTransform=\"rotate(0)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"300\" y=\"300\"><use xlink:href=\"#id812\"/></pattern><pattern height=\"500\" id=\"t1-3-3\" patternTransform=\"rotate(90)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"300\" y=\"300\"><use xlink:href=\"#id812\"/></pattern><pattern height=\"500\" id=\"t2-3-3\" patternTransform=\"rotate(180)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"300\" y=\"300\"><use xlink:href=\"#id812\"/></pattern><pattern height=\"500\" id=\"t3-3-3\" patternTransform=\"rotate(270)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"300\" y=\"300\"><use xlink:href=\"#id812\"/></pattern><polygon fill=\"rgb(38,38,38)\" id=\"id813\" points=\"0,0 100,0 50,50\"/><pattern height=\"500\" id=\"t0-3-4\" patternTransform=\"rotate(0)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"300\" y=\"400\"><use xlink:href=\"#id813\"/></pattern><pattern height=\"500\" id=\"t1-3-4\" patternTransform=\"rotate(90)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"300\" y=\"400\"><use xlink:href=\"#id813\"/></pattern><pattern height=\"500\" id=\"t2-3-4\" patternTransform=\"rotate(180)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"300\" y=\"400\"><use xlink:href=\"#id813\"/></pattern><pattern height=\"500\" id=\"t3-3-4\" patternTransform=\"rotate(270)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"300\" y=\"400\"><use xlink:href=\"#id813\"/></pattern></defs><rect fill=\"black\" height=\"100%\" width=\"100%\" x=\"0\" y=\"0\"/><use fill=\"url(#t0-0-0)\" xlink:href=\"#id794\"/><use fill=\"url(#t1-0-0)\" xlink:href=\"#id794\"/><use fill=\"url(#t2-0-0)\" xlink:href=\"#id794\"/><use fill=\"url(#t3-0-0)\" xlink:href=\"#id794\"/><use fill=\"url(#t0-0-1)\" xlink:href=\"#id794\"/><use fill=\"url(#t1-0-1)\" xlink:href=\"#id794\"/><use fill=\"url(#t2-0-1)\" xlink:href=\"#id794\"/><use fill=\"url(#t3-0-1)\" xlink:href=\"#id794\"/><use fill=\"url(#t0-0-2)\" xlink:href=\"#id794\"/><use fill=\"url(#t1-0-2)\" xlink:href=\"#id794\"/><use fill=\"url(#t2-0-2)\" xlink:href=\"#id794\"/><use fill=\"url(#t3-0-2)\" xlink:href=\"#id794\"/><use fill=\"url(#t0-0-3)\" xlink:href=\"#id794\"/><use fill=\"url(#t1-0-3)\" xlink:href=\"#id794\"/><use fill=\"url(#t2-0-3)\" xlink:href=\"#id794\"/><use fill=\"url(#t3-0-3)\" xlink:href=\"#id794\"/><use fill=\"url(#t0-0-4)\" xlink:href=\"#id794\"/><use fill=\"url(#t1-0-4)\" xlink:href=\"#id794\"/><use fill=\"url(#t2-0-4)\" xlink:href=\"#id794\"/><use fill=\"url(#t3-0-4)\" xlink:href=\"#id794\"/><use fill=\"url(#t0-1-0)\" xlink:href=\"#id794\"/><use fill=\"url(#t1-1-0)\" xlink:href=\"#id794\"/><use fill=\"url(#t2-1-0)\" xlink:href=\"#id794\"/><use fill=\"url(#t3-1-0)\" xlink:href=\"#id794\"/><use fill=\"url(#t0-1-1)\" xlink:href=\"#id794\"/><use fill=\"url(#t1-1-1)\" xlink:href=\"#id794\"/><use fill=\"url(#t2-1-1)\" xlink:href=\"#id794\"/><use fill=\"url(#t3-1-1)\" xlink:href=\"#id794\"/><use fill=\"url(#t0-1-2)\" xlink:href=\"#id794\"/><use fill=\"url(#t1-1-2)\" xlink:href=\"#id794\"/><use fill=\"url(#t2-1-2)\" xlink:href=\"#id794\"/><use fill=\"url(#t3-1-2)\" xlink:href=\"#id794\"/><use fill=\"url(#t0-1-3)\" xlink:href=\"#id794\"/><use fill=\"url(#t1-1-3)\" xlink:href=\"#id794\"/><use fill=\"url(#t2-1-3)\" xlink:href=\"#id794\"/><use fill=\"url(#t3-1-3)\" xlink:href=\"#id794\"/><use fill=\"url(#t0-1-4)\" xlink:href=\"#id794\"/><use fill=\"url(#t1-1-4)\" xlink:href=\"#id794\"/><use fill=\"url(#t2-1-4)\" xlink:href=\"#id794\"/><use fill=\"url(#t3-1-4)\" xlink:href=\"#id794\"/><use fill=\"url(#t0-2-0)\" xlink:href=\"#id794\"/><use fill=\"url(#t1-2-0)\" xlink:href=\"#id794\"/><use fill=\"url(#t2-2-0)\" xlink:href=\"#id794\"/><use fill=\"url(#t3-2-0)\" xlink:href=\"#id794\"/><use fill=\"url(#t0-2-1)\" xlink:href=\"#id794\"/><use fill=\"url(#t1-2-1)\" xlink:href=\"#id794\"/><use fill=\"url(#t2-2-1)\" xlink:href=\"#id794\"/><use fill=\"url(#t3-2-1)\" xlink:href=\"#id794\"/><use fill=\"url(#t0-2-2)\" xlink:href=\"#id794\"/><use fill=\"url(#t1-2-2)\" xlink:href=\"#id794\"/><use fill=\"url(#t2-2-2)\" xlink:href=\"#id794\"/><use fill=\"url(#t3-2-2)\" xlink:href=\"#id794\"/><use fill=\"url(#t0-2-3)\" xlink:href=\"#id794\"/><use fill=\"url(#t1-2-3)\" xlink:href=\"#id794\"/><use fill=\"url(#t2-2-3)\" xlink:href=\"#id794\"/><use fill=\"url(#t3-2-3)\" xlink:href=\"#id794\"/><use fill=\"url(#t0-2-4)\" xlink:href=\"#id794\"/><use fill=\"url(#t1-2-4)\" xlink:href=\"#id794\"/><use fill=\"url(#t2-2-4)\" xlink:href=\"#id794\"/><use fill=\"url(#t3-2-4)\" xlink:href=\"#id794\"/><use fill=\"url(#t0-3-0)\" xlink:href=\"#id794\"/><use fill=\"url(#t1-3-0)\" xlink:href=\"#id794\"/><use fill=\"url(#t2-3-0)\" xlink:href=\"#id794\"/><use fill=\"url(#t3-3-0)\" xlink:href=\"#id794\"/><use fill=\"url(#t0-3-1)\" xlink:href=\"#id794\"/><use fill=\"url(#t1-3-1)\" xlink:href=\"#id794\"/><use fill=\"url(#t2-3-1)\" xlink:href=\"#id794\"/><use fill=\"url(#t3-3-1)\" xlink:href=\"#id794\"/><use fill=\"url(#t0-3-2)\" xlink:href=\"#id794\"/><use fill=\"url(#t1-3-2)\" xlink:href=\"#id794\"/><use fill=\"url(#t2-3-2)\" xlink:href=\"#id794\"/><use fill=\"url(#t3-3-2)\" xlink:href=\"#id794\"/><use fill=\"url(#t0-3-3)\" xlink:href=\"#id794\"/><use fill=\"url(#t1-3-3)\" xlink:href=\"#id794\"/><use fill=\"url(#t2-3-3)\" xlink:href=\"#id794\"/><use fill=\"url(#t3-3-3)\" xlink:href=\"#id794\"/><use fill=\"url(#t0-3-4)\" xlink:href=\"#id794\"/><use fill=\"url(#t1-3-4)\" xlink:href=\"#id794\"/><use fill=\"url(#t2-3-4)\" xlink:href=\"#id794\"/><use fill=\"url(#t3-3-4)\" xlink:href=\"#id794\"/></svg>" | |
| }, | |
| "metadata": {} | |
| } | |
| ], | |
| "execution_count": 59 | |
| }, | |
| { | |
| "id": "85507178-6279-4c60-a97c-03c9ef7e577d", | |
| "cell_type": "markdown", | |
| "source": "Here is how it works.\nLet's use more distinct colors and only draw the \"top\" triangles.\nThe `X_STRIDE_WIDTH_COUNT` and `Y_STRIDE_WIDTH_COUNT`set the number of rows/columns before the pattern repeats. This is a trade-off between file size and visual effect and can be adjusted.\n\nIdeally, I would have liked to shift the pattern on repetition to make it evel less obious, but I couldn't find out how.", | |
| "metadata": {} | |
| }, | |
| { | |
| "id": "2cca18a9-dc04-4a96-994d-e1982086b79e", | |
| "cell_type": "code", | |
| "source": "dwg = Drawing(\"triangle_grid.svg\", size=(1000, 1000), profile=\"full\")\n\n# Triangle size\nsize = 100\n\npoints = [\n (0, 0),\n (0 + size, 0),\n (0 + size // 2, 0 + size // 2),\n]\n\nbg_rect = dwg.rect((0, 0), (\"100%\", \"100%\"))\ndwg.defs.add(bg_rect)\n\nfor x_offset in range(X_STRIDE_WIDTH_COUNT):\n for y_offset in range(Y_STRIDE_WIDTH_COUNT):\n triangle = dwg.polygon(points, fill=f\"rgb(0,{x_offset*90},{y_offset*90})\")\n dwg.defs.add(triangle)\n\n for rot in range(1):\n pattern = dwg.pattern(\n id=f\"t{rot}-{x_offset}-{y_offset}\",\n patternUnits=\"userSpaceOnUse\",\n x=x_offset * size,\n width=size * X_STRIDE_WIDTH_COUNT,\n y=y_offset * size,\n height=size * Y_STRIDE_WIDTH_COUNT,\n )\n pattern.rotate(rot * 90)\n pattern.add(dwg.use(triangle))\n dwg.defs.add(pattern)\n\n rect = dwg.use(bg_rect)\n rect.update(\n {\"fill\": f\"url(#t{rot}-{x_offset}-{y_offset})\"},\n )\n dwg.add(rect)\n\nSVG(data=dwg.tostring())", | |
| "metadata": { | |
| "trusted": true | |
| }, | |
| "outputs": [ | |
| { | |
| "execution_count": 57, | |
| "output_type": "execute_result", | |
| "data": { | |
| "text/plain": "<IPython.core.display.SVG object>", | |
| "image/svg+xml": "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:ev=\"http://www.w3.org/2001/xml-events\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" baseProfile=\"full\" height=\"1000\" version=\"1.1\" width=\"1000\"><defs><rect height=\"100%\" id=\"id771\" width=\"100%\" x=\"0\" y=\"0\"/><polygon fill=\"rgb(0,0,0)\" id=\"id770\" points=\"0,0 100,0 50,50\"/><pattern height=\"500\" id=\"t0-0-0\" patternTransform=\"rotate(0)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"0\" y=\"0\"><use xlink:href=\"#id770\"/></pattern><polygon fill=\"rgb(0,0,90)\" id=\"id772\" points=\"0,0 100,0 50,50\"/><pattern height=\"500\" id=\"t0-0-1\" patternTransform=\"rotate(0)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"0\" y=\"100\"><use xlink:href=\"#id772\"/></pattern><polygon fill=\"rgb(0,0,180)\" id=\"id773\" points=\"0,0 100,0 50,50\"/><pattern height=\"500\" id=\"t0-0-2\" patternTransform=\"rotate(0)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"0\" y=\"200\"><use xlink:href=\"#id773\"/></pattern><polygon fill=\"rgb(0,0,270)\" id=\"id774\" points=\"0,0 100,0 50,50\"/><pattern height=\"500\" id=\"t0-0-3\" patternTransform=\"rotate(0)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"0\" y=\"300\"><use xlink:href=\"#id774\"/></pattern><polygon fill=\"rgb(0,0,360)\" id=\"id775\" points=\"0,0 100,0 50,50\"/><pattern height=\"500\" id=\"t0-0-4\" patternTransform=\"rotate(0)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"0\" y=\"400\"><use xlink:href=\"#id775\"/></pattern><polygon fill=\"rgb(0,90,0)\" id=\"id776\" points=\"0,0 100,0 50,50\"/><pattern height=\"500\" id=\"t0-1-0\" patternTransform=\"rotate(0)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"100\" y=\"0\"><use xlink:href=\"#id776\"/></pattern><polygon fill=\"rgb(0,90,90)\" id=\"id777\" points=\"0,0 100,0 50,50\"/><pattern height=\"500\" id=\"t0-1-1\" patternTransform=\"rotate(0)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"100\" y=\"100\"><use xlink:href=\"#id777\"/></pattern><polygon fill=\"rgb(0,90,180)\" id=\"id778\" points=\"0,0 100,0 50,50\"/><pattern height=\"500\" id=\"t0-1-2\" patternTransform=\"rotate(0)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"100\" y=\"200\"><use xlink:href=\"#id778\"/></pattern><polygon fill=\"rgb(0,90,270)\" id=\"id779\" points=\"0,0 100,0 50,50\"/><pattern height=\"500\" id=\"t0-1-3\" patternTransform=\"rotate(0)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"100\" y=\"300\"><use xlink:href=\"#id779\"/></pattern><polygon fill=\"rgb(0,90,360)\" id=\"id780\" points=\"0,0 100,0 50,50\"/><pattern height=\"500\" id=\"t0-1-4\" patternTransform=\"rotate(0)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"100\" y=\"400\"><use xlink:href=\"#id780\"/></pattern><polygon fill=\"rgb(0,180,0)\" id=\"id781\" points=\"0,0 100,0 50,50\"/><pattern height=\"500\" id=\"t0-2-0\" patternTransform=\"rotate(0)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"200\" y=\"0\"><use xlink:href=\"#id781\"/></pattern><polygon fill=\"rgb(0,180,90)\" id=\"id782\" points=\"0,0 100,0 50,50\"/><pattern height=\"500\" id=\"t0-2-1\" patternTransform=\"rotate(0)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"200\" y=\"100\"><use xlink:href=\"#id782\"/></pattern><polygon fill=\"rgb(0,180,180)\" id=\"id783\" points=\"0,0 100,0 50,50\"/><pattern height=\"500\" id=\"t0-2-2\" patternTransform=\"rotate(0)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"200\" y=\"200\"><use xlink:href=\"#id783\"/></pattern><polygon fill=\"rgb(0,180,270)\" id=\"id784\" points=\"0,0 100,0 50,50\"/><pattern height=\"500\" id=\"t0-2-3\" patternTransform=\"rotate(0)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"200\" y=\"300\"><use xlink:href=\"#id784\"/></pattern><polygon fill=\"rgb(0,180,360)\" id=\"id785\" points=\"0,0 100,0 50,50\"/><pattern height=\"500\" id=\"t0-2-4\" patternTransform=\"rotate(0)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"200\" y=\"400\"><use xlink:href=\"#id785\"/></pattern><polygon fill=\"rgb(0,270,0)\" id=\"id786\" points=\"0,0 100,0 50,50\"/><pattern height=\"500\" id=\"t0-3-0\" patternTransform=\"rotate(0)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"300\" y=\"0\"><use xlink:href=\"#id786\"/></pattern><polygon fill=\"rgb(0,270,90)\" id=\"id787\" points=\"0,0 100,0 50,50\"/><pattern height=\"500\" id=\"t0-3-1\" patternTransform=\"rotate(0)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"300\" y=\"100\"><use xlink:href=\"#id787\"/></pattern><polygon fill=\"rgb(0,270,180)\" id=\"id788\" points=\"0,0 100,0 50,50\"/><pattern height=\"500\" id=\"t0-3-2\" patternTransform=\"rotate(0)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"300\" y=\"200\"><use xlink:href=\"#id788\"/></pattern><polygon fill=\"rgb(0,270,270)\" id=\"id789\" points=\"0,0 100,0 50,50\"/><pattern height=\"500\" id=\"t0-3-3\" patternTransform=\"rotate(0)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"300\" y=\"300\"><use xlink:href=\"#id789\"/></pattern><polygon fill=\"rgb(0,270,360)\" id=\"id790\" points=\"0,0 100,0 50,50\"/><pattern height=\"500\" id=\"t0-3-4\" patternTransform=\"rotate(0)\" patternUnits=\"userSpaceOnUse\" width=\"400\" x=\"300\" y=\"400\"><use xlink:href=\"#id790\"/></pattern></defs><use fill=\"url(#t0-0-0)\" xlink:href=\"#id771\"/><use fill=\"url(#t0-0-1)\" xlink:href=\"#id771\"/><use fill=\"url(#t0-0-2)\" xlink:href=\"#id771\"/><use fill=\"url(#t0-0-3)\" xlink:href=\"#id771\"/><use fill=\"url(#t0-0-4)\" xlink:href=\"#id771\"/><use fill=\"url(#t0-1-0)\" xlink:href=\"#id771\"/><use fill=\"url(#t0-1-1)\" xlink:href=\"#id771\"/><use fill=\"url(#t0-1-2)\" xlink:href=\"#id771\"/><use fill=\"url(#t0-1-3)\" xlink:href=\"#id771\"/><use fill=\"url(#t0-1-4)\" xlink:href=\"#id771\"/><use fill=\"url(#t0-2-0)\" xlink:href=\"#id771\"/><use fill=\"url(#t0-2-1)\" xlink:href=\"#id771\"/><use fill=\"url(#t0-2-2)\" xlink:href=\"#id771\"/><use fill=\"url(#t0-2-3)\" xlink:href=\"#id771\"/><use fill=\"url(#t0-2-4)\" xlink:href=\"#id771\"/><use fill=\"url(#t0-3-0)\" xlink:href=\"#id771\"/><use fill=\"url(#t0-3-1)\" xlink:href=\"#id771\"/><use fill=\"url(#t0-3-2)\" xlink:href=\"#id771\"/><use fill=\"url(#t0-3-3)\" xlink:href=\"#id771\"/><use fill=\"url(#t0-3-4)\" xlink:href=\"#id771\"/></svg>" | |
| }, | |
| "metadata": {} | |
| } | |
| ], | |
| "execution_count": 57 | |
| }, | |
| { | |
| "id": "9c40fd59-5ced-4183-8d21-6de050dac081", | |
| "cell_type": "markdown", | |
| "source": "", | |
| "metadata": {} | |
| } | |
| ] | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment