API tools faq
paste
Guest User

HT3 CSS

a guest
Oct 31st, 2024
86
0
290 days
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 26.51 KB | Source Code | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <link rel="dns-prefetch" href="//justenq.github.io/The-Holy-Trinity-Triangle-Tool/">
  5. <meta charset="UTF-8">
  6. <meta name="google-site-verification" content="cXdxtMcy-hYId9dDP0AcZzKVeZo4aDjBJeHXhpixMvg" />
  7. <meta name="description" content="Welcome to the HT3, the ultimate online interactive triangle calculator and stop-motion animation tool." />
  8. <meta name="keywords" content="Holy Trinity Triangle Tool, holy trinity triangle tool, The Holy Trinity Triangle Tool, the holy trinity triangle tool, HT3, ht3, animation, simple animation, stop-motion animation, animation tool, free online animation, triangle calculator, triangle drawing tool, holy trinity triangle tool, geometry tool, math visualization, interactive triangle tool, triangle solver, calculator, triangle, education, justenq, Justen, Justen Q, justen q, holy trinity, Holy Trinity, triangle tool, Triangle Tool, Tool, Trigonometry, Trigonometric Monster Maker, SAS, ASA, AAA, SSS, SSA, geometry calculator, triangle maker, triangle drawer, math, triangle grapher, graphing triangle, math homework help, professional, professional tool" />
  9. <meta name="author" content="Justen Q" />
  10.  
  11. <title>The Holy Trinity Triangle Tool</title>
  12. <style>
  13.  
  14. #loading-screen {
  15. position: fixed;
  16. top: 0;
  17. left: 0;
  18. width: 100%;
  19. height: 100%;
  20. background-color: black;
  21. display: flex;
  22. justify-content: center;
  23. align-items: center;
  24. z-index: 9999;
  25. }
  26.  
  27. #loading-screen img {
  28. max-width: 100%;
  29. max-height: 100%;
  30. }
  31.  
  32.  
  33. body {
  34. font-family: Arial, sans-serif;
  35. background-color: black;
  36. color: white;
  37. display: flex;
  38. align-items: flex-start;
  39. justify-content: flex-start;
  40. margin: 0;
  41. padding: 20px;
  42. height: 0px;
  43.  
  44.  
  45. transform-origin: top left; /* Scale from the top-left corner */
  46. }
  47. .layer-summary {
  48. z-index: 99;
  49. cursor: pointer;
  50. padding: 3px; /* Reduced padding for a thinner appearance */
  51. margin: 2px 0;
  52. background-color: #444;
  53. border: 1px solid #666;
  54. border-radius: 4px;
  55. font-size: 12px; /* Smaller font for compact look */
  56. }
  57.  
  58. .layer-details {
  59. z-index: 999;
  60. display: none; /* Hidden by default */
  61. margin: 5px 0 10px 10px;
  62. padding: 3px;
  63. background-color: #222;
  64. border: 1px solid #555;
  65. }
  66. .layer-summary.selected {
  67. background-color: #555;
  68. color: #fff;
  69. z-index: 999;
  70. }
  71.  
  72. .controls {
  73. display: flex;
  74. flex-direction: column;
  75. gap: 10px;
  76. padding: 20px;
  77. transform-origin: top left; /* Scale from the top-left corner */
  78. }
  79. .results {
  80. display: flex;
  81. flex-direction: column;
  82. gap: 10px;
  83. padding: 20px;
  84. margin-top: -2px; /* Move results up by 5px */
  85. transform-origin: top left; /* Scale from the top-left corner */
  86. }
  87.  
  88. label {
  89. display: flex;
  90. flex-direction: column;
  91. }
  92. input {
  93. margin-top: 5px;
  94. padding: 5px;
  95. color: white;
  96. background-color: black;
  97. border: 1px solid white;
  98. text-align: center;
  99. max-width: 100px;
  100. transform-origin: top left; /* Scale from the top-left corner */
  101. }
  102. input[readonly] {
  103. background-color: grey;
  104. border: 1px solid grey;
  105. }
  106. #triangleCanvas {
  107.  
  108. background-color: black;
  109.  
  110. z-index: 1;
  111. position: absolute;
  112. top: 0px;
  113. left: 0px;
  114.  
  115. transform-origin: top left; /* Scale from the top-left corner */
  116. }
  117. .canvas-border {
  118. position: absolute; /* Absolutely position the border */
  119. top: 0; /* Align to the top of the canvas */
  120. left: 0; /* Align to the left of the canvas */
  121. width: 500px; /* Cover the entire width of the canvas */
  122. height: 500px; /* Cover the entire height of the canvas */
  123. border: 1px solid white; /* Set the border style */
  124. box-sizing: border-box; /* Include border in dimensions */
  125. z-index: 10; /* Higher z-index to be above the canvas */
  126. pointer-events: none; /* Allow interactions with the canvas below */
  127. transform-origin: top left; /* Scale from the top-left corner */
  128. }
  129. #Gif {
  130. visibility: visible;
  131. z-index: 2;
  132. position: absolute;
  133. top: 1px; /* Align with the canvas */
  134. left: 1px; /* Align with the canvas */
  135. width: 498px; /* Match the canvas width */
  136. height: 498px; /* Match the canvas height */
  137. pointer-events: none; /* Make sure the gif doesn't block interaction with the canvas */
  138. transform: translate(20px, 0px);
  139. filter: url(#colorFilter);
  140. transform-origin: top left; /* Scale from the top-left corner */
  141. }
  142. button {
  143. margin-top: 10px;
  144. padding: 10px;
  145. font-size: 1em;
  146. background-color: white;
  147. color: black;
  148. border: none;
  149. cursor: pointer;
  150. transform-origin: top left; /* Scale from the top-left corner */
  151. height: 38px;
  152. width: 111px;
  153. white-space: nowrap; /* Prevents text from wrapping */
  154. overflow: hidden; /* Ensures overflow content is hidden */
  155.  
  156.  
  157.  
  158. }
  159.  
  160.  
  161. #latchInputs {
  162.  
  163. z-index: 7;
  164. margin-top: 10px;
  165. padding: 10px;
  166. font-size: 1em;
  167. background-color: white;
  168. color: black;
  169. border: none;
  170. cursor: pointer;
  171. position: absolute;
  172. left: 136px;
  173. top: 523px;
  174. height: 38px;
  175. width: 90px;
  176. transform-origin: top left; /* Scale from the top-left corner */
  177. }
  178. #fillButton {
  179.  
  180. margin-top: 10px;
  181. padding: 10px;
  182. font-size: 1em;
  183. background-color: white;
  184. color: black;
  185. border: none;
  186. cursor: pointer;
  187. position: absolute;
  188. left: 231px;
  189. top: 523px;
  190. width: 90px;
  191. height: 38px;
  192. transform-origin: top left; /* Scale from the top-left corner */
  193. }
  194. #saveFrameButton {
  195.  
  196. margin-top: 10px;
  197. padding: 10px;
  198. font-size: 1em;
  199. background-color: white;
  200. color: black;
  201. border: none;
  202. cursor: pointer;
  203. position: absolute;
  204. left: 421px;
  205. top: 523px;
  206. width: 90px;
  207. height: 38px;
  208. transform-origin: top left; /* Scale from the top-left corner */
  209. }
  210. #styleButton {
  211.  
  212. z-index: 6;
  213. margin-top: 10px;
  214. padding: 10px;
  215. font-size: 1em;
  216. white-space: nowrap;
  217. justify-content: center;
  218. align-items: center;
  219. background-color: white;
  220. color: black;
  221. border: none;
  222. cursor: pointer;
  223. position: relative;
  224. left: -10px;
  225. top: 52.5px;
  226. width: 90px;
  227. height: 38px;
  228. transform-origin: top left; /* Scale from the top-left corner */
  229. }
  230. #reset {
  231.  
  232. margin-top: 10px;
  233. padding: 10px;
  234. font-size: 1em;
  235. background-color: white;
  236. color: black;
  237. border: none;
  238. cursor: pointer;
  239. position: absolute;
  240. left: 516px;
  241. top: 523px;
  242. width: 90px;
  243. height: 38px;
  244. transform-origin: top left; /* Scale from the top-left corner */
  245. }
  246. #addObjectButton {
  247.  
  248. margin-top: 10px;
  249. padding: 10px;
  250. font-size: 1em;
  251. background-color: white;
  252. color: black;
  253. border: none;
  254. cursor: pointer;
  255. position: absolute;
  256. left: 326px;
  257. top: 523px;
  258. width: 70px;
  259. height: 38px;
  260. transform-origin: top left; /* Scale from the top-left corner */
  261. z-index: 2;
  262. }
  263. #objectList {
  264.  
  265. margin-top: 10px;
  266. padding: 10px;
  267. font-size: 1em;
  268. background-color: white;
  269. color: black;
  270. border: none;
  271. cursor: pointer;
  272. position: absolute;
  273. left: 396px;
  274. top: 523px;
  275. width: 5px;
  276. height: 38px;
  277. text-align: left; /* Ensure all options are aligned to the left */
  278.  
  279. transform-origin: top left; /* Scale from the top-left corner */
  280. z-index: 3;
  281. }
  282.  
  283.  
  284. #objectList option {
  285. /* Customize the dropdown appearance if necessary */
  286. text-align: left; /* Ensure all options are aligned to the left */
  287. width: 90px;
  288. }
  289.  
  290. #objectList {
  291. direction: rtl; /* This can make the dropdown pop upward */
  292. }
  293. #animate {
  294. z-index: 7;
  295. margin-top: 10px;
  296. padding: 10px;
  297. font-size: 1em;
  298. background-color: white;
  299. color: black;
  300. border: none;
  301. cursor: pointer;
  302. position: absolute;
  303. left: 40px;
  304. top: 523px;
  305. width: 90px;
  306. height: 38px;
  307. transform-origin: top left; /* Scale from the top-left corner */
  308. }
  309.  
  310. /* Style for the hidden hover panel */
  311. #hoverPanel {
  312. display: none; /* Hidden by default */
  313. position: absolute;
  314. top: 416px; /* Adjust this based on your button size */
  315. left: 40px;
  316. width: 100px; /* Set width for the panel */
  317. background-color: black; /* Background color */
  318. border: none; /* Optional border */
  319. padding: 10px;
  320. z-index: 5; /* Make sure it appears above other elements */
  321. box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Optional shadow for visibility */
  322. }
  323.  
  324. /* Keep panel open when hovering over Animate or the panel */
  325. #animate:hover ~ #hoverPanel,
  326. #hoverPanel:hover {
  327. display: block;
  328. }
  329.  
  330.  
  331.  
  332. #recordButton {
  333.  
  334. z-index: 6;
  335.  
  336. margin-top: 10px;
  337. padding: 10px;
  338. font-size: 1em;
  339. background-color: white;
  340. color: black;
  341. border: none;
  342. cursor: pointer;
  343. position: relative;
  344. left: -10px;
  345. top: -40px;
  346. width: 90px;
  347. height: 38px;
  348. transform-origin: top left; /* Scale from the top-left corner */
  349. }
  350. #animationSpeed {
  351. cursor: pointer;
  352. position: absolute;
  353. left: 731px;
  354. top: 563px;
  355. width: 110px;
  356. transform-origin: top left; /* Scale from the top-left corner */
  357. }
  358. #animationSpeedLabel {
  359.  
  360. position: absolute;
  361. left: 731px;
  362. top: 529px;
  363.  
  364. transform-origin: top left; /* Scale from the top-left corner */
  365. }
  366. #colorPicker {
  367. z-index: 2;
  368. margin-top: 10px;
  369. padding: 10px;
  370. cursor: pointer;
  371. position: absolute;
  372. left: 653.5px;
  373. top: 518px;
  374. transform-origin: top left; /* Scale from the top-left corner */
  375.  
  376. }
  377. #colorLabel {
  378.  
  379. z-index: 8;
  380. margin-top: 10px;
  381. padding: 10px;
  382. font-size: 1em;
  383. color: white;
  384. position: absolute;
  385. left: 604px;
  386. top: 523px;
  387. transform-origin: top left; /* Scale from the top-left corner */
  388.  
  389. }
  390. .status {
  391. margin-top: 20px;
  392. font-size: 1.2em;
  393. transform-origin: top left; /* Scale from the top-left corner */
  394. }
  395. .results input {
  396. width: 100%;
  397. box-sizing: border-box;
  398. }
  399. .container {
  400. display: flex;
  401. flex-direction: column;
  402. align-items: center; /* Center canvas and text box */
  403. }
  404. #infoBox {
  405.  
  406. visibility: visible;
  407. z-index: -1;
  408. width: 400px;
  409. max-width: none; /* Match the width of the canvas */
  410. height: 590px; /* Adjust height as needed */
  411. background-color: black; /* Black background */
  412. color: white; /* White text color */
  413. border: 1px solid black; /* Black border */
  414. padding: 10px; /* Padding inside the box */
  415. font-size: 0.635em; /* Adjust font size as needed */
  416. box-sizing: border-box; /* Include padding in the element's width and height */
  417. resize: none; /* Prevent resizing the textarea */
  418. display: flex; /* Use flexbox to center text */
  419. justify-content: center; /* Center text horizontally */
  420. align-items: center; /* Center text vertically */
  421. text-align: center; /* Ensure text alignment is centered */
  422. margin-top: 1px; /* Add margin to the top */
  423. position: absolute;
  424. top: 0;
  425. left: 850px;
  426. transform-origin: top left; /* Scale from the top-left corner */
  427. }
  428. .canvas-wrapper {
  429. position: relative;
  430. width: 500;
  431. height: 500;
  432. margin-right: 20px; /* Add space between canvas and results */
  433. margin-left: 20px;
  434.  
  435.  
  436. transform-origin: top left; /* Scale from the top-left corner */
  437. }
  438. input[type="color"] {
  439. width: 50px;
  440. height: 50px;
  441. border: none;
  442. cursor: pointer;
  443. padding: 0;
  444. transform-origin: top left; /* Scale from the top-left corner */
  445. }
  446.  
  447. input[type="color"]::-webkit-color-swatch {
  448. border: 2px solid #666;
  449. border-radius: 5px;
  450. transform-origin: top left; /* Scale from the top-left corner */
  451. }
  452.  
  453. input[type="color"]::-webkit-color-swatch-wrapper {
  454. padding: 0;
  455. }
  456.  
  457. input[type="color"]::-moz-color-swatch {
  458. border: 2px solid #666;
  459. border-radius: 5px;
  460. transform-origin: top left; /* Scale from the top-left corner */
  461. }
  462. .color-picker-container {
  463. display: flex;
  464. align-items: center;
  465. gap: 10px;
  466. margin: 20px 0;
  467. transform-origin: top left; /* Scale from the top-left corner */
  468. }
  469. /* General slider bar and positioning */
  470. #animationSpeed {
  471. cursor: pointer;
  472. position: absolute;
  473. left: 730px;
  474. top: 550px; /* Move down by 10px from the original 543px */
  475. width: 110px;
  476. z-index: 200;
  477. transform-origin: top left; /* Scale from the top-left corner */
  478. }
  479.  
  480. /* General styles for the slider track */
  481. #animationSpeed {
  482. -webkit-appearance: none;
  483. appearance: none;
  484. width: 100%;
  485. height: 0px;
  486. z-index: 200;
  487. background: linear-gradient(to right, #888 0%, #888 50%, #ddd 100%); /* Smooth grey gradient */
  488. outline: none;
  489. border-radius: 5px;
  490. transform-origin: top left; /* Scale from the top-left corner */
  491. }
  492.  
  493. /* Slider Thumb */
  494. #animationSpeed::-webkit-slider-thumb {
  495. -webkit-appearance: none;
  496. appearance: none;
  497. width: 20px;
  498. height: 20px;
  499. z-index: 200;
  500. background: var(--thumb-color, #DDDDDD); /* Default to white if no dynamic color is set */
  501. cursor: pointer;
  502. border-radius: 50%;
  503. position: relative;
  504. top: 0; /* Reset top position */
  505. transform: translateY(-7px); /* Move the thumb and clickable area up by 7px */
  506. }
  507. /* Add a larger clickable area using a pseudo-element */
  508. #animationSpeed::-webkit-slider-thumb::after {
  509. content: '';
  510. position: absolute;
  511. top: -7px; /* Adjust this value as needed */
  512. left: -7px; /* Center the larger area */
  513. z-index: 200;
  514. width: 30px; /* Make this larger than the thumb */
  515. height: 30px; /* Make this larger than the thumb */
  516. border-radius: 50%; /* Keep it circular */
  517. background: transparent; /* Invisible */
  518. pointer-events: auto; /* Allow interaction */
  519. }
  520.  
  521. /* Mozilla (Firefox) thumb */
  522. #animationSpeed::-moz-range-thumb {
  523. width: 20px;
  524. height: 20px;
  525. z-index: 200;
  526. background: var(--thumb-color, #DDDDDD); /* Default to white if no dynamic color is set */
  527. border: none;
  528. border-radius: 50%;
  529. cursor: pointer;
  530. transform-origin: top left; /* Scale from the top-left corner */
  531. position: relative;
  532. top: 0; /* Reset top position */
  533. transform: translateY(-7px); /* Move the thumb and clickable area up by 7px */
  534. }
  535. /* Add a larger clickable area using a pseudo-element */
  536. #animationSpeed::-moz-range-thumb::after {
  537. content: '';
  538. position: absolute;
  539. top: -7px; /* Adjust this value as needed */
  540. left: -7px; /* Center the larger area */
  541. z-index: 200;
  542. width: 20px; /* Make this larger than the thumb */
  543. height: 20px; /* Make this larger than the thumb */
  544. border-radius: 50%; /* Keep it circular */
  545. background: transparent; /* Invisible */
  546. pointer-events: auto; /* Allow interaction */
  547. }
  548.  
  549. /* Active range (part before the thumb) */
  550. #animationSpeed::-webkit-slider-runnable-track {
  551. background: linear-gradient(to right, #888 0%, #888 50%, #ddd 100%);
  552. height: 5px;
  553. border-radius: 5px;
  554. transform-origin: top left; /* Scale from the top-left corner */
  555.  
  556. }
  557.  
  558. /* Mozilla (Firefox) active range */
  559. #animationSpeed::-moz-range-track {
  560. background: linear-gradient(to right, #888 0%, #888 50%, #ddd 100%);
  561. height: 5px;
  562. border-radius: 5px;
  563. transform-origin: top left; /* Scale from the top-left corner */
  564. position: relative;
  565.  
  566. }
  567.  
  568. /* Internet Explorer's thumb and track settings */
  569. #animationSpeed::-ms-track {
  570. width: 100%;
  571. height: 5px;
  572. z-index: 200;
  573. background: transparent; /* Hide track */
  574. border-color: transparent;
  575. color: transparent;
  576. transform-origin: top left; /* Scale from the top-left corner */
  577. position: relative;
  578. top: 0; /* Reset top position */
  579. transform: translateY(-7px); /* Move the thumb and clickable area up by 7px */
  580. }
  581.  
  582. #animationSpeed::-ms-thumb {
  583. width: 20px;
  584. height: 20px;
  585. z-index: 200;
  586. background: var(--thumb-color, #DDDDDD); /* Default to white if no dynamic color is set */
  587. border-radius: 50%;
  588. transform-origin: top left; /* Scale from the top-left corner */
  589. position: relative;
  590. top: 0; /* Reset top position */
  591. transform: translateY(-7px); /* Move the thumb and clickable area up by 7px */
  592. }
  593.  
  594. /* Focus state */
  595. #animationSpeed:focus::-webkit-slider-runnable-track {
  596. background: linear-gradient(to right, #888 0%, #888 50%, #ddd 100%);
  597.  
  598. }
  599. </style>
  600. </head>
  601. <body>
  602.  
  603. <div id="loading-screen">
  604. <img src="data:image/jpeg;base64," alt="Loading...">
  605. </div>
  606.  
  607.  
  608.  
  609. <div class="controls">
  610. <label>Input Angle A:
  611. <input type="number" id="inputAngleA" min="0" max="180">
  612. </label>
  613. <label>Input Side a:
  614. <input type="number" id="inputSideA" min="0">
  615. </label>
  616. <label>Input Angle B:
  617. <input type="number" id="inputAngleB" min="0" max="180">
  618. </label>
  619. <label>Input Side b:
  620. <input type="number" id="inputSideB" min="0">
  621. </label>
  622. <label>Input Angle C:
  623. <input type="number" id="inputAngleC" min="0" max="180">
  624. </label>
  625. <label>Input Side c:
  626. <input type="number" id="inputSideC" min="0">
  627. </label>
  628. <button id="newLayerButton" onclick="addNewLayer()" disabled>New Layer</button>
  629. <button id="deleteLayerButton" onclick="deleteLayer()" >Delete Layer</button>
  630.  
  631.  
  632. <label for="colorPicker" id="colorLabel">Color:</label>
  633. <input type="color" id="colorPicker" name="colorPicker" value="#ff0000">
  634. <button id="latchInputs" onclick="latchInputs()" >Latch: Off</button>
  635. <button id="reset" onclick="resetInputs(false, true)" >Reset</button>
  636. <button id="animate" onclick="animateLayers()" >Animate</button>
  637. <button id="fillButton" onclick="toggleFill()" >Fill: Off</button>
  638.  
  639. <button id="saveFrameButton" onclick="saveFrame()" >Frame</button>
  640. <label id="animationSpeedLabel" for="animationSpeed">Speed:</label>
  641. <input type="range" id="animationSpeed" min="1" max="1000" value="901">
  642. <button id="addObjectButton" onclick="addObjectLayer()">Object</button>
  643. <select id="objectList" onchange="selectObject()">
  644. <option value="">Objects</option> <!-- Default option when no object is selected -->
  645. </select>
  646.  
  647. <!-- Hidden button or element for focusing and blurring -->
  648. <button id="hiddenFocusElement" style="position: absolute; left: -9999px;">Hidden</button>
  649.  
  650.  
  651. <div id="hoverPanel">
  652. <button id="styleButton" onclick="animationStyle()" >Style: Stk</button>
  653. <button id="recordButton">Record</button>
  654.  
  655. </div>
  656. </div>
  657.  
  658.  
  659. <div class="container">
  660. <div class="canvas-wrapper" style="position: relative; width: 500px; height: 500px;">
  661. <canvas id="triangleCanvas" width="500" height="500" style="width: 100%; height: auto;"></canvas>
  662. <div class="canvas-border"></div> <!-- New div for border -->
  663. <img id="Gif" src="data:image/gif;base64," style="position: absolute; top: 1px; left:-19px; width:498px; height: 498px;">
  664. </div>
  665.  
  666.  
  667. </div>
  668. <div class="results">
  669.  
  670. <label>Angle A: <input type="text" id="angleA" readonly></label>
  671. <label>Side a: <input type="text" id="sideA" readonly></label>
  672. <label>Angle B: <input type="text" id="angleB" readonly></label>
  673. <label>Side b: <input type="text" id="sideB" readonly></label>
  674. <label>Angle C: <input type="text" id="angleC" readonly></label>
  675. <label>Side c: <input type="text" id="sideC" readonly></label>
  676. <label>Perimeter: <input type="text" id="perimeter" readonly></label>
  677. <label>Area: <input type="text" id="area" readonly></label>
  678.  
  679.  
  680.  
  681.  
  682.  
  683.  
  684. </div>
  685.  
  686. <div class="container">
  687.  
  688. <!-- Static information text area -->
  689. <textarea id="infoBox" readonly>
  690.  
  691. Welcome to the Holy Trinity Triangle Tool
  692.  
  693. How it works:
  694.  
  695. 1. Fill any three input boxes to calculate the remaining values and graph the resulting triangle. Any invalid inputs or configurations will be stopped with a warning and removed.
  696.  
  697. 2. Click and drag any graphed point to a new location to update the graph and entered values in real time. Clicking on and off a box will center and scale the dragged triangle.
  698.  
  699. 3. Press New Layer to save the current triangle to the canvas background in the current color and fill state and begin graphing a new triangle. Hover over the corner of any layer to highlight it, and click to select it and view its properties. Hold shift to select multiple layers. Right-click highlighted layers to edit and a second time to finish. Click the Layers square in the top-right corner to expand/hide the Layer Manager. Press ctrl + S to select all layers.
  700.  
  701. 4. Press Delete Layer to clear the last saved layer. If layers are highlighted those layers will be cleared instead. Press ctrl + D to delete all layers.
  702.  
  703. 5. Press Animate to sequentially draw all frames and saved layers not included in a frame in the current style with a delay. Move the Speed slider to adjust the delay. Hovering over Animate will display Style and Record.
  704.  
  705. 6. Press Style to toggle between Stack (Stk), Single (Sng), Trail (Trl), Reverse (Rev), and Pulse (Pls). Pulse will continue to animate until another style is selected.
  706.  
  707. 7. Press Record to play the animation and save it as a WebM/mp4.
  708.  
  709. 8. Press Latch to toggle it on and off. When Latch is on, entered inputs aren't cleared when New Layer is pressed.
  710.  
  711. 9. Press Fill to toggle it on and off. When Fill is on, layers are drawn filled in when New Layer is pressed.
  712.  
  713. 10. Press Object to save all currently selected layers as a single object and enable the dropdown. Select an object from the dropdown to highlight it. Once an object has been selected, press Delete Layer to delete the object from the list or press New Layer to draw the object. Once you press New Layer, all other functionality will be disabled until you move the cursor to where you want to place the object and click. While placing an object, press the left and right arrows to rotate it, the up and down arrows to scale it, and right-click to mirror it. Hold shift while clicking to continue placing the object.
  714.  
  715. 11. Press Frame to save all currenly drawn layers as a new single frame layer. Frames can only be deleted from the Layer Manager or by pressing Delete Layer when there are no frames or layers after it.
  716.  
  717. 12. Press Reset to clear all entered values and layers.
  718.  
  719. 13. Press the Color square to set the layer and idle animation color.
  720. </textarea>
  721. </div>
  722. <div id="layerConsole" style="position: fixed; top: 0px; right: 0px; width: 60px; max-height: 100vh; background-color: #333; color: #eee; padding: 5px; border: 1px solid #666; font-family: monospace; overflow-y: auto; border-radius: 4px; transition: all 0.3s; z-index: 999;">
  723. <h3 style="cursor: pointer; margin: 0; padding: 5px;" onclick="toggleConsole()">Layers</h3>
  724. <div id="layerData" style="display: none;"></div>
  725. </div>
  726.  
  727. <svg
  728. xmlns="https://www.w3.org/2000/svg"
  729. version="1.1">
  730. <filter id="colorFilter">
  731. <feColorMatrix id="matrix"
  732. type="matrix" values="1 0 0 0 0
  733. 0 1 0 0 0
  734. 0 0 1 0 0
  735. 0 0 0 1
  736. 0" />
  737. </filter>
  738. </svg>
  739.  
  740.  
  741. <script>
  742.  
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!