@remotion/shapes 4.0.314 → 4.0.316

package/dist/components/heart.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { MakeHeartProps } from '../utils/make-heart';
+import type { AllShapesProps } from './render-svg';
+export type HeartProps = MakeHeartProps & AllShapesProps;
+/**
+ * @description Renders an SVG element containing a heart.
+ * @param {Number} size The size of the heart.
+ * @see [Documentation](https://www.remotion.dev/docs/shapes/heart)
+ */
+export declare const Heart: React.FC<HeartProps>;

package/dist/components/heart.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Heart = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const make_heart_1 = require("../utils/make-heart");
+const render_svg_1 = require("./render-svg");
+/**
+ * @description Renders an SVG element containing a heart.
+ * @param {Number} size The size of the heart.
+ * @see [Documentation](https://www.remotion.dev/docs/shapes/heart)
+ */
+const Heart = ({ aspectRatio, height, bottomRoundnessAdjustment = 0, depthAdjustment = 0, ...props }) => {
+    return ((0, jsx_runtime_1.jsx)(render_svg_1.RenderSvg, { ...(0, make_heart_1.makeHeart)({
+            aspectRatio,
+            height,
+            bottomRoundnessAdjustment,
+            depthAdjustment,
+        }), ...props }));
+};
+exports.Heart = Heart;

package/dist/esm/index.mjs

@@ -192,8 +192,119 @@ var Ellipse = ({ rx, ry, ...props }) => {
     ...props
   });
 };
-// src/utils/make-pie.ts
+// src/utils/make-heart.ts
 import { serializeInstructions as serializeInstructions3 } from "@remotion/paths";
+var makeHeart = ({
+  height,
+  aspectRatio = 1.1,
+  bottomRoundnessAdjustment = 0,
+  depthAdjustment = 0
+}) => {
+  const width = height * aspectRatio;
+  const bottomControlPointX = 23 / 110 * width + bottomRoundnessAdjustment * width;
+  const bottomControlPointY = 69 / 100 * height;
+  const bottomLeftControlPointY = 60 / 100 * height;
+  const topLeftControlPoint = 13 / 100 * height;
+  const topBezierWidth = 29 / 110 * width;
+  const topRightControlPointX = 15 / 110 * width;
+  const innerControlPointX = 5 / 110 * width;
+  const innerControlPointY = 7 / 100 * height;
+  const depth = 17 / 100 * height + depthAdjustment * height;
+  const instructions = [
+    {
+      type: "M",
+      x: width / 2,
+      y: height
+    },
+    {
+      type: "C",
+      cp1x: width / 2 - bottomControlPointX,
+      cp1y: bottomControlPointY,
+      cp2x: 0,
+      cp2y: bottomLeftControlPointY,
+      x: 0,
+      y: height / 4
+    },
+    {
+      type: "C",
+      cp1x: 0,
+      cp1y: topLeftControlPoint,
+      cp2x: width / 4 - topBezierWidth / 2,
+      cp2y: 0,
+      x: width / 4,
+      y: 0
+    },
+    {
+      type: "C",
+      cp1x: width / 4 + topBezierWidth / 2,
+      cp1y: 0,
+      cp2x: width / 2 - innerControlPointX,
+      cp2y: innerControlPointY,
+      x: width / 2,
+      y: depth
+    },
+    {
+      type: "C",
+      cp1x: width / 2 + innerControlPointX,
+      cp1y: innerControlPointY,
+      cp2x: width / 2 + topRightControlPointX,
+      cp2y: 0,
+      x: width / 4 * 3,
+      y: 0
+    },
+    {
+      type: "C",
+      cp1x: width / 4 * 3 + topBezierWidth / 2,
+      cp1y: 0,
+      cp2x: width,
+      cp2y: topLeftControlPoint,
+      x: width,
+      y: height / 4
+    },
+    {
+      type: "C",
+      x: width / 2,
+      y: height,
+      cp1x: width,
+      cp1y: bottomLeftControlPointY,
+      cp2x: width / 2 + bottomControlPointX,
+      cp2y: bottomControlPointY
+    },
+    {
+      type: "Z"
+    }
+  ];
+  const path = serializeInstructions3(instructions);
+  return {
+    path,
+    width,
+    height,
+    transformOrigin: `${width / 2} ${height / 2}`,
+    instructions
+  };
+};
+
+// src/components/heart.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var Heart = ({
+  aspectRatio,
+  height,
+  bottomRoundnessAdjustment = 0,
+  depthAdjustment = 0,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx4(RenderSvg, {
+    ...makeHeart({
+      aspectRatio,
+      height,
+      bottomRoundnessAdjustment,
+      depthAdjustment
+    }),
+    ...props
+  });
+};
+// src/utils/make-pie.ts
+import { serializeInstructions as serializeInstructions4 } from "@remotion/paths";
 var getCoord = ({
   counterClockwise,
   actualProgress,
@@ -290,7 +401,7 @@ var makePie = ({
       type: "Z"
     } : null
   ].filter(Boolean);
-  const path = serializeInstructions3(instructions);
+  const path = serializeInstructions4(instructions);
   return {
     height: radius * 2,
     width: radius * 2,
@@ -301,7 +412,7 @@ var makePie = ({
 };
 
 // src/components/pie.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 var Pie = ({
   radius,
   progress,
@@ -310,7 +421,7 @@ var Pie = ({
   rotation,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx4(RenderSvg, {
+  return /* @__PURE__ */ jsx5(RenderSvg, {
     ...makePie({ radius, progress, closePath, counterClockwise, rotation }),
     ...props
   });
@@ -320,7 +431,7 @@ import {
   PathInternals,
   reduceInstructions,
   resetPath,
-  serializeInstructions as serializeInstructions4
+  serializeInstructions as serializeInstructions5
 } from "@remotion/paths";
 
 // src/utils/join-points.ts
@@ -495,7 +606,7 @@ var makePolygon = ({
     edgeRoundness
   });
   const reduced = reduceInstructions(polygonPathInstructions);
-  const path = resetPath(serializeInstructions4(reduced));
+  const path = resetPath(serializeInstructions5(reduced));
   const boundingBox = PathInternals.getBoundingBoxFromInstructions(reduced);
   return {
     path,
@@ -507,7 +618,7 @@ var makePolygon = ({
 };
 
 // src/components/polygon.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 var Polygon = ({
   points,
   radius,
@@ -515,7 +626,7 @@ var Polygon = ({
   edgeRoundness,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx5(RenderSvg, {
+  return /* @__PURE__ */ jsx6(RenderSvg, {
     ...makePolygon({
       points,
       cornerRadius,
@@ -526,7 +637,7 @@ var Polygon = ({
   });
 };
 // src/utils/make-rect.ts
-import { serializeInstructions as serializeInstructions5 } from "@remotion/paths";
+import { serializeInstructions as serializeInstructions6 } from "@remotion/paths";
 var makeRect = ({
   width,
   height,
@@ -546,7 +657,7 @@ var makeRect = ({
       type: "Z"
     }
   ];
-  const path = serializeInstructions5(instructions);
+  const path = serializeInstructions6(instructions);
   return {
     width,
     height,
@@ -557,7 +668,7 @@ var makeRect = ({
 };
 
 // src/components/rect.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var Rect = ({
   width,
   edgeRoundness,
@@ -565,7 +676,7 @@ var Rect = ({
   cornerRadius,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx6(RenderSvg, {
+  return /* @__PURE__ */ jsx7(RenderSvg, {
     ...makeRect({ height, width, edgeRoundness, cornerRadius }),
     ...props
   });
@@ -575,7 +686,7 @@ import {
   PathInternals as PathInternals2,
   reduceInstructions as reduceInstructions2,
   resetPath as resetPath2,
-  serializeInstructions as serializeInstructions6
+  serializeInstructions as serializeInstructions7
 } from "@remotion/paths";
 var star = ({
   centerX,
@@ -626,7 +737,7 @@ var makeStar = ({
     edgeRoundness
   });
   const reduced = reduceInstructions2(starPathInstructions);
-  const path = resetPath2(serializeInstructions6(reduced));
+  const path = resetPath2(serializeInstructions7(reduced));
   const boundingBox = PathInternals2.getBoundingBoxFromInstructions(reduced);
   return {
     path,
@@ -638,7 +749,7 @@ var makeStar = ({
 };
 
 // src/components/star.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 var Star = ({
   innerRadius,
   outerRadius,
@@ -647,7 +758,7 @@ var Star = ({
   edgeRoundness,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx7(RenderSvg, {
+  return /* @__PURE__ */ jsx8(RenderSvg, {
     ...makeStar({
       innerRadius,
       outerRadius,
@@ -659,7 +770,7 @@ var Star = ({
   });
 };
 // src/utils/make-triangle.ts
-import { serializeInstructions as serializeInstructions7 } from "@remotion/paths";
+import { serializeInstructions as serializeInstructions8 } from "@remotion/paths";
 var makeTriangle = ({
   length,
   direction = "right",
@@ -719,7 +830,7 @@ var makeTriangle = ({
       type: "Z"
     }
   ];
-  const path = serializeInstructions7(instructions);
+  const path = serializeInstructions8(instructions);
   return {
     path,
     instructions,
@@ -730,7 +841,7 @@ var makeTriangle = ({
 };
 
 // src/components/triangle.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 var Triangle = ({
   length,
   direction,
@@ -738,7 +849,7 @@ var Triangle = ({
   cornerRadius,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx8(RenderSvg, {
+  return /* @__PURE__ */ jsx9(RenderSvg, {
     ...makeTriangle({ length, direction, edgeRoundness, cornerRadius }),
     ...props
   });
@@ -749,6 +860,7 @@ export {
   makeRect,
   makePolygon,
   makePie,
+  makeHeart,
   makeEllipse,
   makeCircle,
   Triangle,
@@ -756,6 +868,7 @@ export {
   Rect,
   Polygon,
   Pie,
+  Heart,
   Ellipse,
   Circle
 };

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 export type { Instruction } from '@remotion/paths';
 export { Circle, CircleProps } from './components/circle';
 export { Ellipse, EllipseProps } from './components/ellipse';
+export { Heart, HeartProps } from './components/heart';
 export { Pie, PieProps } from './components/pie';
 export { Polygon, PolygonProps } from './components/polygon';
 export { Rect, RectProps } from './components/rect';
@@ -8,6 +9,7 @@ export { Star, StarProps } from './components/star';
 export { Triangle, TriangleProps } from './components/triangle';
 export { MakeCircleProps, makeCircle } from './utils/make-circle';
 export { MakeEllipseOptions, makeEllipse } from './utils/make-ellipse';
+export { MakeHeartProps, makeHeart } from './utils/make-heart';
 export { MakePieProps, makePie } from './utils/make-pie';
 export { MakePolygonProps, makePolygon } from './utils/make-polygon';
 export { MakeRectOptions, makeRect } from './utils/make-rect';

package/dist/index.js

@@ -1,10 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.makeTriangle = exports.makeStar = exports.makeRect = exports.makePolygon = exports.makePie = exports.makeEllipse = exports.makeCircle = exports.Triangle = exports.Star = exports.Rect = exports.Polygon = exports.Pie = exports.Ellipse = exports.Circle = void 0;
+exports.makeTriangle = exports.makeStar = exports.makeRect = exports.makePolygon = exports.makePie = exports.makeHeart = exports.makeEllipse = exports.makeCircle = exports.Triangle = exports.Star = exports.Rect = exports.Polygon = exports.Pie = exports.Heart = exports.Ellipse = exports.Circle = void 0;
 var circle_1 = require("./components/circle");
 Object.defineProperty(exports, "Circle", { enumerable: true, get: function () { return circle_1.Circle; } });
 var ellipse_1 = require("./components/ellipse");
 Object.defineProperty(exports, "Ellipse", { enumerable: true, get: function () { return ellipse_1.Ellipse; } });
+var heart_1 = require("./components/heart");
+Object.defineProperty(exports, "Heart", { enumerable: true, get: function () { return heart_1.Heart; } });
 var pie_1 = require("./components/pie");
 Object.defineProperty(exports, "Pie", { enumerable: true, get: function () { return pie_1.Pie; } });
 var polygon_1 = require("./components/polygon");
@@ -19,6 +21,8 @@ var make_circle_1 = require("./utils/make-circle");
 Object.defineProperty(exports, "makeCircle", { enumerable: true, get: function () { return make_circle_1.makeCircle; } });
 var make_ellipse_1 = require("./utils/make-ellipse");
 Object.defineProperty(exports, "makeEllipse", { enumerable: true, get: function () { return make_ellipse_1.makeEllipse; } });
+var make_heart_1 = require("./utils/make-heart");
+Object.defineProperty(exports, "makeHeart", { enumerable: true, get: function () { return make_heart_1.makeHeart; } });
 var make_pie_1 = require("./utils/make-pie");
 Object.defineProperty(exports, "makePie", { enumerable: true, get: function () { return make_pie_1.makePie; } });
 var make_polygon_1 = require("./utils/make-polygon");

package/dist/utils/make-heart.d.ts

@@ -0,0 +1,13 @@
+import type { ShapeInfo } from './shape-info';
+export type MakeHeartProps = {
+    height: number;
+    aspectRatio?: number;
+    bottomRoundnessAdjustment?: number;
+    depthAdjustment?: number;
+};
+/**
+ * @description Generates a heart SVG path.
+ * @param {Number} size The size of the heart.
+ * @see [Documentation](https://www.remotion.dev/docs/shapes/make-heart)
+ */
+export declare const makeHeart: ({ height, aspectRatio, bottomRoundnessAdjustment, depthAdjustment, }: MakeHeartProps) => ShapeInfo;

package/dist/utils/make-heart.js

@@ -0,0 +1,94 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.makeHeart = void 0;
+const paths_1 = require("@remotion/paths");
+/**
+ * @description Generates a heart SVG path.
+ * @param {Number} size The size of the heart.
+ * @see [Documentation](https://www.remotion.dev/docs/shapes/make-heart)
+ */
+const makeHeart = ({ height, aspectRatio = 1.1, bottomRoundnessAdjustment = 0, depthAdjustment = 0, }) => {
+    const width = height * aspectRatio;
+    const bottomControlPointX = (23 / 110) * width + bottomRoundnessAdjustment * width;
+    const bottomControlPointY = (69 / 100) * height;
+    const bottomLeftControlPointY = (60 / 100) * height;
+    const topLeftControlPoint = (13 / 100) * height;
+    const topBezierWidth = (29 / 110) * width;
+    const topRightControlPointX = (15 / 110) * width;
+    const innerControlPointX = (5 / 110) * width;
+    const innerControlPointY = (7 / 100) * height;
+    const depth = (17 / 100) * height + depthAdjustment * height;
+    const instructions = [
+        {
+            type: 'M',
+            x: width / 2,
+            y: height,
+        },
+        {
+            type: 'C',
+            cp1x: width / 2 - bottomControlPointX,
+            cp1y: bottomControlPointY,
+            cp2x: 0,
+            cp2y: bottomLeftControlPointY,
+            x: 0,
+            y: height / 4,
+        },
+        {
+            type: 'C',
+            cp1x: 0,
+            cp1y: topLeftControlPoint,
+            cp2x: width / 4 - topBezierWidth / 2,
+            cp2y: 0,
+            x: width / 4,
+            y: 0,
+        },
+        {
+            type: 'C',
+            cp1x: width / 4 + topBezierWidth / 2,
+            cp1y: 0,
+            cp2x: width / 2 - innerControlPointX,
+            cp2y: innerControlPointY,
+            x: width / 2,
+            y: depth,
+        },
+        {
+            type: 'C',
+            cp1x: width / 2 + innerControlPointX,
+            cp1y: innerControlPointY,
+            cp2x: width / 2 + topRightControlPointX,
+            cp2y: 0,
+            x: (width / 4) * 3,
+            y: 0,
+        },
+        {
+            type: 'C',
+            cp1x: (width / 4) * 3 + topBezierWidth / 2,
+            cp1y: 0,
+            cp2x: width,
+            cp2y: topLeftControlPoint,
+            x: width,
+            y: height / 4,
+        },
+        {
+            type: 'C',
+            x: width / 2,
+            y: height,
+            cp1x: width,
+            cp1y: bottomLeftControlPointY,
+            cp2x: width / 2 + bottomControlPointX,
+            cp2y: bottomControlPointY,
+        },
+        {
+            type: 'Z',
+        },
+    ];
+    const path = (0, paths_1.serializeInstructions)(instructions);
+    return {
+        path,
+        width,
+        height,
+        transformOrigin: `${width / 2} ${height / 2}`,
+        instructions,
+    };
+};
+exports.makeHeart = makeHeart;

package/package.json

@@ -3,7 +3,7 @@
     "url": "https://github.com/remotion-dev/remotion/tree/main/packages/shapes"
   },
   "name": "@remotion/shapes",
-  "version": "4.0.314",
+  "version": "4.0.316",
   "description": "Generate SVG shapes",
   "main": "dist/index.js",
   "sideEffects": false,
@@ -29,7 +29,7 @@
     "react-dom": "19.0.0",
     "@happy-dom/global-registrator": "14.5.1",
     "eslint": "9.19.0",
-    "@remotion/eslint-config-internal": "4.0.314"
+    "@remotion/eslint-config-internal": "4.0.316"
   },
   "keywords": [
     "svg",
@@ -44,7 +44,7 @@
     "react-dom": ">=16.8.0"
   },
   "dependencies": {
-    "@remotion/paths": "4.0.314"
+    "@remotion/paths": "4.0.316"
   },
   "homepage": "https://www.remotion.dev/docs/shapes",
   "scripts": {