icicle_fall.toml

version = 1
title = 'icicle fall (9/9)'

[[modules]]
plugin = 'source.svelte'
data.contents = '''
use your mouse to dodge(?) the bullets! (click to play!)
<details class="clickthrough">
  <summary class="clickthroughsummary">
    <div class="container">
      <div class="game"></div>
      <div class="clickthroughicon"></div>
    </div>
  </summary>
  <div class="container">
  <div class="game">
  <div class="background_noise"></div>
  <div class="spellcard_name">Ice Sign "Icicle Fall"</div>
    <div class="bullets">
      <div class="weirdsquares">
      <div class="enemy"></div>
        {#each {length: 4} as _, i}
      <div class="weirdrot{i}"><div class="weirdx{i}"><div class="weirdz{i}"><div class="weirdrotinner"><div class="weirdsquare"></div></div></div></div></div>
        {/each}
      </div>
      {#each "lr" as dir}
        {#each {length: 22} as _, i}
          <div class="rot{dir}{i}">
            <div class="move{dir}y{i}">
              {#each {length: 3} as _, j}
                <div class="move{dir}x{i}_{j}"><div class="rot{dir}_inner{i}"><div class="bullet"></div></div></div>
              {/each}
            </div>
          </div>
        {/each}
      {/each}
    </div>
  </div>
  <div class="linear-warning">
    uh-oh! your browser doesn't support <a href="https://caniuse.com/mdn-css_types_easing-function_linear-function">(piecewise) linear easing functions</a> yet! (or you have <span class="code">prefers-reduced-motion</span> turned on)<br>
    if you're on safari, try <a href="https://developer.apple.com/safari/technology-preview/">safari technology preview 176+</a>
  </div>
  </div>
</details>'''
sends = [3]
graphPos = [-384, -48]

[[modules]]
plugin = 'source.text'
data.contents = '''
<details class="misc">
  <summary style="cursor: pointer;">misc notes and ramblings</summary>
  <div class="misc-inner">

* love too frame-advance 60fps recordings of touhou and count animation frames
* the scrolling background is svg noise :3
* what even are the square things that fly around bosses
* making this responsive is too much effort... you can try zooming i guess
* spellcard tidbits:
  * on about 12 seconds left on the timer, cirno shoots lines of 4 bullets instead of 3
  * the bullets on the right half are slightly faster than the ones on the left half once they turn: this makes a nice interlacing effect when the bullets meet
  * on the normal version, cirno shoots yellow bullets more frequently the closer you are to her
* opacity effects use svg animations
  * i had a horrendous hack involving the `feColorMatrix` svg filter, the `filter` css property, and [this trick](https://cohost.org/oatmealine/post/310029-tutorial-cool-custo) to get smooth fading that worked over any background, but [webkit didn't like applying a filter from a data url](https://bugs.webkit.org/show_bug.cgi?id=104169)
    * i think uploading the svg and using that url would have worked, but i might as well add the effect directly to the svg to save you the cpu usage - it's morally the same as using an animated image anyways
    * also the trick only worked for all dark colors (`alpha = 1-(r+g+b)/3`, overlay with white to fade out) or all light colors (`alpha = (r+g+b)/3`, overlay with black to fade out)
    * i tried combining two filters to make it work with all colors (`b,alpha = 1-alpha,b`, overlay with blue to fade out, `b,alpha = alpha,1-b`), but it messed with the colors/alpha a bit
  
</div>
</details>
<details class="misc">
  <summary style="cursor: pointer;">prechoster source</summary>
  <div class="misc-inner">

https://gist.github.com/ubuntor/664c617b91a6c5ce76e1acc9e797a0fa
  
</div>
</details>'''
data.language = 'html'
sends = [3]
graphPos = [-384, 48]

[[modules]]
plugin = 'source.lesscss'
data.contents = '''
.clickthrough {
  position:relative;
  display:flex;
  flex-shrink:0;
  justify-content: center;
  align-items: center;
  width:100%;
  height:418px;
}

.clickthroughsummary {
  font-size:0;
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  cursor: pointer;
}

.clickthroughicon {
  position:absolute;
  height:100%;
  width:100%;
  background-position:center;
  background-repeat:no-repeat; 
  background-image: url(@clickthrough);
}

.container {
  display: grid;
  place-items: center;
  height: 418px;
}

.game {
  background: linear-gradient(to right, #2a052e, #281e0c, #240034 33%, #170060, #0e0057);
  width: 384px;
  height: 418px;
  box-shadow: 0px 0px 0px 2px #252536;
  border-radius: 2px;
  overflow: hidden;
  position: absolute;
  cursor: url(@eggbug), auto;
  transform-style: preserve-3d;
  
}

.spellcard_name {
  color: white;
  position: absolute;
  text-align: right;
  right: 20px;
  top: 10px;
  background: linear-gradient(#3e32abaa, #050060aa);
}

.weirdsquares {
  transform-style: preserve-3d;
  perspective: 300px;
  background: url(@weirdsquare);
}
.weirdrot0 {
  transform-style: preserve-3d;
  background: inherit;
  transform: rotate(110deg);
}
.weirdrot1 {
  transform-style: preserve-3d;
  background: inherit;
  transform: rotate(105deg);
}
.weirdrot2 {
  transform-style: preserve-3d;
  background: inherit;
  transform: rotate(115deg);
}
.weirdrot3 {
  transform-style: preserve-3d;
  background: inherit;
  transform: rotate(170deg);
}

each(range(0,3), .(@i) {
  .weirdx@{i} {
    transform-style: preserve-3d;
    background: inherit;
    transform: translateX(60px);
    animation: 1.66s (-1.66s + 0.15s*@i) spin linear(0.0 0%, 0.19 10%, 0.69 20%, 1.31 30%, 1.81 40%, 2.0 50%, 1.81 60%, 1.31 70%, 0.69 80%, 0.19 90%, 0.0 100%) infinite;
  }
  .weirdz@{i} {
    transform-style: preserve-3d;
    background: inherit;
    transform: translateZ(80px);
    animation: 1.66s (-1.245s + 0.15s*@i) spin linear(0.0 0%, 0.19 10%, 0.69 20%, 1.31 30%, 1.81 40%, 2.0 50%, 1.81 60%, 1.31 70%, 0.69 80%, 0.19 90%, 0.0 100%) infinite;
  }
});
.weirdrotinner {
  transform-style: preserve-3d;
  background: inherit;
  animation: 0.7s spin linear infinite;
}
.weirdsquare {
  transform-style: preserve-3d;
  position: absolute;
  background: inherit;
  width: 14px;
  height: 14px;
  transform: translate3d(-50%,-50%,0px);
}

.background_noise {
  background: url(@noise);
  width: 100%;
  height: 200%;
  position: absolute;
  animation: 12s spin linear infinite reverse;
  transform: translateY(-50%);
}

.enemy {
  width:34px;
  height:36px;
  perspective: 200px;
  position:absolute;
  background: url(@cirneggbug);
  transform: translate3d(-50%,-50%,0px);
}

.bullets {
  position: absolute;
  background: url(@bullet);
  left: 192px;
  top: 96px;
}

each(range(0,21), .(@i) {
  .rotl@{i} {
    transform: rotate((-170.15625deg - 5.625deg*mod(@i,11)));
    background: inherit;
  }
  .rotr@{i} {
    transform: rotate((-9.84375deg + 5.625deg*mod(@i,11)));
    background: inherit;
  }
  .rotl_inner@{i} {
    transform: rotate(-90deg);
    animation: spin 9.9s (-9.9s + 0.45s*@i) linear(1 0%, 1 12.6%, 0 12.6%, 0 100%) infinite;
    background: inherit;
  }
  .rotr_inner@{i} {
    transform: rotate(90deg);
    animation: spin 9.9s (-9.9s + 0.45s*@i) linear(1 0%, 1 12.6%, 0 12.6%, 0 100%) infinite;
    background: inherit;
  }
  each(range(0,2), .(@j) {
    .movelx@{i}_@{j} {
      transform: translateX((80px*(@j+1)));
      animation: spin 9.9s (-9.9s + 0.45s*@i) linear(1.0 0.0%, 0.79 1.4%, 0.605 2.8%, 0.444 4.2%, 0.309 5.6%, 0.198 7.0%, 0.111 8.4%, 0.049 9.8%, 0.012 11.2%, 0 12.6%, 0 12.6%) infinite;
      background: inherit;
    }
    .moverx@{i}_@{j} {
      transform: translateX((80px*(@j+1)));
      animation: spin 9.9s (-9.9s + 0.45s*@i) linear(1.0 0.0%, 0.79 1.4%, 0.605 2.8%, 0.444 4.2%, 0.309 5.6%, 0.198 7.0%, 0.111 8.4%, 0.049 9.8%, 0.012 11.2%, 0 12.6%, 0 12.6%) infinite;
      background: inherit;
    }
  });
  .movely@{i} {
    transform: translateY(-726.6px);
    animation: spin 9.9s (-9.9s + 0.45s*@i) linear(1 0%, 1 12.6%, 0 100%) infinite;
    background: inherit;
  }
  .movery@{i} {
    transform: translateY(830.4px);
    animation: spin 9.9s (-9.9s + 0.45s*@i) linear(1 0%, 1 12.6%, 0 100%) infinite;
    background: inherit;
  }
});

.bullet {
  position: absolute;
  background: inherit;
  width:16px;
  height:8px;
  transform: translate(-50%,-50%);
}

.linear-warning {
  position: absolute;
  transform: translateX(1px);
  animation: 0s linear(0,10000) 0s forwards spin;
  text-align: center;
  background: rgb(255,196,20);
  border-radius: 10px;
  border: 1px solid black;
  padding: 5px;
  color: black;
}

.code {
  font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,liberation mono,courier new,monospace;
  font-weight: 600;
  font-size: .875em;
}

.misc {
  border-radius: 0.375rem;
  padding: 0.5em;
  border: 1px solid #aaa;
  margin-top: 1em;
}

.misc-inner {
  border-top: 1px solid #aaa;
}'''
sends = [3]
graphPos = [-384, 96]

[[modules]]
plugin = 'transform.style-inliner'
data.mode = 'attr'
sends = ['output']

[[modules]]
plugin = 'source.text'
data.contents = '''
<svg xmlns="http://www.w3.org/2000/svg" width="384px" height="418px">
  <filter id="noise" x="0%" y="0%" width="100%" height="100%">
    <feTurbulence in="sourceImage" baseFrequency="0.008 0.5" result="noise" type="fractalNoise" seed="69"></feTurbulence>
    <feColorMatrix type="matrix" in="noise" values="0 0 0 0 0
                   0 0 0 0 0
                   0 0 0 0 0
                   .75 .75 .75 0 -1.1" />
  </filter>
  <filter id="noise2" x="0%" y="0%" width="100%" height="100%">
    <feTurbulence in="sourceImage" baseFrequency="0.01 0.5" result="noise" type="fractalNoise" seed="420" stitchTiles="stitch"></feTurbulence>
    <feColorMatrix type="matrix" in="noise" values="0 0 0 0 0
                   0 0 0 0 0
                   0 0 0 0 0
                   .75 .75 .75 0 -1.1" />
  </filter>
  <rect x="0" y="0" width="100%" height="418px" filter="url(#noise)"></rect>
  <rect x="0" y="0" width="100%" height="418px" filter="url(#noise2)"></rect>
</svg>'''
data.language = 'html'
sends = [5]
title = 'SVG: noise'

[[modules]]
plugin = 'transform.svgo'
data = { }
sends = [6]

[[modules]]
plugin = 'transform.to-data-url'
data.mime = 'image/svg+xml'
namedSends = { '2' = ['noise'] }

[[modules]]
plugin = 'source.text'
data.contents = '<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 4.25 2.11"><path d="m1.63 1.06-.5-.93h2v.93ZM4.13 1.06h-1v.93z" style="fill:#adadff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:.241648px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"/><path d="m3.13.13 1 .93h-1Z" style="fill:#4747ff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:.241648px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"/><path d="M3.13 1.06h-1.5l-.5-.93-1 .93 1 .93h2v-.93" style="fill:#fff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:.242029;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"/><path d="m.12 1.06 1-.93h2l1.01.93-1 .93h-2Z" style="fill:none;fill-rule:evenodd;stroke:#4747ff;stroke-width:.242029;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"/></svg>'
data.language = 'html'
sends = [8]
title = 'SVG: bullet'

[[modules]]
plugin = 'transform.svgo'
data = { }
sends = [9]

[[modules]]
plugin = 'transform.to-data-url'
data.mime = 'image/svg+xml'
namedSends = { '2' = ['bullet'] }

[[modules]]
plugin = 'source.text'
data.contents = '''
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   viewBox="0 0 34.000001 36"
   version="1.1"
   id="svg5"
   width="34"
   height="36"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg">
  <defs
     id="defs5" />
  <path
     style="fill:#5ab1d5;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.99163px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
     d="M 16.556995,17.308677 7.5943133,11.215293 10.495321,0.62238115 18.845533,9.3616798 Z"
     id="path6-5" />
  <path
     d="M 1.8211972,32.916183 C 1.8809462,32.458109 1.9805273,32.0797 2.1000249,31.761039 2.4983501,30.805059 3.2352518,30.466482 4.1912324,30.506315"
     style="fill:none;stroke:#000000;stroke-width:0.440149;stroke-linecap:round;stroke-dasharray:none"
     id="path1" />
  <path
     d="m 20.741647,32.916183 a 26.608127,26.608127 0 0 0 7.72751,-3.584928 13.662556,13.662556 0 0 0 4.700238,-5.277809 c 0.955981,-1.991626 1.075478,-4.182416 0.338577,-6.572368 a 8.9224857,8.9224857 0 0 0 -3.94342,-5.317642 13.841803,13.841803 0 0 0 -6.851195,-1.852212 c -2.668779,-0.07966 -5.476972,0.31866 -8.444495,1.194976 a 27.28528,27.28528 0 0 0 -7.7673431,3.584927 13.443477,13.443477 0 0 0 -4.700238,5.237977 C 0.86521656,22.320731 0.74571898,24.51152 1.4627045,26.921388 a 9.0021507,9.0021507 0 0 0 3.94342,5.337558 c 1.9119612,1.155143 4.2023314,1.772547 6.8711105,1.852212 2.66878,0.07966 5.496889,-0.31866 8.464412,-1.194975 z"
     style="fill:#83254f;fill-rule:nonzero;stroke-width:0.146711"
     id="path3" />
  <circle
     cx="11.759412"
     cy="25.168756"
     r="1.135227"
     style="stroke-width:0.146711"
     id="circle4" />
  <circle
     cx="5.0874648"
     cy="23.993696"
     r="1.135227"
     style="stroke-width:0.146711"
     id="circle5" />
  <path
     d="M 9.0308843,26.861639 C 8.5130614,27.200215 7.9554061,27.160383 7.6566622,26.762058 7.2981694,27.060801 6.6210165,27.020969 6.3621051,26.64256 M 19.845415,35.425632 A 4.4413266,4.4413266 0 0 0 19.566588,34.270489 C 19.168262,33.294592 18.451277,32.975931 17.47538,32.995848 m 8.145752,0.01992 A 4.4413266,4.4413266 0 0 0 25.342304,31.860621 C 24.943979,30.884724 24.207077,30.546147 23.251096,30.58598 m 7.189771,-0.119498 A 4.4413266,4.4413266 0 0 0 29.863296,29.41092 c -0.617405,-0.836483 -1.414055,-0.95598 -2.330203,-0.677152"
     style="fill:none;stroke:#000000;stroke-width:0.440149;stroke-linecap:round;stroke-dasharray:none"
     id="path5" />
  <path
     style="fill:#5ab1d5;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.99163px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
     d="M 18.781313,17.229663 21.490915,6.7359952 32.441275,5.890271 27.034338,16.700748 Z"
     id="path6" />
  <path
     style="fill:#0065d6;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.99163px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
     d="m 1.3954815,11.982986 c -0.74544283,1.236419 -0.87820185,2.580722 -0.53233444,4.389018 0.34586744,1.808297 0.14411074,3.146683 -0.82629148,5.493867 l 8.54641902,-2.86746 6.5780504,5.718746 c -0.008,-2.937171 1.471685,-4.540804 1.974202,-6.564 0.502517,-2.023195 -0.337336,-3.715867 -0.337336,-3.715867 l -7.9798742,2.713282 z"
     id="path7" />
</svg>'''
data.language = 'html'
sends = [11]
title = 'SVG: cirneggbug'

[[modules]]
plugin = 'transform.svgo'
data = { }
sends = [12]

[[modules]]
plugin = 'transform.to-data-url'
data.mime = 'image/svg+xml'
namedSends = { '2' = ['cirneggbug'] }

[[modules]]
plugin = 'source.file-data-url'
data.url = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAkCAYAAADsHujfAAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AYht+mij9UHOwg4pChOrUIKuJYq1CECqFWaNXB5NI/aNKQpLg4Cq4FB38Wqw4uzro6uAqC4A+Iq4uToouU+F1SaBHjHcc9vPe9L3ffAUKjwjSrKw5oum2mkwkxm1sVe17R584oJmRmGXOSlILv+LpHgO93MZ7lX/fnGFDzFgMCInGcGaZNvEE8s2kbnPeJw6wkq8TnxFGTLkj8yHXF4zfORZcFnhk2M+l54jCxWOxgpYNZydSIp4kjqqZTvpD1WOW8xVmr1FjrnvyFoby+ssx1WqNIYhFLkCBCQQ1lVGAjRrtOioU0nSd8/COuXyKXQq4yGDkWUIUG2fWD/8Hv3lqFqUkvKZQAul8c52MM6NkFmnXH+T52nOYJEHwGrvS2v9oAZj9Jr7e1yBEwuA1cXLc1ZQ+43AGGnwzZlF0pSEsoFID3M/qmHDB0C/SveX1rneP0AchQr1I3wMEhMF6k7HWfd/d29u3fmlb/fgDBvHLGGaguPgAAAAlwSFlzAAAN1wAADdcBQiibeAAAAAd0SU1FB+cJCQkuOnVXR3AAAAV/SURBVFjDzVdtTFNXGH7O7e0H/YRKKV+FgVS2UdjiRFmcloQp01Uk2SQZWaJmZpowE5ZMfzgZQ3QhWeISTXTRhWUhI9FsAVGjm4yPRbINcKjoQKAgTJAiHy1IaXvbe/ZDQFBaqgP1+XfPee57nnver/sS+IZMqVRmSCSSMJ7nicvlsoyOjtYB6MIzhCoqKup4aWlpFqU0lVKaWlZW9l5GRkaeTqc7rFAo4hfyMOJtQ61W59bU1LQlJibaH91zu90kJSVlY0tLS6ndbm9aCCGMtw2hUCifSwQAsCxLGxsbz2u12m0ABAshxKsRkUiUYDQanZGRkS5vHKvV6m5oaAjmOM68aK4BoE1LS8uprKys8mVAq9WuGRgYKPRxs2/I5fKVPM/zExMTl10u1805b9nHGRaz2Sya70ukUinrZX15SEjI1vT09M7s7OwujuOYkpKSDbW1tR+NjIzU2Wy2n/1yDQBQSgM5jgs1Go0j3jhHjhyJtVqt1TPXlErlO8nJyeuampoumEwmS3R0tDM2NtaRmZnZl5ube8tqtUa2tbVl2e32WgC8z2AFAJvN9lNxcXGiLw7HcZ6Zz3K5/NWEhIS1VVVVXl1aVFTUXlxc/JdWq907b9ZMYXh4+GJOTo7BHyG74zaINYHq3LKTP/45PjAs9mXXZDKNaDQalT/BOjMgv2loaLig0+mmM6j++4roPyourem81qLXCOUyUOj+cVhCDIkG6NTaSeuEEwVIzJIgxc3wpLjfk7M2NoMFnbKh1+tNHR0dn/ktBEDwiuUr9hRk7LB0110z2vrurXa7uCWz4glAIyx4f1WaVyOsWNQd+Zr+hzW7P6jevn376+Xl5Z1Wq7XCLyFfJ62XOR2SnU6e3ysiAq03XodjELEJ8YgJDpv3q6rMTc2V7VeO3hm0nJzXNfmpqSzbq8wByD4AIfMZr+f6sOWt9T45d22DqLnRiBiqRLhQ+YtGqd2088oJzmsdOaDfvIr04gSAJH/85qE8pDKpTwF1rVchdRC8KYkAAQEF0i2jA18AyJvzRg7qM/dS0EPzFLtZ6HQMYWliPKLUoQ/F8Tyu3G5Bd38vFByLeIkGzOPHOT0eftmXnWd72BnBRgr1GYcpaO6T9okwiQqRCg04jxvNd8zotvTCPeFCrCAIK4XhvsqmWCAQbAVQOE1h9Zs/Jw/i4YkhBIPm/i783dkC5RgQxwQhglVCKhD58TZRVQ+3niAP3JGxloJU+1PgFgFu9zivYk5ji4CCHH1OIh4kjEwYytyKc77rb3YsnhIqZkBIFp4vqCRgvIcBMN1d7zhG0DTa87AZPBsd1/dc/3WcBRA8tVR6tx5jbgcChVLEBATPovc7RxEgEELFBiysDsKUAABDgOkf5FWqGLwsC0WYWDWLe881hmM9Nfi2p3Zhb4ui233fcxwAWAraCpA4ADCql809ZQnEUAulCBEp/G7XfoAHpbsK+s7aAYAllNRRAtNMxo37vRhwjkEiEOIVWSiChDLkvvT2wnqEomC/ueLidOZwRHCaheermX3HII8A5IsYngRFee1nDjw2ThTGbS4DQeZi5kaf04ZO+z2uyz50ts3e/yGAiccmPTdLPgUwuphCwsWqSmPwMkObvX8HgF1zTnq1g63rJni3Qy8LMZAFGiGbx3rRMn4XcoHklowVfZzXfmbfb4OtQwAcAIYBDD3qmkAA2QCOHYzblEIJcwpA1P/NCAJc8lD+eEHHeQMP/pA/I+fKSXXmqX9Uhz3gExDkANDNZ+D2xBBGODsMiohxEWEu84SeY8CX7W871ztJ2QHgu6eeffORzwiXXk2hDF0NgiRQEgkCxWQhcoHCAoJ/AdxsHbP0nBqoT3HzfD5eAGwDsORFEBI0GW9Phf8AYawTIvRMnDsAAAAASUVORK5CYII='
namedSends = { '2' = ['eggbug'] }

[[modules]]
plugin = 'source.text'
data.contents = '''
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 3.704 3.704">
  <animate
      attributeName="opacity"
      values="1;1;0.25;1"
      dur="3s"
      repeatCount="indefinite" />
  <path d="M.132.132h.53v.265h.793V.132h.794v.265h.794V.132h.529v.53h-.265v.793h.265v.794h-.265v.794h.265v.529h-.53v-.265H2.25v.265h-.794v-.265H.661v.265H.132v-.53h.265V2.25H.132v-.794h.265V.661H.132Z" style="fill:none;fill-rule:evenodd;stroke:#fff;stroke-width:.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"/><path d="M.926.926h1.852v1.852H.926z" style="opacity:1;fill:none;stroke:#fff;stroke-width:.264583;stroke-linecap:square;stroke-linejoin:miter;stroke-dasharray:.264583,.529167;stroke-dashoffset:0;stroke-opacity:1"/></svg>'''
data.language = 'html'
sends = [15]
title = 'SVG: weirdsquare'

[[modules]]
plugin = 'transform.svgo'
data = { }
sends = [16]

[[modules]]
plugin = 'transform.to-data-url'
data.mime = 'image/svg+xml'
namedSends = { '2' = ['weirdsquare'] }

[[modules]]
plugin = 'source.text'
data.contents = '<svg width="87.687" height="87.687" viewBox="0 0 23.201 23.201" xmlns="http://www.w3.org/2000/svg"><g transform="translate(-1.605 -3.062)"><circle style="fill:#fff;fill-opacity:.9;stroke:#83254f;stroke-width:1.32292;stroke-linecap:square;stroke-dasharray:none;stroke-opacity:.9" cx="13.205" cy="14.662" r="10.939"/><path style="fill:#83254f;fill-opacity:.9;stroke:#fff;stroke-width:0;stroke-linecap:square" d="m20.187 16.316-9.386 5.42a1.91 1.91 0 0 1-2.864-1.655V9.244a1.91 1.91 0 0 1 2.864-1.654l9.386 5.419a1.91 1.91 0 0 1 0 3.307z"/></g></svg>'
data.language = 'html'
sends = [18]
title = 'SVG: clickthrough'

[[modules]]
plugin = 'transform.svgo'
data = { }
sends = [19]

[[modules]]
plugin = 'transform.to-data-url'
data.mime = 'image/svg+xml'
namedSends = { '2' = ['clickthrough'] }