{
  "id": "gustavofusco_rare-pug-90",
  "name": "rare-pug-90",
  "category": "loaders",
  "author": "gustavofusco",
  "description": "rare-pug-90 组件 (loader, pen, animation)",
  "tags": [
    "loader",
    "pen",
    "animation"
  ],
  "original": {
    "html": "<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"200px\" width=\"200px\" viewBox=\"0 0 200 200\" class=\"pencil\">\n\t<defs>\n\t\t<clipPath id=\"pencil-eraser\">\n\t\t\t<rect height=\"30\" width=\"30\" ry=\"5\" rx=\"5\"></rect>\n\t\t</clipPath>\n\t</defs>\n\t<circle transform=\"rotate(-113,100,100)\" stroke-linecap=\"round\" stroke-dashoffset=\"439.82\" stroke-dasharray=\"439.82 439.82\" stroke-width=\"2\" stroke=\"currentColor\" fill=\"none\" r=\"70\" class=\"pencil__stroke\"></circle>\n\t<g transform=\"translate(100,100)\" class=\"pencil__rotate\">\n\t\t<g fill=\"none\">\n\t\t\t<circle transform=\"rotate(-90)\" stroke-dashoffset=\"402\" stroke-dasharray=\"402.12 402.12\" stroke-width=\"30\" stroke=\"hsl(223,90%,50%)\" r=\"64\" class=\"pencil__body1\"></circle>\n\t\t\t<circle transform=\"rotate(-90)\" stroke-dashoffset=\"465\" stroke-dasharray=\"464.96 464.96\" stroke-width=\"10\" stroke=\"hsl(223,90%,60%)\" r=\"74\" class=\"pencil__body2\"></circle>\n\t\t\t<circle transform=\"rotate(-90)\" stroke-dashoffset=\"339\" stroke-dasharray=\"339.29 339.29\" stroke-width=\"10\" stroke=\"hsl(223,90%,40%)\" r=\"54\" class=\"pencil__body3\"></circle>\n\t\t</g>\n\t\t<g transform=\"rotate(-90) translate(49,0)\" class=\"pencil__eraser\">\n\t\t\t<g class=\"pencil__eraser-skew\">\n\t\t\t\t<rect height=\"30\" width=\"30\" ry=\"5\" rx=\"5\" fill=\"hsl(223,90%,70%)\"></rect>\n\t\t\t\t<rect clip-path=\"url(#pencil-eraser)\" height=\"30\" width=\"5\" fill=\"hsl(223,90%,60%)\"></rect>\n\t\t\t\t<rect height=\"20\" width=\"30\" fill=\"hsl(223,10%,90%)\"></rect>\n\t\t\t\t<rect height=\"20\" width=\"15\" fill=\"hsl(223,10%,70%)\"></rect>\n\t\t\t\t<rect height=\"20\" width=\"5\" fill=\"hsl(223,10%,80%)\"></rect>\n\t\t\t\t<rect height=\"2\" width=\"30\" y=\"6\" fill=\"hsla(223,10%,10%,0.2)\"></rect>\n\t\t\t\t<rect height=\"2\" width=\"30\" y=\"13\" fill=\"hsla(223,10%,10%,0.2)\"></rect>\n\t\t\t</g>\n\t\t</g>\n\t\t<g transform=\"rotate(-90) translate(49,-30)\" class=\"pencil__point\">\n\t\t\t<polygon points=\"15 0,30 30,0 30\" fill=\"hsl(33,90%,70%)\"></polygon>\n\t\t\t<polygon points=\"15 0,6 30,0 30\" fill=\"hsl(33,90%,50%)\"></polygon>\n\t\t\t<polygon points=\"15 0,20 10,10 10\" fill=\"hsl(223,10%,10%)\"></polygon>\n\t\t</g>\n\t</g>\n</svg>",
    "css": "/* From Uiverse.io by gustavofusco - Tags: loader, pen */\n.pencil {\n  display: block;\n  width: 10em;\n  height: 10em;\n}\n\n.pencil__body1,\n.pencil__body2,\n.pencil__body3,\n.pencil__eraser,\n.pencil__eraser-skew,\n.pencil__point,\n.pencil__rotate,\n.pencil__stroke {\n  animation-duration: 3s;\n  animation-timing-function: linear;\n  animation-iteration-count: infinite;\n}\n\n.pencil__body1,\n.pencil__body2,\n.pencil__body3 {\n  transform: rotate(-90deg);\n}\n\n.pencil__body1 {\n  animation-name: pencilBody1;\n}\n\n.pencil__body2 {\n  animation-name: pencilBody2;\n}\n\n.pencil__body3 {\n  animation-name: pencilBody3;\n}\n\n.pencil__eraser {\n  animation-name: pencilEraser;\n  transform: rotate(-90deg) translate(49px,0);\n}\n\n.pencil__eraser-skew {\n  animation-name: pencilEraserSkew;\n  animation-timing-function: ease-in-out;\n}\n\n.pencil__point {\n  animation-name: pencilPoint;\n  transform: rotate(-90deg) translate(49px,-30px);\n}\n\n.pencil__rotate {\n  animation-name: pencilRotate;\n}\n\n.pencil__stroke {\n  animation-name: pencilStroke;\n  transform: translate(100px,100px) rotate(-113deg);\n}\n\n/* Animations */\n@keyframes pencilBody1 {\n  from,\n\tto {\n    stroke-dashoffset: 351.86;\n    transform: rotate(-90deg);\n  }\n\n  50% {\n    stroke-dashoffset: 150.8;\n /* 3/8 of diameter */\n    transform: rotate(-225deg);\n  }\n}\n\n@keyframes pencilBody2 {\n  from,\n\tto {\n    stroke-dashoffset: 406.84;\n    transform: rotate(-90deg);\n  }\n\n  50% {\n    stroke-dashoffset: 174.36;\n    transform: rotate(-225deg);\n  }\n}\n\n@keyframes pencilBody3 {\n  from,\n\tto {\n    stroke-dashoffset: 296.88;\n    transform: rotate(-90deg);\n  }\n\n  50% {\n    stroke-dashoffset: 127.23;\n    transform: rotate(-225deg);\n  }\n}\n\n@keyframes pencilEraser {\n  from,\n\tto {\n    transform: rotate(-45deg) translate(49px,0);\n  }\n\n  50% {\n    transform: rotate(0deg) translate(49px,0);\n  }\n}\n\n@keyframes pencilEraserSkew {\n  from,\n\t32.5%,\n\t67.5%,\n\tto {\n    transform: skewX(0);\n  }\n\n  35%,\n\t65% {\n    transform: skewX(-4deg);\n  }\n\n  37.5%, \n\t62.5% {\n    transform: skewX(8deg);\n  }\n\n  40%,\n\t45%,\n\t50%,\n\t55%,\n\t60% {\n    transform: skewX(-15deg);\n  }\n\n  42.5%,\n\t47.5%,\n\t52.5%,\n\t57.5% {\n    transform: skewX(15deg);\n  }\n}\n\n@keyframes pencilPoint {\n  from,\n\tto {\n    transform: rotate(-90deg) translate(49px,-30px);\n  }\n\n  50% {\n    transform: rotate(-225deg) translate(49px,-30px);\n  }\n}\n\n@keyframes pencilRotate {\n  from {\n    transform: translate(100px,100px) rotate(0);\n  }\n\n  to {\n    transform: translate(100px,100px) rotate(720deg);\n  }\n}\n\n@keyframes pencilStroke {\n  from {\n    stroke-dashoffset: 439.82;\n    transform: translate(100px,100px) rotate(-113deg);\n  }\n\n  50% {\n    stroke-dashoffset: 164.93;\n    transform: translate(100px,100px) rotate(-113deg);\n  }\n\n  75%,\n\tto {\n    stroke-dashoffset: 439.82;\n    transform: translate(100px,100px) rotate(112deg);\n  }\n}",
    "file_path": "/mnt/persist/workspace/loaders/gustavofusco_rare-pug-90.html"
  },
  "uniapp": {
    "template": "<view xmlns=\"http://www.w3.org/2000/svg\" height=\"200px\" width=\"200px\" viewBox=\"0 0 200 200\" class=\"pencil\"></view>\n\t<defs>\n\t\t<clipPath id=\"pencil-eraser\">\n\t\t\t<rect height=\"30\" width=\"30\" ry=\"5\" rx=\"5\"></rect>\n\t\t</clipPath>\n\t</defs>\n\t<circle transform=\"rotate(-113,100,100)\" stroke-linecap=\"round\" stroke-dashoffset=\"439.82\" stroke-dasharray=\"439.82 439.82\" stroke-width=\"2\" stroke=\"currentColor\" fill=\"none\" r=\"70\" class=\"pencil__stroke\"></circle>\n\t<g transform=\"translate(100,100)\" class=\"pencil__rotate\">\n\t\t<g fill=\"none\">\n\t\t\t<circle transform=\"rotate(-90)\" stroke-dashoffset=\"402\" stroke-dasharray=\"402.12 402.12\" stroke-width=\"30\" stroke=\"hsl(223,90%,50%)\" r=\"64\" class=\"pencil__body1\"></circle>\n\t\t\t<circle transform=\"rotate(-90)\" stroke-dashoffset=\"465\" stroke-dasharray=\"464.96 464.96\" stroke-width=\"10\" stroke=\"hsl(223,90%,60%)\" r=\"74\" class=\"pencil__body2\"></circle>\n\t\t\t<circle transform=\"rotate(-90)\" stroke-dashoffset=\"339\" stroke-dasharray=\"339.29 339.29\" stroke-width=\"10\" stroke=\"hsl(223,90%,40%)\" r=\"54\" class=\"pencil__body3\"></circle>\n\t\t</g>\n\t\t<g transform=\"rotate(-90) translate(49,0)\" class=\"pencil__eraser\">\n\t\t\t<g class=\"pencil__eraser-skew\">\n\t\t\t\t<rect height=\"30\" width=\"30\" ry=\"5\" rx=\"5\" fill=\"hsl(223,90%,70%)\"></rect>\n\t\t\t\t<rect clip-path=\"url(#pencil-eraser)\" height=\"30\" width=\"5\" fill=\"hsl(223,90%,60%)\"></rect>\n\t\t\t\t<rect height=\"20\" width=\"30\" fill=\"hsl(223,10%,90%)\"></rect>\n\t\t\t\t<rect height=\"20\" width=\"15\" fill=\"hsl(223,10%,70%)\"></rect>\n\t\t\t\t<rect height=\"20\" width=\"5\" fill=\"hsl(223,10%,80%)\"></rect>\n\t\t\t\t<rect height=\"2\" width=\"30\" y=\"6\" fill=\"hsla(223,10%,10%,0.2)\"></rect>\n\t\t\t\t<rect height=\"2\" width=\"30\" y=\"13\" fill=\"hsla(223,10%,10%,0.2)\"></rect>\n\t\t\t</g>\n\t\t</g>\n\t\t<g transform=\"rotate(-90) translate(49,-30)\" class=\"pencil__point\">\n\t\t\t<polygon points=\"15 0,30 30,0 30\" fill=\"hsl(33,90%,70%)\"></polygon>\n\t\t\t<polygon points=\"15 0,6 30,0 30\" fill=\"hsl(33,90%,50%)\"></polygon>\n\t\t\t<polygon points=\"15 0,20 10,10 10\" fill=\"hsl(223,10%,10%)\"></polygon>\n\t\t</g>\n\t</g>\n</svg>",
    "script": "export default {\n  name: 'GalaxyRarePug90',\n  props: {\n    // 根据组件类型动态生成props\n  },\n  data() {\n    return {\n      // 组件状态\n    };\n  },\n  methods: {\n    // 组件方法\n  }\n}",
    "style": "\n/* From Uiverse.io by gustavofusco - Tags: loader, pen */\n.pencil {\n  display: block;\n  width: 10em;\n  height: 10em;\n}\n\n.pencil__body1,\n.pencil__body2,\n.pencil__body3,\n.pencil__eraser,\n.pencil__eraser-skew,\n.pencil__point,\n.pencil__rotate,\n.pencil__stroke {\n  animation-duration: 3s;\n  animation-timing-function: linear;\n  animation-iteration-count: infinite;\n}\n\n.pencil__body1,\n.pencil__body2,\n.pencil__body3 {\n  transform: rotate(-90deg);\n}\n\n.pencil__body1 {\n  animation-name: pencilBody1;\n}\n\n.pencil__body2 {\n  animation-name: pencilBody2;\n}\n\n.pencil__body3 {\n  animation-name: pencilBody3;\n}\n\n.pencil__eraser {\n  animation-name: pencilEraser;\n  transform: rotate(-90deg) translate(98rpx,0);\n}\n\n.pencil__eraser-skew {\n  animation-name: pencilEraserSkew;\n  animation-timing-function: ease-in-out;\n}\n\n.pencil__point {\n  animation-name: pencilPoint;\n  transform: rotate(-90deg) translate(98rpx,-60rpx);\n}\n\n.pencil__rotate {\n  animation-name: pencilRotate;\n}\n\n.pencil__stroke {\n  animation-name: pencilStroke;\n  transform: translate(200rpx,200rpx) rotate(-113deg);\n}\n\n/* Animations */\n@keyframes pencilBody1 {\n  from,\n\tto {\n    stroke-dashoffset: 351.86;\n    transform: rotate(-90deg);\n  }\n\n  50% {\n    stroke-dashoffset: 150.8;\n /* 3/8 of diameter */\n    transform: rotate(-225deg);\n  }\n}\n\n@keyframes pencilBody2 {\n  from,\n\tto {\n    stroke-dashoffset: 406.84;\n    transform: rotate(-90deg);\n  }\n\n  50% {\n    stroke-dashoffset: 174.36;\n    transform: rotate(-225deg);\n  }\n}\n\n@keyframes pencilBody3 {\n  from,\n\tto {\n    stroke-dashoffset: 296.88;\n    transform: rotate(-90deg);\n  }\n\n  50% {\n    stroke-dashoffset: 127.23;\n    transform: rotate(-225deg);\n  }\n}\n\n@keyframes pencilEraser {\n  from,\n\tto {\n    transform: rotate(-45deg) translate(98rpx,0);\n  }\n\n  50% {\n    transform: rotate(0deg) translate(98rpx,0);\n  }\n}\n\n@keyframes pencilEraserSkew {\n  from,\n\t32.5%,\n\t67.5%,\n\tto {\n    transform: skewX(0);\n  }\n\n  35%,\n\t65% {\n    transform: skewX(-4deg);\n  }\n\n  37.5%, \n\t62.5% {\n    transform: skewX(8deg);\n  }\n\n  40%,\n\t45%,\n\t50%,\n\t55%,\n\t60% {\n    transform: skewX(-15deg);\n  }\n\n  42.5%,\n\t47.5%,\n\t52.5%,\n\t57.5% {\n    transform: skewX(15deg);\n  }\n}\n\n@keyframes pencilPoint {\n  from,\n\tto {\n    transform: rotate(-90deg) translate(98rpx,-60rpx);\n  }\n\n  50% {\n    transform: rotate(-225deg) translate(98rpx,-60rpx);\n  }\n}\n\n@keyframes pencilRotate {\n  from {\n    transform: translate(200rpx,200rpx) rotate(0);\n  }\n\n  to {\n    transform: translate(200rpx,200rpx) rotate(720deg);\n  }\n}\n\n@keyframes pencilStroke {\n  from {\n    stroke-dashoffset: 439.82;\n    transform: translate(200rpx,200rpx) rotate(-113deg);\n  }\n\n  50% {\n    stroke-dashoffset: 164.93;\n    transform: translate(200rpx,200rpx) rotate(-113deg);\n  }\n\n  75%,\n\tto {\n    stroke-dashoffset: 439.82;\n    transform: translate(200rpx,200rpx) rotate(112deg);\n  }\n}\n",
    "component_name": "GalaxyRarePug90"
  },
  "platforms": {
    "h5": true,
    "mp-weixin": true,
    "mp-alipay": true,
    "mp-baidu": true,
    "mp-toutiao": true,
    "app-plus": true
  },
  "props": [
    {
      "name": "disabled",
      "type": "Boolean",
      "default": false,
      "required": false,
      "description": "是否禁用"
    }
  ],
  "events": [],
  "slots": [
    {
      "name": "",
      "description": "",
      "props": []
    }
  ],
  "compatibility": {
    "h5": {
      "supported": true,
      "issues": [],
      "alternatives": []
    },
    "mp-weixin": {
      "supported": true,
      "issues": [],
      "alternatives": []
    },
    "mp-alipay": {
      "supported": true,
      "issues": [],
      "alternatives": []
    },
    "app-plus": {
      "supported": true,
      "issues": [],
      "alternatives": []
    }
  },
  "performance": {
    "complexity": "high",
    "bundle_size": 4782,
    "render_cost": "high",
    "memory_usage": "high"
  },
  "dependencies": [],
  "examples": [
    {
      "title": "",
      "description": "",
      "code": ""
    }
  ],
  "created_at": "2025-07-31T07:55:42.188Z",
  "updated_at": "2025-07-31T07:55:42.188Z"
}