Marks/lux_service
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update

Browse Source
This commit is contained in:
George 2023-11-19 21:50:23 +03:00
parent b1e475c97e
commit 709f56a7e9
4 changed files with 216 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.js
View File

@ -3,7 +3,7 @@ import NavMenu from "./Components/NavMenu";
function App() { function App() {
return ( return (
<div className="bg-black h-[450vh] text-white font-main"> <div className="bg-black text-white font-main">
<NavMenu /> <NavMenu />
<AboutSection /> <AboutSection />
</div> </div>

262
src/Components/AboutSection.jsx
View File

@ -1,4 +1,4 @@
import React, { useState } from 'react'; import React, { useRef, useState } from 'react';
import {motion, useScroll, useMotionValueEvent, useAnimationControls, useTransform} from "framer-motion" import {motion, useScroll, useMotionValueEvent, useAnimationControls, useTransform} from "framer-motion"
import yachtImg from "../Images/yacht.jpg" import yachtImg from "../Images/yacht.jpg"
import stock_man_img from "../Images/stock_about_placeholder.jpg" import stock_man_img from "../Images/stock_about_placeholder.jpg"
@ -7,139 +7,179 @@ import telegram_icon from "../Images/telegram_icon.png"
const AboutSection = () => { const AboutSection = () => {
const { scrollYProgress } = useScroll(); const { scrollYProgress } = useScroll();
const serviceBlockRef = useRef(null);
const {serviceScrollYProgress} = useScroll(
{
target: serviceBlockRef,
offset: ["end end", "start start"],
}
);
const menu_offset = useTransform(scrollYProgress, [0,1], ["-100%", "0%"]); const menu_offset = useTransform(scrollYProgress, [0,1], ["-100%", "0%"]);
const service_offset = useTransform(scrollYProgress, [0.6,0.8], ["0%", "-20%"]);
const private_offset = useTransform(scrollYProgress, [0.6,0.8], ["0%", "30%"]);
// const menu_offset2 = useTransform(scrollYProgress, [0,1], ["-50%", "0%"]); // const menu_offset2 = useTransform(scrollYProgress, [0,1], ["-50%", "0%"]);
return ( return (
<> <>
<div className='absolute inset-0'> <div className='absolute inset-0'>
<img src={yachtImg} alt="yacht" className='w-full h-full object-cover brightness-[0.2] contrast-[1.1]' /> <img src={yachtImg} alt="yacht" className='w-full h-full object-cover brightness-[0.2] contrast-[1.1]' />
</div> </div>
<div className='absolute inset-0 flex justify-center'> <div className='w-full flex justify-center'>
<div className='flex flex-col justify-end w-full h-full max-w-[1920px] gap-8 p-4 pb-[40%] md:gap-16 md:p-12 lg:gap-16 lg:p-12 2xl:gap-28 2xl:p-20'> <div className='w-full max-w-[1920px] flex flex-col'>
<div className='flex items-center md:h-[230px] lg:h-[280px]'> <div className='flex justify-center w-full h-screen relative'>
<h1 className='text-4xl md:text-6xl lg:text-7xl xl:text-8xl 2xl:text-9xl font-bold'> <div className='flex flex-col justify-end w-full h-full max-w-[1920px] gap-8 p-4 pb-[40%] md:gap-16 md:p-12 lg:gap-16 lg:p-12 2xl:gap-28 2xl:p-20'>
Консьерж-сервис для <span className=''>VIP</span> клиентов <div className='flex items-center md:h-[230px] lg:h-[280px]'>
</h1> <h1 className='text-4xl md:text-6xl lg:text-7xl xl:text-8xl 2xl:text-9xl font-bold'>
Консьерж-сервис для <span className=''>VIP</span> клиентов
</h1>
</div>
<div className='flex text-right self-end justify-end items-center max-w-[300px] lg:max-w-[400px]'>
<p className='text-xl md:text-2xl lg:text-3xl'>
Добро пожаловать в мир непревзойденной роскоши и удобства.
</p>
</div>
</div>
</div> </div>
<div className='flex text-right self-end justify-end items-center max-w-[300px] lg:max-w-[400px]'> <div className='w-full flex flex-col'>
<p className='text-xl md:text-2xl lg:text-3xl'> <div className='flex w-full justify-center items-center overflow-hidden gap-20 border-b-[1px] border-gray-700'>
Добро пожаловать в мир непревзойденной роскоши и удобства. <motion.h1 className='text-[11rem] whitespace-nowrap font-semibold'
</p> style={{translateX: menu_offset}}
</div> >
</div> Lorem ipsum
</div> </motion.h1>
<div className='absolute top-[100vh] left-0 right-0 w-full flex flex-col'> <motion.h1 className='text-[11rem] whitespace-nowrap font-semibold'
<div className='flex w-full justify-center items-center overflow-hidden gap-20 border-b-[1px] border-gray-700'> style={{translateX: menu_offset}}
<motion.h1 className='text-[11rem] whitespace-nowrap font-semibold' >
style={{translateX: menu_offset}} Lorem ipsum
> </motion.h1>
Lorem ipsum <motion.h1 className='text-[11rem] whitespace-nowrap font-semibold'
</motion.h1> style={{translateX: menu_offset}}
<motion.h1 className='text-[11rem] whitespace-nowrap font-semibold' >
style={{translateX: menu_offset}} Lorem ipsum
> </motion.h1>
Lorem ipsum </div>
</motion.h1> <div className='flex w-full h-[100vh] p-16'>
<motion.h1 className='text-[11rem] whitespace-nowrap font-semibold' <div className='w-[49%] flex h-full items-center justify-center text-center text-2xl px-[6%]'>
style={{translateX: menu_offset}} Lorem ipsum dolor sit amet consectetur adipisicing elit.
> Placeat tempore aperiam perspiciatis et rerum perferendis harum,
Lorem ipsum repudiandae recusandae minus, quia optio! Voluptatem animi voluptate quia! Sed rem perferendis nesciunt et?
</motion.h1> </div>
</div> <div className='h-full w-[1px] flex justify-center'>
<div className='flex w-full h-[100vh] p-16'> <div className='h-full w-full bg-gray-700 '>
<div className='w-[49%] flex h-full items-center justify-center text-center text-2xl px-[6%]'>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Placeat tempore aperiam perspiciatis et rerum perferendis harum,
repudiandae recusandae minus, quia optio! Voluptatem animi voluptate quia! Sed rem perferendis nesciunt et?
</div>
<div className='h-full w-[1px] flex justify-center'>
<div className='h-full w-full bg-gray-700 '>
</div> </div>
</div> </div>
<div className='w-[49%] px-[7%] flex flex-col gap-16'> <div className='w-[49%] px-[7%] flex flex-col gap-16'>
<img src={stock_man_img} alt="man" className='object-cover rounded-[20%] w-full h-full' /> <img src={stock_man_img} alt="man" className='object-cover rounded-[20%] w-full h-[80%]' />
<div className='w-full h-[1px] bg-gray-700 flex-shrink-0'></div> <div className='w-full h-[1px] bg-gray-700 flex-shrink-0'></div>
<div className='w-full h-[20%] flex justify-center items-start text-left'> <div className='w-full h-[20%] flex-shrink-0 flex justify-center items-start text-left'>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit.
Placeat tempore aperiam perspiciatis et rerum perferendis harum, Placeat tempore aperiam perspiciatis et rerum perferendis harum,
repudiandae recusandae minus, quia optio! Voluptatem animi voluptate quia! Sed rem perferendis nesciunt et? repudiandae recusandae minus, quia optio! Voluptatem animi voluptate quia! Sed rem perferendis nesciunt et?
</div> </div>
</div>
</div>
<div className='flex h-screen w-full flex-col px-20 gap-4'>
<div className='w-full h-[50%] flex gap-4'>
<div className='relative w-[33%] h-full flex bg-white rounded-2xl overflow-hidden group'>
<img src={yachtImg} alt="tile" className='brightness-[0.5] group-hover:scale-110 transition-all duration-300 contrast-[1.1] absolute inset-0 w-full h-full object-cover' />
<div className='absolute inset-0 w-full h-full flex justify-center items-center'>
<p className='text-3xl'>LUXURY CARS</p>
</div> </div>
</div> </div>
<div className='relative w-[33%] h-full flex bg-white rounded-2xl overflow-hidden group'> <div className='flex h-screen w-full flex-col px-20 gap-4'>
<img src={yachtImg} alt="tile" className='brightness-[0.5] group-hover:scale-110 transition-all duration-300 contrast-[1.1] absolute inset-0 w-full h-full object-cover' /> <div className='w-full h-[50%] flex gap-4'>
<div className='absolute inset-0 w-full h-full flex justify-center items-center'> <div className='relative w-[33%] h-full flex bg-white rounded-2xl overflow-hidden group'>
<p className='text-3xl'>FLIGHTS</p> <img src={yachtImg} alt="tile" className='brightness-[0.5] group-hover:scale-110 transition-all duration-300 contrast-[1.1] absolute inset-0 w-full h-full object-cover' />
<div className='absolute inset-0 w-full h-full flex justify-center items-center'>
<p className='text-3xl'>LUXURY CARS</p>
</div>
</div>
<div className='relative w-[33%] h-full flex bg-white rounded-2xl overflow-hidden group'>
<img src={yachtImg} alt="tile" className='brightness-[0.5] group-hover:scale-110 transition-all duration-300 contrast-[1.1] absolute inset-0 w-full h-full object-cover' />
<div className='absolute inset-0 w-full h-full flex justify-center items-center'>
<p className='text-3xl'>FLIGHTS</p>
</div>
</div>
<div className='relative w-[33%] h-full flex bg-white rounded-2xl overflow-hidden group'>
<img src={yachtImg} alt="tile" className='brightness-[0.5] group-hover:scale-110 transition-all duration-300 contrast-[1.1] absolute inset-0 w-full h-full object-cover' />
<div className='absolute inset-0 w-full h-full flex justify-center items-center'>
<p className='text-3xl'>YACHTS</p>
</div>
</div>
</div>
<div className='w-full h-[50%] flex'>
<div className='relative w-full h-full flex bg-white rounded-2xl overflow-hidden group'>
<img src={yachtImg} alt="tile" className='brightness-[0.5] group-hover:scale-110 transition-all duration-300 contrast-[1.1] absolute inset-0 w-full h-full object-cover' />
<div className='absolute inset-0 w-full h-full flex justify-center items-center'>
{/* <p className='text-3xl'>YACHTS</p> */}
</div>
</div>
</div> </div>
</div> </div>
<div className='relative w-[33%] h-full flex bg-white rounded-2xl overflow-hidden group'> <div className='h-[400px] w-full flex justify-between items-center px-20'>
<img src={yachtImg} alt="tile" className='brightness-[0.5] group-hover:scale-110 transition-all duration-300 contrast-[1.1] absolute inset-0 w-full h-full object-cover' /> <p className='text-2xl w-[40%]'>
<div className='absolute inset-0 w-full h-full flex justify-center items-center'> Lorem ipsum dolor sit, amet consectetur adipisicing elit.
<p className='text-3xl'>YACHTS</p> Quos fugiat aspernatur neque illo molestias reiciendis quia,
rem tempora repellat consequuntur repellendus provident numquam ipsam dicta laudantium ab, omnis veritatis minima!
</p>
<div className='flex w-[300px] h-full items-center justify-center'>
<div className='w-[100px] cursor-pointer group h-[100px] border-[2px] hover:border-gray-300 transition-all duration-300 rounded-full border-gray-500 bg-transparent flex justify-center items-center'>
<img src={telegram_icon} alt="telegram" className='object-cover w-[40%] h-[40%] group-hover:scale-110 transition-all duration-300' />
</div>
</div> </div>
</div> </div>
</div> <div ref={serviceBlockRef} className='h-[90vh] w-full px-20 flex gap-12'>
<div className='w-full h-[50%] flex'> <div className='h-full w-[50%] flex flex-col justify-end items-end gap-8'>
<div className='relative w-full h-full flex bg-white rounded-2xl overflow-hidden group'> <motion.h2 className='text-9xl self-start' style={{translateX: private_offset}}>
<img src={yachtImg} alt="tile" className='brightness-[0.5] group-hover:scale-110 transition-all duration-300 contrast-[1.1] absolute inset-0 w-full h-full object-cover' /> PRIVATE
<div className='absolute inset-0 w-full h-full flex justify-center items-center'> </motion.h2>
{/* <p className='text-3xl'>YACHTS</p> */} <div className='relative w-[70%] h-[70%] flex bg-white rounded-2xl overflow-hidden group'>
<img src={yachtImg} alt="tile" className='brightness-[0.5] group-hover:scale-110 transition-all duration-300 contrast-[1.1] absolute inset-0 w-full h-full object-cover' />
<div className='absolute inset-0 w-full h-full flex justify-center items-center'>
{/* <p className='text-3xl'>YACHTS</p> */}
</div>
</div>
</div>
<div className='h-full w-[50%] flex flex-col justify-start gap-8'>
<motion.h2 className='text-9xl text-right' style={{translateX: service_offset}}>
SERVICE
</motion.h2>
<div className='relative w-[70%] h-[70%] flex bg-white rounded-2xl overflow-hidden group'>
<img src={yachtImg} alt="tile" className='brightness-[0.5] group-hover:scale-110 transition-all duration-300 contrast-[1.1] absolute inset-0 w-full h-full object-cover' />
<div className='absolute inset-0 w-full h-full flex justify-center items-center'>
{/* <p className='text-3xl'>YACHTS</p> */}
</div>
</div>
</div> </div>
</div> </div>
</div> <div className='h-[400px] w-full flex justify-center items-center px-20'>
</div> <p className='text-2xl w-[800px] text-center'>
<div className='h-[400px] w-full flex justify-between items-center px-20'> Lorem ipsum dolor sit, amet consectetur adipisicing elit.
<p className='text-2xl w-[40%]'> Quos fugiat aspernatur neque illo molestias reiciendis quia,
Lorem ipsum dolor sit, amet consectetur adipisicing elit. rem tempora repellat consequuntur repellendus provident numquam ipsam dicta laudantium ab, omnis veritatis minima!
Quos fugiat aspernatur neque illo molestias reiciendis quia, </p>
rem tempora repellat consequuntur repellendus provident numquam ipsam dicta laudantium ab, omnis veritatis minima!
</p>
<div className='flex w-[300px] h-full items-center justify-center'>
<div className='w-[100px] cursor-pointer group h-[100px] border-[2px] hover:border-gray-300 transition-all duration-300 rounded-full border-gray-500 bg-transparent flex justify-center items-center'>
<img src={telegram_icon} alt="telegram" className='object-cover w-[40%] h-[40%] group-hover:scale-110 transition-all duration-300' />
</div> </div>
</div> <div className='w-full flex flex-col gap-8 h-[50vh] px-20 py-16'>
</div> <h2 className='text-8xl'>Если заинтересовались</h2>
<div className='h-[100vh] w-full px-20 flex gap-12'> <div className='border-b-[1px] border-gray-700 w-[50%] h-[1px]'></div>
<div className='h-full w-[50%] flex flex-col justify-end items-end gap-8'> <div className='w-full h-full flex'>
<h2 className='text-9xl self-start'> <div className='flex w-[40%] h-full text-2xl'>
PRIVATE <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magni maiores reiciendis asperiores dolore,
</h2> illum doloremque placeat atque libero? Incidunt, itaque esse ea non velit exercitationem autem totam aspernatur ad. Nesciunt.
<div className='relative w-[70%] h-[70%] flex bg-white rounded-2xl overflow-hidden group'> </p>
<img src={yachtImg} alt="tile" className='brightness-[0.5] group-hover:scale-110 transition-all duration-300 contrast-[1.1] absolute inset-0 w-full h-full object-cover' /> </div>
<div className='absolute inset-0 w-full h-full flex justify-center items-center'>
{/* <p className='text-3xl'>YACHTS</p> */}
</div> </div>
<button className='w-[250px] h-[60px] text-xl flex-shrink-0 rounded-xl border-[1px] border-gray-700 transition-all duration-300 hover:border-gray-400'>
Давайте поговорим
</button>
</div> </div>
</div> <footer className='w-full h-[50vh] flex p-20'>
<div className='h-full w-[50%] flex flex-col justify-start gap-8'> <div className='flex w-full h-full flex-col relative px-8'>
<h2 className='text-9xl text-right'> <p className='text-2xl'>+9 999 999-99-99</p>
SERVICE <p className='text-2xl opacity-50 max-w-[50%]'>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis quas accusamus quis commodi</p>
</h2>
<div className='relative w-[70%] h-[70%] flex bg-white rounded-2xl overflow-hidden group'>
<img src={yachtImg} alt="tile" className='brightness-[0.5] group-hover:scale-110 transition-all duration-300 contrast-[1.1] absolute inset-0 w-full h-full object-cover' />
<div className='absolute inset-0 w-full h-full flex justify-center items-center'>
{/* <p className='text-3xl'>YACHTS</p> */}
</div> </div>
</div> <div className='w-[1px] h-full flex-shrink-0 bg-gray-700'/>
<div className='flex w-full h-full flex-col relative px-8'>
<p className='text-2xl opacity-50 max-w-[65%]'>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis quas accusamus quis commodi</p>
<button className='absolute left-8 bottom-0 w-[250px] h-[60px] text-xl flex-shrink-0 rounded-xl border-[1px] border-gray-700 transition-all duration-300 hover:border-gray-400'>
Свяжитесь с нами
</button>
</div>
</footer>
</div> </div>
</div> </div>
<div className='h-[400px] w-full flex justify-center items-center px-20 border-b-[1px] border-gray-700'>
<p className='text-2xl w-[800px] text-center'>
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Quos fugiat aspernatur neque illo molestias reiciendis quia,
rem tempora repellat consequuntur repellendus provident numquam ipsam dicta laudantium ab, omnis veritatis minima!
</p>
</div>
</div> </div>
</> </>
); );

14
src/Components/NavMenu.jsx
View File

@ -47,7 +47,7 @@ const NavMenu = () => {
}; };
return ( return (
<> <>
<motion.div className={'hidden lg:flex sticky top-0 left-0 right-0 w-full px-12 h-24 transition-all duration-100 bg-transparent z-10 items-center text-xl select-none ' <motion.div className={'hidden lg:flex fixed top-0 left-0 right-0 w-full px-12 h-24 transition-all duration-100 bg-transparent z-10 items-center text-xl select-none '
+ (scrollPosition > 0.0 ? "justify-end":"justify-center")} + (scrollPosition > 0.0 ? "justify-end":"justify-center")}
// initial={{y:100, opacity: 0.1}} // initial={{y:100, opacity: 0.1}}
// animate={{y: 0, opacity:1.0}} // animate={{y: 0, opacity:1.0}}
@ -64,16 +64,16 @@ const NavMenu = () => {
initial={{left: "50%", translateX: "-50%", top: "50%", translateY: "-50%"}} initial={{left: "50%", translateX: "-50%", top: "50%", translateY: "-50%"}}
animate={animControls} animate={animControls}
> >
<a href="##" className='hover:opacity-50 transition-all duration-100 w-[55px]'>О нас</a> <a href="##" className='hover:opacity-50 transition-all duration-100 flex-shrink-0'>О нас</a>
<a href="##" className='hover:opacity-50 transition-all duration-100'>Сервисы</a> <a href="##" className='hover:opacity-50 transition-all duration-100 flex-shrink-0'>Сервисы</a>
<a href="##" className='hover:opacity-50 transition-all duration-100'>Шаги</a> {/* <a href="##" className='hover:opacity-50 transition-all duration-100 flex-shrink-0'>Шаги</a> */}
<a href="##" className='hover:opacity-50 transition-all duration-100'>Контакты</a> <a href="##" className='hover:opacity-50 transition-all duration-100 flex-shrink-0'>Контакты</a>
</motion.nav> </motion.nav>
</div> </div>
</div> </div>
</div> </div>
</motion.div> </motion.div>
<motion.div className={'flex lg:hidden bg-black bg-opacity-30 justify-between sticky top-0 left-0 right-0 w-full px-12 h-16 transition-all duration-100 z-10 items-center text-xl select-none'}> <motion.div className={'flex lg:hidden bg-black bg-opacity-30 justify-between fixed top-0 left-0 right-0 w-full px-12 h-16 transition-all duration-100 z-10 items-center text-xl select-none'}>
<p className='text-3xl font-bold '>SanxPay</p> <p className='text-3xl font-bold '>SanxPay</p>
<div id='menu-icon'> <div id='menu-icon'>
<button onClick={onClick}> <button onClick={onClick}>
@ -98,7 +98,7 @@ const NavMenu = () => {
transition={{type: "tween", duration: 0.3}}> transition={{type: "tween", duration: 0.3}}>
<a href="##" className='hover:opacity-50 transition-all duration-100 w-[55px]'>О нас</a> <a href="##" className='hover:opacity-50 transition-all duration-100 w-[55px]'>О нас</a>
<a href="##" className='hover:opacity-50 transition-all duration-100'>Сервисы</a> <a href="##" className='hover:opacity-50 transition-all duration-100'>Сервисы</a>
<a href="##" className='hover:opacity-50 transition-all duration-100'>Шаги</a> {/* <a href="##" className='hover:opacity-50 transition-all duration-100'>Шаги</a> */}
<a href="##" className='hover:opacity-50 transition-all duration-100'>Контакты</a> <a href="##" className='hover:opacity-50 transition-all duration-100'>Контакты</a>
</motion.nav> </motion.nav>

57
src/path2.svg Normal file
View File

@ -0,0 +1,57 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="57.947277"
height="36.046539"
viewBox="0 0 57.947277 36.046539"
version="1.1"
id="svg1"
xml:space="preserve"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
id="namedview1"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="px"
inkscape:export-bgcolor="#00000000" /><defs
id="defs1" /><g
inkscape:groupmode="layer"
id="layer2"
inkscape:label="ink"
style="fill:#000000"
transform="translate(-60.657421,-58.177437)"><path
style="fill:none;stroke:#ffffff;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
d="m 71.814703,73.179754 h 32.895167 c 4.90125,0 4.5398,16.212298 -3.19499,16.212298 H 74.21133 c -1.011821,0 -1.985125,1.182328 -1.985125,2.202646 0,0.900267 0.538459,2.129278 1.384352,2.129278 h 27.616123 c 10.71535,0 11.90814,-15.082291 10.19451,-19.151164 -0.61709,-1.499533 -1.58687,-1.451243 -0.3914,-1.441237 l 5.27843,0.04418 c 0.95375,0.008 1.76747,-1.274377 1.79566,-2.227737 0.0256,-0.864389 -0.64111,-2.112514 -1.50588,-2.112514 H 72.004125 c -0.898309,0 -1.752902,1.09784 -1.812727,1.994155 -0.06341,0.949964 0.671227,2.350096 1.623305,2.350095 z"
id="path2"
sodipodi:nodetypes="ssssssscsssssss"
inkscape:export-filename="path2.svg"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96" /><path
style="fill:none;stroke:#ffffff;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
d="m 67.460565,79.27788 c 7.92891,0 17.365457,0 25.631998,0 0.88346,0 1.747256,1.086524 1.773472,1.969595 0.02853,0.960897 -0.837916,2.253881 -1.799236,2.253881 -7.961942,0 -17.309502,0 -25.600714,0 -0.868285,0 -1.664289,-1.113335 -1.691184,-1.981203 -0.02896,-0.934624 0.750591,-2.242273 1.685664,-2.242273 z"
id="path3"
sodipodi:nodetypes="sssssss" /><path
style="fill:none;stroke:#ffffff;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
d="m 78.350083,66.320667 c 5.088697,-3.158869 14.711284,-6.44496 23.459117,0 h 5.00077 C 101.63161,60.336258 96.977023,59.002455 92.556677,58.688232 89.517894,58.649 81.875133,58.501976 76.359506,63.382385 c -0.486453,0.596486 -0.620177,1.667923 -0.183536,2.301781 0.428374,0.621858 1.273033,0.83391 2.174113,0.636501 z"
id="path4"
sodipodi:nodetypes="ccccccc" /><ellipse
style="fill:none;stroke:#ffffff;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
id="path5"
cx="62.932747"
cy="70.910309"
rx="1.7753251"
ry="1.6776105" /><ellipse
style="fill:none;stroke:#ffffff;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:normal"
id="path5-6"
cx="62.979584"
cy="91.659416"
rx="1.7753251"
ry="1.6776105" /></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.4 KiB