Skip to content

Instantly share code, notes, and snippets.

@dfc201692

dfc201692/index.html

Last active May 6, 2019 01:54
Show Gist options
  • Save dfc201692/ed80499afc68d5fc76003771bce56e6c to your computer and use it in GitHub Desktop.
Save dfc201692/ed80499afc68d5fc76003771bce56e6c to your computer and use it in GitHub Desktop.
Download ZIP
ANIMACION COLORES
Raw
index.html
<div class="color-selector">
<input type="radio" id="pink" name="colors" />
<label for="pink" />Pink</label>
<input type="radio" id="blue" name="colors" />
<label for="blue" />Blue</label>
<input type="radio" id="orange" name="colors" />
<label for="orange" />Orange</label>
<input type="radio" id="red" name="colors" />
<label for="red" />Red</label>
<input type="radio" id="yellow" name="colors" />
<label for="yellow" />Yellow</label>
<input type="radio" id="green" name="colors" />
<label for="green" />Green</label>
<input type="radio" id="purple" name="colors" />
<label for="purple" />Purple</label>
<input type="radio" id="black" name="colors" />
<label for="black" />Black</label>
</div>
<svg class="illustration" xmlns="http://www.w3.org/2000/svg" id="bc9239de-9137-4d49-9033-46cbd1d50d93" viewBox="0 0 890 828.3">
<defs>
<linearGradient id="linear-gradient" x1="873.5" x2="873.5" y1="1196.7" y2="564.3" gradientTransform="translate(-47.2 -513.5)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="gray" stop-opacity=".3"/>
<stop offset=".5" stop-color="gray" stop-opacity=".1"/>
<stop offset="1" stop-color="gray" stop-opacity=".1"/>
</linearGradient>
</defs>
<path id="bg" fill="#f2f2f2" d="M566 41c-50.9 13.2-95.9 48.6-140.5 94.9a76.2 76.2 0 0 1-99.8 115c-52.5 62.7-109.8 129-179.7 183.7C-32 574 334 828.3 566 828.3s420-176.2 420-393.7S789.6-17.1 566 41z" transform="translate(-98.8)"/>
<g id="flower">
<path id="bottom" d="M174.5 719.1v-74.4" class="cls-2"/>
<circle id="top" cx="174.5" cy="644.7" r="10.5" class="cls-3"/>
<path id="leaf" d="M273.3 690.6s-1.5-32.3-32.3-28.6" class="cls-3" transform="translate(-98.8)"/>
</g>
<g id="plant">
<path id="right" d="M505.7 583.6c-38.6 59.2-28 134.5-28 134.5s73.2-20.7 111.8-79.9 28-134.5 28-134.5-73.1 20.7-111.8 79.9z" class="cls-3" transform="translate(-98.8)"/>
<g id="left">
<path d="M477.5 717.5l-2.7-.5-5.6-1.2c-20.7-4.9-76-21.4-112-64.9-45-54.4-43.1-130.5-43.1-130.5s69 11.2 114.5 60.1l5.8 6.5c39.3 47.3 42.9 111.1 43.2 126.8l-.1 3.7z" class="cls-4" transform="translate(-98.8)"/>
<path d="M449.7 583.6c38.6 59.2 28 134.5 28 134.5s-73.2-20.7-111.8-79.9-28-134.5-28-134.5 73.2 20.7 111.8 79.9z" class="cls-2" transform="translate(-98.8)"/>
</g>
<g id="center">
<path d="M534.8 594.1c-3.1 70.6-55.5 125.7-55.5 125.7s-47.5-59.4-44.4-130S490.3 464 490.3 464s47.5 59.5 44.5 130.1z" class="cls-4" transform="translate(-98.8)"/>
<path d="M380.5 717.8L392 466.9" class="cls-2"/>
</g>
</g>
<g id="geometry">
<path id="rectangle" class="cls-8" opacity=".2" transform="rotate(-75 358.4 471.2)" style="isolation:isolate" d="M382.8 381.9h50v50h-50z"/>
<circle id="circle-bottom" cx="142.5" cy="610.7" r="6.5" class="cls-8" />
<circle id="circle-center" cx="385.8" cy="427.3" r="20.3" class="cls-3"/>
<circle id="circle-left" cx="322.1" cy="427.3" r="14.8" class="cls-2" data-name="circle left"/>
<circle id="circle-right" cx="449.4" cy="427.3" r="14.8" class="cls-2" data-name="circle right"/>
<circle id="circle-top" cx="603.6" cy="15.8" r="14.8" class="cls-2"/>
<circle id="circle-top-2" cx="435.9" cy="107.8" r="14.8" class="cls-2" data-name="circle-top"/>
<circle id="big-circle" cx="281.6" cy="189.6" r="54.3" class="cls-4"/>
</g>
<g id="woman">
<path fill="url(#linear-gradient)" d="M986.9 277.5s-8.6-21.8-37.7-41.3-28.8-31-28.8-31-5.5-40.8-12.7-52.2-11.3-27.9-11.3-27.9l-.8 1-.1-.9c-.7-6-2.6-17.4-5.7-13.9l-2 1.5-.4-.6a64.9 64.9 0 0 1-7.5-10.9c0-1.5-35.8-29-45-33.2-6.3-3-20-10.7-27.6-15a17.3 17.3 0 0 0-11.6-2c-11 1.9-32 6.9-29.2 16.3 3.8 12.8 18.3 9.2 28.2 2 0 0 8.7-3.4 18.7 6.6s50.7 39.1 50.7 39.1l3.4 9.4.3.9a7.8 7.8 0 0 1-3.7.6c-3.1-.4-1.8 2.6.4 6a12.1 12.1 0 0 0 1 1.4l-1.2-.5.6 1.3-.6-.3s15.8 30.2 16.8 35.9a47.7 47.7 0 0 1 .7 7.6c0 2.6-.4 4.7-1.1 5.2-1.4 1-5.5 11.4-5.5 11.4l-16.1.7a5.9 5.9 0 0 1-1.4-.2l-1-.1v-.4a29.3 29.3 0 0 0-6.5-18.4h.2c3.4-7.4-4-15.1-5.5-23.1a51.6 51.6 0 0 1-.5-7.9 15.5 15.5 0 0 0-.3-3.1c-1.7-11-12.2-18.4-22.4-22.6-6-2.5-13-4.3-19-1.7-6.8 3.1-10.2 11.2-16.5 15.5-10 6.9-23.6 2.1-35.5 4.2-4.6.8-9.3 2.8-12 6.8a21.5 21.5 0 0 0-3 12c-.3 11.1 1.9 22.4-1 33-4.8 17.4-21.3 28-33.7 40.9a100 100 0 0 0-19 28.2c-1.8 4-3.1 9-.3 12.3 1.6 1.8 4.2 2.5 5.9 4.2 2.2 2.2 2.5 5.7 2 8.8-1.4 11.5-10 20.5-17 29.8s-12 22.2-6.2 32.2c5 8.6 15.9 11.2 25.7 13 3 .6 6.4 1.1 9.3 0 2.7-1 4.6-3.3 6.4-5.6a81 81 0 0 0 9.9-17.1c1.3-3 2.5-6.3 5.3-8 2.4-1.5 5.5-1.3 8.4-1l21.4 1.8a11 11 0 0 0 5.4-.4 10.5 10.5 0 0 0 4.7-4.6 42.7 42.7 0 0 0 3.8-9.1c2.6-8.3 4-17.2 10-23.2 5.4-5.3 13.4-6.9 21-7 4.6 0 9.2.4 13.8.6l3.9.1h2.6c1.7 11.9 3.8 29.4 2.2 34.3-2.6 7.6-2.4 12.4-2.4 12.4l1.2.6a9.4 9.4 0 0 0-.3.9c-1.2 3.4-2.1 8.3 1.7 11.4a13.7 13.7 0 0 0 2 1.3l-.3.8a415.5 415.5 0 0 0-13.1 42.9c-1 8.6-13.4 34.9-13.4 34.9s-33.5 27.6-3.3 37.6c0 0 2.9-10.4 9.2-18.5a49.8 49.8 0 0 0 8.5-16.1 27.6 27.6 0 0 1 3.5-7.1 252 252 0 0 0 13.7-27l4.3.9c-2.1 9.2-2.7 25.2 5.2 50.6l.4 2.6a2.2 2.2 0 0 1-.5-.3c-3.8-1.6-9.8 3.8-13.3 12.1-3.2 7.5-3.4 14.9-.5 17.2a4 4 0 0 0 .9.5 4 4 0 0 0 3.2-.1.1.1 0 0 0 .1-.1 7.9 7.9 0 0 0 2.3-1.4c2.9-.7 5.8-2.1 8.7-1.9a9.3 9.3 0 0 1 2.3.4 81.6 81.6 0 0 1 .2 8.4l-.6 19s-1.9 9.8-3.5 12.2-3.2 53 3.2 77.3c0 0 4.4 23.5 2.4 27.5v.1a21.6 21.6 0 0 0-1.4 6.6 58.1 58.1 0 0 0-.2 5.9l-9.2 28.3-.6 1.3a15.2 15.2 0 0 0-1.1 7.6 7 7 0 0 0 1.4 3.3s-1.3 12.5 12.8 12.2 16.5-9.6 16.5-9.6l-1-4.4a4.3 4.3 0 0 0 .2-1.1l-.2-3.9c-.2-6.1-.5-17.6.9-20.3 1.9-3.7.8-19.2.8-19.2l-.5-4.2-.5-4.4-.8-6.3s-.2-26.8 2.1-30.7a170 170 0 0 0 7.2-58.5 25.9 25.9 0 0 1 1.3-10.7c2.1-6.5 5-17.3 4.2-24.9a22.7 22.7 0 0 1-.1-2.8 19.1 19.1 0 0 0 14.7 8.6h.5a18.9 18.9 0 0 0 12.1-3.7c7.2-5.3 15-14.2 19.3-28.8a100.8 100.8 0 0 1 4.3-12c4-9.2 10.8-26.3 12.3-38.7l.4.4s9.6-28.6 9.3-39.7a10.4 10.4 0 0 0-.6-4.3l-.1-.9.1-.1s-3.8-29.9-5.1-55.4l12.3-9.2s-5.8-12-2.1-14.2 9.2 11.9 9.2 11.9 36.8 1.9 26.5-18.6zm-137.4 33.1l7.8-7.9c.8 4.3-1.1 9.5-8 15.4l-.2.1c.4-4.3.4-7.6.4-7.6zm-9.4-86.3l-2.4 1.9-.8-4.3 1.3.8a10 10 0 0 1 1.9 1.6zM879.6 409l1-8.3 2.2 1.4a98.5 98.5 0 0 0-4.4 17.8l1-11zm-2 26.6a12 12 0 0 1-.6 4.6h-.5l1-11.2v6.6z" transform="translate(-98.8)"/>
<path d="M824.4 463.7v11c4.4 1.6 9-2.2 13.7-1.9 2.7.1 5.2 1.7 7.9 2.1a2.4 2.4 0 0 0 2-.3 2.7 2.7 0 0 0 .8-1.9c1-5.8 2-20-7-21-6.7-.7-9.3 11.3-17.4 12z" class="cls-8" transform="translate(-98.8)"/>
<path d="M824.4 463.7v11c4.4 1.6 9-2.2 13.7-1.9 2.7.1 5.2 1.7 7.9 2.1a2.4 2.4 0 0 0 2-.3 2.7 2.7 0 0 0 .8-1.9c1-5.8 2-20-7-21-6.7-.7-9.3 11.3-17.4 12z" class="cls-9" transform="translate(-98.8)"/>
<path d="M837 464.2c-2.5 6-6.4 10.5-9.7 11.9a.1.1 0 0 0-.1.1 4.4 4.4 0 0 1-3.2.1 4 4 0 0 1-.9-.5c-2.9-2.4-2.7-9.6.4-17.1 3.5-8.2 9.3-13.6 13-12s4 9.3.5 17.5zM831.3 666.8l-.2 2.6s-1.2 12.3 12.4 12.1 16-9.6 16-9.6l-1.3-6.2z" class="cls-10" transform="translate(-98.8)"/>
<path d="M878.2 408.1s-6.6 64.9-5.4 76.4c.8 7.6-2 18.3-4.1 24.7a27.1 27.1 0 0 0-1.2 10.6 175 175 0 0 1-7 58.2c-2.3 3.9-2.1 30.5-2.1 30.5l.7 6.2.5 4.4.5 4.2s1 15.5-.7 19.1a73.3 73.3 0 0 0-.8 20.2c0 2.3.2 3.8.2 3.8a4.4 4.4 0 0 1-1.1 2.9c-1.7 2.1-6 4.4-16.2 4.1-8.3-.3-11-3.7-11.6-7.4a14.7 14.7 0 0 1 1-7.5 8.7 8.7 0 0 1 .7-1.3l9-28.1a56.2 56.2 0 0 1 .2-5.8 21 21 0 0 1 1.4-6.6v-.1c1.9-4-2.4-27.4-2.4-27.4-6.2-24.1-4.6-74.4-3.1-76.8s3.5-12.1 3.5-12.1l.6-18.9c.4-13.1-4-37.2-4-37.2-14-46-.5-60.9-.5-60.9l42 9.9z" class="cls-8" transform="translate(-98.8)"/>
<path d="M859.7 619.2c-4.6 1.5-14 4.4-19.1 4.1a21 21 0 0 1 1.4-6.6c4 .8 11 1.4 17.2-2zM857.7 669.4c-6.2-3.3-18-7.9-28-3.3a14.7 14.7 0 0 1 1.2-7.5c5.8-.8 18-1.5 27.7 4.1 0 2.3.2 3.8.2 3.8a4.4 4.4 0 0 1-1.1 2.9z" class="cls-10" transform="translate(-98.8)"/>
<path d="M838.9 341.6v25.7s-19.2 44.6-24.8 52.8a26.7 26.7 0 0 0-3.4 7 50.8 50.8 0 0 1-8.3 16c-6.1 8-9 18.4-9 18.4-29.4-9.9 3.2-37.3 3.2-37.3s12-26.1 13-34.7A433.2 433.2 0 0 1 824 342z" class="cls-8" transform="translate(-98.8)"/>
<path fill="none" d="M880.2 441.4s-10.3-7-14.3 12 11.3 24 11.3 24z" transform="translate(-98.8)"/>
<path d="M880.2 441.4s-10.3-7-14.3 12 11.3 24 11.3 24z" opacity=".1" transform="translate(-98.8)" style="isolation:isolate"/>
<path d="M884.4 394.2s-9.5 20.9-8.1 41.3a12.8 12.8 0 0 1-1 5.5 71.3 71.3 0 0 0-5.3 31.6v.6a18.3 18.3 0 0 0 19.5 17 18 18 0 0 0 9.7-3.6c7-5.3 14.6-14.1 18.8-28.6a98.8 98.8 0 0 1 4.2-11.9c5-11.7 14.6-36.6 11.7-47.4-3.9-14.3-49.5-4.5-49.5-4.5z" class="cls-8" transform="translate(-98.8)"/>
<path d="M933.3 398.7c-1.7-6.2-11.3-7.9-21.6-7.8 9.5.1 18 2 19.6 7.8 2.9 10.8-6.8 35.7-11.7 47.4-1.6 3.9-3 7.9-4.2 11.9a52.9 52.9 0 0 1-18.8 28.6 18 18 0 0 1-10 3.7 18.1 18.1 0 0 0 12-3.7c7-5.3 14.6-14.1 18.8-28.6a84 84 0 0 1 4.2-11.9c5-11.7 14.6-36.6 11.7-47.4z" class="cls-9" transform="translate(-98.8)"/>
<path d="M832.3 361.5s-7.4 29-9 30.7c0 0 48 9.6 54.9 16.9l1-8.2 3.4 2.2s27.8-19.8 52 5c0 0 11.9-36 8.5-42.8s-44-.9-44-.9z" class="cls-9" transform="translate(-98.8)"/>
<path d="M832.3 360.5s-7.4 29-9 30.7c0 0 48 9.6 54.9 16.9l1-8.2 3.4 2.2s27.8-19.8 52 5c0 0 11.9-36 8.5-42.8s-44-.9-44-.9z" class="cls-10" transform="translate(-98.8)"/>
<path d="M830.9 187.7a22.6 22.6 0 0 0 0 4.5l1.4 9a20 20 0 0 0 .5 2.6c1.6 8.6 3.6 17.1 5 25.7.7 4.4 1.2 8.9 1.5 13.3a74.5 74.5 0 0 1-2.1 23.5 46.6 46.6 0 0 1-5.2 12.1 14.8 14.8 0 0 1-3.6 4.3l-1 .6a16 16 0 0 1-6.7 1.8l-4.8.2-3.8-.1c-4.5-.2-9-.6-13.5-.6-7.4.1-15.2 1.6-20.4 6.9-6 5.9-7.3 14.8-9.8 23a41.6 41.6 0 0 1-3.7 9 9.6 9.6 0 0 1-4.6 4.5 11.8 11.8 0 0 1-5.3.4l-21-1.8c-2.7-.2-5.7-.4-8.1 1-2.7 1.6-4 4.9-5.1 7.9a75.5 75.5 0 0 1-9.7 17 14.9 14.9 0 0 1-6.2 5.5c-3 1.1-6.1.6-9.1 0-9.5-1.8-20.1-4.3-25-12.9-5.6-10-.5-22.7 6-32s15.2-18.1 16.6-29.6c.4-3.1 0-6.5-2-8.8-1.7-1.7-4.2-2.4-5.8-4.2-2.8-3.2-1.5-8.3.3-12.2a98.8 98.8 0 0 1 18.5-28c12-12.8 28.2-23.4 32.8-40.6 2.8-10.6.7-21.8 1-32.8 0-4.1.6-8.5 2.9-11.9 2.6-3.9 7.2-5.9 11.7-6.7 11.6-2 24.8 2.7 34.6-4.1 6-4.3 9.4-12.3 16-15.4 5.9-2.6 12.7-.8 18.5 1.7 10 4.2 20.2 11.5 21.8 22.5l.3 3.1a51 51 0 0 0 .5 7.8c1.5 7.9 8.7 15.6 5.4 23-10 1.7-18 1.7-18.8 10.8z" class="cls-4" transform="translate(-98.8)"/>
<path d="M837 266.4c-3.5 5.4-6.6 11.3-9.7 17.1a16 16 0 0 1-6.7 1.8l-4.8.2-3.8-.1c-4.5-.2-9-.6-13.5-.6-7.3.1-15.2 1.6-20.4 6.9-6 5.9-7.3 14.8-9.8 23h-1.1c-5.2 0-9.8-3.3-13.8-6.6a10.4 10.4 0 0 1-2.6-2.9 7.8 7.8 0 0 1-.6-4.3c.6-5.8 4.5-10.6 8-15.2 3.9-5 7.5-10.2 10.8-15.5 1.5-2.5 3-5.2 2.7-8-.2-2.3-1.5-4.4-2-6.6-1.4-5.8 2.5-11.5 7-15.3s10-6.5 13.9-11 5.7-10.8 6-16.8c.4-4.2.3-9 3.2-12.1 4.3-4.6 10.9-1.8 16-1.3a220 220 0 0 1 16.4 2.1 20 20 0 0 0 .5 2.6c1.6 8.6 3.6 17.1 5 25.7.7 4.4 1.2 8.9 1.5 13.3a69.4 69.4 0 0 1-2.1 23.6z" class="cls-9" transform="translate(-98.8)"/>
<path d="M888 117.2l-20 13.7-1.5-4.3-3.3-9.3s-39.7-29-49.3-38.8-18.2-6.5-18.2-6.5c-9.7 7.2-23.8 10.7-27.5-2-2.7-9.4 17.7-14.3 28.4-16.2a16.5 16.5 0 0 1 11.3 2 521 521 0 0 0 26.9 14.9c8.8 4.2 43.7 31.5 43.7 33 0 1 4.5 7.2 7.4 10.9l2.1 2.6z" class="cls-8" transform="translate(-98.8)"/>
<path d="M927 238.6l9 71.3 14-10.7s-5.7-12-2-14.2 9 11.8 9 11.8 35.7 2 25.7-18.3l-11.3-14.7L949 248z" class="cls-13" transform="translate(-98.8)"/>
<path d="M927 238.6l9 71.3 14-10.7s-5.7-12-2-14.2 9 11.8 9 11.8 35.7 2 25.7-18.3l-11.3-14.7L949 248z" class="cls-9" transform="translate(-98.8)"/>
<path d="M893.4 235.2l-4.3 36-29 2.3s-30.7-8.8-19.4-30.3c5.2-9.8 1.9-15.7-2.8-19.1a27.6 27.6 0 0 0-11.4-4.5s-.8-55 8.8-36.3c4.3 8.4 13.2 11.7 21.6 12.9a70.5 70.5 0 0 0 20-.5z" class="cls-8" transform="translate(-98.8)"/>
<path d="M857 196.6a29.5 29.5 0 0 1-19.1 27.6 27.6 27.6 0 0 0-11.4-4.5s-.8-55 8.8-36.3c4.3 8.4 13.2 11.7 21.6 12.9.1-.1.1.1.1.3z" class="cls-9" transform="translate(-98.8)"/>
<circle cx="727.8" cy="195.6" r="29.5" class="cls-8"/>
<path d="M888 117.2l-20 13.7-1.5-4.3c6-2 15.1-8.8 19.4-12.1l2.1 2.7z" class="cls-9" transform="translate(-98.8)"/>
<path d="M894.2 130.9l-.8 3.8-23.3 7.5a100.4 100.4 0 0 1-6.4-8.2c-2.2-3.3-3.4-6.3-.4-5.9 6.5.8 25-14.5 25-14.5 3-3.5 4.9 7.8 5.6 13.8l.3 3.5z" class="cls-14" transform="translate(-98.8)"/>
<path d="M838.9 341.6v9.1a38 38 0 0 1-16.5-3.9l1.7-4.9z" class="cls-9" transform="translate(-98.8)"/>
<path d="M843.2 332.6l-1.3 5.7-2.6 11.5s-12.5 0-18.6-5.1c-3.7-3.1-3-8-1.7-11.3a19.5 19.5 0 0 1 1.7-3.6z" class="cls-14" transform="translate(-98.8)"/>
<path d="M843.2 332.6l-1.3 5.7c-6 3.1-19.4-3.2-23-4.9a19.5 19.5 0 0 1 1.8-3.6z" class="cls-9" transform="translate(-98.8)"/>
<path d="M819.9 262.1l-3.2 12.2s6.3 37.8 3.8 45.3-2.3 12.3-2.3 12.3 18.3 9.7 24.5 4.8 6.2-25.3 6.2-25.3l13-13.3-16.5-23.8z" class="cls-13" transform="translate(-98.8)"/>
<path d="M882.5 214.4s15.8 52.8-35.5 40.5l14.8 58.3-29.6 55s94.8 16 110.8-4.8c0 0-7.8-62.5-4.8-83.5s-9.5-53.8-16.2-55.9-39.5-9.6-39.5-9.6z" class="cls-9" transform="translate(-98.8)"/>
<path d="M882.5 216.4s15.8 52.8-35.5 40.5l14.8 58.2-29.6 55s94.8 16 110.8-4.8c0 0-7.8-62.5-4.8-83.5s-9.5-53.8-16.2-55.9-39.5-9.5-39.5-9.5z" class="cls-9" transform="translate(-98.8)"/>
<path d="M882.5 215.4s15.8 52.8-35.5 40.5l14.8 58.3-29.6 55s94.8 16 110.8-4.8c0 0-7.8-62.5-4.8-83.5s-9.5-53.8-16.2-55.9-39.5-9.6-39.5-9.6z" class="cls-14" transform="translate(-98.8)"/>
<path d="M882.9 136.9c-3 1.4-9.7 3.2-19.5-1 0 0 15.3 30 16.3 35.7s1 12.7-.3 13.7-5.3 11.3-5.3 11.3l-15.7.7s10 4 10 11.6 22 22 33.7 27.7 59.3 22.4 59.3 22.4l21.3 20.6s-8.3-21.7-36.7-41-28-30.8-28-30.8-5.3-40.5-12.3-51.8-11-27.7-11-27.7-5.6 7.7-9 7.9a7.3 7.3 0 0 0-2.8.7z" class="cls-9" transform="translate(-98.8)"/>
<path d="M894.2 130.9l-.8 3.8-23.3 7.5a100.4 100.4 0 0 1-6.4-8.2c9.6 4.1 16.2 2.3 19.2.9a9.6 9.6 0 0 1 2.9-.8c2.5-.2 6.4-4.6 8-6.8l.4 3.6z" class="cls-9" transform="translate(-98.8)"/>
<path d="M882.9 135.9c-3 1.4-9.7 3.2-19.5-1 0 0 15.3 30 16.3 35.7s1 12.7-.3 13.7-5.3 11.3-5.3 11.3l-15.7.7s10 4 10 11.6 22 22 33.7 27.7 59.3 22.4 59.3 22.4l21.3 20.6s-8.3-21.7-36.7-41-28-30.8-28-30.8-5.3-40.5-12.3-51.8-11-27.7-11-27.7-5.6 7.7-9 7.9a7.3 7.3 0 0 0-2.8.7z" class="cls-13" transform="translate(-98.8)"/>
<path d="M807.5 217.8c1-3.1.4-6.6.8-9.9 1-8.9 9.5-16 9-25a5.4 5.4 0 0 1 .4-2.5 3.6 3.6 0 0 1 2.2-1.1c4.4-.8 9.4-.4 12.6-3.4s3.2-8.5 2.7-13.1c-.3-2.5-.7-5.2-2.5-6.8a10 10 0 0 0-4.4-1.8c-5.5-1.2-11-2.3-16.5-3.2s-11.4-1.7-16.7.3-9.4 6.5-13.2 10.9c-3.5 4.1-7.3 9-6.3 14.4.6 2.9 2.4 5.3 3.7 8a19.4 19.4 0 0 1-1 18.1c-2.6 4.2-7 7.6-8.1 12.5a11.8 11.8 0 0 0 5.2 12c8 5.2 29 .5 32-9.4z" class="cls-9" transform="translate(-98.8)"/>
<path d="M806.5 217.8c1-3.1.4-6.6.8-9.9 1-8.9 9.5-16 9-25a5.4 5.4 0 0 1 .4-2.5 3.6 3.6 0 0 1 2.2-1.1c4.4-.8 9.4-.4 12.6-3.4s3.2-8.5 2.7-13.1c-.3-2.5-.7-5.2-2.5-6.8a10 10 0 0 0-4.4-1.8c-5.5-1.2-11-2.3-16.5-3.2s-11.4-1.7-16.7.3-9.4 6.5-13.2 10.9c-3.5 4.1-7.3 9-6.3 14.4.6 2.9 2.4 5.3 3.7 8a19.4 19.4 0 0 1-1 18.1c-2.6 4.2-7 7.6-8.1 12.5a11.8 11.8 0 0 0 5.2 12c8 5.2 29 .5 32-9.4z" class="cls-4" transform="translate(-98.8)"/>
<path d="M840.8 225.7s-24.7 19.6-25.6 26.1 2.7 21.8 2.7 21.8l24.7 15.5s28.5 11.2 7.2 29.8-28.8 58.7-28.8 58.7 10.3 12.3 29.7-23.1c0 0 18.7-20.3 19.5-30.3s3.7-40.7-8.9-59.7c-8.3-12.5-12.9-26.6-16.1-33.9a9.6 9.6 0 0 0-4.4-4.9z" class="cls-9" transform="translate(-98.8)"/>
<path d="M839.8 225.7s-24.7 19.6-25.6 26.1 2.7 21.8 2.7 21.8l24.7 15.5s28.5 11.2 7.2 29.8-28.8 58.7-28.8 58.7 10.3 12.3 29.7-23.1c0 0 18.7-20.3 19.5-30.3s3.7-40.7-8.9-59.7c-8.3-12.5-12.9-26.6-16.1-33.9a9.6 9.6 0 0 0-4.4-4.9z" class="cls-13" transform="translate(-98.8)"/>
<path d="M848.7 318.9s-21.7 6.8-19.1 28" class="cls-9" transform="translate(-98.8)"/>
<path d="M755.1 289.6l-5 21.8 9.5-9.7-4.5-12.1zM780.4 399.9l-6.5 4.9 5.5 3.3 1-8.2z" class="cls-9"/>
<path d="M915.5 289.6s22.3.7 22.8-7.7" class="cls-9" transform="translate(-98.8)"/>
</g>
</svg>
<a class="credit" href="https://undraw.co">Illustration by unDraw</a>
<span class="feedback">Detected Audio: <span>...</span></span>
Raw
script.babel
const colors = {
blue: ["#5588a3", "#00334e", "#e8e8e8", "#A0616A"],
orange: ["#f7931e", "#f05a28", "#fff0bc", "#FDB797"],
pink: ["#ec3667", "#3f3d56", "#cbcdda", "#ffb9b9"],
red: ["#e2434b", "#292725", "#fee9d7", "#BF7554"],
yellow: ["#ffc60b", "#444444", "#feffdb", "#ffdbac"],
green: ["#c6e377", "#36622b", "#fbfad3", "#f1c27d"],
purple: ["#aa5c9f", "#7f4782", "#fdd043", "#B47556"],
black: ["#2b2b28", "#c19898", "#ebebe3", "#FDB797"]
};
const feedback = document.querySelector('.feedback span');
const illustration = document.querySelector(".illustration");
const tl = new TimelineLite();
function speechListener() {
window.SpeechRecognition =
window.SpeechRecognition || window.webkitSpeechRecognition;
const recognition = new SpeechRecognition();
recognition.lang = "en-US";
recognition.addEventListener("end", recognition.start);
recognition.addEventListener("result", e => {
const res = Array.from(e.results).map(result => result[0].transcript.toLowerCase());
feedback.style.color = colors[res] ? colors[res][0] : '#cacaca';
feedback.innerHTML = res;
update(res);
});
recognition.start();
}
function radioListener() {
const radioButtons = document.querySelector('.color-selector');
radioButtons.addEventListener("click", function(e) {
const value = radioButtons.querySelector('input[name="colors"]:checked').id;
update(value)
});
}
function setColors() {
const colorSelector = document.querySelector(".color-selector");
Object.keys(colors).map((key, index) => {
colorSelector.style.setProperty(`--${key}`, colors[key][0]);
});
}
function update(response) {
illustration.style.setProperty("--c-accent", colors[response][0]);
illustration.style.setProperty("--c-dark", colors[response][1]);
illustration.style.setProperty("--c-light", colors[response][2]);
illustration.style.setProperty("--c-skin", colors[response][3]);
tl.play(0);
}
function setupAnimation() {
const geometry = ['#geometry #rectangle', '#geometry #circle-bottom', '#geometry #circle-center', '#geometry #circle-left', '#geometry #circle-right','#geometry #circle-top', '#geometry #circle-top-2'];
const items = ['#woman', '#flower #bottom', '#flower #top', '#flower #leaf', '#plant #left', '#plant #center', '#plant #right', '#geometry #big-circle', ...geometry];
tl.set(items, { opacity: 0 });
// background
tl.fromTo('#geometry #big-circle', 2.5, { transformOrigin: '50% 50%', scale: 0, opacity: 0 }, { opacity: 1, scale: 1, ease: Elastic.easeOut });
// Plant
tl.fromTo('#plant #center', .6, { transformOrigin: '50% 100%', scale: 0, opacity: 1 }, { opacity: 1, scale: 1, ease: Back.easeOut.config(2) }, '-=2');
tl.fromTo('#plant #left', .6, { transformOrigin: '100% 100%', scale: 0, opacity: 0 }, { opacity: 1, scale: 1, ease: Back.easeOut.config(2) }, '-=1.6');
tl.fromTo('#plant #right', .6, { transformOrigin: '0% 100%', scale: 0, opacity: 0 }, { opacity: 1, scale: 1, ease: Back.easeOut.config(2) }, '-=1.2');
// Flower
tl.fromTo('#flower #bottom', .5, { transformOrigin: '100% 100%', scale: 0, opacity: 1 }, { opacity: 1, scale: 1, ease: Back.easeOut.config(2) }, '-=.5');
tl.fromTo('#flower #top', .5, { scale: 0, opacity: 0, transformOrigin: '50% 50%' }, { opacity: 1, scale: 1, ease: Back.easeOut.config(2) },'-=.2');
tl.fromTo('#flower #leaf', .5, { scale: 0, opacity: 0, transformOrigin: '100% 100%' }, { opacity: 1, scale: 1, ease: Back.easeOut.config(2) }, '-=.2');
tl.fromTo('#woman', .4, {x : 40, opacity: 0}, {x: 0, opacity: 1, ease: Back.easeOut }, '-=.4');
tl.staggerFromTo(geometry, 1.4, { opacity: 0, scale: 0, transformOrigin: '50% 50%' }, { scale: 1, opacity: 1, ease: Elastic.easeOut.config(0.9, 0.4)}, .1, '-=1.4');
};
function init() {
const is_supported = window.SpeechRecognition != null || window.webkitSpeechRecognition != null;
if(!is_supported) feedback.innerHTML = 'API not supported';
setColors();
radioListener();
setupAnimation();
is_supported && speechListener();
}
init();
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/just-animate/2.6.2/just-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>
Raw
style.scss
$colors: 'blue', 'orange', 'pink', 'red', 'yellow', 'green', 'purple', 'black';
/* layout */
html {
height: 100%;
background: #f9f9f9;
}
body {
height: 100%;
width: 90%;
display: flex;
justify-content: center;
align-items: center;
font-size: 16px;
line-height: 1.2;
font-family: 'Allerta Stencil', sans-serif;
}
.credit {
position: absolute;
bottom: 10px;
right: 10px;
font-size: 0.65em;
text-decoration: none;
color: #222;
transition: opacity 0.3s ease-in;
&:hover {
opacity: 0.8;
}
}
.feedback {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
}
/* svg illustration*/
.illustration {
--c-accent: #ec3667;
--c-dark: #3f3d56;
--c-light: #cbcdda;
--c-skin: #ffb9b9;
width: 100%;
max-height: 85vh;
g {
transform-origin: 50% 50%;
}
}
.cls-2{fill:none;stroke:var(--c-dark);stroke-miterlimit:10;stroke-width:2px}
.cls-3{fill:var(--c-dark)}
.cls-4{fill:var(--c-accent)}
.cls-8{fill:var(--c-skin)}
.cls-9{opacity:.1}
.cls-10{fill:var(--c-dark)}
.cls-13{fill:var(--c-dark)}
.cls-14{fill:var(--c-light)}
/*color picker*/
.color-selector {
display: flex;
flex-direction: column;
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
}
[type="radio"] {
display: none;
&:checked + label:before {
box-shadow: 0px 0px 0px 2px #f9f9f9, 0 0 0 4px #cacaca;
}
}
label {
display: inline-flex;
align-items: center;
margin: 10px 0px;
padding: 0 0 0 30px;
cursor: pointer;
font-size: .7em;
&:before {
display: inline-block;
content: '';
background: var(--c-bg);
width: 20px;
height: 20px;
border-radius: 50%;
margin-right: 10px;
}
}
@each $item in $colors{
label[for=#{$item}] {
--c-bg: var(--#{$item});
}
}
Raw
styles
<link href="https://fonts.googleapis.com/css?family=Allerta+Stencil" rel="stylesheet" />
Raw
svg-animation-with-speech-recognition.markdown
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment