-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'aweell-updates' of https://github.com/Telefonica/mistic…
…a-design into aweell-updates
- Loading branch information
Showing
3 changed files
with
210 additions
and
117 deletions.
There are no files selected for viewing
197 changes: 183 additions & 14 deletions
197
src/pages/advent-calendar-2024/assets/decorations/decoration-snake.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,19 +1,188 @@ | ||
| import { skinVars } from "@telefonica/mistica"; | ||
| import Lottie from "lottie-react"; | ||
|
|
||
| const DecorationSnake = () => ( | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| width="299" | ||
| height="26" | ||
| viewBox="0 0 299 26" | ||
| fill="none" | ||
| > | ||
| <path | ||
| d="M1 17L10.3395 5.26615C13.7904 0.930508 20.3021 0.713461 24.0341 4.80969L35.7761 17.6978C39.346 21.6161 45.512 21.6161 49.0819 17.6978L61.2863 4.30222C64.8561 0.383937 71.0222 0.383933 74.592 4.30222L86.7964 17.6978C90.3663 21.6161 96.5323 21.6161 100.102 17.6978L112.307 4.30222C115.876 0.383935 122.042 0.383931 125.612 4.30222L137.817 17.6978C141.387 21.6161 147.553 21.6161 151.122 17.6978L163.327 4.30222C166.897 0.383936 173.063 0.383933 176.633 4.30222L188.837 17.6978C192.407 21.6161 198.573 21.6161 202.143 17.6978L214.347 4.30222C217.917 0.383936 224.083 0.383933 227.653 4.30222L239.857 17.6978C243.427 21.6161 249.593 21.6161 253.163 17.6978L265.367 4.30222C268.937 0.383934 275.103 0.383929 278.673 4.30221L297.53 25" | ||
| stroke={skinVars.colors.brand} | ||
| stroke-width="1.5" | ||
| /> | ||
| </svg> | ||
| <Lottie | ||
| style={{ width: 300 }} | ||
| animationData={{ | ||
| v: "5.9.0", | ||
| fr: 60, | ||
| ip: 0, | ||
| op: 61, | ||
| w: 300, | ||
| h: 32, | ||
| nm: "Comp 1", | ||
| ddd: 0, | ||
| assets: [], | ||
| layers: [ | ||
| { | ||
| ddd: 0, | ||
| ind: 2, | ||
| ty: 4, | ||
| nm: "Shape Layer 3", | ||
| sr: 1, | ||
| ks: { | ||
| o: { a: 0, k: 100, ix: 11 }, | ||
| r: { a: 0, k: 0, ix: 10 }, | ||
| p: { | ||
| a: 1, | ||
| k: [ | ||
| { | ||
| i: { x: 0.833, y: 0.833 }, | ||
| o: { x: 0.167, y: 0.167 }, | ||
| t: 0, | ||
| s: [1, 16, 0], | ||
| to: [0, 0, 0], | ||
| ti: [0, 0, 0], | ||
| }, | ||
| { t: 300, s: [303, 16, 0] }, | ||
| ], | ||
| ix: 2, | ||
| l: 2, | ||
| }, | ||
| a: { a: 0, k: [0, 0, 0], ix: 1, l: 2 }, | ||
| s: { a: 0, k: [100, 100, 100], ix: 6, l: 2 }, | ||
| }, | ||
| ao: 0, | ||
| shapes: [ | ||
| { | ||
| ind: 0, | ||
| ty: "sh", | ||
| ix: 1, | ||
| ks: { | ||
| a: 0, | ||
| k: { | ||
| i: [ | ||
| [0, 0], | ||
| [-15.261, 0], | ||
| [-15.261, 0], | ||
| [-15.262, 0], | ||
| [-15.263, 0], | ||
| [-15.262, 0], | ||
| [-15.263, 0], | ||
| [-15.262, 0], | ||
| [-15.262, 0], | ||
| [-15.263, 0], | ||
| [-15.263, 0], | ||
| [-15.26, 0], | ||
| [-15.262, 0], | ||
| [-15.262, 0], | ||
| [-15.264, 0], | ||
| [-15.264, 0], | ||
| [-15.265, 0], | ||
| [-15.264, 0], | ||
| [-15.267, 0], | ||
| [-15.267, 0], | ||
| ], | ||
| o: [ | ||
| [15.261, 0], | ||
| [15.261, 0], | ||
| [15.262, 0], | ||
| [15.263, 0], | ||
| [15.262, 0], | ||
| [15.263, 0], | ||
| [15.262, 0], | ||
| [15.262, 0], | ||
| [15.263, 0], | ||
| [15.263, 0], | ||
| [15.26, 0], | ||
| [15.262, 0], | ||
| [15.262, 0], | ||
| [15.264, 0], | ||
| [15.264, 0], | ||
| [15.265, 0], | ||
| [15.265, 0], | ||
| [15.267, 0], | ||
| [15.267, 0], | ||
| [0, 0], | ||
| ], | ||
| v: [ | ||
| [-289.997, -11.906], | ||
| [-259.476, 11.906], | ||
| [-228.954, -11.906], | ||
| [-198.43, 11.906], | ||
| [-167.904, -11.906], | ||
| [-137.38, 11.906], | ||
| [-106.855, -11.906], | ||
| [-76.331, 11.906], | ||
| [-45.806, -11.906], | ||
| [-15.281, 11.906], | ||
| [15.246, -11.906], | ||
| [45.766, 11.906], | ||
| [76.29, -11.906], | ||
| [106.815, 11.906], | ||
| [137.343, -11.906], | ||
| [167.871, 11.906], | ||
| [198.401, -11.906], | ||
| [228.93, 11.906], | ||
| [259.464, -11.906], | ||
| [289.997, 11.906], | ||
| ], | ||
| c: false, | ||
| }, | ||
| ix: 2, | ||
| }, | ||
| nm: "Path 1", | ||
| mn: "ADBE Vector Shape - Group", | ||
| hd: false, | ||
| }, | ||
| { | ||
| ty: "tm", | ||
| s: { | ||
| a: 1, | ||
| k: [ | ||
| { | ||
| i: { x: [0.833], y: [0.833] }, | ||
| o: { x: [0.167], y: [0.167] }, | ||
| t: 0, | ||
| s: [50], | ||
| }, | ||
| { t: 300, s: [0] }, | ||
| ], | ||
| ix: 1, | ||
| }, | ||
| e: { | ||
| a: 1, | ||
| k: [ | ||
| { | ||
| i: { x: [0.833], y: [0.833] }, | ||
| o: { x: [0.167], y: [0.167] }, | ||
| t: 0, | ||
| s: [100], | ||
| }, | ||
| { t: 300, s: [50] }, | ||
| ], | ||
| ix: 2, | ||
| }, | ||
| o: { a: 0, k: 0, ix: 3 }, | ||
| m: 1, | ||
| ix: 2, | ||
| nm: "Trim Paths 1", | ||
| mn: "ADBE Vector Filter - Trim", | ||
| hd: false, | ||
| }, | ||
| { | ||
| ty: "st", | ||
| c: { a: 0, k: [0, 0.4, 1, 1], ix: 3 }, | ||
| o: { a: 0, k: 100, ix: 4 }, | ||
| w: { a: 0, k: 2, ix: 5 }, | ||
| lc: 2, | ||
| lj: 1, | ||
| ml: 4, | ||
| bm: 0, | ||
| nm: "Stroke 1", | ||
| mn: "ADBE Vector Graphic - Stroke", | ||
| hd: false, | ||
| }, | ||
| ], | ||
| ip: 0, | ||
| op: 540, | ||
| st: 0, | ||
| bm: 0, | ||
| }, | ||
| ], | ||
| markers: [], | ||
| }} | ||
| /> | ||
| ); | ||
|
|
||
| export default DecorationSnake; |
Oops, something went wrong.