Skip to content

Instantly share code, notes, and snippets.

@brito
Last active May 31, 2017 22:01
Show Gist options
  • Save brito/ebae9c15ff5bffa2b4097551a650d88f to your computer and use it in GitHub Desktop.
Save brito/ebae9c15ff5bffa2b4097551a650d88f to your computer and use it in GitHub Desktop.
Oracle
/* Oracle */
html { background:#ea1b22;
animation:fadein 6s cubic-bezier(1,0,1,1) }
@keyframes fadein {
from, 70% { background:white }}
html:hover { animation:strobeA 50ms infinite,strobeB 80ms infinite }
@keyframes strobeA { to { background:#ea1b22 }}
@keyframes strobeB { to { background:rgba(234,27,34,.9) }}
path { animation:trace 5s cubic-bezier(1,0,1,0);
stroke:rgba(234,27,34,.9); fill:rgba(255,255,255,.87);
stroke-dasharray:0,250,0;
stroke-dashoffset:0; stroke-width:1; }
@keyframes trace {
from { stroke:#ea1b22; fill:transparent;
stroke-dasharray:10,100;
stroke-dashoffset:50000 }
92% { stroke:white; fill:rgba(255,255,255,.5) }}
html:hover path { fill:rgba(255,0,0,.99); stroke:#ea1b22;
animation:trace 60s infinite alternate cubic-bezier(0,1,1,0) }
html { text-align:center; min-height:100%;
display:flex; align-items:center; justify-content:center }
<svg width="662" height="94">
<g transform="translate(-702,-712)">
<path d="M980 771L1021 771 999 737 960 799 942 799 990 724C992 721 995 719 999 719 1004 720 1007 721 1009 724L1057 800 1039 800 1031 786 990 786 981 772zM1167 786L1167 720 1152 720 1152 792C1152 794 1153 796 1154 797 1156 799 1158 800 1160 800L1229 800 1238 786 1167 786zM915 774C930 774 942 762 942 747 942 732 930 720 915 720L848 720 848 800 864 800 864 734 914 734C921 734 927 740 927 747 927 754 921 760 914 760L871 760 917 800 939 800 908 774 915 774zM755 800C733 800 715 782 715 760 715 738 733 720 755 720L801 720C823 720 840 738 840 760 840 782 823 800 801 800L755 800zM800 786C814 786 825 774 825 760 825 746 814 734 800 734L756 734C742 734 730 746 730 760 730 774 742 786 756 786L800 786zM1089 800C1067 800 1049 782 1049 760 1049 738 1067 720 1089 720L1144 720 1135 734 1090 734C1076 734 1064 746 1064 760 1064 774 1076 786 1090 786L1145 786 1136 800 1089 800zM1275 786C1264 786 1254 778 1251 767L1316 767 1325 753 1251 753C1254 742 1264 734 1275 734L1320 734 1329 720 1274 720C1252 720 1235 738 1235 760 1235 782 1252 800 1274 800L1321 800 1330 786 1275 786"/>
</g>
</svg>
console.log(
document.querySelector`path`
.getAttribute`d`
.replace(
/([A-Z])([\d ]+)(z?)/ig,
(cmd,fn,p,z) => `${fn}${p}${z}
`)
)
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment