New svgs, bug fixes & new design page

This commit is contained in:
pheralb 2022-03-08 17:17:05 +00:00
parent dd4b1e364f
commit 8525415604
16 changed files with 482 additions and 95 deletions

View File

@ -5,7 +5,7 @@ const LoadingDot = {
display: "block",
width: "1rem",
height: "1rem",
backgroundColor: "#50cdc5",
backgroundColor: "#6748E6",
borderRadius: "50%",
};

26
components/card/design.js Normal file
View File

@ -0,0 +1,26 @@
import { Box, VStack, Icon, Text, Divider } from "@chakra-ui/react";
import React from "react";
const Design = ({ icon, title, children }) => {
return (
<Box
borderWidth="1px"
borderRadius="lg"
overflow="hidden"
_hover={{ shadow: "md", transition: "all .2s" }}
>
<Box p="6">
<VStack spacing={3}>
<Icon as={icon} w={16} h={16} />
<Text fontSize="3xl" fontWeight="semibold">
{title}
</Text>
<Divider />
<Box fontSize="2xl">{children}</Box>
</VStack>
</Box>
</Box>
);
};
export default Design;

23
components/card/image.js Normal file
View File

@ -0,0 +1,23 @@
import { Box, Image } from "@chakra-ui/react";
import React from "react";
const CardImage = ({title, image, children}) => {
return (
<Box maxW="sm" borderWidth="1px" borderRadius="lg" overflow="hidden">
<Image src={image} alt={title} width="60" />
<Box p="6">
<Box
mt="1"
as="h4"
lineHeight="tight"
isTruncated
>
{title}
</Box>
{children}
</Box>
</Box>
);
};
export default CardImage;

View File

@ -1,14 +1,16 @@
import React from "react";
import { Center } from "@chakra-ui/react";
import { Center, Text, VStack } from "@chakra-ui/react";
import Link from "next/link";
const Index = () => {
return (
<>
<Center h="100px" color="gray.500">
<Center h="100px" mt="8" mb="8" color="gray.500">
<VStack>
<Link href="https://github.com/pheralb" passHref>
Built by Pablo Hdez
</Link>
</VStack>
</Center>
</>
);

View File

@ -16,16 +16,12 @@ import {
IoBookOutline,
IoCloseSharp,
IoLogoGithub,
IoLogoTwitter,
} from "react-icons/io5";
import { BiLinkExternal } from "react-icons/bi";
import Link from "next/link";
import Hover from "animations/tap";
import Show from "animations/show";
import { svgl } from "components/svg";
import HEADER_LINKS from "./links";
import Search from "components/search";
import ModalSearch from "components/search/modal";
import Logo from "./logo";
const Header = () => {
const mobileNav = useDisclosure();
@ -35,8 +31,8 @@ const Header = () => {
<Box
w="full"
bg={bg}
px={{ base: 3, md: 16 }}
pl={{ base: 3, md: 16 }}
px={{ base: 6, md: 16 }}
pl={{ base: 6, md: 16 }}
py="5"
pos="sticky"
top="0"
@ -44,19 +40,7 @@ const Header = () => {
>
<Flex alignItems="center" justifyContent="space-between" mx="auto">
<HStack spacing="1" alignItems="center">
<Hover>
<Link href="/" passHref>
<IconButton
as={svgl}
cursor="pointer"
name="logo"
boxSize="40px"
mr="2"
borderRadius="full"
bg="transparent"
/>
</Link>
</Hover>
<Logo />
{HEADER_LINKS.map((link) => (
<Link key={link.id} href={link.href} passHref>
<Button

View File

@ -1,64 +1,37 @@
import * as React from "react";
import React, { useEffect } from "react";
import Link from "next/link";
import { useRouter } from "next/router";
import { IconButton } from "@chakra-ui/react";
import Hover from "animations/tap";
import { svgl } from "components/svg";
import confetti from "canvas-confetti";
const Logo = () => {
const router = useRouter();
useEffect(() => {
logoHeader.addEventListener("contextmenu", (event) => {
event.preventDefault();
router.push("/design");
});
}, []);
function Logo(props) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 256 256"
color="currentColor"
{...props}
>
<path fill="none" d="M0 0H256V256H0z" />
<path
d="M37.9 207.9L91.7 59.8a8 8 0 0113.2-2.9l94.2 94.2a8 8 0 01-2.9 13.2L48.1 218.1a7.9 7.9 0 01-10.2-10.2zM168 72s0-24 24-24 24-24 24-24"
fill="none"
stroke="#000"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={16}
<Hover>
<Link href="/" passHref>
<IconButton
as={svgl}
id="logoHeader"
cursor="pointer"
name="logo"
boxSize="40px"
mr="2"
borderRadius="full"
bg="transparent"
/>
<path
fill="none"
stroke="#000"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={16}
d="M102.4 198.4L57.6 153.6"
/>
<path
fill="none"
stroke="#000"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={16}
d="M144 16L144 40"
/>
<path
fill="none"
stroke="#000"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={16}
d="M216 112L232 128"
/>
<path
fill="none"
stroke="#000"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={16}
d="M216 80L240 72"
/>
<path
fill="none"
stroke="#000"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={16}
d="M76.8 100.8L155.2 179.2"
/>
</svg>
</Link>
</Hover>
);
}
};
export default Logo;

View File

@ -3,7 +3,7 @@ import { Box } from "@chakra-ui/react";
const Index = ({ children }) => {
return (
<Box as="main" px={{ base: 3, md: 16 }} pl={{ base: 3, md: 16 }}>
<Box as="main" px={{ base: 6, md: 16 }} pl={{ base: 6, md: 16 }}>
{children}
</Box>
);

View File

@ -1270,3 +1270,19 @@ export const framer = (props) => {
</svg>
);
};
export const vercelFull = (props) => {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 4438 1000"
{...props}
>
<path
fill="#000"
d="M2223.75 250c-172.5 0-296.88 112.5-296.88 281.25s139.85 281.25 312.51 281.25c104.21 0 196.09-41.25 252.96-110.781l-119.53-69.063c-31.56 34.532-79.53 54.688-133.43 54.688-74.85 0-138.44-39.063-162.04-101.563h437.82c3.43-17.5 5.47-35.625 5.47-54.687C2520.63 362.5 2396.41 250 2223.75 250zm-147.66 226.562C2095.62 414.219 2149.06 375 2223.75 375c74.84 0 128.28 39.219 147.66 101.562h-295.32zm-35.31-398.437l-432.97 750-433.12-750h162.34l270.63 468.75 270.62-468.75h162.5zM577.344 0l577.346 1000H0L577.344 0zM3148.75 531.25C3148.75 625 3210 687.5 3305 687.5c64.38 0 112.66-29.219 137.5-76.875l120 69.219C3512.81 762.656 3419.69 812.5 3305 812.5c-172.66 0-296.87-112.5-296.87-281.25S3132.5 250 3305 250c114.69 0 207.66 49.844 257.5 132.656l-120 69.219C3417.66 404.219 3369.38 375 3305 375c-94.84 0-156.25 62.5-156.25 156.25zM4437.5 78.125v718.75h-140.62V78.125h140.62zM3906.25 250c-172.5 0-296.87 112.5-296.87 281.25s140 281.25 312.5 281.25c104.21 0 196.09-41.25 252.96-110.781l-119.53-69.063c-31.56 34.532-79.53 54.688-133.43 54.688-74.85 0-138.44-39.063-162.04-101.563h437.82c3.43-17.5 5.46-35.625 5.46-54.687C4203.12 362.5 4078.91 250 3906.25 250zm-147.66 226.562C3778.13 414.219 3831.41 375 3906.25 375s128.28 39.219 147.66 101.562h-295.32zm-797.34-210.937v151.406c-15.62-4.531-32.19-7.656-50-7.656-90.78 0-156.25 62.5-156.25 156.25v231.25h-140.62v-531.25H2755v143.75c0-79.375 92.34-143.75 206.25-143.75z"
></path>
</svg>
);
};

View File

@ -278,7 +278,28 @@ const Icons = [
title: "Framer",
category: "Design",
url: "https://framer.com/",
}
},
{
id: 41,
href: "/library/netflix.svg",
title: "Netflix",
category: "Video Platform",
url: "https://www.netflix.com/",
},
{
id: 42,
href: "/library/firefox.svg",
title: "Firefox",
category: "Browser",
url: "https://www.mozilla.org/en-US/firefox/",
},
{
id: 43,
href: "/library/linkedin.svg",
title: "LinkedIn",
category: "Social",
url: "https://www.linkedin.com/",
},
];
export default Icons;

116
pages/design.js Normal file
View File

@ -0,0 +1,116 @@
import React from "react";
import Head from "next/head";
import download from "downloadjs";
import { Box, Button, Flex, HStack, Link, Text } from "@chakra-ui/react";
import Show from "animations/show";
import Grid from "components/grid";
import DesignCard from "components/card/design";
import { RiFontSize, RiPaletteLine } from "react-icons/ri";
import { IoMdImages } from "react-icons/io";
import { HiOutlineExternalLink } from "react-icons/hi";
import { IoCloudDownloadOutline } from "react-icons/io5";
import CardImage from "components/card/image";
const Design = () => {
const downloadSvg = (url) => {
download(url);
};
return (
<>
<Head>
<title>Design - SVGL</title>
</Head>
<Box mt="6">
<Box w="full" border="solid 1px transparent">
<Show>
<Text
as="h1"
fontSize={{ base: "25px", sm: "35px", md: "5xl", lg: "6xl" }}
letterSpacing="tight"
lineHeight="short"
fontWeight="extrabold"
mb="3"
>
Design
</Text>
</Show>
<Show delay={0.3}>
<Box mt={{ base: 4, md: 5 }}>
<Grid>
<DesignCard title="Fonts" icon={RiFontSize}>
<HStack spacing={2}>
<Link
href="https://fonts.google.com/specimen/Poppins"
isExternal
>
Poppins
</Link>
<HiOutlineExternalLink size="20px" />
</HStack>
</DesignCard>
<DesignCard title="Colors" icon={RiPaletteLine}>
<Flex color="white">
<Box bg="lightDark.900" p="2">
<Text fontSize="15px">#16161a</Text>
</Box>
<Box bg="light.100" p="2">
<Text fontSize="15px" color="black">
#f9f9f9
</Text>
</Box>
<Box bg="#6748E6" p="2">
<Text fontSize="15px" color="white">
#6748E6
</Text>
</Box>
</Flex>
</DesignCard>
</Grid>
<Box mt="4">
<DesignCard title="Images" icon={IoMdImages}>
<HStack spacing={3}>
<CardImage title="Banner" image="/images/banner.png">
<Button
w={{ base: "100%", md: "auto" }}
leftIcon={<IoCloudDownloadOutline />}
variant="primary"
fontWeight="light"
mt="2"
onClick={() =>
downloadSvg(
"https://svgl.vercel.app/images/banner.png"
)
}
>
Download
</Button>
</CardImage>
<CardImage title="Logo" image="/images/logo.png">
<Button
w={{ base: "100%", md: "auto" }}
leftIcon={<IoCloudDownloadOutline />}
variant="primary"
fontWeight="light"
mt="2"
onClick={() =>
downloadSvg(
"https://svgl.vercel.app/images/logo.png"
)
}
>
Download
</Button>
</CardImage>
</HStack>
</DesignCard>
</Box>
</Box>
</Show>
</Box>
</Box>
</>
);
};
export default Design;

View File

@ -1,8 +1,7 @@
import { chakra, Box, Container, Text, Flex, Icon } from "@chakra-ui/react";
import { chakra, Box } from "@chakra-ui/react";
import Search from "components/search";
import Items from "components/items/all";
import Show from "animations/show";
import { rocket } from "components/svg";
import Loader from "animations/loader";
export default function Index() {
return (
@ -10,9 +9,9 @@ export default function Index() {
<Box mt="6">
<Box w="full" border="solid 1px transparent">
<chakra.h1
fontSize={{ base: "25px", sm: "35px", md: "6xl" }}
textAlign="center"
fontSize={{ base: "25px", sm: "35px", md: "5xl", lg: "6xl" }}
letterSpacing="tight"
textAlign="center"
lineHeight="short"
fontWeight="extrabold"
mb="3"

View File

@ -39,7 +39,7 @@ export default function Icon() {
if (error) return <Error />;
if (!data) return <Loader />;
const downloadSvg = (name, url) => {
const downloadSvg = (url) => {
confetti({
particleCount: 200,
startVelocity: 30,
@ -92,7 +92,7 @@ export default function Icon() {
variant="primary"
fontWeight="light"
mr="2"
onClick={() => downloadSvg(data.title, data.href)}
onClick={() => downloadSvg(data.href)}
>
Download .svg
</Button>

201
public/library/firefox.svg Normal file
View File

@ -0,0 +1,201 @@
<?xml version="1.0" encoding="utf-8"?>
<svg width="256px" height="265px" viewBox="0 0 256 265" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
<defs>
<radialGradient id="SVGID_1_" cx="-14920.2256" cy="-8274.0713" r="124.382" fx="-14928.1611" fy="-8274.0713" gradientTransform="matrix(0.7398 2.920152e-02 -4.866920e-02 1.0902 10886.5264 9537.6963)" gradientUnits="userSpaceOnUse">
<stop offset="0.1" style="stop-color:#FFEA00"/>
<stop offset="0.17" style="stop-color:#FFDE00"/>
<stop offset="0.28" style="stop-color:#FFBF00"/>
<stop offset="0.43" style="stop-color:#FF8E00"/>
<stop offset="0.77" style="stop-color:#FF272D"/>
<stop offset="0.87" style="stop-color:#E0255A"/>
<stop offset="0.95" style="stop-color:#CC2477"/>
<stop offset="1" style="stop-color:#C42482"/>
</radialGradient>
<radialGradient id="_Path__1_" cx="-8176.5342" cy="-7746.3013" r="218.2726" gradientTransform="matrix(1.1973 0 0 1.1973 9957.373 9315.5225)" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:#00CCDA"/>
<stop offset="0.22" style="stop-color:#0083FF"/>
<stop offset="0.26" style="stop-color:#007AF9"/>
<stop offset="0.33" style="stop-color:#0060E8"/>
<stop offset="0.33" style="stop-color:#005FE7"/>
<stop offset="0.44" style="stop-color:#2639AD"/>
<stop offset="0.52" style="stop-color:#401E84"/>
<stop offset="0.57" style="stop-color:#4A1475"/>
</radialGradient>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="145.2425" y1="481.7857" x2="93.8365" y2="313.6288" gradientTransform="matrix(1 0 0 1 0 -286)">
<stop offset="0" style="stop-color:#000F43;stop-opacity:0.4"/>
<stop offset="0.48" style="stop-color:#001962;stop-opacity:0.17"/>
<stop offset="1" style="stop-color:#002079;stop-opacity:0"/>
</linearGradient>
<radialGradient id="SVGID_3_" cx="-9132.6758" cy="-6696.7002" r="73.6256" gradientTransform="matrix(1.1875 0.1168 -0.1168 1.1875 10322.1836 9194.8447)" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:#FFEA00"/>
<stop offset="0.5" style="stop-color:#FF272D"/>
<stop offset="1" style="stop-color:#C42482"/>
</radialGradient>
<radialGradient id="SVGID_4_" cx="-9139.3379" cy="-6767.2969" r="122.9475" gradientTransform="matrix(1.1875 0.1168 -0.1168 1.1875 10322.1836 9194.8447)" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:#FFE900"/>
<stop offset="0.16" style="stop-color:#FFAF0E"/>
<stop offset="0.32" style="stop-color:#FF7A1B"/>
<stop offset="0.47" style="stop-color:#FF4E26"/>
<stop offset="0.62" style="stop-color:#FF2C2E"/>
<stop offset="0.76" style="stop-color:#FF1434"/>
<stop offset="0.89" style="stop-color:#FF0538"/>
<stop offset="1" style="stop-color:#FF0039"/>
</radialGradient>
<radialGradient id="SVGID_5_" cx="-9121.9473" cy="-6653.3262" r="112.8177" gradientTransform="matrix(1.1875 0.1168 -0.1168 1.1875 10322.1836 9194.8447)" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:#FF272D"/>
<stop offset="0.5" style="stop-color:#C42482"/>
<stop offset="0.99" style="stop-color:#620700"/>
</radialGradient>
<radialGradient id="SVGID_6_" cx="227.574" cy="408.42" r="215.776" fx="235.2917" fy="404.6054" gradientTransform="matrix(0.9734 0 0 0.9734 -29.4728 -291.7491)" gradientUnits="userSpaceOnUse">
<stop offset="0.16" style="stop-color:#FFEA00"/>
<stop offset="0.23" style="stop-color:#FFDE00"/>
<stop offset="0.37" style="stop-color:#FFBF00"/>
<stop offset="0.54" style="stop-color:#FF8E00"/>
<stop offset="0.76" style="stop-color:#FF272D"/>
<stop offset="0.8" style="stop-color:#F92433"/>
<stop offset="0.84" style="stop-color:#E91C45"/>
<stop offset="0.89" style="stop-color:#CF0E62"/>
<stop offset="0.94" style="stop-color:#B5007F"/>
</radialGradient>
<radialGradient id="SVGID_7_" cx="215.2015" cy="308.3499" r="245.9198" gradientTransform="matrix(0.9734 0 0 0.9734 -29.4728 -291.7491)" gradientUnits="userSpaceOnUse">
<stop offset="0.28" style="stop-color:#FFEA00"/>
<stop offset="0.4" style="stop-color:#FFDD00"/>
<stop offset="0.63" style="stop-color:#FFBA00"/>
<stop offset="0.86" style="stop-color:#FF9100"/>
<stop offset="0.93" style="stop-color:#FF6711"/>
<stop offset="0.99" style="stop-color:#FF4A1D"/>
</radialGradient>
<linearGradient id="SVGID_8_" gradientUnits="userSpaceOnUse" x1="-9348.6621" y1="-6754.1943" x2="-9266.2168" y2="-6775.209" gradientTransform="matrix(1.22 0.12 -0.12 1.22 10634.7598 9460)">
<stop offset="0" style="stop-color:#C42482;stop-opacity:0.5"/>
<stop offset="0.47" style="stop-color:#FF272D;stop-opacity:0.5"/>
<stop offset="0.49" style="stop-color:#FF2C2C;stop-opacity:0.51"/>
<stop offset="0.68" style="stop-color:#FF7A1A;stop-opacity:0.72"/>
<stop offset="0.83" style="stop-color:#FFB20D;stop-opacity:0.87"/>
<stop offset="0.94" style="stop-color:#FFD605;stop-opacity:0.96"/>
<stop offset="1" style="stop-color:#FFE302"/>
</linearGradient>
<linearGradient id="SVGID_9_" gradientUnits="userSpaceOnUse" x1="103.0922" y1="-1126.7808" x2="88.439" y2="-1164.3336" gradientTransform="matrix(0.99 0.1 -0.1 0.99 -175.62 1176.2098)">
<stop offset="0" style="stop-color:#891551;stop-opacity:0.6"/>
<stop offset="1" style="stop-color:#C42482;stop-opacity:0"/>
</linearGradient>
<linearGradient id="SVGID_10_" gradientUnits="userSpaceOnUse" x1="-193.2793" y1="534.1769" x2="-168.0087" y2="562.8766" gradientTransform="matrix(0.99 0.1 -0.1 0.99 303.51 -384.2)">
<stop offset="1.000000e-02" style="stop-color:#891551;stop-opacity:0.5"/>
<stop offset="0.48" style="stop-color:#FF272D;stop-opacity:0.5"/>
<stop offset="1" style="stop-color:#FF272D;stop-opacity:0"/>
</linearGradient>
<linearGradient id="SVGID_11_" gradientUnits="userSpaceOnUse" x1="-144.6839" y1="583.6765" x2="-144.6651" y2="563.5964" gradientTransform="matrix(0.99 0.1 -0.1 0.99 303.51 -384.2)">
<stop offset="0" style="stop-color:#C42482"/>
<stop offset="8.000000e-02" style="stop-color:#C42482;stop-opacity:0.81"/>
<stop offset="0.21" style="stop-color:#C42482;stop-opacity:0.57"/>
<stop offset="0.33" style="stop-color:#C42482;stop-opacity:0.36"/>
<stop offset="0.45" style="stop-color:#C42482;stop-opacity:0.2"/>
<stop offset="0.56" style="stop-color:#C42482;stop-opacity:9.000000e-02"/>
<stop offset="0.67" style="stop-color:#C42482;stop-opacity:2.000000e-02"/>
<stop offset="0.77" style="stop-color:#C42482;stop-opacity:0"/>
</linearGradient>
<linearGradient id="SVGID_12_" gradientUnits="userSpaceOnUse" x1="166.5909" y1="295.7137" x2="248.6675" y2="479.2461" gradientTransform="matrix(1 0 0 1 0 -286)">
<stop offset="0" style="stop-color:#FFF14F"/>
<stop offset="0.27" style="stop-color:#FFEE4C"/>
<stop offset="0.45" style="stop-color:#FFE643"/>
<stop offset="0.61" style="stop-color:#FFD834"/>
<stop offset="0.76" style="stop-color:#FFC41E"/>
<stop offset="0.89" style="stop-color:#FFAB02"/>
<stop offset="0.9" style="stop-color:#FFA900"/>
<stop offset="0.95" style="stop-color:#FFA000"/>
<stop offset="1" style="stop-color:#FF9100"/>
</linearGradient>
<linearGradient id="SVGID_13_" gradientUnits="userSpaceOnUse" x1="182.8878" y1="401.2735" x2="144.0111" y2="505.6616" gradientTransform="matrix(1 0 0 1 0 -286)">
<stop offset="0" style="stop-color:#FF8E00"/>
<stop offset="4.000000e-02" style="stop-color:#FF8E00;stop-opacity:0.86"/>
<stop offset="8.000000e-02" style="stop-color:#FF8E00;stop-opacity:0.73"/>
<stop offset="0.13" style="stop-color:#FF8E00;stop-opacity:0.63"/>
<stop offset="0.18" style="stop-color:#FF8E00;stop-opacity:0.56"/>
<stop offset="0.23" style="stop-color:#FF8E00;stop-opacity:0.51"/>
<stop offset="0.28" style="stop-color:#FF8E00;stop-opacity:0.5"/>
<stop offset="0.39" style="stop-color:#FF8E00;stop-opacity:0.48"/>
<stop offset="0.52" style="stop-color:#FF8E00;stop-opacity:0.42"/>
<stop offset="0.68" style="stop-color:#FF8E00;stop-opacity:0.31"/>
<stop offset="0.84" style="stop-color:#FF8E00;stop-opacity:0.17"/>
<stop offset="1" style="stop-color:#FF8E00;stop-opacity:0"/>
</linearGradient>
</defs>
<g>
<path fill="url(#SVGID_1_)" d="M206.8,24.6c-6.4,7.5-9.4,24.3-2.9,41.4s16.5,13.4,22.7,30.8c8.2,23,4.4,53.9,4.4,53.9 s9.9,28.6,16.8-1.8C263.1,91.8,206.8,38.7,206.8,24.6z"/>
<path id="_Path_" fill="url(#_Path__1_)" d="M128.4,261.7c65.9,0,119.2-53.6,119.2-119.8S194.2,22.2,128.4,22.2S9.3,75.8 9.3,141.9
C9.2,208.1,62.6,261.7,128.4,261.7z"/>
<path
fill="url(#SVGID_2_)"
d="M217.7,215.8c-2.6,1.8-5.3,3.4-8.1,4.9c3.7-5.5,7.2-11.1,10.3-16.9c2.5-2.8,4.9-5.5,6.8-8.5
c0.9-1.5,2-3.2,3.1-5.3c6.7-12.1,14.1-31.6,14.3-51.6v-1.5c0-5-0.5-10.1-1.5-15c0.1,0.4,0.1,0.8,0.2,1.2c-0.1-0.3-0.1-0.6-0.2-0.9
c0.1,0.5,0.2,1.1,0.3,1.6c1.4,11.6,0.4,22.9-4.5,31.3c-0.1,0.1-0.2,0.2-0.2,0.4c2.5-12.7,3.4-26.7,0.6-40.7c0,0-1.1-6.8-9.5-27.5
c-4.8-11.9-13.4-21.7-20.9-28.8c-6.6-8.2-12.7-13.7-16-17.2c-6.9-7.3-9.8-12.8-11-16.3c-1-0.5-14.3-13.4-15.3-13.9
c-5.8,9-23.9,37-15.3,63.1c3.9,11.9,13.8,24.2,24.2,31.1c0.5,0.5,6.2,6.7,8.9,20.7c2.8,14.5,1.3,25.7-4.4,42.4
c-6.8,14.6-24.2,29.1-40.5,30.6c-34.8,3.2-47.6-17.5-47.6-17.5c12.4,5,26.2,3.9,34.6-1.2c8.4-5.2,13.5-9.1,17.7-7.6
c4.1,1.5,7.3-2.9,4.4-7.5c-4.6-7.1-13-10.7-21.3-9.3c-8.4,1.4-16.2,8.1-27.2,1.6c-0.7-0.4-1.4-0.9-2.1-1.4s2.4,0.7,1.6,0.2
c-2.1-1.2-6-3.7-6.9-4.6c-0.2-0.2,1.7,0.6,1.5,0.4c-10.3-8.5-9-14.3-8.7-17.9c0.3-2.9,2.1-6.6,5.3-8.1c1.5,0.8,2.5,1.5,2.5,1.5
s-0.7-1.3-1-2c0.1-0.1,0.2,0,0.4-0.1c1.3,0.6,4,2.2,5.5,3.1c1.9,1.3,2.5,2.5,2.5,2.5s0.5-0.3,0.1-1.4c-0.1-0.5-0.7-2-2.6-3.5h0.1
c1.1,0.6,2.2,1.4,3.2,2.2c0.5-1.9,1.5-3.9,1.3-7.5c-0.1-2.5-0.1-3.2-0.5-4.2c-0.4-0.8,0.2-1.2,0.9-0.3c-0.1-0.7-0.3-1.4-0.6-2v-0.1
c0.9-3,18.3-10.9,19.6-11.8c2.1-1.5,3.8-3.4,5.1-5.6c1-1.5,1.7-3.7,1.9-7c0.1-2.4-1-4-18.7-5.8c-4.8-0.5-7.7-4-9.3-7.2
c-0.3-0.7-0.6-1.3-0.9-2s-0.5-1.5-0.7-2.3c2.9-8.3,7.7-15.3,14.9-20.6c0.4-0.4-1.6,0.1-1.2-0.3c0.5-0.4,3.4-1.6,4-1.9
c0.7-0.3-2.9-1.9-6.1-1.5s-3.9,0.8-5.7,1.5c0.7-0.7,3-1.7,2.5-1.6c-3.5,0.5-7.8,2.6-11.5,4.9c0-0.4,0.1-0.8,0.2-1.2
c-1.7,0.7-6,3.7-7.2,6.2c0.1-0.5,0.1-1,0.1-1.5c-1.3,1.1-2.5,2.3-3.5,3.7L85,60.5c-10-4-18.9-4.3-26.3-2.5c-1.6-1.6-2.4-0.4-6.2-8.6
c-0.3-0.5,0.2,0.5,0,0c-0.6-1.6,0.4,2.1,0,0c-6.2,5-14.4,10.6-18.4,14.5c0,0.2,4.6-1.3,0,0c-1.6,0.5-1.5,1.4-1.7,10.1
c-0.1,0.7,0,1.4-0.1,2c-3.2,4-5.3,7.4-6.1,9.2c-4.1,7-8.6,18-12.9,35.3c1.9-4.7,4.2-9.2,6.9-13.5c-3.6,9.2-7.1,23.7-7.8,45.9
c0.9-4.6,2-9.1,3.4-13.6c-0.9,18.5,2.3,36.9,9.3,54c2.5,6.1,6.6,15.4,13.7,25.6c22.2,23.3,53.4,37.8,88,37.8
C162.9,256.7,195.4,240.9,217.7,215.8z"/>
<path fill="url(#SVGID_3_)" d="M190.9,232.7c43.7-5.1,63.1-50.1,38.2-51C206.7,181,170.2,235.1,190.9,232.7z"/>
<path fill="url(#SVGID_4_)" d="M232.3,172.5c30.1-17.5,22.2-55.3,22.2-55.3s-11.6,13.5-19.5,35C227.3,173.5,214.2,183.1,232.3,172.5
z"/>
<path fill="url(#SVGID_5_)" d="M136.8,255.1c42,13.4,78-19.7,55.8-30.7C172.4,214.5,116.9,248.8,136.8,255.1z"/>
<path
fill="url(#SVGID_6_)"
d="M235.5,188.6c1-1.4,2.4-6,3.6-8.1c7.4-12,7.5-21.5,7.5-21.7c4.5-22.3,4.1-31.5,1.3-48.3
c-2.2-13.6-11.9-33.1-20.3-42.4c-8.6-9.7-2.6-6.5-10.9-13.6c-7.3-8.1-14.5-16.2-18.3-19.4c-28-23.4-27.4-28.4-26.8-29.2
c-0.1,0.1-0.2,0.2-0.4,0.4c-0.3-1.3-0.6-2.4-0.6-2.4S155.2,19.1,152,44.6c-2.1,16.6,4.1,34,13.2,45.1c4.7,5.8,10,11,15.8,15.6l0,0
c6.8,9.8,10.6,21.9,10.6,34.9c0,32.6-26.4,58.9-59,58.9c-4.4,0-8.9-0.5-13.2-1.5c-15.4-2.9-24.2-10.7-28.7-16
c-2.5-3-3.6-5.2-3.6-5.2c13.8,4.9,29,3.9,38.3-1.2c9.3-5.2,15-9,19.6-7.5c4.5,1.5,8.1-2.9,4.9-7.4c-3.2-4.5-11.4-11-23.6-9.2
c-9.3,1.4-17.9,8-30.1,1.6c-0.8-0.4-1.6-0.9-2.3-1.3c-0.8-0.5,2.6,0.7,1.8,0.2c-2.4-1.2-6.6-3.7-7.7-4.6c-0.2-0.2,1.8,0.6,1.7,0.4
c-11.4-8.4-10-14.1-9.7-17.7c0.3-2.9,2.4-6.5,5.9-8c1.7,0.8,2.7,1.5,2.7,1.5s-0.7-1.3-1.1-2c0.1-0.1,0.3,0,0.4-0.1
c1.4,0.6,4.5,2.1,6.1,3.1c2.1,1.3,2.8,2.5,2.8,2.5s0.6-0.3,0.1-1.4c-0.2-0.5-0.8-2-2.9-3.5h0.1c1.2,0.6,2.4,1.4,3.5,2.2
c0.6-1.9,1.6-3.9,1.4-7.5c-0.1-2.5-0.1-3.2-0.6-4.1c-0.4-0.8,0.2-1.2,1-0.3c-0.1-0.7-0.4-1.3-0.7-2V110c1-3,20.3-10.8,21.7-11.7
c2.3-1.4,4.2-3.3,5.7-5.5c1.1-1.5,1.9-3.7,2.1-7c0.1-1.5-0.4-2.6-5.5-3.8c-3.1-0.7-7.8-1.3-15.2-2c-5.3-0.5-8.5-3.9-10.3-7.1
c-0.3-0.7-0.7-1.3-1-1.9c-0.3-0.7-0.6-1.5-0.8-2.2c3.2-8.4,9-15.5,16.5-20.4c0.4-0.4-1.7,0.1-1.3-0.3c0.5-0.4,3.8-1.6,4.4-1.9
c0.8-0.3-3.2-1.8-6.8-1.5c-3.6,0.4-4.3,0.7-6.3,1.5c0.8-0.7,3.3-1.6,2.7-1.6C101,45,96.2,47,92.1,49.3c0-0.4,0.1-0.8,0.2-1.2
c-1.9,0.7-6.6,3.7-8,6.2c0.1-0.5,0.1-1,0.1-1.4c-1.4,1.1-2.8,2.3-3.9,3.7l-0.1,0.1c-11.1-4-20.9-4.3-29.1-2.5
c-1.8-1.6-4.7-4.1-8.8-12.2c-0.3-0.5-0.4,1-0.6,0.5c-1.6-3.7-2.6-9.8-2.4-14c0,0-3.3,1.5-6,7.8c-0.5,1.1-0.8,1.8-1.2,2.4
c-0.2,0.2,0.3-2.1,0.3-1.9c-0.5,0.8-1.7,1.9-2.2,3.4c-0.4,1.1-0.9,1.7-1.2,3l-0.1,0.1c0-0.4,0.1-1.6,0-1.4c-1.3,2.6-2.4,5.3-3.3,8
c-1.5,4.8-3.2,11.4-3.5,20c-0.1,0.6,0,1.4-0.1,2c-3.5,4-5.9,7.4-6.8,9.1c-4.5,7-9.5,17.8-14.3,35c2.1-4.7,4.7-9.2,7.7-13.4
c-4,9.1-7.9,23.5-8.7,45.5c1-4.6,2.2-9.1,3.7-13.5c-0.7,14.7,1,33,10.3,53.6c5.5,12.1,18.2,36.7,49.3,55.9l0,0
c0,0,10.6,7.9,28.7,13.8c1.3,0.5,2.7,1,4.1,1.4c-0.4-0.2-0.9-0.4-1.3-0.5c12.1,3.6,24.6,5.5,37.3,5.5c47,0,60.9-18.9,60.9-18.9
l-0.1,0.1c0.7-0.6,1.3-1.3,1.9-1.9c-7.4,7-24.4,7.5-30.7,7c10.8-3.2,17.9-5.9,31.7-11.1c1.6-0.6,3.3-1.3,5-2.1l0.5-0.3
c0.3-0.2,0.7-0.3,1-0.5c6.7-3.2,13.1-7.1,18.9-11.8c13.9-11.1,16.9-21.9,18.5-29c-0.2,0.7-0.9,2.3-1.4,3.3
c-3.6,7.6-11.5,12.4-20.1,16.4c4.1-5.4,7.9-11,11.4-16.8C232.5,195.9,233.3,191.5,235.5,188.6z"/>
<path
fill="url(#SVGID_7_)"
d="M218.6,215.1c5.7-6.2,10.7-13.4,14.6-21.5c9.9-20.8,25.2-55.5,13.2-91.6
c-9.5-28.6-22.6-44.2-39.2-59.5c-27-24.8-34.5-35.9-34.5-42.5c0,0-31.2,34.7-17.7,71s41.2,34.9,59.5,72.7
c21.6,44.5-17.4,93.1-49.7,106.7c2-0.4,71.7-16.2,75.4-56.1C240,195,238.4,206.1,218.6,215.1z"/>
<path fill="url(#SVGID_8_)" d="M128.2,85.8c0.1-2.4-1.1-3.9-20.6-5.8c-8-0.7-11.1-8.1-12-11.3c-2.8,7.4-4,15.2-3.4,24.6
c0.4,6.2,4.6,12.8,6.5,16.6c0,0,0.4-0.6,0.6-0.8c3.7-3.9,19.3-9.8,20.8-10.6C121.8,97.5,128,93,128.2,85.8z"/>
<path
fill="url(#SVGID_9_)"
d="M42.5,42c-0.3-0.5-0.4,1-0.6,0.5c-1.6-3.7-2.6-9.7-2.3-14c0,0-3.3,1.5-6,7.8
c-0.5,1.1-0.8,1.8-1.2,2.4c-0.2,0.2,0.3-2.1,0.3-1.9c-0.5,0.8-1.7,1.9-2.2,3.3c-0.4,1.1-0.9,1.8-1.2,3.2c-0.1,0.4,0.1-1.7,0-1.4
c-6.4,12.3-7.6,30.9-6.9,30.1C36,57.5,51.5,54.1,51.5,54.1C49.6,52.9,46,49.3,42.5,42L42.5,42z"/>
<path fill="url(#SVGID_10_)" d="M93.9,193.4c-18.7-8-40-19.3-39.2-44.9c1.1-33.7,31.5-27.1,31.5-27.1c-1.1,0.3-4.2,2.5-5.3,4.8
c-1.1,2.9-3.2,9.5,3.1,16.4c10,10.8-20.5,25.6,26.5,53.6C111.7,196.8,99.5,195.8,93.9,193.4L93.9,193.4z"/>
<path
fill="url(#SVGID_11_)"
d="M87.3,176.6c13.3,4.6,28.7,3.8,38-1.3c6.2-3.5,14.2-9,19-7.6c-4.2-1.7-7.4-2.5-11.3-2.6
c-0.7,0-1.4,0-2.1-0.1c-1.4,0-2.8,0.1-4.2,0.2c-2.4,0.2-5,1.7-7.4,1.5c-0.1,0,2.3-1,2.1-1c-1.3,0.3-2.7,0.3-4.1,0.5
c-0.9,0.1-1.7,0.2-2.7,0.3c-27.7,2.3-51-15-51-15C61.6,158.1,72.5,171.4,87.3,176.6L87.3,176.6z"/>
<path
fill="url(#SVGID_12_)"
d="M218.5,215.3c28-27.5,42.1-60.8,36.1-98.3c0,0,2.4,19.2-6.7,38.8c4.4-19.2,4.9-43-6.7-67.7
c-15.4-32.9-40.8-50.3-50.5-57.5c-14.7-11-20.8-22.1-20.9-24.4c-4.4,9-17.7,39.8-1.4,66.3c15.2,24.9,39.2,32.2,55.9,55
C255.3,169.6,218.5,215.3,218.5,215.3z"/>
<path fill="url(#SVGID_13_)" d="M214.5,143.8c-9.8-20.2-22-29-33.5-38.5c1.3,1.9,1.7,2.5,2.4,3.8c10.2,10.8,25.1,37.2,14.3,70.4
c-20.5,62.4-102.3,33-110.9,24.8c3.5,36.1,63.9,53.4,103.3,30C212.4,212.9,230.5,176.9,214.5,143.8z"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 15 KiB

View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="256px" height="256px" viewBox="0 0 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
<g>
<path d="M218.123122,218.127392 L180.191928,218.127392 L180.191928,158.724263 C180.191928,144.559023 179.939053,126.323993 160.463756,126.323993 C140.707926,126.323993 137.685284,141.757585 137.685284,157.692986 L137.685284,218.123441 L99.7540894,218.123441 L99.7540894,95.9665207 L136.168036,95.9665207 L136.168036,112.660562 L136.677736,112.660562 C144.102746,99.9650027 157.908637,92.3824528 172.605689,92.9280076 C211.050535,92.9280076 218.138927,118.216023 218.138927,151.114151 L218.123122,218.127392 Z M56.9550587,79.2685282 C44.7981969,79.2707099 34.9413443,69.4171797 34.9391618,57.260052 C34.93698,45.1029244 44.7902948,35.2458562 56.9471566,35.2436736 C69.1040185,35.2414916 78.9608713,45.0950217 78.963054,57.2521493 C78.9641017,63.090208 76.6459976,68.6895714 72.5186979,72.8184433 C68.3913982,76.9473153 62.7929898,79.26748 56.9550587,79.2685282 M75.9206558,218.127392 L37.94995,218.127392 L37.94995,95.9665207 L75.9206558,95.9665207 L75.9206558,218.127392 Z M237.033403,0.0182577091 L18.8895249,0.0182577091 C8.57959469,-0.0980923971 0.124827038,8.16056231 -0.001,18.4706066 L-0.001,237.524091 C0.120519052,247.839103 8.57460631,256.105934 18.8895249,255.9977 L237.033403,255.9977 C247.368728,256.125818 255.855922,247.859464 255.999,237.524091 L255.999,18.4548016 C255.851624,8.12438979 247.363742,-0.133792868 237.033403,0.000790807055" fill="#0A66C2"></path>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.6 KiB

View File

@ -0,0 +1,20 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="256px" height="256px" viewBox="0 0 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
<defs>
<radialGradient cx="48.3397178%" cy="49.4186213%" fx="48.3397178%" fy="49.4186213%" r="70.4380887%" gradientTransform="translate(0.483397,0.494186),scale(1.000000,0.550875),translate(-0.483397,-0.494186)" id="radialGradient-1">
<stop stop-color="#000000" offset="0%"></stop>
<stop stop-color="#000000" stop-opacity="0" offset="100%"></stop>
</radialGradient>
</defs>
<g>
<polygon fill="#000000" fill-rule="nonzero" points="1.80114185e-07 1.13710799e-06 255.904254 1.13710799e-06 255.904254 255.904255 1.80114171e-07 255.904255"></polygon>
<path d="M141.676338,41.2746569 L141.608906,79.6360396 L141.541118,117.997421 L138.385008,109.0921 C138.383912,109.089031 138.380021,109.077687 138.378943,109.074618 L134.30055,194.477217 C138.310388,205.800934 140.458766,211.845937 140.482897,211.870064 C140.51447,211.901649 142.799605,212.039499 145.561,212.176541 C153.927405,212.591702 164.29504,213.481319 172.159936,214.45853 C173.98096,214.684771 175.548152,214.800631 175.642501,214.716128 C175.736852,214.631624 175.788229,175.572658 175.756672,127.918505 L175.69923,41.2746569 L158.687784,41.2746569 L141.676338,41.2746569 Z" stroke="#000000" stroke-width="2.9562209" fill="#B1060F"></path>
<path d="M80.1382878,41.1604861 L80.1382878,127.892104 C80.1382878,175.594555 80.1849645,214.670743 80.242112,214.727902 C80.2992558,214.785042 83.2534257,214.50614 86.8069318,214.108168 C90.3604343,213.710178 95.2716247,213.215292 97.7205879,213.008561 C101.476527,212.691477 112.690651,211.970454 113.989212,211.962472 C114.366954,211.960097 114.391182,210.011234 114.445895,175.226595 L114.503693,138.493217 L117.217033,146.170131 C117.636362,147.356673 117.767894,147.727198 118.176424,148.883116 L122.253748,63.5015679 C121.389836,61.0590106 121.842711,62.3412234 120.852658,59.5419824 C117.521259,50.1228923 114.694332,42.1337874 114.570412,41.7884254 L114.344924,41.1604861 L97.2417849,41.1604861 L80.1382878,41.1604861 Z" stroke="#000000" stroke-width="2.9562209" fill="#B1060F"></path>
<path d="M80.1382787,41.1604861 L80.1382878,89.8454048 L114.434478,180.820963 C114.438058,178.736175 114.44215,177.609688 114.445895,175.226595 L114.503693,138.493217 L117.217033,146.170131 C132.320656,188.907688 140.435174,211.82235 140.482897,211.870064 C140.51447,211.901649 142.799605,212.039499 145.561,212.176541 C153.927405,212.591702 164.29504,213.481319 172.159936,214.45853 C173.98096,214.684771 175.548152,214.800631 175.642501,214.716128 C175.70735,214.658045 175.749683,195.506553 175.760954,168.489092 L141.625319,70.3489604 L141.608897,79.6360396 L141.541109,117.997421 L138.384999,109.0921 C135.301137,100.390624 133.24206,94.5714036 120.852649,59.5419824 C117.52125,50.1228923 114.694323,42.1337874 114.570403,41.7884254 L114.344915,41.1604861 L97.2417758,41.1604861 L80.1382787,41.1604861 Z" fill="url(#radialGradient-1)"></path>
<path d="M80.1390021,41.160477 L114.503693,138.537458 L114.503693,138.493217 L117.217033,146.170131 C132.320656,188.907688 140.435174,211.82235 140.482897,211.870064 C140.51447,211.901649 142.799605,212.039499 145.561,212.176541 C153.927405,212.591702 164.29504,213.481319 172.159936,214.45853 C173.971627,214.683611 175.530793,214.799226 175.639648,214.717197 L141.541118,117.979583 L141.541118,117.997412 L138.385008,109.092091 C135.301146,100.390615 133.242069,94.5713945 120.852658,59.5419732 C117.521259,50.1228832 114.694332,42.1337783 114.570412,41.7884163 L114.344924,41.160477 L97.2417849,41.160477 L80.1390021,41.160477 Z" fill="#E50914"></path>
<path d="M141.676338,41.2746569 L141.608906,79.6360396 L141.541118,117.997421 L138.385008,109.0921 C138.383912,109.089031 138.380021,109.077687 138.378943,109.074618 L134.30055,194.477217 C138.310388,205.800934 140.458766,211.845937 140.482897,211.870064 C140.51447,211.901649 142.799605,212.039499 145.561,212.176541 C153.927405,212.591702 164.29504,213.481319 172.159936,214.45853 C173.98096,214.684771 175.548152,214.800631 175.642501,214.716128 C175.736852,214.631624 175.788229,175.572658 175.756672,127.918505 L175.69923,41.2746569 L158.687784,41.2746569 L141.676338,41.2746569 Z" stroke="#000000" stroke-width="2.9562209" fill="#B1060F"></path>
<path d="M80.1382878,41.1604861 L80.1382878,127.892104 C80.1382878,175.594555 80.1849645,214.670743 80.242112,214.727902 C80.2992558,214.785042 83.2534257,214.50614 86.8069318,214.108168 C90.3604343,213.710178 95.2716247,213.215292 97.7205879,213.008561 C101.476527,212.691477 112.690651,211.970454 113.989212,211.962472 C114.366954,211.960097 114.391182,210.011234 114.445895,175.226595 L114.503693,138.493217 L117.217033,146.170131 C117.636362,147.356673 117.767894,147.727198 118.176424,148.883116 L122.253748,63.5015679 C121.389836,61.0590106 121.842711,62.3412234 120.852658,59.5419824 C117.521259,50.1228923 114.694332,42.1337874 114.570412,41.7884254 L114.344924,41.1604861 L97.2417849,41.1604861 L80.1382878,41.1604861 Z" stroke="#000000" stroke-width="2.9562209" fill="#B1060F"></path>
<path d="M80.1382787,41.1604861 L80.1382878,89.8454048 L114.434478,180.820963 C114.438058,178.736175 114.44215,177.609688 114.445895,175.226595 L114.503693,138.493217 L117.217033,146.170131 C132.320656,188.907688 140.435174,211.82235 140.482897,211.870064 C140.51447,211.901649 142.799605,212.039499 145.561,212.176541 C153.927405,212.591702 164.29504,213.481319 172.159936,214.45853 C173.98096,214.684771 175.548152,214.800631 175.642501,214.716128 C175.70735,214.658045 175.749683,195.506553 175.760954,168.489092 L141.625319,70.3489604 L141.608897,79.6360396 L141.541109,117.997421 L138.384999,109.0921 C135.301137,100.390624 133.24206,94.5714036 120.852649,59.5419824 C117.52125,50.1228923 114.694323,42.1337874 114.570403,41.7884254 L114.344915,41.1604861 L97.2417758,41.1604861 L80.1382787,41.1604861 Z" fill="url(#radialGradient-1)"></path>
<path d="M80.1390021,41.160477 L114.503693,138.537458 L114.503693,138.493217 L117.217033,146.170131 C132.320656,188.907688 140.435174,211.82235 140.482897,211.870064 C140.51447,211.901649 142.799605,212.039499 145.561,212.176541 C153.927405,212.591702 164.29504,213.481319 172.159936,214.45853 C173.971627,214.683611 175.530793,214.799226 175.639648,214.717197 L141.541118,117.979583 L141.541118,117.997412 L138.385008,109.092091 C135.301146,100.390615 133.242069,94.5713945 120.852658,59.5419732 C117.521259,50.1228832 114.694332,42.1337783 114.570412,41.7884163 L114.344924,41.160477 L97.2417849,41.160477 L80.1390021,41.160477 Z" fill="#E50914"></path>
</g>
</svg>

After

Width:  |  Height:  |  Size: 6.6 KiB

View File

@ -23,5 +23,5 @@
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #48b7b0;
background: #333333;
}