Kid Passions

Developer
GRAY GHOST
Size
11,380 Kb
Views
42,504
  1. Kid Passions Previews
  2. Kid Passions HTML Codes
  3. Kid Passions CSS Codes
  4. Kid Passions JS Codes

How do I make an kid passions?

Pay attention very, very carefully and watch for the signal or you will miss the entire SVG animation created for DIY. DIY is a collection of online camps for kids that work with amazing counselors to learn skills quickly.. What is a kid passions? How do you make a kid passions? This script and codes were developed by GRAY GHOST on 18 August 2022, Thursday.

Kid Passions Previews
IQ Test

Kid Passions - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Kid Passions</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1294.5 891.9" class="kp" aria-labelledby="title" aria-describedby="desc" role="img"> <title id="title">Kid Passions</title> <description id="desc">Online camps for kids that work with amazing counselors to learn skills quickly.</description> <defs> <linearGradient id="lgrad-orchid-tobottom" gradientUnits="userSpaceOnUse" x1="547.7894" y1="538.8317" x2="547.7894" y2="471.0619"> <stop offset="0" style="stop-color:#6C5CE5"/> <stop offset="0.2487" style="stop-color:#6F5EE4"/> <stop offset="0.4264" style="stop-color:#7862E2"/> <stop offset="0.5819" style="stop-color:#886BDE"/> <stop offset="0.7247" style="stop-color:#9E76D9"/> <stop offset="0.8588" style="stop-color:#BB85D2"/> <stop offset="0.9848" style="stop-color:#DD98C9"/> <stop offset="1" style="stop-color:#E29AC8"/> </linearGradient> </defs> <g id="pulse"> <circle fill="#6065D6" cx="619" cy="400.3" r="327.4"/> <circle fill="#6078D2" cx="619" cy="400.3" r="268.2"/> <circle fill="#60ACC7" cx="619" cy="400.3" r="207.3"/> <circle fill="#61D6BF" cx="619" cy="400.3" r="149.7"/> <circle fill="#5CD0BA" cx="619" cy="400.3" r="54.3"/> <circle fill="#B33FFF" cx="619" cy="400.3" r="21.9"/> </g> <g id="orb-tr"> <circle fill="#5d65ce" cx="1038.5" cy="72.8" r="58.8"/> <circle fill="none" stroke="#5d65ce" stroke-miterlimit="10" stroke-width="2" cx="1038.5" cy="72.8" r="72.3"/> <circle fill="none" stroke="#61D6BF" stroke-miterlimit="10" cx="1038.5" cy="72.8" r="19.5"/> <circle fill="#61D6BF" cx="1038.5" cy="72.8" r="3.6"/> </g> <g id="orb-bl"> <circle fill="#5d65ce" cx="72.8" cy="632.9" r="58.8"/> <circle fill="none" stroke="#5d65ce" stroke-width="2" stroke-miterlimit="10" cx="72.8" cy="632.9" r="72.3"/> <circle fill="none" stroke="#61D6BF" stroke-miterlimit="10" cx="72.8" cy="632.9" r="19.5"/> <circle fill="#61D6BF" cx="72.8" cy="632.9" r="3.6"/> </g> <g id="silhouette"> <path id="child" fill="#6C5CE5" d="M935.2,891.7C912.8,804,737.9,648.8,726.3,602.8c-7.4-29.3,0.3-59.1,9.6-88.2c1.1,1.2,2.2,2.3,3.5,3.2c1.4,1,3.7,1.8,4.6,0.3c0.4-0.7,0.3-1.5,0.2-2.3c-0.7-4.6-1.2-9.3-1.6-14c1.8,3.7,4.3,7.1,7.7,9.6c1.4,1,3.7,1.8,4.6,0.3c0.4-0.7,0.3-1.5,0.2-2.3c-2.9-19.8-3.4-40.2-1-60.1c0.2-1.1,0.3-2.1,0.4-3.2c0-0.1,0-0.3,0-0.4s0-0.1,0-0.2l0,0c16.3-139.3-69-171.2-113.4-178.4l0,0c-51.1-9.5-90.2,9.2-109.9,27.9c-14.7,13.9-28.3,30.7-47.6,36.6c-2.8,0.9-6.1,1.9-6.9,4.7c-0.8,3,1.9,5.7,4.5,7.4c2.5,1.6,5.2,3,8,4.1c-1.4,1.3-3.1,2.2-4.9,2.7c-1.1,0.3-2.5,0.7-2.7,1.9c-0.1,0.9,0.7,1.7,1.5,2.1c1.7,1,3.7,1.5,5.7,1.8c1.1,0.2,2.2,0.3,3.3,0.3c-7.3,21.1-11.8,47.2-11.8,79.2c0,51.3-8.2,67.7-12.8,72.9c-0.8,0.9-0.2,2.3,1,2.3h41.7c1.5,0,2.7,1.2,2.7,2.7l-1.3,32.9c0,1.5,0.9,2.9,2.3,3.4l9.1-0.9c1.4,0.6,1.5,2.5,0.1,3.2l-10.3,1c-0.9,0.5-1.5,1.4-1.5,2.4c0.3,13.7,7.2,109.8,91.2,109.8c0,0,67.2,79.6-45,226.2L935.2,891.7L935.2,891.7z"/> <path id="child-breathing" style="display:none" fill="#6C5CE5" d="M953.6,891.7c-88.5-223.2-215.7-242.9-227.3-288.9c-7.4-29.3,0.3-59.1,9.6-88.2c1.1,1.2,2.2,2.3,3.5,3.2c1.4,1,3.7,1.8,4.6,0.3c0.4-0.7,0.3-1.5,0.2-2.3c-0.7-4.6-1.2-9.3-1.6-14c1.8,3.7,4.3,7.1,7.7,9.6c1.4,1,3.7,1.8,4.6,0.3c0.4-0.7,0.3-1.5,0.2-2.3c-2.9-19.8-3.4-40.2-1-60.1c0.2-1.1,0.3-2.1,0.4-3.2c0-0.1,0-0.3,0-0.4s0-0.1,0-0.2l0,0c16.3-139.3-69-171.2-113.4-178.4l0,0c-51.1-9.5-90.2,9.2-109.9,27.9c-14.7,13.9-28.3,30.7-47.6,36.6c-2.8,0.9-6.1,1.9-6.9,4.7c-0.8,3,1.9,5.7,4.5,7.4c2.5,1.6,5.2,3,8,4.1c-1.4,1.3-3.1,2.2-4.9,2.7c-1.1,0.3-2.5,0.7-2.7,1.9c-0.1,0.9,0.7,1.7,1.5,2.1c1.7,1,3.7,1.5,5.7,1.8c1.1,0.2,2.2,0.3,3.3,0.3c-7.3,21.1-11.8,47.2-11.8,79.2c0,51.3-8.2,67.7-12.8,72.9c-0.8,0.9-0.2,2.3,1,2.3h41.7c1.5,0,2.7,1.2,2.7,2.7v28.8c0,1.5,0.9,2.9,2.3,3.4l7.8,3.2c1.4,0.6,1.5,2.5,0.1,3.2l-8.6,4.3c-0.9,0.5-1.5,1.4-1.5,2.4c0.3,13.7,5.5,106.4,89.5,106.4c0,0,40.6,66.6-45,226.2h377.7L953.6,891.7z"/> <circle id="eye" fill="#887AFF" cx="518.6" cy="437.9" r="3.6"/> <circle id="cheek" opacity="0.3" fill="url(#lgrad-orchid-tobottom)" cx="547.8" cy="504.9" r="33.9"/> <path id="shoulder" opacity="0.22" fill="#5650CC" d="M631.2,891.7c0,0-3.3-147.2,70-155.3c73.2-8.1,104.4,112,105.6,155.2L631.2,891.7z"/> </g> <g id="brain"> <g id="hemispheres"> <path fill="#887AFF" d="M615.7,311v149.8c0,0-67.9-7.4-67.9-80.1C547.1,324.1,615.7,311,615.7,311z"/> <path fill="#00BBFF" d="M631.2,311v149.8c0,0,67.9-7.4,67.9-80.1C699.8,324.1,631.2,311,631.2,311z"/> </g> <g id="frontal-lobe"> <path fill="#00BBFF" d="M544.2,386c0,40,29.8,73,68.4,78.2c1.8,0.2,3.7,0.4,5.5,0.5c0.8,0,1.5-0.6,1.5-1.4l0-154.7 c0-0.8-0.6-1.3-1.4-1.3c-1.6,0.1-4.1,0.3-5.6,0.5C574,312.9,544.2,346,544.2,386z M612.6,410.3c0,0.5-0.5,0.8-0.9,0.6 c-10.3-4.7-17.3-15.8-15.8-28.2c0.5-4.6,2.3-9,5-12.8c2.9-3.9,6.5-6.9,10.7-8.8c0.4-0.2,0.9,0.1,0.9,0.6v6.1 c0,0.5-0.2,0.9-0.6,1.1c-1.2,0.8-2.4,1.8-3.5,2.9c-3.8,3.9-5.8,9-5.8,14.5c0.1,5.4,2.3,10.5,6.2,14.3c0.9,0.9,1.9,1.7,3,2.4 c0.4,0.3,0.7,0.8,0.7,1.3V410.3z M612.6,422.7v3c0,0.5-0.5,0.8-0.9,0.7c-6.7-1.9-12.8-5.4-17.9-10.3c-8.8-8.6-13.4-20.5-12.6-32.9 c0.6-8.7,3.9-17.1,9.5-23.9c5.6-6.7,12.9-11.4,21-13.7c0.4-0.1,0.8,0.2,0.8,0.6v5.4c0,0.6-0.4,1.1-1,1.3 c-6.2,2.2-11.8,6.1-16.1,11.5c-4.9,6.2-7.4,14.1-7.4,22v0c0.1,9.3,3.9,18.1,10.6,24.6c3.8,3.7,8.3,6.5,13.2,8.1 c0.4,0.1,0.7,0.5,0.7,0.9V422.7z M612.6,440.7c0,0.4-0.4,0.7-0.8,0.7c-10.5-2.1-20.2-7.2-28.1-14.9 c-10.8-10.5-16.9-24.6-17.1-39.7c-0.4-27.5,19.1-50.8,45.2-56.1c0.4-0.1,0.8,0.2,0.8,0.7v5.1c0,0.7-0.5,1.2-1.1,1.4 c-22,5.3-38.2,25.3-37.9,48.8c0.2,13.2,5.5,25.6,15,34.8c6.6,6.4,14.6,10.8,23.3,12.8c0.4,0.1,0.7,0.4,0.7,0.9V440.7z M611.8,456.2c-33.9-5.4-59.9-34.9-59.9-70.3c0-35.4,26-64.9,59.9-70.3c0.4-0.1,0.8,0.2,0.8,0.7v5.2c0,0.7-0.5,1.2-1.1,1.4 c-29.8,5.5-52.5,31.7-52.5,63.1c0,31.5,22.8,57.7,52.7,63.1c0.5,0.1,0.9,0.6,0.9,1.1v5.3C612.6,456,612.2,456.3,611.8,456.2z"/> </g> <g id="cerebellum"> <path fill="#887AFF" d="M634.7,307.8c-1.5-0.2-4-0.4-5.6-0.5c-0.7-0.1-1.4,0.5-1.4,1.3l0,154.7c0,0.8,0.7,1.4,1.5,1.4 c1.9-0.1,3.7-0.3,5.5-0.5c38.6-5.1,68.4-38.2,68.4-78.2S673.3,312.9,634.7,307.8z M634.7,404.2c0-0.5,0.3-1,0.7-1.3 c1.1-0.7,2.1-1.5,3-2.4c3.9-3.8,6.1-8.9,6.2-14.3c0.1-5.4-2-10.6-5.8-14.5c-1.1-1.1-2.2-2-3.5-2.9c-0.4-0.2-0.6-0.7-0.6-1.1v-6.1 c0-0.5,0.5-0.8,0.9-0.6c4.2,1.9,7.8,4.9,10.7,8.8c2.8,3.7,4.5,8.2,5,12.8c1.5,12.5-5.5,23.5-15.8,28.2c-0.4,0.2-0.9-0.1-0.9-0.6 V404.2z M634.7,420c0-0.4,0.3-0.8,0.7-0.9c4.9-1.6,9.4-4.4,13.2-8.1c6.7-6.5,10.4-15.2,10.6-24.6v0c0-8-2.5-15.8-7.4-22 c-4.3-5.4-9.9-9.3-16.1-11.5c-0.6-0.2-1-0.7-1-1.3v-5.4c0-0.4,0.4-0.8,0.8-0.6c8.1,2.3,15.4,6.9,21,13.7c5.6,6.7,9,15.1,9.5,23.9 c0.8,12.5-3.8,24.3-12.6,32.9c-5.1,5-11.2,8.5-17.9,10.3c-0.5,0.1-0.9-0.2-0.9-0.7v-3V420z M634.7,435c0-0.4,0.3-0.8,0.7-0.9 c8.7-2,16.8-6.4,23.3-12.8c9.5-9.2,14.8-21.6,15-34.8c0.3-23.5-15.9-43.5-37.9-48.8c-0.6-0.2-1.1-0.7-1.1-1.4v-5.1 c0-0.4,0.4-0.8,0.8-0.7c26,5.3,45.5,28.6,45.2,56.1c-0.2,15.1-6.3,29.2-17.1,39.7c-7.9,7.7-17.6,12.8-28.1,14.9 c-0.4,0.1-0.8-0.2-0.8-0.7V435z M634.7,455.5v-5.3c0-0.5,0.4-1,0.9-1.1c29.9-5.4,52.7-31.7,52.7-63.1c0-31.4-22.7-57.6-52.5-63.1 c-0.7-0.1-1.1-0.7-1.1-1.4v-5.2c0-0.4,0.4-0.7,0.8-0.7c33.9,5.4,59.9,34.9,59.9,70.3c0,35.4-26,64.8-59.9,70.3 C635.1,456.3,634.7,456,634.7,455.5z"/> </g> </g> <g id="vein"> <circle fill="#E29AC8" cx="623.9" cy="479.1" r="3.8" class="vein-node"/> <path fill="none" stroke="#E29AC8" stroke-miterlimit="10" d="M623.9,479.1c0,122.4,89.6,200.8,89.6,321.7c0,38.5-9.5,67-22.4,90.9 "/> </g> <g id="orb-tl"> <circle fill="#5d65ce" cx="110.6" cy="114.4" r="58.8"/> <circle fill="none" stroke="#5d65ce" stroke-width="2" stroke-miterlimit="10" cx="110.6" cy="114.4" r="71.9"/> <circle fill="none" stroke="#61D6BF" stroke-miterlimit="10" cx="110.6" cy="114.4" r="19.5"/> <circle fill="#61D6BF" cx="110.6" cy="114.4" r="3.6"/> </g> <g id="orb-mr"> <circle fill="#5d65ce" cx="1214.1" cy="393.2" r="58.8"/> <circle fill="none" stroke="#5d65ce" stroke-width="2" stroke-miterlimit="10" cx="1214.1" cy="393.2" r="70.8"/> <circle fill="none" stroke="#61D6BF" stroke-miterlimit="10" cx="1214.1" cy="393.2" r="19.5"/> <circle fill="#61D6BF" cx="1214.1" cy="393.2" r="3.6"/> </g> <g id="bwave-front"> <path fill="none" stroke="#61D6BF" stroke-width="0.9894" stroke-miterlimit="10" d="M586,371.9c-0.3-4.2-2.7-8.2-6.8-10.4 c-4-2.2-8.7-2-12.4,0.2c-3.7,2.1-8.3,2.3-12.4,0.2c-4-2.2-6.4-6.1-6.8-10.4l0,0c-0.3-4.2-2.7-8.2-6.8-10.4c-4-2.2-8.7-2-12.4,0.2 c-3.7,2.1-8.3,2.3-12.4,0.2c-4-2.2-6.4-6.1-6.8-10.4l0,0c-0.3-4.2-2.7-8.2-6.8-10.4c-4-2.2-8.7-2-12.4,0.2 c-3.7,2.1-8.3,2.3-12.4,0.2c-4-2.2-6.4-6.1-6.8-10.4l0,0c-0.3-4.2-2.7-8.2-6.8-10.4c-4-2.2-8.7-2-12.4,0.2s-8.3,2.3-12.4,0.2 c-4-2.2-6.4-6.1-6.8-10.4l0,0c-0.3-4.2-2.7-8.2-6.8-10.4c-4-2.2-8.7-2-12.4,0.2s-8.3,2.3-12.4,0.2c-4-2.2-6.4-6.1-6.8-10.4l0,0 c-0.3-4.2-2.7-8.2-6.8-10.4c-4-2.2-8.7-2-12.4,0.2c-3.7,2.1-8.3,2.3-12.4,0.2c-4-2.2-6.4-6.1-6.8-10.4l0,0 c-0.3-4.2-2.7-8.2-6.8-10.4c-4-2.2-8.7-2-12.4,0.2c-3.7,2.1-8.3,2.3-12.4,0.2c-4-2.2-6.4-6.1-6.8-10.4l0,0 c-0.3-4.2-2.7-8.2-6.8-10.4c-4-2.2-8.7-2-12.4,0.2c-3.7,2.1-8.3,2.3-12.4,0.2c-4-2.2-6.4-6.1-6.8-10.4l0,0 c-0.3-4.2-2.7-8.2-6.8-10.4c-4-2.2-8.7-2-12.4,0.2c-3.7,2.1-8.3,2.3-12.4,0.2c-4-2.2-6.4-6.1-6.8-10.4l0,0 c-0.3-4.2-2.7-8.2-6.8-10.4c-4-2.2-8.7-2-12.4,0.2c-3.7,2.1-8.3,2.3-12.4,0.2c-4-2.2-6.4-6.1-6.8-10.4l0,0 c-0.3-4.2-2.7-8.2-6.8-10.4c-4-2.2-8.7-2-12.4,0.2c-3.7,2.1-8.3,2.3-12.4,0.2c-4-2.2-6.4-6.1-6.8-10.4l0,0 c-0.3-4.2-2.7-8.2-6.8-10.4c-4-2.2-8.7-2-12.4,0.2c-3.7,2.1-8.3,2.3-12.4,0.2c-4-2.2-6.4-6.1-6.8-10.4"/> <ellipse fill="#61D6BF" cx="586" cy="375" rx="3.6" ry="3.6" class="node"/> </g> <g id="bwave-front_bl"> <path fill="none" stroke="#61D6BF" stroke-miterlimit="10" d="M91,627.1c4.1-2,6.8-5.8,7.3-10c0.5-4.3,3.2-8.1,7.3-10 c4.2-1.9,8.9-1.4,12.5,0.9l0,0l0.2,0c3.7,2.3,8.3,2.8,12.5,0.9c4.1-2,6.8-5.8,7.3-10c0.5-4.3,3.2-8.1,7.3-10 c4.2-1.9,8.9-1.4,12.5,0.9l0,0c3.7,2.3,8.3,2.8,12.5,0.9c4.1-2,6.8-5.8,7.3-10c0.5-4.3,3.2-8.1,7.3-10c4.2-1.9,8.9-1.4,12.5,0.9 l0,0c3.7,2.3,8.3,2.8,12.5,0.9c4.1-2,6.8-5.8,7.3-10c0.5-4.3,3.2-8.1,7.3-10c4.2-1.9,8.9-1.4,12.5,0.9l0,0 c3.7,2.3,8.3,2.8,12.5,0.9c4.1-2,6.8-5.8,7.3-10c0.5-4.3,3.2-8.1,7.3-10c4.2-1.9,8.9-1.4,12.5,0.9l0,0c3.7,2.3,8.3,2.8,12.5,0.9 c4.1-2,6.8-5.8,7.3-10c0.5-4.3,3.2-8.1,7.3-10c4.2-1.9,8.9-1.4,12.5,0.9l0,0c3.7,2.3,8.3,2.8,12.5,0.9c4.1-2,6.8-5.8,7.3-10 c0.5-4.3,3.2-8.1,7.3-10c4.2-1.9,8.9-1.4,12.5,0.9l0,0c3.7,2.3,8.3,2.8,12.5,0.9c4.1-2,6.8-5.8,7.3-10c0.5-4.3,3.2-8.1,7.3-10 c4.2-1.9,8.9-1.4,12.5,0.9l0,0c3.7,2.3,8.3,2.8,12.5,0.9c4.1-2,6.8-5.7,7.3-10s3.2-8.1,7.3-10c4.2-1.9,8.9-1.4,12.5,0.9l0,0 c3.7,2.3,8.3,2.8,12.5,0.9c4.1-2,6.8-5.7,7.3-10c0.5-4.3,3.2-8.1,7.3-10c4.2-1.9,8.9-1.4,12.5,0.9l0,0c3.7,2.3,8.3,2.8,12.5,0.9 c4.1-2,6.8-5.8,7.3-10c0.5-4.3,3.2-8.1,7.3-10c4.2-1.9,8.9-1.4,12.5,0.9l0,0c3.7,2.3,8.3,2.8,12.5,0.9c4.1-2,6.8-5.8,7.3-10 c0.5-4.3,3.2-8.1,7.3-10c4.2-1.9,8.9-1.4,12.5,0.9l0,0c3.7,2.3,8.3,2.8,12.5,0.9c4.1-2,6.8-5.8,7.3-10c0.5-4.3,3.2-8.1,7.3-10 c1.8-0.8,3.6-1.2,5.4-1.2"/> <ellipse fill="#61D6BF" cx="586.4" cy="387.6" rx="3.6" ry="3.6" class="node"/> </g> <g id="bwave-cerebellum"> <path fill="none" stroke="#61D6BF" stroke-miterlimit="10" d="M1194.9,390c-2.3-3.6-6.3-6-10.9-6s-8.6,2.4-11,6 c-2.3,3.6-6.4,6-11,6s-8.6-2.4-10.9-6l0,0c-2.3-3.6-6.3-6-10.9-6s-8.6,2.4-11,6c-2.3,3.6-6.4,6-11,6s-8.6-2.4-10.9-6l0,0 c-2.3-3.6-6.3-6-10.9-6s-8.6,2.4-11,6c-2.3,3.6-6.4,6-11,6s-8.6-2.4-10.9-6l0,0c-2.3-3.6-6.3-6-10.9-6s-8.6,2.4-11,6 c-2.3,3.6-6.4,6-11,6s-8.6-2.4-10.9-6l0,0c-2.3-3.6-6.3-6-10.9-6c-4.6,0-8.6,2.4-11,6c-2.3,3.6-6.4,6-11,6s-8.6-2.4-10.9-6l0,0 c-2.3-3.6-6.3-6-10.9-6c-4.6,0-8.6,2.4-11,6c-2.3,3.6-6.4,6-11,6s-8.6-2.4-10.9-6l0,0c-2.3-3.6-6.3-6-10.9-6c-4.6,0-8.6,2.4-11,6 c-2.3,3.6-6.4,6-11,6s-8.6-2.4-10.9-6l0,0c-2.3-3.6-6.3-6-10.9-6c-4.6,0-8.6,2.4-11,6c-2.3,3.6-6.4,6-11,6s-8.6-2.4-10.9-6l0,0 c-2.3-3.6-6.3-6-10.9-6c-4.6,0-8.6,2.4-11,6c-2.3,3.6-6.4,6-11,6s-8.6-2.4-10.9-6l0,0c-2.3-3.6-6.3-6-10.9-6c-4.6,0-8.6,2.4-11,6 c-2.3,3.6-6.4,6-11,6s-8.6-2.4-10.9-6l0,0c-2.3-3.6-6.3-6-10.9-6c-4.6,0-8.6,2.4-11,6c-2.3,3.6-6.4,6-11,6s-8.6-2.4-10.9-6l0,0 c-2.3-3.6-6.3-6-10.9-6c-4.6,0-8.6,2.4-11,6s-6.4,6-11,6s-8.6-2.4-10.9-6"/> <circle fill="#61D6BF" cx="669.7" cy="389.1" r="3.6" class="node"/> </g> <g id="bwave-cerebellum_tr"> <path fill="none" stroke="#61D6BF" stroke-miterlimit="10" d="M659,337"/> <path fill="none" stroke="#61D6BF" stroke-miterlimit="10" d="M1025.3,87.1c-3.8,2.6-8.4,2.9-12.4,1.3l0,0c-4-1.7-8.6-1.4-12.4,1.3 c-3.8,2.6-5.8,6.8-5.5,11.1c0.2,4.3-1.7,8.4-5.5,11.1c-3.8,2.6-8.4,2.9-12.4,1.3l0,0c-4-1.7-8.6-1.4-12.4,1.3 c-3.8,2.6-5.8,6.8-5.5,11.1c0.3,4.3-1.7,8.4-5.5,11.1c-3.8,2.6-8.4,2.9-12.4,1.3l0,0c-4-1.7-8.6-1.4-12.4,1.3 c-3.8,2.6-5.8,6.8-5.5,11.1c0.3,4.3-1.7,8.4-5.5,11.1c-3.8,2.6-8.4,2.9-12.4,1.3l0,0c-4-1.7-8.6-1.4-12.4,1.3 c-3.8,2.6-5.8,6.8-5.5,11.1c0.2,4.3-1.7,8.4-5.5,11.1c-3.8,2.6-8.4,2.9-12.4,1.3l0,0c-4-1.7-8.6-1.4-12.4,1.3 c-3.8,2.6-5.8,6.8-5.5,11.1c0.2,4.3-1.7,8.4-5.5,11.1c-3.8,2.6-8.4,2.9-12.4,1.3l0,0c-4-1.7-8.6-1.4-12.4,1.3 c-3.8,2.6-5.8,6.8-5.5,11.1c0.2,4.3-1.7,8.4-5.5,11.1c-3.8,2.6-8.4,2.9-12.4,1.3l0,0c-4-1.7-8.6-1.4-12.4,1.3 c-3.8,2.6-5.8,6.8-5.5,11.1c0.2,4.3-1.7,8.4-5.5,11.1c-3.8,2.6-8.4,2.9-12.4,1.3l0,0c-4-1.7-8.6-1.4-12.4,1.3 c-3.8,2.6-5.8,6.8-5.5,11.1c0.2,4.3-1.7,8.4-5.5,11.1c-3.8,2.6-8.4,2.9-12.4,1.3l0,0c-4-1.7-8.6-1.4-12.4,1.3 c-3.8,2.6-5.8,6.8-5.5,11.1c0.2,4.3-1.7,8.4-5.5,11.1c-3.8,2.6-8.4,2.9-12.4,1.3l0,0c-4-1.7-8.6-1.4-12.4,1.3 c-3.8,2.6-5.8,6.8-5.5,11.1c0.2,4.3-1.7,8.4-5.5,11.1c-2.4,1.6-5.1,2.3-7.7,2.2"/> <circle fill="#61D6BF" cx="658.8" cy="336.4" r="3.6" class="node"/> </g>
</svg> <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin.js'></script>
<script src='http://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js'></script>
<script src='js/a08e0d79c150ff5030f9b6afa.js'></script> <script src="js/index.js"></script>
</body>
</html>

Kid Passions - Script Codes CSS Codes

html,
body { height: 100%; width: 100%;
}
body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; background: #5B53D2;
}
/* * @note via @gryghostvisuals * depending on your desired size for the svg make sure * to set dimensions that suits your needs before using. * * @example * svg { width: 100%; max-width: 200px; height: auto; } */
.kp:not(:root) { overflow: visible;
}
.kp g[id*="orb-"] { visibility: hidden;
}
.kp #pulse circle,
.kp .node,
.kp .vein-node { visibility: hidden;
}
.kp #bwave-front path,
.kp #bwave-front_bl path,
.kp #bwave-cerebellum path,
.kp #bwave-cerebellum_tr path,
.kp #vein path { stroke-dasharray: 800; stroke-dashoffset: 800;
}

Kid Passions - Script Codes JS Codes

var kpassions = (function() { // ORBS var orb_tr = document.getElementById('orb-tr'), orb_bl = document.getElementById('orb-bl'), orb_tl = document.getElementById('orb-tl'), orb_mr = document.getElementById('orb-mr'), orbs = [orb_tr, orb_bl, orb_tl, orb_mr]; // BRAIN WAVES var bwave_front = document.querySelectorAll('#bwave-front path'), bwave_front_bl = document.querySelectorAll('#bwave-front_bl path'), bwave_cerebellum = document.querySelectorAll('#bwave-cerebellum path'), bwave_cerebellum_tr = document.querySelectorAll('#bwave-cerebellum_tr path'), bwave_vein = document.querySelectorAll('#vein path'); // CHILD var brain = document.querySelector("#brain"), eye = document.querySelector('.kp #eye'); // NODES var nodes = document.querySelectorAll('.node'), vein_node = document.querySelectorAll('.vein-node'); // Configs var scale_start = { scale: 0, transformOrigin: 'center center' } var path_reverse = { rotation: 180, transformOrigin: 'center center' }; var from = { drawSVG: '0' }; var to_default = { drawSVG: '100%', opacity: 0.8 }; var to_reverse = { drawSVG: '0 100%', opacity: 0.8 }; var unfill = { drawSVG: '100% 100%', opacity: 0.2 }; // Setters TweenMax.set([nodes, vein_node], { visibility: 'visible' }); TweenMax.set(bwave_front, path_reverse); TweenMax.set([orbs, nodes, vein_node], scale_start); // Utility Methods // ============================================= function hideGraphic(selector) { TweenMax.set(selector, { visibility: 'hidden' }); } // Breathing // ============================================= function breathe() { var tl = new TimelineMax({ repeat:-1, repeatDelay: 1 }); var child_breathing = document.getElementById('child-breathing'), child_breathing_path = child_breathing.getAttribute('d'), child = document.getElementById('child'), child_path = child.getAttribute('d'); tl.to(child, 1.5, { morphSVG: child_breathing_path, delay: 1, ease:Linear.easeOut }) .to(child, 3, { morphSVG: child_path, delay: 1, ease:Back.easeIn }); return tl; } // Facial Movements // ============================================= function blink() { var tl = new TimelineMax({ repeat: -1, repeatDelay: 3, yoyo: true }); var duration = 0.375; TweenMax.set(eye, { transformOrigin: 'bottom center' }) var blink = { scaleY: 0, ease: Power1.easeIn }; var open = { scaleY: 1, ease: Power1.easeOut }; tl.to(eye, duration, blink) .to(eye, duration, open); return tl; } // Silhouette Orb // ============================================= function orbPulse() { var tl = new TimelineMax(); var orbs = document.querySelectorAll('#pulse circle'), stagger_in = 0.2, stagger_out = stagger_in, duration_in = 1, duration_out = duration_in, orb_array = []; for(var i = 0, l= orbs.length; i < l; i++ ) { orb_array.push(orbs[i]); } orb_array.reverse(); hideGraphic(orbs); var from = { transformOrigin: 'center center', scale: 0, ease: Cubic.easeIn }; var to = { scale: 1, opacity: 1, visibility: 'visible', ease: Cubic.easeOut }; var fade = { opacity: 0, ease: Ease.easeOut }; tl.staggerFromTo(orb_array, duration_in, from, to, stagger_in) .staggerTo(orb_array, duration_out, fade, stagger_out); tl.timeScale(2.75); return tl } // Pulsing Brain Nodes // ============================================= function nodePulse(selector, n, direction) { var tl = new TimelineMax(); var duration = 0.5; var pulse_in = { scale: 1, opacity: 1, ease: Power1.easeIn }; var pulse_out = { scale: 0, opacity: 0, ease: Power1.easeOut }; if(direction === 'in') tl.to(selector[n], duration, pulse_in) if(direction === 'out') tl.to(selector, duration, pulse_out) return tl; } function veinSignal() { var tmax = new TimelineMax({ delay: 0.25 }); tmax.add(nodePulse(vein_node, 0, 'in'), 0) .fromTo(bwave_vein, 1, from, to_reverse) .add('unfill') .add(nodePulse(vein_node, 0, 'out'), 'unfill') .to(bwave_vein, 1, unfill, 'unfill+=0.25'); return tmax; } // Orbs Config // ============================================= var bezier_topleft = [ { x: 0, y: 0 }, { x: 5, y: 12 }, { x: -4, y: -24 }, { x: 1, y: 24 }, { x: 5, y: 0 }, { x: 0, y: 0 } ]; var bezier_bottomleft = [ { x: 0, y: 0 }, { x: 14, y: 12 }, { x: -4, y: -24 }, { x: 25, y: 24 }, { x: 10, y: -10 }, { x: 20, y: 24 }, { x: 10, y: 27 }, { x: 0, y: 0 }, { x: -10, y: 36 }, { x: 20, y: 0 }, { x: -15, y: 36 }, { x: 10, y: -6 }, { x: -15, y: 36 }, { x: 0, y: 0 } ]; var bezier_bottomright = [ { x: 0, y: 0 }, { x: -15, y: 12 }, { x: 14, y: -24 }, { x: -14, y: 24 }, { x: 14, y: -24 }, { x: -14, y: 24 }, { x: 14, y: -24 }, { x: 0, y: 0 } ]; var bezier_topright = [ { x: 0, y: 0 }, { x: 5, y: 12 }, { x: -4, y: -24 }, { x: 1, y: 24 }, { x: 5, y: 0 }, { x: 0, y: 0 }, { x: 5, y: 12 }, { x: -4, y: -24 }, { x: 1, y: 24 }, { x: 5, y: 0 }, { x: 0, y: 0 }, { x: 5, y: 12 }, { x: -4, y: -24 }, { x: 1, y: 24 }, { x: 5, y: 0 }, { x: 0, y: 0 }, { x: 5, y: 12 }, { x: -4, y: -24 }, { x: 1, y: 24 }, { x: 5, y: 0 }, { x: 0, y: 0 } ]; // Orbs // ============================================= var orbConfig = [ { target: orb_tl, duration: 30, bezier: bezier_topleft }, { target: orb_bl, duration: 200, bezier: bezier_bottomleft }, { target: orb_mr, duration: 76, bezier: bezier_bottomright }, { target: orb_tr, duration: 84, bezier: bezier_topright } ]; var orbs = orbConfig.map(Orb), size = orbs.length; function Orb(config, index) { var tl = new TimelineMax({ repeat: -1 }); var node = config.target; var orb = { tl: tl, node: node, fire: fire }; tl.to(node, config.duration, { rotation: 0.01, // See this GreenSock forum thread on why http://bit.ly/1Km8k1A via @gryghostvisuals bezier: { type: 'thru', values: config.bezier }, onComplete: function() { fire(); }, ease: Linear.easeInOut }); TweenMax.delayedCall(index * 0.25, start); return orb; function start() { TweenMax.to(node, 1, { scale: 1, visibility: 'visible', ease: Elastic.easeOut }); } function fire(callback) { /* SVGRect getBBox() Returns the tight bounding box in current user space (i.e., after application of the ‘transform’ attribute, if any) on the geometry of all contained graphics elements, exclusive of stroking, clipping, masking and filter effects). Note that getBBox must return the actual bounding box at the time the method was called, even in case the element has not yet been rendered. */ var bbox1 = node.getBBox(), // the orb bbox2 = brain.getBBox(); // the brain var item = checkTarget(node), brain_node = checkBrainNode(node); tl.pause(); function checkTarget(node) { if(node === orb_tl) return bwave_front; if(node === orb_bl) return bwave_front_bl; if(node === orb_tr) return bwave_cerebellum_tr; if(node === orb_mr) return bwave_cerebellum; } function checkBrainNode(node) { if(node === orb_tl) return 0; if(node === orb_bl) return 1; if(node === orb_tr) return 3; if(node === orb_mr) return 2; } TweenMax.set(item, { drawSVG: 0, autoAlpha: 1, attr: { x1: bbox1.x + bbox1.width / 2, y1: bbox1.y + bbox1.height / 2, x2: bbox2.x + bbox2.width / 2, y2: bbox2.y + bbox2.height / 2, } }); // Data Flow Sequence // ================================= TweenMax.to(item, 1, { drawSVG: true, onStart: function() { TweenMax.delayedCall(0.5, function() { nodePulse(nodes, brain_node, 'in'); orbPulse(); veinSignal(); }); }, onComplete: function() { TweenMax.delayedCall(1, function() { nodePulse(nodes, brain_node, 'out'); TweenMax.to(item, 1, unfill); tl.play(); }); } }); } } return { init: function() { breathe(); blink(); } }
})();
kpassions.init();
Kid Passions - Script Codes
Kid Passions - Script Codes
Home Page Home
Developer GRAY GHOST
Username grayghostvisuals
Uploaded August 18, 2022
Rating 3.5
Size 11,380 Kb
Views 42,504
Do you need developer help for Kid Passions?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

GRAY GHOST (grayghostvisuals) Script Codes
Name
RWD Accordion
Secure Input
Dark Sky Weather App
Grayscale Filter
How to ChartJS
Follow My Mouse
Full Screen Background Video
Fixed Curtains
ScrollTop Demo
Custom ChartJS Gradient
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!