{"id":19756275,"url":"https://github.com/nextapps-de/snowflake","last_synced_at":"2025-07-05T05:32:33.129Z","repository":{"id":66272761,"uuid":"160498233","full_name":"nextapps-de/snowflake","owner":"nextapps-de","description":"Free Javascript snowflake animation based on HTML5 canvas","archived":false,"fork":false,"pushed_at":"2024-12-01T14:07:30.000Z","size":600,"stargazers_count":29,"open_issues_count":0,"forks_count":6,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-06T01:41:14.626Z","etag":null,"topics":["effects","html5","html5-canvas","javascript","javascript-snowflakes","open-source","snowflake"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nextapps-de.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-12-05T10:03:35.000Z","updated_at":"2025-03-24T07:16:23.000Z","dependencies_parsed_at":"2023-06-14T09:30:17.157Z","dependency_job_id":null,"html_url":"https://github.com/nextapps-de/snowflake","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nextapps-de%2Fsnowflake","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nextapps-de%2Fsnowflake/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nextapps-de%2Fsnowflake/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nextapps-de%2Fsnowflake/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nextapps-de","download_url":"https://codeload.github.com/nextapps-de/snowflake/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251691609,"owners_count":21628356,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["effects","html5","html5-canvas","javascript","javascript-snowflakes","open-source","snowflake"],"created_at":"2024-11-12T03:15:24.284Z","updated_at":"2025-04-30T11:33:23.454Z","avatar_url":"https://github.com/nextapps-de.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Snowflake Animation (Web Canvas-based, 2Kb)\n### Usage\n\nDownload the library or insert this snippet into `\u003cHEAD\u003e` or `\u003cBODY\u003e` tag of your html page:\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/nextapps-de/snowflake@master/snowflake.min.js\"\u003e\u003c/script\u003e\n```\n\n### Demo\n\n[https://nextapps-de.github.io/snowflake/demo/index.html](https://nextapps-de.github.io/snowflake/demo/index.html)\n\n### Custom Configuration\n\nApply a config object to `window.SnowflakeConfig` __before__ loading the library:\n\n```js\nwindow.SnowflakeConfig = {\n    size: 1.0,\n    speed: 0.65,\n    opacity: 0.2,\n    density: 0.5,\n    quality: 2.0,\n    index: 9,\n    mount: document.body,\n    image: \"path-to-file.png\",\n    style: {\n        position: \"fixed\",\n        width: \"100%\",\n        height: \"100%\",\n        top: 0,\n        right: 0,\n        bottom: 0,\n        left: 0\n    }\n};\n```\n\n### Disable Autostart\n\n```js\nwindow.SnowflakeConfig = { \n    start: false\n};\n```\n\nOr\n\n```js\nwindow.SnowflakeConfig = { \n    stop: true\n};\n```\n\n## Controls\n\n### Show/Start Snowflake\n\n```js\nSnowflake.start();\n```\n\n\u003e The library will automatically start by default when loading the library. Just when autostart was disabled you'll need to initially call `Snowflake.start()`.\n\n### Hide/Stop Snowflake\n\n```js\nSnowflake.stop();\n```\n\n### Set Flake Speed\n\n```js\n// twice\nSnowflake.speed(2);\n// half\nSnowflake.speed(0.5);\n// standard\nSnowflake.speed(1);\n```\n\n### Set Flake Density\n\n```js\n// twice\nSnowflake.density(2);\n// half\nSnowflake.density(0.5);\n// standard\nSnowflake.density(1);\n```\n\n\u003e The total amount of flakes auto-scales accordingly to the available viewport.\n\n### Set Flake Size\n\n```js\n// twice\nSnowflake.size(2);\n// half\nSnowflake.size(0.5);\n// standard\nSnowflake.size(1);\n```\n\n### Set Flake Quality\n\n```js\n// Best\nSnowflake.quality(2);\n// Low\nSnowflake.quality(0.5);\n// Standard\nSnowflake.quality(1);\n```\n\n\u003e Higher quality consumes more performance, lower quality will instead gain performance.\n\n### Custom Mount Canvas\n\n```js\nconst element = document.querySelector(\"#custom-lement\");\nSnowflake.mount(element);\n```\n\n\u003e The mount element should have one of these positions: `relative`, `absolute` or `fixed`.\n\nYou can change the css position of the canvas element:\n\n```js\nSnowflake.style({ position: \"absolute\" });\n```\n\n### Adjust Opacity:\n\n```js\nSnowflake.opacity(0.5);\n```\n\n### Adjust Z-Index:\n\n```js\nSnowflake.index(1);\n```\n\n\u003e If you have issues to place the snowflake as background behind other elements try using a negative z-index value e.g. `Snowflake.index(-1);`.\n\n### Adjust Position\n\n```js\nSnowflake.style({ \n    position: \"absolute\",\n    width: \"100%\",\n    height: \"100%\",\n    top: 0,\n    right: 0,\n    bottom: 0,\n    left: 0\n});\n```\n\n### Custom Flake Image-Source\n\n```js\n // SVG is not supported\nSnowflake.image(\"path-to-file.png\");\n```\n\nOr\n\n```js\nSnowflake.image(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABAAgMAAADXB5lNAAAADFBMVEXk7PTk7PTk7PQAAAAAkx47AAAABHRSTlOQSfwAyZGfwAAAAdRJREFUeF6Fk7FOhEAQhvcNrHwCO+xteQfj5hKfQHmAa6m0sCGxv5soiSxcQWd5lJprzcWExt7KUIzJBRh3djYIWEgCu/kIP//M/qNIrr7yGw++EI4m4LBdZxPQ3N6XE9AWRTUBFBQ0BbvNCLShFSl5FfCOQCT3uwPXv+DKgWjpAa5yB+o1ULOEknCbOoCPIE7xLnGgK4Cap/uEsIgdWATATkNCs7eA94l1aojQUgGZdWr1agGkL3Lr1OpFx9rXEsXUA3VmKK4GNobpADBjUCcD6HIGUShARBBEwoMaEDAdAcwQrIQAEUEQCVKv1LKn5Yq9V3SiPsOeXa+3/KzajTokLI+P3IsobjLVpvQZ2p7YXnQb2lVqb3R9oxeB2evzVAcLVcyuv2Bf6MsbrQOj9fkDf9JaJWuJRd1WHUqS3wJREDel2lVi7Jkby8Z21LOlMz7GpqJT9U1kLRmEyC5EH778FKGGcYMSBMxGIAoRunwAVsI1OR4ApgxERIkEAxFRIuGOMvdAa+MPW2ufD/bu4yCA3/4GhnQA1EmkfD4K4PIldLNYwhDcw3JVEnJPFPdiFu2refhfGPQOvI0GKOF1PGIpzYbQTAGHfwJ4PP4ZdYRyAtiHgB9fc1w25BtOVgAAAABJRU5ErkJggg==\");\n```\n\nDisable flake image and just draw a basic circle:\n\n```js\nSnowflake.image(false);\n```\n\n### Custom CSS\n\n```css\n#snowflake{\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    opacity: 1;\n    z-index: 99;\n}\n```\n\n### License:\n\nApache License 2.0","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnextapps-de%2Fsnowflake","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnextapps-de%2Fsnowflake","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnextapps-de%2Fsnowflake/lists"}