Skip to content

Instantly share code, notes, and snippets.

@anko

anko/amazing.svg

Created June 17, 2015 16:25
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save anko/4f3c54584e559f72f1da to your computer and use it in GitHub Desktop.
Save anko/4f3c54584e559f72f1da to your computer and use it in GitHub Desktop.
Download ZIP
Making a MEGA RAINBOW AMAZING shields.io badge
Display the source blob
Display the rendered blob
Raw
amazing.svg
<!--
This part is a nicely formatted version of what I get out of a Shields.io
badge at
https://img.shields.io/badge/amazingness-totally_awesome-ff69b4.svg?style=flat-square
I also added the `xlink` XML namespace and gave the second `path` an `id`
so our animation can refer to it.
This works with whatever static SVG badge, so just do this yourself with
the badge you want to amazing-ize.
-->
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="187" height="20">
<g shape-rendering="crispEdges">
<path fill="#555" d="M0 0h84v20H0z"/>
<path id="status-bg" fill="#ff69b4" d="M84 0h103v20H84z"/>
</g>
<g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11">
<text x="43" y="14">amazingness</text>
<text x="134.5" y="14">totally awesome</text>
</g>
<!--
This part does the background animation.
The SVG `animate` element doesn't let us specify that we want to
interpolate just the hue part of the HSL colour, so the `values` property
is a massive hack.
-->
<animate xlink:href="#status-bg"
attributeType="CSS"
values="
hsl(0,100%,45%);
hsl(1,100%,45%);
hsl(2,100%,45%);
hsl(3,100%,45%);
hsl(4,100%,45%);
hsl(5,100%,45%);
hsl(6,100%,45%);
hsl(7,100%,45%);
hsl(8,100%,45%);
hsl(9,100%,45%);
hsl(10,100%,45%);
hsl(11,100%,45%);
hsl(12,100%,45%);
hsl(13,100%,45%);
hsl(14,100%,45%);
hsl(15,100%,45%);
hsl(16,100%,45%);
hsl(17,100%,45%);
hsl(18,100%,45%);
hsl(19,100%,45%);
hsl(20,100%,45%);
hsl(21,100%,45%);
hsl(22,100%,45%);
hsl(23,100%,45%);
hsl(24,100%,45%);
hsl(25,100%,45%);
hsl(26,100%,45%);
hsl(27,100%,45%);
hsl(28,100%,45%);
hsl(29,100%,45%);
hsl(30,100%,45%);
hsl(31,100%,45%);
hsl(32,100%,45%);
hsl(33,100%,45%);
hsl(34,100%,45%);
hsl(35,100%,45%);
hsl(36,100%,45%);
hsl(37,100%,45%);
hsl(38,100%,45%);
hsl(39,100%,45%);
hsl(40,100%,45%);
hsl(41,100%,45%);
hsl(42,100%,45%);
hsl(43,100%,45%);
hsl(44,100%,45%);
hsl(45,100%,45%);
hsl(46,100%,45%);
hsl(47,100%,45%);
hsl(48,100%,45%);
hsl(49,100%,45%);
hsl(50,100%,45%);
hsl(51,100%,45%);
hsl(52,100%,45%);
hsl(53,100%,45%);
hsl(54,100%,45%);
hsl(55,100%,45%);
hsl(56,100%,45%);
hsl(57,100%,45%);
hsl(58,100%,45%);
hsl(59,100%,45%);
hsl(60,100%,45%);
hsl(61,100%,45%);
hsl(62,100%,45%);
hsl(63,100%,45%);
hsl(64,100%,45%);
hsl(65,100%,45%);
hsl(66,100%,45%);
hsl(67,100%,45%);
hsl(68,100%,45%);
hsl(69,100%,45%);
hsl(70,100%,45%);
hsl(71,100%,45%);
hsl(72,100%,45%);
hsl(73,100%,45%);
hsl(74,100%,45%);
hsl(75,100%,45%);
hsl(76,100%,45%);
hsl(77,100%,45%);
hsl(78,100%,45%);
hsl(79,100%,45%);
hsl(80,100%,45%);
hsl(81,100%,45%);
hsl(82,100%,45%);
hsl(83,100%,45%);
hsl(84,100%,45%);
hsl(85,100%,45%);
hsl(86,100%,45%);
hsl(87,100%,45%);
hsl(88,100%,45%);
hsl(89,100%,45%);
hsl(90,100%,45%);
hsl(91,100%,45%);
hsl(92,100%,45%);
hsl(93,100%,45%);
hsl(94,100%,45%);
hsl(95,100%,45%);
hsl(96,100%,45%);
hsl(97,100%,45%);
hsl(98,100%,45%);
hsl(99,100%,45%);
hsl(100,100%,45%);
hsl(101,100%,45%);
hsl(102,100%,45%);
hsl(103,100%,45%);
hsl(104,100%,45%);
hsl(105,100%,45%);
hsl(106,100%,45%);
hsl(107,100%,45%);
hsl(108,100%,45%);
hsl(109,100%,45%);
hsl(110,100%,45%);
hsl(111,100%,45%);
hsl(112,100%,45%);
hsl(113,100%,45%);
hsl(114,100%,45%);
hsl(115,100%,45%);
hsl(116,100%,45%);
hsl(117,100%,45%);
hsl(118,100%,45%);
hsl(119,100%,45%);
hsl(120,100%,45%);
hsl(121,100%,45%);
hsl(122,100%,45%);
hsl(123,100%,45%);
hsl(124,100%,45%);
hsl(125,100%,45%);
hsl(126,100%,45%);
hsl(127,100%,45%);
hsl(128,100%,45%);
hsl(129,100%,45%);
hsl(130,100%,45%);
hsl(131,100%,45%);
hsl(132,100%,45%);
hsl(133,100%,45%);
hsl(134,100%,45%);
hsl(135,100%,45%);
hsl(136,100%,45%);
hsl(137,100%,45%);
hsl(138,100%,45%);
hsl(139,100%,45%);
hsl(140,100%,45%);
hsl(141,100%,45%);
hsl(142,100%,45%);
hsl(143,100%,45%);
hsl(144,100%,45%);
hsl(145,100%,45%);
hsl(146,100%,45%);
hsl(147,100%,45%);
hsl(148,100%,45%);
hsl(149,100%,45%);
hsl(150,100%,45%);
hsl(151,100%,45%);
hsl(152,100%,45%);
hsl(153,100%,45%);
hsl(154,100%,45%);
hsl(155,100%,45%);
hsl(156,100%,45%);
hsl(157,100%,45%);
hsl(158,100%,45%);
hsl(159,100%,45%);
hsl(160,100%,45%);
hsl(161,100%,45%);
hsl(162,100%,45%);
hsl(163,100%,45%);
hsl(164,100%,45%);
hsl(165,100%,45%);
hsl(166,100%,45%);
hsl(167,100%,45%);
hsl(168,100%,45%);
hsl(169,100%,45%);
hsl(170,100%,45%);
hsl(171,100%,45%);
hsl(172,100%,45%);
hsl(173,100%,45%);
hsl(174,100%,45%);
hsl(175,100%,45%);
hsl(176,100%,45%);
hsl(177,100%,45%);
hsl(178,100%,45%);
hsl(179,100%,45%);
hsl(180,100%,45%);
hsl(181,100%,45%);
hsl(182,100%,45%);
hsl(183,100%,45%);
hsl(184,100%,45%);
hsl(185,100%,45%);
hsl(186,100%,45%);
hsl(187,100%,45%);
hsl(188,100%,45%);
hsl(189,100%,45%);
hsl(190,100%,45%);
hsl(191,100%,45%);
hsl(192,100%,45%);
hsl(193,100%,45%);
hsl(194,100%,45%);
hsl(195,100%,45%);
hsl(196,100%,45%);
hsl(197,100%,45%);
hsl(198,100%,45%);
hsl(199,100%,45%);
hsl(200,100%,45%);
hsl(201,100%,45%);
hsl(202,100%,45%);
hsl(203,100%,45%);
hsl(204,100%,45%);
hsl(205,100%,45%);
hsl(206,100%,45%);
hsl(207,100%,45%);
hsl(208,100%,45%);
hsl(209,100%,45%);
hsl(210,100%,45%);
hsl(211,100%,45%);
hsl(212,100%,45%);
hsl(213,100%,45%);
hsl(214,100%,45%);
hsl(215,100%,45%);
hsl(216,100%,45%);
hsl(217,100%,45%);
hsl(218,100%,45%);
hsl(219,100%,45%);
hsl(220,100%,45%);
hsl(221,100%,45%);
hsl(222,100%,45%);
hsl(223,100%,45%);
hsl(224,100%,45%);
hsl(225,100%,45%);
hsl(226,100%,45%);
hsl(227,100%,45%);
hsl(228,100%,45%);
hsl(229,100%,45%);
hsl(230,100%,45%);
hsl(231,100%,45%);
hsl(232,100%,45%);
hsl(233,100%,45%);
hsl(234,100%,45%);
hsl(235,100%,45%);
hsl(236,100%,45%);
hsl(237,100%,45%);
hsl(238,100%,45%);
hsl(239,100%,45%);
hsl(240,100%,45%);
hsl(241,100%,45%);
hsl(242,100%,45%);
hsl(243,100%,45%);
hsl(244,100%,45%);
hsl(245,100%,45%);
hsl(246,100%,45%);
hsl(247,100%,45%);
hsl(248,100%,45%);
hsl(249,100%,45%);
hsl(250,100%,45%);
hsl(251,100%,45%);
hsl(252,100%,45%);
hsl(253,100%,45%);
hsl(254,100%,45%);
hsl(255,100%,45%);
hsl(256,100%,45%);
hsl(257,100%,45%);
hsl(258,100%,45%);
hsl(259,100%,45%);
hsl(260,100%,45%);
hsl(261,100%,45%);
hsl(262,100%,45%);
hsl(263,100%,45%);
hsl(264,100%,45%);
hsl(265,100%,45%);
hsl(266,100%,45%);
hsl(267,100%,45%);
hsl(268,100%,45%);
hsl(269,100%,45%);
hsl(270,100%,45%);
hsl(271,100%,45%);
hsl(272,100%,45%);
hsl(273,100%,45%);
hsl(274,100%,45%);
hsl(275,100%,45%);
hsl(276,100%,45%);
hsl(277,100%,45%);
hsl(278,100%,45%);
hsl(279,100%,45%);
hsl(280,100%,45%);
hsl(281,100%,45%);
hsl(282,100%,45%);
hsl(283,100%,45%);
hsl(284,100%,45%);
hsl(285,100%,45%);
hsl(286,100%,45%);
hsl(287,100%,45%);
hsl(288,100%,45%);
hsl(289,100%,45%);
hsl(290,100%,45%);
hsl(291,100%,45%);
hsl(292,100%,45%);
hsl(293,100%,45%);
hsl(294,100%,45%);
hsl(295,100%,45%);
hsl(296,100%,45%);
hsl(297,100%,45%);
hsl(298,100%,45%);
hsl(299,100%,45%);
hsl(300,100%,45%);
hsl(301,100%,45%);
hsl(302,100%,45%);
hsl(303,100%,45%);
hsl(304,100%,45%);
hsl(305,100%,45%);
hsl(306,100%,45%);
hsl(307,100%,45%);
hsl(308,100%,45%);
hsl(309,100%,45%);
hsl(310,100%,45%);
hsl(311,100%,45%);
hsl(312,100%,45%);
hsl(313,100%,45%);
hsl(314,100%,45%);
hsl(315,100%,45%);
hsl(316,100%,45%);
hsl(317,100%,45%);
hsl(318,100%,45%);
hsl(319,100%,45%);
hsl(320,100%,45%);
hsl(321,100%,45%);
hsl(322,100%,45%);
hsl(323,100%,45%);
hsl(324,100%,45%);
hsl(325,100%,45%);
hsl(326,100%,45%);
hsl(327,100%,45%);
hsl(328,100%,45%);
hsl(329,100%,45%);
hsl(330,100%,45%);
hsl(331,100%,45%);
hsl(332,100%,45%);
hsl(333,100%,45%);
hsl(334,100%,45%);
hsl(335,100%,45%);
hsl(336,100%,45%);
hsl(337,100%,45%);
hsl(338,100%,45%);
hsl(339,100%,45%);
hsl(340,100%,45%);
hsl(341,100%,45%);
hsl(342,100%,45%);
hsl(343,100%,45%);
hsl(344,100%,45%);
hsl(345,100%,45%);
hsl(346,100%,45%);
hsl(347,100%,45%);
hsl(348,100%,45%);
hsl(349,100%,45%);
hsl(350,100%,45%);
hsl(351,100%,45%);
hsl(352,100%,45%);
hsl(353,100%,45%);
hsl(354,100%,45%);
hsl(355,100%,45%);
hsl(356,100%,45%);
hsl(357,100%,45%);
hsl(358,100%,45%);
hsl(359,100%,45%);
hsl(360,100%,45%);"
attributeName="fill"
dur="0.5s"
repeatCount="indefinite" />
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment