@revideo/create 0.3.5-yellow.968 → 0.3.5

package/examples/marketing-templates/multiple-videos-in-one/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "veed-template",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "start": "vite",
+    "serve": "vite",
+    "build": "tsc && vite build",
+    "render": "tsc && node dist/render.js"
+  },
+  "dependencies": {
+    "@revideo/core": "0.3.4",
+    "@revideo/2d": "0.3.4",
+    "@revideo/renderer": "0.3.4",
+    "@revideo/vite-plugin": "0.3.4",
+    "@revideo/ffmpeg": "0.3.4"
+  },
+  "devDependencies": {
+    "@revideo/ui": "0.3.4",
+    "@revideo/cli": "^0.3.4",
+    "typescript": "^5.2.2",
+    "vite": "^4.5"
+  }
+}

package/examples/marketing-templates/multiple-videos-in-one/src/project.meta

@@ -0,0 +1,31 @@
+{
+  "version": 0,
+  "shared": {
+    "background": "rgb(255,255,255)",
+    "range": [
+      0,
+      null
+    ],
+    "size": {
+      "x": 1920,
+      "y": 1080
+    },
+    "audioOffset": 0
+  },
+  "preview": {
+    "fps": 30,
+    "resolutionScale": 1
+  },
+  "rendering": {
+    "fps": 30,
+    "resolutionScale": 1,
+    "colorSpace": "srgb",
+    "exporter": {
+      "name": "@revideo/core/ffmpeg",
+      "options": {
+        "fastStart": true,
+        "includeAudio": true
+      }
+    }
+  }
+}

package/examples/marketing-templates/multiple-videos-in-one/src/project.ts

@@ -0,0 +1,9 @@
+import {makeProject} from '@revideo/core';
+
+import example from './scenes/example?scene';
+
+
+export default makeProject({
+  scenes: [example],
+  variables: { backgroundColor: "#FDCFE5", texts: ["gift cards", "discounts", "+ more!!"]} // ["gift cards", "discounts", "+ more!!"] ["events", "special offers", "and more..."]
+});

package/examples/marketing-templates/multiple-videos-in-one/src/render.ts

@@ -0,0 +1,17 @@
+import {renderVideo} from '@revideo/renderer';
+
+async function render() {
+  console.log('Rendering video...');
+
+  // This is the main function that renders the video
+  const file = await renderVideo(
+    './vite.config.ts',
+    {fill: 'orange'},
+    () => {},
+    {logProgress: true},
+  );
+
+  console.log(`Rendered video to ${file}`);
+}
+
+render();

package/examples/marketing-templates/multiple-videos-in-one/src/revideo.d.ts

@@ -0,0 +1 @@
+/// <reference types="@revideo/core/project" />

package/examples/marketing-templates/multiple-videos-in-one/src/scenes/example.meta

@@ -0,0 +1,5 @@
+{
+  "version": 0,
+  "timeEvents": [],
+  "seed": 2008807484
+}

package/examples/marketing-templates/multiple-videos-in-one/src/scenes/example.tsx

@@ -0,0 +1,122 @@
+import {Grid, Img, Rect, Txt, View2D, makeScene2D} from '@revideo/2d';
+import {all, chain, useScene, createRef, waitFor, Reference} from '@revideo/core';
+
+export default makeScene2D(function* (view) {
+
+
+  const backgroundRef = createRef<Rect>();
+
+  yield view.add(
+    <>
+      <Rect
+        fill={"#9accf2"}
+        position={[useScene().getSize().x*0.25-1920*0.5, useScene().getSize().y*0.25-1080*0.5]}
+        size={['40%', '40%']}
+        ref={backgroundRef}
+      />
+    </>
+  );
+
+  yield* video(view, backgroundRef, "#9accf2", ["gift cards", "discounts", "+ more!!"]);
+
+  const topRight = createRef<Rect>();
+  const bottomLeft = createRef<Rect>();
+  const bottomRight = createRef<Rect>();
+
+
+  view.add(
+    <>
+      <Rect
+        fill={"#FDCFE5"}
+        position={[useScene().getSize().x*0.25-1920*0.5, useScene().getSize().y*0.25-1080*0.5]}
+        size={['40%', '40%']}
+        ref={topRight}
+        zIndex={-1}
+      />
+      <Rect
+        fill={"#FDB827"}
+        position={[useScene().getSize().x*0.25-1920*0.5, useScene().getSize().y*0.25-1080*0.5]}
+        size={['40%', '40%']}
+        ref={bottomLeft}
+        zIndex={-1}
+      />
+      <Rect
+        fill={"#8BF8A7"}
+        position={[useScene().getSize().x*0.25-1920*0.5, useScene().getSize().y*0.25-1080*0.5]}
+        size={['40%', '40%']}
+        ref={bottomRight}
+        zIndex={-1}
+      />
+
+    </>
+  );
+
+  yield* all(
+    bottomLeft().y(useScene().getSize().y*0.75-1080*0.5, 1), 
+    topRight().x(useScene().getSize().x*0.75-1920*0.5, 1), 
+    bottomRight().position([useScene().getSize().x*0.75-1920*0.5, useScene().getSize().y*0.75-1080*0.5], 1)
+  );
+
+  yield* all(
+    video(view, bottomLeft, "#FDB827", ["gift cards", "discounts", "+ more!!"]),
+    video(view, topRight, "#FDCFE5", ["gift cards", "discounts", "+ more!!"]),
+    video(view, bottomRight, "#8BF8A7", ["gift cards", "discounts", "+ more!!"]),
+  )
+
+});
+
+function* video(view: View2D, backgroundRef: Reference<Rect>, backgroundColor: string, texts: string[]){
+  const grid = createRef<Grid>();
+  const headingRef = createRef<Txt>()
+
+
+  backgroundRef().add(
+    <Grid
+      ref={grid}
+      width={backgroundRef().width()}
+      height={backgroundRef().height()}
+      stroke={'#999'}
+      end={0}
+      spacing={150*0.4}
+    />,
+  );
+
+  yield* all(
+    grid().end(0.5, 0.5).to(1, 0.5).wait(0.1),
+    grid().start(0.5, 0.5).to(0, 0.5).wait(0.1),
+  );
+
+  backgroundRef().add(<Txt fontSize={1*0.40} fontWeight={600} ref={headingRef} position={[-backgroundRef().width()*0.3645, -backgroundRef().width()*0.05208]} opacity={0.2} textWrap={true} width={"1%"}  textAlign={"left"} fontFamily={"Sans-Serif"}>BLACK FRIDAY</Txt>)
+  yield* all(headingRef().fontSize(180*0.40, 0.5), headingRef().opacity(1, 0.5));
+
+  const txtRef = createRef<Txt>();
+  const subtitle = <Txt fontSize={60*0.40} ref={txtRef} fill={backgroundColor}  zIndex={1} fontFamily={"Sans-Serif"}>Up to 95% off</Txt>
+
+  const textBoxRef = createRef<Txt>();
+
+  backgroundRef().add(<Rect left={[headingRef().left().x, 180*0.40]} ref={textBoxRef} width={txtRef().width()+60*0.40} height={40} zIndex={0} fill={"black"}/>);
+  backgroundRef().add(<Txt position={textBoxRef().position} width={textBoxRef().width()} paddingLeft={5} textAlign={"left"} fontSize={60*0.40} ref={txtRef} fill={backgroundColor} zIndex={1} fontFamily={"Sans-Serif"}></Txt>)
+
+  yield* txtRef().text("Up to 95% off", 1)
+  yield* addItems(backgroundRef, backgroundColor, texts);
+
+  yield* waitFor(1);
+
+}
+
+function* addItems(background: Reference<Rect>, backgroundColor: string, texts: string[]){
+  let yPos = 0;
+  for(let i=0; i< texts.length; i++){
+    const txtRef1 = createRef<Txt>();
+    const subtitle1 = <Txt fontSize={90*0.40} ref={txtRef1} fill={backgroundColor}  zIndex={1} fontFamily={"Sans-Serif"}>{texts[i]}</Txt>
+  
+    const textBoxRef1 = createRef<Txt>();
+  
+    background().add(<Rect left={[50, yPos]} height={30*0.40} lineWidth={2} radius={30*0.40} stroke={"black"} ref={textBoxRef1} width={txtRef1().width()+150*0.40} zIndex={0} padding={70*0.40} fill={"white"}/>);
+    background().add(<Txt position={textBoxRef1().position} width={textBoxRef1().width()} textAlign={"center"} fontSize={90*0.40} fill={"black"} zIndex={1} fontFamily={"Sans-Serif"}>{texts[i]}</Txt>)
+    yPos = textBoxRef1().y() + textBoxRef1().height()-2.5;
+    yield* waitFor(0.5);
+
+  }
+
+}

package/examples/marketing-templates/multiple-videos-in-one/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "@revideo/2d/tsconfig.project.json",
+  "include": ["src"],
+  "compilerOptions": {
+    "noEmit": false,
+    "outDir": "dist",
+    "module": "CommonJS"
+  }
+}

package/examples/marketing-templates/multiple-videos-in-one/vite.config.ts

@@ -0,0 +1,9 @@
+import {defineConfig} from 'vite';
+import motionCanvas from '@revideo/vite-plugin';
+
+
+export default defineConfig({
+  plugins: [
+    motionCanvas(),
+  ],
+});

package/examples/saas-template/.prettierrc

@@ -0,0 +1,9 @@
+{
+	"useTabs": true,
+	"semi": true,
+	"singleQuote": true,
+	"quoteProps": "as-needed",
+	"trailingComma": "all",
+	"bracketSpacing": false,
+	"printWidth": 100
+}

package/examples/saas-template/README.md

@@ -0,0 +1,28 @@
+# Revideo Next.js Template
+
+This is the [Revideo](https://github.com/redotvideo/revideo) NextJS starter
+project bootstrapped with `npm init @revideo@latest`.
+
+## Getting Started
+
+First, install the dependencies both in the next/ and the revideo/ directories:
+
+```bash
+(cd next && npm install) &&
+(cd revideo && npm install)
+```
+
+Then, serve the Revideo project using the CLI:
+
+```bash
+(cd revideo && npx revideo serve)
+```
+
+Now you can start your NextJS app using the following command:
+
+```bash
+(cd next && npm run dev)
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the
+result. Happy developing!

package/examples/saas-template/next/app/actions.tsx

@@ -0,0 +1,113 @@
+'use server';
+
+import pLimit from 'p-limit';
+
+const PER_PAGE = 30;
+
+interface ReturnType {
+	stargazerTimes: number[];
+	status: 'success' | 'rate-limit' | 'error';
+}
+
+async function getStargazerTimesForPage(
+	repo: `${string}/${string}`,
+	page: number,
+	headers: HeadersInit,
+): Promise<ReturnType> {
+	const response = await fetch(
+		`https://api.github.com/repos/${repo}/stargazers?page=${page}&per_page=${PER_PAGE}`,
+		{
+			headers: {
+				Accept: 'application/vnd.github.v3.star+json',
+				...headers,
+			},
+		},
+	);
+
+	if (response.status === 403) {
+		return {stargazerTimes: [], status: 'rate-limit'};
+	}
+
+	if (!response.ok) {
+		return {stargazerTimes: [], status: 'error'};
+	}
+
+	const data = await response.json();
+	const dates: Date[] = data.map((stargazer: any) => new Date(stargazer.starred_at));
+	const msTimes = dates.map((date) => date.getTime());
+
+	return {
+		stargazerTimes: msTimes,
+		status: 'success',
+	};
+}
+
+const limit = pLimit(10);
+
+async function getTimes(
+	repo: `${string}/${string}`,
+	totalPages: number,
+	headers: HeadersInit,
+): Promise<ReturnType> {
+	const stargazerPromises: Promise<ReturnType>[] = [];
+
+	// Fetch all pages in parallel
+	for (let page = 1; page <= totalPages; page++) {
+		stargazerPromises.push(limit(() => getStargazerTimesForPage(repo, page, headers)));
+	}
+
+	const stargazerTimes = await Promise.all(stargazerPromises);
+
+	// In case of failure, return the first error
+	const objectsThatFailed = stargazerTimes.filter(({status}) => status !== 'success');
+	if (stargazerTimes.some(({status}) => status !== 'success')) {
+		return {
+			stargazerTimes: [],
+			status: objectsThatFailed[0].status,
+		};
+	}
+
+	const stargazerMs = stargazerTimes.map(({stargazerTimes}) => stargazerTimes).flat();
+	const sortedMs = stargazerMs.sort((a, b) => a - b);
+
+	const firstMs = sortedMs[0];
+	const relativeMs = sortedMs.map((ms) => ms - firstMs);
+
+	return {
+		stargazerTimes: relativeMs,
+		status: 'success',
+	};
+}
+
+export async function getGithubRepositoryInfo(
+	repoName: `${string}/${string}`,
+	key?: string,
+): Promise<ReturnType & {repoImage: string}> {
+	const headers: HeadersInit = {};
+
+	if (key) {
+		headers.Authorization = `token ${key}`;
+	}
+
+	const response = await fetch(`https://api.github.com/repos/${repoName}`, {
+		headers,
+	});
+
+	if (response.status === 403) {
+		return {stargazerTimes: [], repoImage: '', status: 'rate-limit'};
+	}
+
+	if (!response.ok) {
+		return {stargazerTimes: [], repoImage: '', status: 'error'};
+	}
+
+	const responseParsed = await response.json();
+	const pages = Math.ceil(responseParsed.stargazers_count / PER_PAGE);
+	const info = await getTimes(repoName, pages, headers);
+
+	return {
+		stargazerTimes: info.stargazerTimes,
+		repoImage: responseParsed.owner.avatar_url,
+		status: info.status,
+	};
+}

package/examples/saas-template/next/app/api/render/route.ts

@@ -0,0 +1,22 @@
+const RENDER_URL = 'http://localhost:4000/render';
+
+async function getResponse(body: string) {
+	return await fetch(RENDER_URL, {
+		method: 'POST',
+		headers: {
+			'Content-Type': 'application/json',
+		},
+		body,
+	});
+}
+
+export async function POST(request: Request) {
+	const body = await request.json();
+
+	const response = await getResponse(JSON.stringify(body));
+	if (!response.ok) {
+		return new Response('Failed to render', {status: 500});
+	}
+
+	return new Response(response.body, {status: 200});
+}

package/examples/saas-template/next/app/globals.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/examples/saas-template/next/app/layout.tsx

@@ -0,0 +1,25 @@
+import type {Metadata} from 'next';
+import {Inter} from 'next/font/google';
+import './globals.css';
+
+const inter = Inter({subsets: ['latin']});
+
+export const metadata: Metadata = {
+	title: 'Create Next App',
+	description: 'Generated by create next app',
+};
+
+export default function RootLayout({
+	children,
+}: Readonly<{
+	children: React.ReactNode;
+}>) {
+	return (
+		<html lang="en">
+			<head>
+				<link rel="stylesheet" href="http://localhost:4000/player/project.css" />
+			</head>
+			<body className={inter.className}>{children}</body>
+		</html>
+	);
+}

package/examples/saas-template/next/app/page.tsx

@@ -0,0 +1,182 @@
+'use client';
+
+import {Player} from '@revideo/player-react';
+import {getGithubRepositoryInfo} from './actions';
+import {useState} from 'react';
+import {LoaderCircle} from 'lucide-react';
+import {parseStream} from '../utils/parse';
+
+function Button({
+	children,
+	loading,
+	onClick,
+}: {
+	children: React.ReactNode;
+	loading: boolean;
+	onClick: () => void;
+}) {
+	return (
+		<button
+			className="text-sm flex items-center gap-x-2 rounded-md p-2 bg-gray-200 text-gray-700 hover:bg-gray-300"
+			onClick={() => onClick()}
+		>
+			{loading && <LoaderCircle className="animate-spin h-4 w-4 text-gray-700" />}
+			{children}
+		</button>
+	);
+}
+
+export default function Home() {
+	const [repoName, setRepoName] = useState<string>('');
+	const [repoImage, setRepoImage] = useState<string | null>();
+	const [stargazerTimes, setStargazerTimes] = useState<number[]>([]);
+
+	const [loading, setLoading] = useState(false);
+	const [needsKey, setNeedsKey] = useState(false);
+	const [key, setKey] = useState('');
+	const [error, setError] = useState<string | null>();
+
+	const [progress, setProgress] = useState(0);
+	const [downloadUrl, setDownloadUrl] = useState<string | null>(null);
+
+	/**
+	 * Get information about the repository from Github.
+	 * @param repoName
+	 * @param key
+	 * @returns
+	 */
+	async function fetchInformation(repoName: `${string}/${string}`, key: string) {
+		setLoading(true);
+		const response = await getGithubRepositoryInfo(repoName, key ?? undefined);
+		setLoading(false);
+
+		if (response.status === 'rate-limit') {
+			setNeedsKey(true);
+			return;
+		}
+
+		if (response.status === 'error') {
+			setError('Failed to fetch repository information from Github.');
+			return;
+		}
+
+		setStargazerTimes(response.stargazerTimes);
+		setRepoImage(response.repoImage);
+	}
+
+	/**
+	 * Render the video.
+	 */
+	async function render() {
+		const res = await fetch('/api/render', {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/json',
+			},
+			body: JSON.stringify({
+				variables: {
+					data: stargazerTimes,
+					repoName: repoName,
+					repoImage: repoImage,
+				},
+				streamProgress: true,
+			}),
+		}).catch((e) => console.log(e));
+
+		if (!res) {
+			return;
+		}
+
+		const downloadUrl = await parseStream(res.body!.getReader(), (p) => setProgress(p));
+		setDownloadUrl(downloadUrl);
+	}
+
+	return (
+		<>
+			<div className="m-auto p-12 max-w-7xl flex flex-col gap-y-4">
+				<div>
+					<div className="text-sm text-gray-700 mb-2">Repository</div>
+					<div className="flex gap-x-4 text-sm">
+						<input
+							className="flex-1 rounded-md p-2 bg-gray-200 focus:outline-none placeholder:text-gray-400"
+							placeholder="redotvideo/revideo"
+							value={repoName}
+							onChange={(e) => setRepoName(e.target.value)}
+						/>
+						{!needsKey && (
+							<Button
+								loading={loading}
+								onClick={() => fetchInformation(repoName as `${string}/${string}`, key)}
+							>
+								Fetch information
+							</Button>
+						)}
+					</div>
+				</div>
+				{needsKey && (
+					<div>
+						<div className="text-sm text-blue-600 mb-2">
+							You hit the Github API rate-limit. Please provide your own key. Requests to Github are
+							made directly and the key stays on your device.
+						</div>
+						<div className="flex gap-x-4 text-sm">
+							<input
+								className="flex-1 rounded-md p-2 bg-gray-200 focus:outline-none placeholder:text-gray-400"
+								placeholder="ghp_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
+								value={key}
+								onChange={(e) => setKey(e.target.value)}
+							/>
+							<Button
+								loading={loading}
+								onClick={() => fetchInformation(repoName as `${string}/${string}`, key)}
+							>
+								Fetch information
+							</Button>
+						</div>
+					</div>
+				)}
+				{error && <div className="text-sm text-red-600">{error}</div>}
+				<div>
+					<div className="rounded-lg overflow-hidden">
+						{/* You can find the scene code inside revideo/src/scenes/example.tsx */}
+						<Player
+							src="http://localhost:4000/player/project.js"
+							controls={true}
+							variables={{
+								data: stargazerTimes.length > 0 ? stargazerTimes : undefined,
+								repoName: repoName ? repoName : undefined,
+								repoImage: repoImage ? repoImage : undefined,
+							}}
+						/>
+					</div>
+				</div>
+				<div className="flex gap-x-4">
+					{/* Progress bar */}
+					<div className="text-sm flex-1 bg-gray-100 rounded-md overflow-hidden">
+						<div
+							className="text-gray-600 bg-gray-400 h-full flex items-center px-4 transition-all transition-200"
+							style={{
+								width: `${Math.round(progress * 100)}%`,
+							}}
+						>
+							{Math.round(progress * 100)}%
+						</div>
+					</div>
+					{downloadUrl ? (
+						<a
+							href={downloadUrl}
+							download
+							className="text-sm flex items-center gap-x-2 rounded-md p-2 bg-green-200 text-gray-700 hover:bg-gray-300"
+						>
+							Download video
+						</a>
+					) : (
+						<Button onClick={() => render()} loading={false}>
+							Render video
+						</Button>
+					)}
+				</div>
+			</div>
+		</>
+	);
+}

package/examples/saas-template/next/next.config.mjs

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+export default nextConfig;

package/examples/saas-template/next/package.json

@@ -0,0 +1,34 @@
+{
+	"name": "next",
+	"version": "0.1.0",
+	"private": true,
+	"scripts": {
+		"dev": "next dev",
+		"build": "next build",
+		"start": "next start",
+		"lint": "next lint"
+	},
+	"dependencies": {
+		"@radix-ui/react-navigation-menu": "^1.1.4",
+		"@revideo/player-react": "^0.3.5",
+		"class-variance-authority": "^0.7.0",
+		"lucide-react": "^0.378.0",
+		"next": "14.2.3",
+		"p-limit": "^3",
+		"react": "^18",
+		"react-dom": "^18",
+		"tailwind-merge": "^2.3.0",
+		"tailwindcss-animate": "^1.0.7"
+	},
+	"devDependencies": {
+		"@types/node": "^20",
+		"@types/react": "^18",
+		"@types/react-dom": "^18",
+		"autoprefixer": "^10.4.19",
+		"eslint": "^8",
+		"eslint-config-next": "14.2.3",
+		"postcss": "^8",
+		"tailwindcss": "^3.4.3",
+		"typescript": "^5"
+	}
+}

package/examples/saas-template/next/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+	plugins: {
+		tailwindcss: {},
+		autoprefixer: {},
+	},
+};

package/examples/saas-template/next/public/next.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>