Move mouse pointer over the doodles.
Image source: me.
-
-
Save zarazum/3833467 to your computer and use it in GitHub Desktop.
mythac #00
This file contains 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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> | |
| <title></title> | |
| <style type="text/css"> | |
| input { | |
| position: absolute; | |
| bottom: 20px; | |
| right: 20px; | |
| width: 200px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.5.0"></script> | |
| <script type="text/javascript"> | |
| var svg = d3.select("body").append("svg:svg") | |
| .attr("width", 960) | |
| .attr("height", 500) | |
| .attr("id","svgFrame"); | |
| var filter = svg.append("svg:defs") | |
| .append("svg:filter") | |
| .attr("id", "blur") | |
| .append("svg:feGaussianBlur") //try convolve | |
| .attr("stdDeviation", 0); | |
| d3.xml("mythac.svg", "image/svg+xml", function(xml) { | |
| xml.documentElement.id = "mythac"; | |
| document.getElementById('svgFrame').appendChild(xml.documentElement); | |
| d3.selectAll("path") | |
| .attr("filter", "url(#blur)") | |
| .on("mouseover", recolour); | |
| }); | |
| d3.select("body").append("input") | |
| .attr("type", "range") | |
| .attr("min", 0) | |
| .attr("max", 100) | |
| .attr("value", 0) | |
| .on("change", blur); | |
| function blur() { | |
| filter.attr("stdDeviation", this.value / 5); | |
| } | |
| function recolour() { | |
| d3.select(this) | |
| .transition() | |
| .delay(50) | |
| .duration(500) | |
| .style("fill", function() { | |
| return "hsl(" + Math.random() * 360 + ",100%,50%)"; | |
| }); | |
| } | |
| </script> | |
| </body> | |
| </html> |
This file contains 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
| <?xml version="1.0" encoding="utf-8"?> | |
| <!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> | |
| <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> | |
| <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" | |
| width="257.153px" height="413.371px" viewBox="0 0 257.153 413.371" enable-background="new 0 0 257.153 413.371" | |
| xml:space="preserve"> | |
| <g enable-background="new "> | |
| <g> | |
| <defs> | |
| <rect id="SVGID_1_" y="-0.629" width="258" height="414"/> | |
| </defs> | |
| <clipPath id="SVGID_2_"> | |
| <use xlink:href="#SVGID_1_" overflow="visible"/> | |
| </clipPath> | |
| <g clip-path="url(#SVGID_2_)"> | |
| <defs> | |
| <rect id="SVGID_3_" y="-0.629" width="258" height="414"/> | |
| </defs> | |
| <clipPath id="SVGID_4_"> | |
| <use xlink:href="#SVGID_3_" overflow="visible"/> | |
| </clipPath> | |
| <path opacity="0.75" clip-path="url(#SVGID_4_)" d="M98.071,0.613c-7.516,1.766-13.254,5.441-19.223,10.133 | |
| c-8.336,6.551-8.082,17.574-6.488,26.895c2.188,12.793,16.008,20.762,27.172,24.391c13.109,4.266,26.859-1.734,33.863-13.164 | |
| c4.785-7.816,5.578-18.082,4.758-27.004c-1.047-11.395-8.762-21-21-21c-1.798,0-3.617,0.273-5.394,0.782 | |
| C109.129,0.568,106.264,0,103.332,0C101.591,0,99.826,0.2,98.071,0.613"/> | |
| <path opacity="0.75" clip-path="url(#SVGID_4_)" d="M130.233,273.427c-0.084,0.035-0.168,0.07-0.252,0.104 | |
| C130.065,273.496,130.149,273.461,130.233,273.427 M85.874,214.169c-0.072,0.057-0.145,0.113-0.217,0.17 | |
| C85.729,214.282,85.801,214.226,85.874,214.169 M92.417,204.642c-7.707,2.742-14.688,7.836-18.566,15.145 | |
| c-5.168,9.738-4.359,22.316-0.496,32.297c7.395,19.105,30.105,32.391,50.477,28.922c20.309-3.457,27.926-22.645,29.672-41.086 | |
| c1.288-13.629-12.089-16.448-22.274-20.532c-1.271-0.568-2.492-1.178-3.687-1.897c-3.047-1.836-5.812,2.922-2.777,4.746 | |
| c4.611,2.778,9.896,4.169,14.87,6.145c1.916,0.843,3.729,1.775,5.446,2.979c0.69,0.594,1.305,1.198,1.902,1.889 | |
| c0.255,0.365,0.483,0.746,0.687,1.143c0.146,0.432,0.254,0.855,0.342,1.306c0.174,2.057,0.024,4.087-0.211,6.135 | |
| c-0.904,6.189-2.434,12.413-4.764,18.227c-0.996,2.196-2.274,4.22-3.723,6.148c-1.272,1.502-2.621,2.863-4.124,4.14 | |
| c-1.736,1.29-3.541,2.372-5.501,3.307c-2.341,0.941-4.709,1.597-7.204,2.028c-3.281,0.39-6.514,0.357-9.797-0.014 | |
| c-3.939-0.62-7.709-1.69-11.406-3.174c-3.751-1.665-7.247-3.685-10.557-6.11c-2.52-2.048-4.763-4.285-6.824-6.8 | |
| c-2.121-2.859-3.868-5.863-5.303-9.118c-1.166-3.043-1.997-6.104-2.52-9.317c-0.351-3.221-0.357-6.372-0.013-9.598 | |
| c0.454-2.819,1.114-5.569,2.171-8.222c0.76-1.584,1.646-3.04,2.688-4.443c1.361-1.616,2.849-3.042,4.494-4.357 | |
| c2.178-1.564,4.463-2.858,6.904-3.965c3.473-1.4,7.038-2.352,10.74-2.924c3.717-0.428,7.402-0.454,11.123-0.034 | |
| c2.912,0.457,5.714,1.175,8.463,2.25c1.952,0.878,3.773,1.908,5.518,3.158c1.358,1.108,2.579,2.307,3.71,3.655 | |
| c0.496,0.679,0.956,1.364,1.403,2.084c1.859,3.008,6.617,0.25,4.746-2.777c-6.224-10.068-17.591-14.182-29.035-14.182 | |
| C103.275,201.792,97.54,202.818,92.417,204.642"/> | |
| <path opacity="0.75" clip-path="url(#SVGID_4_)" d="M117.033,217.754c0.013,0.101,0.026,0.201,0.039,0.302 | |
| C117.059,217.955,117.046,217.854,117.033,217.754 M116.975,217.325c0.016,0.108,0.03,0.217,0.045,0.325 | |
| C117.004,217.542,116.989,217.434,116.975,217.325 M110.689,83.974c0.023,0.177,0.047,0.355,0.07,0.533 | |
| C110.735,84.33,110.712,84.151,110.689,83.974 M103.279,61.251c1.148,1.941,2.152,3.93,3.052,5.991 | |
| c2.214,5.598,3.557,11.4,4.438,17.346c2.152,16.734,0.965,33.693-0.146,50.464c-0.859,12.953-1.215,25.809-1.152,38.782 | |
| c0.059,12.652,0.254,25.324,1.398,37.929c0.699,7.734,0.887,20.836,7.895,25.973c2.823,2.07,5.522-2.532,2.902-4.653 | |
| c-0.206-0.189-0.396-0.386-0.58-0.592c-0.472-0.702-0.857-1.437-1.204-2.206c-1.542-4.031-2.264-8.338-2.857-12.6 | |
| c-2.878-22.413-2.907-46.003-1.776-68.566c0.805-16.043,2.398-32.039,2.172-48.121c-0.203-14.48-1.891-29.828-9.391-42.523 | |
| c-0.554-0.937-1.386-1.325-2.221-1.325C103.924,57.149,102.026,59.129,103.279,61.251"/> | |
| <path opacity="0.75" clip-path="url(#SVGID_4_)" d="M78.051,178.017c-0.273,3.539,5.23,3.512,5.5,0 | |
| c0.041-0.655,0.099-1.308,0.177-1.959c0.582-3.808,1.632-7.444,3.059-11.018c1.516-3.406,3.325-6.593,5.51-9.619 | |
| c1.862-2.35,3.892-4.464,6.221-6.351c1.504-1.079,3.046-2.002,4.714-2.807c1.54-0.604,3.073-1.046,4.706-1.348 | |
| c1.424-0.136,2.798-0.149,4.232-0.046c1.033,0.164,2.032,0.374,3.053,0.644c3.434,0.902,4.891-4.402,1.461-5.301 | |
| c-2.202-0.58-4.339-0.851-6.4-0.852C91.845,139.359,79.362,161.07,78.051,178.017"/> | |
| <path opacity="0.75" clip-path="url(#SVGID_4_)" d="M115.526,143.845c-3.426,0.906-1.972,6.211,1.461,5.305 | |
| c0.597-0.155,1.184-0.287,1.784-0.393c0.69-0.052,1.356-0.056,2.038-0.003c0.56,0.117,1.09,0.267,1.622,0.461 | |
| c0.521,0.272,1.005,0.57,1.479,0.908c0.648,0.574,1.229,1.187,1.778,1.851c1.283,1.802,2.274,3.747,3.16,5.768 | |
| c3.895,9.67,7.549,30.37,22.386,24.439c3.25-1.297,1.832-6.621-1.461-5.301c-0.954,0.379-1.886,0.673-2.877,0.855 | |
| c-0.425,0.021-0.835,0.022-1.257-0.001c-0.337-0.069-0.663-0.153-0.996-0.258c-0.396-0.196-0.77-0.416-1.14-0.665 | |
| c-0.536-0.466-1.014-0.967-1.468-1.512c-1.085-1.538-1.93-3.192-2.693-4.915c-4.014-9.852-7.169-27.117-19.647-27.117 | |
| C118.408,143.267,117.022,143.451,115.526,143.845"/> | |
| <path opacity="0.75" clip-path="url(#SVGID_4_)" d="M145.328,64.375c0.057,6.387,0.549,12.751-0.207,19.112 | |
| c-0.062,0.4-0.134,0.8-0.213,1.198c-10.313,0.379-18.222,3.695-26.705,10.042c-2.805,2.098-0.066,6.879,2.777,4.75 | |
| c3.603-2.698,7.251-5.245,11.359-7.103c2.177-0.829,4.362-1.412,6.665-1.809c2.693-0.326,5.375-0.423,8.097-0.416 | |
| c1.188,0.004,2.371-0.836,2.648-2.02c1.859-7.844,1.148-15.773,1.078-23.754c-0.016-1.774-1.399-2.662-2.774-2.662 | |
| S145.312,62.6,145.328,64.375"/> | |
| <path opacity="0.75" clip-path="url(#SVGID_4_)" d="M109.38,92.312c-0.163,0.023-0.325,0.045-0.488,0.066 | |
| C109.054,92.355,109.217,92.333,109.38,92.312 M73.529,91.769c-1.43,8.129-3.497,16.086-5.833,23.996 | |
| c-1.008,3.41,4.301,4.855,5.301,1.465c2.118-7.166,4.013-14.367,5.414-21.699c11.939,1.646,23.676,3.853,35.7,1.496 | |
| c3.476-0.684,2-5.984-1.465-5.305c-1.034,0.228-2.074,0.417-3.121,0.569c-6.16,0.676-12.214,0.311-18.347-0.443 | |
| c-5.002-0.685-9.985-1.479-14.997-2.098c-0.064-0.008-0.13-0.012-0.197-0.012C74.915,89.737,73.709,90.746,73.529,91.769"/> | |
| <path opacity="0.75" clip-path="url(#SVGID_4_)" d="M98.82,330.104c0,0.005-0.001,0.01-0.002,0.014 | |
| c0.006-0.043,0.012-0.086,0.018-0.129C98.831,330.027,98.826,330.065,98.82,330.104 M143.514,374.9 | |
| c-0.04,0.051-0.079,0.103-0.119,0.154C143.434,375.003,143.474,374.952,143.514,374.9 M97.297,366.586 | |
| c0.021,0.142,0.04,0.283,0.059,0.426C97.336,366.87,97.316,366.729,97.297,366.586 M156.65,318.441 | |
| c0.015,0.109,0.03,0.219,0.045,0.328C156.68,318.659,156.665,318.551,156.65,318.441 M105.539,303.352 | |
| c-0.04,0.097-0.08,0.193-0.121,0.29C105.458,303.545,105.499,303.448,105.539,303.352 M132.343,285.039 | |
| c1.973,0.304,3.872,0.8,5.739,1.522c1.748,0.786,3.378,1.743,4.929,2.879c1.717,1.391,3.248,2.944,4.646,4.659 | |
| c1.966,2.621,3.554,5.458,4.877,8.457c2.057,5.043,3.332,10.32,4.092,15.707c0.933,7.702,0.817,15.459-0.181,23.147 | |
| c-1.033,7.067-2.803,13.98-5.503,20.596c-1.939,4.488-4.293,8.749-7.241,12.648c-1.971,2.45-4.146,4.68-6.607,6.633 | |
| c-1.904,1.394-3.906,2.577-6.062,3.544c-2.115,0.832-4.274,1.415-6.518,1.759c-2.901,0.3-5.748,0.156-8.635-0.188 | |
| c-2.562-0.42-5.013-1.032-7.422-1.987c-1.379-0.658-2.657-1.401-3.894-2.287c-1.021-0.863-1.938-1.781-2.796-2.804 | |
| c-0.948-1.331-1.729-2.71-2.403-4.195c-0.969-2.559-1.573-5.172-1.971-7.868c-1.365-12.163-0.174-25.008,1.426-37.145 | |
| c-0.004,0.032-0.009,0.065-0.014,0.098c0.005-0.037,0.01-0.074,0.016-0.111c0.027-0.207,0.055-0.413,0.082-0.619 | |
| c-0.021,0.169-0.043,0.337-0.066,0.504c1.247-8.894,3.056-17.794,6.489-26.123c1.219-2.732,2.614-5.335,4.363-7.764 | |
| c1.039-1.291,2.153-2.465,3.425-3.527c0.884-0.626,1.786-1.166,2.764-1.636c0.951-0.349,1.894-0.602,2.886-0.771 | |
| c1.026-0.074,2.02-0.063,3.048,0.021c0.063,0.009,0.126,0.018,0.189,0.027c3.083,0.428,4.607-3.72,2.439-4.982 | |
| c0.301-0.051,0.603-0.098,0.905-0.143C127.685,284.835,130.002,284.798,132.343,285.039 M121.223,280.254 | |
| c-2.347,0.48-2.435,3.057-1.177,4.459c-14.22,0.397-20.522,16.652-23.682,28.908c-4.051,15.699-5.516,33.164-4.832,49.332 | |
| c0.336,8.004,2.145,16.164,7.945,22.02c5.938,5.996,15.75,7.727,23.844,7.234c12.375-0.75,22.016-9.242,28.27-19.371 | |
| c11.109-18.004,13.75-42.277,9.129-62.676c-2.027-8.945-6.109-17.957-13.141-24.062c-5.373-4.66-11.928-6.642-18.7-6.642 | |
| C126.34,279.456,123.771,279.734,121.223,280.254"/> | |
| <path opacity="0.75" clip-path="url(#SVGID_4_)" d="M174.083,301.027c-5.742,2.043-10.863,4.968-15.625,8.77 | |
| c-2.773,2.211,1.148,6.078,3.891,3.891c0.192-0.155,0.385-0.31,0.577-0.464c3.148-2.371,6.49-4.355,10.1-5.941 | |
| c0.834-0.333,1.672-0.65,2.522-0.95c2.985-1.062,2.124-5.478-0.522-5.478C174.731,300.854,174.417,300.908,174.083,301.027"/> | |
| <path opacity="0.75" clip-path="url(#SVGID_4_)" d="M102.632,304.324c-1.715,0.453-3.438,0.794-5.189,1.064 | |
| c-3.256,0.379-6.488,0.491-9.746,0.121c-0.988-0.18-1.936-0.403-2.901-0.697c-3.402-1.031-4.844,4.277-1.461,5.305 | |
| c6.645,2.02,14.137,1.25,20.762-0.488c3.16-0.829,2.169-5.406-0.702-5.407C103.153,304.222,102.898,304.255,102.632,304.324"/> | |
| <path opacity="0.75" clip-path="url(#SVGID_4_)" d="M107.146,389.196c-2.711,6.547-2.492,13.164-2.664,20.109 | |
| c-0.09,3.551,5.41,3.539,5.5,0c0.098-3.891-0.025-7.781,0.416-11.651c0.422-2.431,1.102-4.708,2.049-6.997 | |
| c0.823-1.985-0.805-3.286-2.514-3.286C108.82,387.371,107.673,387.922,107.146,389.196"/> | |
| <path opacity="0.75" clip-path="url(#SVGID_4_)" d="M131.651,392.367c1.626,5.76,4.025,11.288,4.938,17.228 | |
| c0.031,0.379,0.062,0.757,0.094,1.136c0.297,3.508,5.801,3.535,5.5,0c-0.582-6.922-3.359-13.207-5.227-19.824 | |
| c-0.382-1.355-1.452-1.942-2.542-1.942C132.765,388.964,131.07,390.309,131.651,392.367"/> | |
| <path opacity="0.75" clip-path="url(#SVGID_4_)" d="M45.813,237.359c3.547,0,3.547-5.5,0-5.5S42.266,237.359,45.813,237.359"/> | |
| <path opacity="0.75" clip-path="url(#SVGID_4_)" d="M80.593,205.155c3.547,0,3.547-5.5,0-5.5S77.046,205.155,80.593,205.155"/> | |
| <path opacity="0.75" clip-path="url(#SVGID_4_)" d="M139.848,221.257c3.547,0,3.547-5.5,0-5.5S136.301,221.257,139.848,221.257" | |
| /> | |
| <path opacity="0.75" clip-path="url(#SVGID_4_)" d="M211.34,254.104c3.547,0,3.547-5.5,0-5.5S207.793,254.104,211.34,254.104"/> | |
| <path opacity="0.75" clip-path="url(#SVGID_4_)" d="M219.713,224.478c3.547,0,3.547-5.5,0-5.5S216.166,224.478,219.713,224.478" | |
| /> | |
| <path opacity="0.75" clip-path="url(#SVGID_4_)" d="M181.713,205.155c3.547,0,3.547-5.5,0-5.5S178.166,205.155,181.713,205.155" | |
| /> | |
| <path opacity="0.75" clip-path="url(#SVGID_4_)" d="M2.66,189.053c3.547,0,3.547-5.5,0-5.5S-0.887,189.053,2.66,189.053"/> | |
| <path opacity="0.75" clip-path="url(#SVGID_4_)" d="M27.135,219.325c3.547,0,3.547-5.5,0-5.5S23.588,219.325,27.135,219.325"/> | |
| <path opacity="0.75" clip-path="url(#SVGID_4_)" d="M12.965,266.986c3.547,0,3.547-5.5,0-5.5S9.418,266.986,12.965,266.986"/> | |
| <path opacity="0.75" clip-path="url(#SVGID_4_)" d="M20.05,281.8c3.547,0,3.547-5.5,0-5.5S16.503,281.8,20.05,281.8"/> | |
| <path opacity="0.75" clip-path="url(#SVGID_4_)" d="M60.627,278.58c3.547,0,3.547-5.5,0-5.5S57.08,278.58,60.627,278.58"/> | |
| <path opacity="0.75" clip-path="url(#SVGID_4_)" d="M5.236,228.986c3.547,0,3.547-5.5,0-5.5S1.689,228.986,5.236,228.986"/> | |
| <path opacity="0.75" clip-path="url(#SVGID_4_)" d="M46.457,178.748c3.547,0,3.547-5.5,0-5.5S42.91,178.748,46.457,178.748"/> | |
| <path opacity="0.75" clip-path="url(#SVGID_4_)" d="M43.881,175.528c3.547,0,3.547-5.5,0-5.5S40.334,175.528,43.881,175.528"/> | |
| <path opacity="0.75" clip-path="url(#SVGID_4_)" d="M26.491,223.833c3.547,0,3.547-5.5,0-5.5S22.944,223.833,26.491,223.833"/> | |
| <path opacity="0.75" clip-path="url(#SVGID_4_)" d="M24.559,256.037c3.547,0,3.547-5.5,0-5.5S21.012,256.037,24.559,256.037"/> | |
| <path opacity="0.75" clip-path="url(#SVGID_4_)" d="M53.542,210.308c3.547,0,3.547-5.5,0-5.5S49.995,210.308,53.542,210.308"/> | |
| <path opacity="0.75" clip-path="url(#SVGID_4_)" d="M197.17,184.545c3.547,0,3.547-5.5,0-5.5S193.623,184.545,197.17,184.545"/> | |
| <path opacity="0.75" clip-path="url(#SVGID_4_)" d="M211.34,169.731c3.547,0,3.547-5.5,0-5.5S207.793,169.731,211.34,169.731"/> | |
| <path opacity="0.75" clip-path="url(#SVGID_4_)" d="M221.646,207.087c3.547,0,3.547-5.5,0-5.5S218.099,207.087,221.646,207.087" | |
| /> | |
| <path opacity="0.75" clip-path="url(#SVGID_4_)" d="M158.526,256.681c3.547,0,3.547-5.5,0-5.5S154.979,256.681,158.526,256.681" | |
| /> | |
| <path opacity="0.75" clip-path="url(#SVGID_4_)" d="M185.577,243.155c3.547,0,3.547-5.5,0-5.5S182.03,243.155,185.577,243.155"/> | |
| <path opacity="0.75" clip-path="url(#SVGID_4_)" d="M167.543,209.664c3.547,0,3.547-5.5,0-5.5S163.996,209.664,167.543,209.664" | |
| /> | |
| <path opacity="0.75" clip-path="url(#SVGID_4_)" d="M184.289,167.155c3.547,0,3.547-5.5,0-5.5S180.742,167.155,184.289,167.155" | |
| /> | |
| <path opacity="0.75" clip-path="url(#SVGID_4_)" d="M228.086,224.478c3.547,0,3.547-5.5,0-5.5S224.539,224.478,228.086,224.478" | |
| /> | |
| <path opacity="0.75" clip-path="url(#SVGID_4_)" d="M254.493,257.325c3.547,0,3.547-5.5,0-5.5S250.946,257.325,254.493,257.325" | |
| /> | |
| <path opacity="0.75" clip-path="url(#SVGID_4_)" d="M202.323,268.274c3.547,0,3.547-5.5,0-5.5S198.776,268.274,202.323,268.274" | |
| /> | |
| <path opacity="0.75" clip-path="url(#SVGID_4_)" d="M228.73,200.646c3.546,0,3.546-5.5,0-5.5 | |
| C225.184,195.146,225.184,200.646,228.73,200.646"/> | |
| </g> | |
| </g> | |
| </g> | |
| </svg> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment